feat(frontend): Implement Epic management page with full CRUD operations
Add comprehensive Epic management functionality at /projects/{projectId}/epics route.
Changes:
- Created EpicForm component with validation (title, description, priority, estimated hours)
- Implemented Epics list page with Create/Edit/Delete operations
- Added breadcrumb navigation (Projects > Project Name > Epics)
- Included loading states with Skeletons
- Added error handling and user feedback with toast notifications
- Implemented responsive grid layout (mobile/tablet/desktop)
- Added hover effects and inline edit/delete actions
- Integrated with existing hooks (useEpics, useCreateEpic, useUpdateEpic, useDeleteEpic)
- Used shadcn/ui components (Card, Dialog, AlertDialog, Badge, Select)
- Added status and priority color coding
- Displayed estimated/actual hours and creation time
- Implemented empty state for projects with no epics
Technical details:
- Used react-hook-form with zod validation
- Implemented optimistic UI updates
- Followed existing patterns from Projects page
- Full TypeScript type safety
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yaojia Wang
366
app/(dashboard)/projects/[id]/epics/page.tsx
Normal file
366
app/(dashboard)/projects/[id]/epics/page.tsx
Normal file
@@ -0,0 +1,366 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { use, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
Plus,
|
||||||
|
Edit,
|
||||||
|
Trash2,
|
||||||
|
Loader2,
|
||||||
|
ListTodo,
|
||||||
|
Calendar,
|
||||||
|
Clock,
|
||||||
|
} 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 { useProject } from '@/lib/hooks/use-projects';
|
||||||
|
import { useEpics, useDeleteEpic } from '@/lib/hooks/use-epics';
|
||||||
|
import { EpicForm } from '@/components/epics/epic-form';
|
||||||
|
import { formatDistanceToNow } from 'date-fns';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import type { Epic, WorkItemStatus, WorkItemPriority } from '@/types/project';
|
||||||
|
|
||||||
|
interface EpicsPageProps {
|
||||||
|
params: Promise<{ id: string }>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function EpicsPage({ params }: EpicsPageProps) {
|
||||||
|
const { id: projectId } = use(params);
|
||||||
|
const router = useRouter();
|
||||||
|
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||||
|
const [editingEpic, setEditingEpic] = useState<Epic | null>(null);
|
||||||
|
const [deletingEpicId, setDeletingEpicId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const { data: project, isLoading: projectLoading } = useProject(projectId);
|
||||||
|
const { data: epics, isLoading: epicsLoading, error } = useEpics(projectId);
|
||||||
|
const deleteEpic = useDeleteEpic();
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!deletingEpicId) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await deleteEpic.mutateAsync(deletingEpicId);
|
||||||
|
setDeletingEpicId(null);
|
||||||
|
} catch (error) {
|
||||||
|
const message = error instanceof Error ? error.message : 'Failed to delete epic';
|
||||||
|
toast.error(message);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusColor = (status: WorkItemStatus) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Backlog':
|
||||||
|
return 'secondary';
|
||||||
|
case 'Todo':
|
||||||
|
return 'outline';
|
||||||
|
case 'InProgress':
|
||||||
|
return 'default';
|
||||||
|
case 'Done':
|
||||||
|
return 'success' as any;
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (projectLoading || epicsLoading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Skeleton className="h-10 w-32" />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Skeleton className="h-9 w-48" />
|
||||||
|
<Skeleton className="h-5 w-64" />
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-10 w-32" />
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<CardHeader>
|
||||||
|
<Skeleton className="h-6 w-3/4" />
|
||||||
|
<Skeleton className="h-4 w-1/2 mt-2" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Skeleton className="h-16 w-full" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !project) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-[400px]">
|
||||||
|
<Card className="w-full max-w-md">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-destructive">Error Loading Epics</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
{error instanceof Error ? error.message : 'Failed to load epics'}
|
||||||
|
</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 */}
|
||||||
|
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||||
|
<Link href="/projects" className="hover:text-foreground">
|
||||||
|
Projects
|
||||||
|
</Link>
|
||||||
|
<span>/</span>
|
||||||
|
<Link href={`/projects/${projectId}`} className="hover:text-foreground">
|
||||||
|
{project.name}
|
||||||
|
</Link>
|
||||||
|
<span>/</span>
|
||||||
|
<span className="text-foreground">Epics</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button variant="ghost" size="icon" asChild>
|
||||||
|
<Link href={`/projects/${projectId}`}>
|
||||||
|
<ArrowLeft className="h-5 w-5" />
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Epics</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Manage epics for {project.name}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
New Epic
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Epics Grid */}
|
||||||
|
{epics && epics.length > 0 ? (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{epics.map((epic) => (
|
||||||
|
<Card
|
||||||
|
key={epic.id}
|
||||||
|
className="group transition-all hover:shadow-lg hover:border-primary relative"
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<div className="space-y-2 flex-1">
|
||||||
|
<Link
|
||||||
|
href={`/epics/${epic.id}`}
|
||||||
|
className="block hover:underline"
|
||||||
|
>
|
||||||
|
<CardTitle className="line-clamp-2 text-lg">
|
||||||
|
{epic.title}
|
||||||
|
</CardTitle>
|
||||||
|
</Link>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
<Badge variant={getStatusColor(epic.status)}>
|
||||||
|
{epic.status}
|
||||||
|
</Badge>
|
||||||
|
<Badge className={getPriorityColor(epic.priority)}>
|
||||||
|
{epic.priority}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setEditingEpic(epic);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-destructive hover:text-destructive"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setDeletingEpicId(epic.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{epic.description ? (
|
||||||
|
<p className="text-sm text-muted-foreground line-clamp-3">
|
||||||
|
{epic.description}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<p className="text-sm text-muted-foreground italic">
|
||||||
|
No description
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<div className="space-y-2 text-xs text-muted-foreground">
|
||||||
|
{epic.estimatedHours && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock className="h-3 w-3" />
|
||||||
|
<span>Estimated: {epic.estimatedHours}h</span>
|
||||||
|
{epic.actualHours && (
|
||||||
|
<span className="ml-2">
|
||||||
|
/ Actual: {epic.actualHours}h
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="h-3 w-3" />
|
||||||
|
<span>
|
||||||
|
Created {formatDistanceToNow(new Date(epic.createdAt), { addSuffix: true })}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Card className="flex flex-col items-center justify-center py-16">
|
||||||
|
<ListTodo className="h-12 w-12 text-muted-foreground mb-4" />
|
||||||
|
<CardTitle className="mb-2">No epics yet</CardTitle>
|
||||||
|
<CardDescription className="mb-4 text-center max-w-md">
|
||||||
|
Get started by creating your first epic to organize major features and initiatives
|
||||||
|
</CardDescription>
|
||||||
|
<Button onClick={() => setIsCreateDialogOpen(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Create Epic
|
||||||
|
</Button>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Create Epic Dialog */}
|
||||||
|
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create New Epic</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Add a new epic to organize major features and initiatives
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<EpicForm
|
||||||
|
projectId={projectId}
|
||||||
|
onSuccess={() => setIsCreateDialogOpen(false)}
|
||||||
|
onCancel={() => setIsCreateDialogOpen(false)}
|
||||||
|
/>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Edit Epic Dialog */}
|
||||||
|
<Dialog open={!!editingEpic} onOpenChange={() => setEditingEpic(null)}>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit Epic</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Update the epic details
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{editingEpic && (
|
||||||
|
<EpicForm
|
||||||
|
projectId={projectId}
|
||||||
|
epic={editingEpic}
|
||||||
|
onSuccess={() => setEditingEpic(null)}
|
||||||
|
onCancel={() => setEditingEpic(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<AlertDialog
|
||||||
|
open={!!deletingEpicId}
|
||||||
|
onOpenChange={() => setDeletingEpicId(null)}
|
||||||
|
>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action cannot be undone. This will permanently delete the epic
|
||||||
|
and all its associated stories and tasks.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={handleDelete}
|
||||||
|
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||||
|
disabled={deleteEpic.isPending}
|
||||||
|
>
|
||||||
|
{deleteEpic.isPending ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Deleting...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Delete Epic'
|
||||||
|
)}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
221
components/epics/epic-form.tsx
Normal file
221
components/epics/epic-form.tsx
Normal file
@@ -0,0 +1,221 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import * as z from 'zod';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/form';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { useCreateEpic, useUpdateEpic } from '@/lib/hooks/use-epics';
|
||||||
|
import type { Epic, WorkItemPriority } from '@/types/project';
|
||||||
|
import { toast } from 'sonner';
|
||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
const epicSchema = z.object({
|
||||||
|
title: z
|
||||||
|
.string()
|
||||||
|
.min(1, 'Title is required')
|
||||||
|
.max(200, 'Title must be less than 200 characters'),
|
||||||
|
description: z
|
||||||
|
.string()
|
||||||
|
.max(2000, 'Description must be less than 2000 characters')
|
||||||
|
.optional(),
|
||||||
|
priority: z.enum(['Low', 'Medium', 'High', 'Critical']),
|
||||||
|
estimatedHours: z
|
||||||
|
.number()
|
||||||
|
.min(0, 'Estimated hours must be positive')
|
||||||
|
.optional()
|
||||||
|
.or(z.literal('')),
|
||||||
|
});
|
||||||
|
|
||||||
|
type EpicFormValues = z.infer<typeof epicSchema>;
|
||||||
|
|
||||||
|
interface EpicFormProps {
|
||||||
|
projectId: string;
|
||||||
|
epic?: Epic;
|
||||||
|
onSuccess?: () => void;
|
||||||
|
onCancel?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function EpicForm({ projectId, epic, onSuccess, onCancel }: EpicFormProps) {
|
||||||
|
const isEditing = !!epic;
|
||||||
|
const createEpic = useCreateEpic();
|
||||||
|
const updateEpic = useUpdateEpic();
|
||||||
|
|
||||||
|
const form = useForm<EpicFormValues>({
|
||||||
|
resolver: zodResolver(epicSchema),
|
||||||
|
defaultValues: {
|
||||||
|
title: epic?.title || '',
|
||||||
|
description: epic?.description || '',
|
||||||
|
priority: epic?.priority || 'Medium',
|
||||||
|
estimatedHours: epic?.estimatedHours || ('' as any),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
async function onSubmit(data: EpicFormValues) {
|
||||||
|
try {
|
||||||
|
const payload = {
|
||||||
|
...data,
|
||||||
|
estimatedHours: data.estimatedHours || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEditing) {
|
||||||
|
await updateEpic.mutateAsync({
|
||||||
|
id: epic.id,
|
||||||
|
data: payload,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await createEpic.mutateAsync({
|
||||||
|
projectId,
|
||||||
|
...payload,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onSuccess?.();
|
||||||
|
} catch (error) {
|
||||||
|
const message = error instanceof Error ? error.message : 'Operation failed';
|
||||||
|
toast.error(message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const isLoading = createEpic.isPending || updateEpic.isPending;
|
||||||
|
|
||||||
|
const priorityOptions: Array<{ value: WorkItemPriority; label: string; color: string }> = [
|
||||||
|
{ value: 'Low', label: 'Low', color: 'text-blue-600' },
|
||||||
|
{ value: 'Medium', label: 'Medium', color: 'text-yellow-600' },
|
||||||
|
{ value: 'High', label: 'High', color: 'text-orange-600' },
|
||||||
|
{ value: 'Critical', label: 'Critical', color: 'text-red-600' },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Epic Title *</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="e.g., User Authentication System" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
A concise title describing this epic
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="description"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Description</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Textarea
|
||||||
|
placeholder="Detailed description of the epic, including goals and acceptance criteria..."
|
||||||
|
className="resize-none"
|
||||||
|
rows={6}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Optional detailed description (max 2000 characters)
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="priority"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Priority *</FormLabel>
|
||||||
|
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select priority" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{priorityOptions.map((option) => (
|
||||||
|
<SelectItem key={option.value} value={option.value}>
|
||||||
|
<span className={option.color}>{option.label}</span>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormDescription>
|
||||||
|
Set the priority level for this epic
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="estimatedHours"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Estimated Hours</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="e.g., 40"
|
||||||
|
{...field}
|
||||||
|
onChange={(e) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
field.onChange(value === '' ? '' : Number(value));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>
|
||||||
|
Optional time estimate in hours
|
||||||
|
</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-3 pt-4">
|
||||||
|
{onCancel && (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="outline"
|
||||||
|
onClick={onCancel}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
{isEditing ? 'Update Epic' : 'Create Epic'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user