f2aa3b03b6
Add three new cards to Story Detail sidebar to display Sprint 4 Story 3 fields: - Story Points card with Target icon - Tags card with Tag badges - Acceptance Criteria card with CheckCircle2 icons 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
517 lines
18 KiB
TypeScript
517 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { use, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
ArrowLeft,
|
|
Edit,
|
|
Trash2,
|
|
Loader2,
|
|
Clock,
|
|
Calendar,
|
|
User,
|
|
Layers,
|
|
CheckCircle2,
|
|
Tag,
|
|
Target,
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from "@/components/ui/alert-dialog";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import {
|
|
useStory,
|
|
useUpdateStory,
|
|
useDeleteStory,
|
|
useChangeStoryStatus,
|
|
} from "@/lib/hooks/use-stories";
|
|
import { useEpic } from "@/lib/hooks/use-epics";
|
|
import { useProject } from "@/lib/hooks/use-projects";
|
|
import { StoryForm } from "@/components/projects/story-form";
|
|
import { TaskList } from "@/components/tasks/task-list";
|
|
import { formatDistanceToNow } from "date-fns";
|
|
import { toast } from "sonner";
|
|
import type { WorkItemStatus, WorkItemPriority } from "@/types/project";
|
|
|
|
interface StoryDetailPageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export default function StoryDetailPage({ params }: StoryDetailPageProps) {
|
|
const { id: storyId } = use(params);
|
|
const router = useRouter();
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
|
|
|
const { data: story, isLoading: storyLoading, error: storyError } = useStory(storyId);
|
|
const { data: epic, isLoading: epicLoading } = useEpic(story?.epicId || "");
|
|
const { data: project, isLoading: projectLoading } = useProject(story?.projectId || "");
|
|
const updateStory = useUpdateStory();
|
|
const deleteStory = useDeleteStory();
|
|
const changeStatus = useChangeStoryStatus();
|
|
|
|
const handleDeleteStory = async () => {
|
|
try {
|
|
await deleteStory.mutateAsync(storyId);
|
|
toast.success("Story deleted successfully");
|
|
// Navigate back to epic detail page
|
|
router.push(`/epics/${story?.epicId}`);
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Failed to delete story";
|
|
toast.error(message);
|
|
}
|
|
};
|
|
|
|
const handleStatusChange = async (status: WorkItemStatus) => {
|
|
if (!story) return;
|
|
try {
|
|
await changeStatus.mutateAsync({ id: storyId, status });
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Failed to update status";
|
|
toast.error(message);
|
|
}
|
|
};
|
|
|
|
const handlePriorityChange = async (priority: WorkItemPriority) => {
|
|
if (!story) return;
|
|
try {
|
|
await updateStory.mutateAsync({
|
|
id: storyId,
|
|
data: { priority },
|
|
});
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Failed to update priority";
|
|
toast.error(message);
|
|
}
|
|
};
|
|
|
|
const getStatusColor = (status: WorkItemStatus) => {
|
|
switch (status) {
|
|
case "Backlog":
|
|
return "secondary";
|
|
case "Todo":
|
|
return "outline";
|
|
case "InProgress":
|
|
return "default";
|
|
case "Done":
|
|
return "default";
|
|
default:
|
|
return "secondary";
|
|
}
|
|
};
|
|
|
|
const getPriorityColor = (priority: WorkItemPriority) => {
|
|
switch (priority) {
|
|
case "Low":
|
|
return "bg-blue-100 text-blue-700 hover:bg-blue-100";
|
|
case "Medium":
|
|
return "bg-yellow-100 text-yellow-700 hover:bg-yellow-100";
|
|
case "High":
|
|
return "bg-orange-100 text-orange-700 hover:bg-orange-100";
|
|
case "Critical":
|
|
return "bg-red-100 text-red-700 hover:bg-red-100";
|
|
default:
|
|
return "secondary";
|
|
}
|
|
};
|
|
|
|
// Loading state
|
|
if (storyLoading || epicLoading || projectLoading) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<Skeleton className="h-10 w-96" />
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 space-y-4">
|
|
<Skeleton className="h-12 w-1/2" />
|
|
<Skeleton className="h-20 w-full" />
|
|
</div>
|
|
<Skeleton className="h-10 w-32" />
|
|
</div>
|
|
<Skeleton className="h-64 w-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Error state
|
|
if (storyError || !story) {
|
|
return (
|
|
<div className="flex min-h-[400px] items-center justify-center">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-destructive">Error Loading Story</CardTitle>
|
|
<CardDescription>
|
|
{storyError instanceof Error ? storyError.message : "Story not found"}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex gap-2">
|
|
<Button onClick={() => router.back()}>Go Back</Button>
|
|
<Button onClick={() => window.location.reload()} variant="outline">
|
|
Retry
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Breadcrumb Navigation */}
|
|
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
|
<Link href="/projects" className="hover:text-foreground">
|
|
Projects
|
|
</Link>
|
|
<span>/</span>
|
|
{project && (
|
|
<>
|
|
<Link href={`/projects/${project.id}`} className="hover:text-foreground">
|
|
{project.name}
|
|
</Link>
|
|
<span>/</span>
|
|
</>
|
|
)}
|
|
<Link href={`/projects/${story.projectId}/epics`} className="hover:text-foreground">
|
|
Epics
|
|
</Link>
|
|
<span>/</span>
|
|
{epic && (
|
|
<>
|
|
<Link href={`/epics/${epic.id}`} className="hover:text-foreground">
|
|
{epic.name}
|
|
</Link>
|
|
<span>/</span>
|
|
</>
|
|
)}
|
|
<span className="text-foreground">Stories</span>
|
|
<span>/</span>
|
|
<span className="text-foreground max-w-[200px] truncate" title={story.title}>
|
|
{story.title}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => router.push(`/epics/${story.epicId}`)}
|
|
title="Back to Epic"
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div className="flex-1">
|
|
<h1 className="text-3xl font-bold tracking-tight">{story.title}</h1>
|
|
<div className="mt-2 flex flex-wrap items-center gap-2">
|
|
<Badge variant={getStatusColor(story.status)}>{story.status}</Badge>
|
|
<Badge className={getPriorityColor(story.priority)}>{story.priority}</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => setIsEditDialogOpen(true)}>
|
|
<Edit className="mr-2 h-4 w-4" />
|
|
Edit Story
|
|
</Button>
|
|
<Button variant="destructive" onClick={() => setIsDeleteDialogOpen(true)}>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Delete
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two-column layout */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Main Content Area (2/3 width) */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{/* Story Details Card */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Story Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{story.description ? (
|
|
<div>
|
|
<h3 className="text-muted-foreground mb-2 text-sm font-medium">Description</h3>
|
|
<p className="text-sm whitespace-pre-wrap">{story.description}</p>
|
|
</div>
|
|
) : (
|
|
<p className="text-muted-foreground text-sm italic">No description</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Tasks Section - Sprint 4 Story 2 */}
|
|
<TaskList storyId={storyId} />
|
|
</div>
|
|
|
|
{/* Metadata Sidebar (1/3 width) */}
|
|
<div className="space-y-4">
|
|
{/* Status */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Status</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Select
|
|
value={story.status}
|
|
onValueChange={(value) => handleStatusChange(value as WorkItemStatus)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Backlog">Backlog</SelectItem>
|
|
<SelectItem value="Todo">Todo</SelectItem>
|
|
<SelectItem value="InProgress">In Progress</SelectItem>
|
|
<SelectItem value="Done">Done</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Priority */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Priority</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Select
|
|
value={story.priority}
|
|
onValueChange={(value) => handlePriorityChange(value as WorkItemPriority)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Low">Low</SelectItem>
|
|
<SelectItem value="Medium">Medium</SelectItem>
|
|
<SelectItem value="High">High</SelectItem>
|
|
<SelectItem value="Critical">Critical</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Story Points - Sprint 4 Story 3 */}
|
|
{story.storyPoints && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Story Points</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-2">
|
|
<Target className="text-muted-foreground h-4 w-4" />
|
|
<span className="text-2xl font-semibold">{story.storyPoints}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Assignee */}
|
|
{story.assigneeId && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Assignee</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-2">
|
|
<User className="text-muted-foreground h-4 w-4" />
|
|
<span className="text-sm">{story.assigneeId}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Tags - Sprint 4 Story 3 */}
|
|
{story.tags && story.tags.length > 0 && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Tags</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{story.tags.map((tag) => (
|
|
<Badge key={tag} variant="secondary" className="text-xs">
|
|
<Tag className="mr-1 h-3 w-3" />
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Time Tracking */}
|
|
{(story.estimatedHours !== undefined || story.actualHours !== undefined) && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Time Tracking</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{story.estimatedHours !== undefined && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Clock className="text-muted-foreground h-4 w-4" />
|
|
<span>Estimated: {story.estimatedHours}h</span>
|
|
</div>
|
|
)}
|
|
{story.actualHours !== undefined && (
|
|
<div className="flex items-center gap-2 text-sm">
|
|
<Clock className="text-muted-foreground h-4 w-4" />
|
|
<span>Actual: {story.actualHours}h</span>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Acceptance Criteria - Sprint 4 Story 3 */}
|
|
{story.acceptanceCriteria && story.acceptanceCriteria.length > 0 && (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Acceptance Criteria</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
{story.acceptanceCriteria.map((criterion, index) => (
|
|
<div key={index} className="flex items-start gap-2 text-sm">
|
|
<CheckCircle2 className="text-muted-foreground mt-0.5 h-4 w-4 flex-shrink-0" />
|
|
<span>{criterion}</span>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Dates */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Dates</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-2">
|
|
<div className="flex items-start gap-2 text-sm">
|
|
<Calendar className="text-muted-foreground mt-0.5 h-4 w-4" />
|
|
<div className="flex-1">
|
|
<p className="font-medium">Created</p>
|
|
<p className="text-muted-foreground">
|
|
{formatDistanceToNow(new Date(story.createdAt), { addSuffix: true })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-2 text-sm">
|
|
<Calendar className="text-muted-foreground mt-0.5 h-4 w-4" />
|
|
<div className="flex-1">
|
|
<p className="font-medium">Updated</p>
|
|
<p className="text-muted-foreground">
|
|
{formatDistanceToNow(new Date(story.updatedAt), { addSuffix: true })}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Parent Epic Card */}
|
|
{epic && (
|
|
<Card className="transition-shadow hover:shadow-lg">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-sm font-medium">Parent Epic</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Link
|
|
href={`/epics/${epic.id}`}
|
|
className="hover:bg-accent block space-y-2 rounded-md border p-3 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<Layers className="text-muted-foreground h-4 w-4" />
|
|
<span className="text-sm font-medium">{epic.name}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<Badge variant={getStatusColor(epic.status)} className="text-xs">
|
|
{epic.status}
|
|
</Badge>
|
|
<Badge className={`${getPriorityColor(epic.priority)} text-xs`}>
|
|
{epic.priority}
|
|
</Badge>
|
|
</div>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Edit Story Dialog */}
|
|
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
|
<DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle>Edit Story</DialogTitle>
|
|
<DialogDescription>Update the story details</DialogDescription>
|
|
</DialogHeader>
|
|
<StoryForm
|
|
story={story}
|
|
projectId={story.projectId}
|
|
onSuccess={() => setIsEditDialogOpen(false)}
|
|
onCancel={() => setIsEditDialogOpen(false)}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* Delete Story Confirmation Dialog */}
|
|
<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
This action cannot be undone. This will permanently delete the story and all its
|
|
associated tasks.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={handleDeleteStory}
|
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
|
disabled={deleteStory.isPending}
|
|
>
|
|
{deleteStory.isPending ? (
|
|
<>
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
|
Deleting...
|
|
</>
|
|
) : (
|
|
"Delete Story"
|
|
)}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
);
|
|
}
|