Initial commit
This commit is contained in:
Yaojia Wang
29
components/features/kanban/KanbanBoard.tsx
Normal file
29
components/features/kanban/KanbanBoard.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { KanbanColumn } from './KanbanColumn';
|
||||
import type { KanbanBoard as KanbanBoardType } from '@/types/kanban';
|
||||
|
||||
interface KanbanBoardProps {
|
||||
board: KanbanBoardType;
|
||||
}
|
||||
|
||||
export function KanbanBoard({ board }: KanbanBoardProps) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-2xl font-bold">{board.projectName}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Total tasks: {board.columns.reduce((acc, col) => acc + col.tasks.length, 0)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4 overflow-x-auto pb-4">
|
||||
{board.columns.map((column) => (
|
||||
<KanbanColumn key={column.status} column={column} />
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Note: Drag-and-drop functionality will be implemented in Sprint 2
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
components/features/kanban/KanbanColumn.tsx
Normal file
39
components/features/kanban/KanbanColumn.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
'use client';
|
||||
|
||||
import { TaskCard } from './TaskCard';
|
||||
import type { KanbanColumn as KanbanColumnType } from '@/types/kanban';
|
||||
|
||||
interface KanbanColumnProps {
|
||||
column: KanbanColumnType;
|
||||
}
|
||||
|
||||
export function KanbanColumn({ column }: KanbanColumnProps) {
|
||||
const statusColors = {
|
||||
ToDo: 'border-gray-300',
|
||||
InProgress: 'border-blue-300',
|
||||
InReview: 'border-yellow-300',
|
||||
Done: 'border-green-300',
|
||||
Blocked: 'border-red-300',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-w-[300px] flex-col rounded-lg border-2 bg-muted/50 p-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="font-semibold">{column.title}</h3>
|
||||
<span className="rounded-full bg-background px-2 py-0.5 text-xs font-medium">
|
||||
{column.tasks.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex-1 space-y-3">
|
||||
{column.tasks.map((task) => (
|
||||
<TaskCard key={task.id} task={task} />
|
||||
))}
|
||||
{column.tasks.length === 0 && (
|
||||
<div className="flex h-32 items-center justify-center rounded-lg border-2 border-dashed border-muted-foreground/25">
|
||||
<p className="text-sm text-muted-foreground">No tasks</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
62
components/features/kanban/TaskCard.tsx
Normal file
62
components/features/kanban/TaskCard.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||
import { Clock, User } from 'lucide-react';
|
||||
import type { TaskCard as TaskCardType } from '@/types/kanban';
|
||||
|
||||
interface TaskCardProps {
|
||||
task: TaskCardType;
|
||||
isDragging?: boolean;
|
||||
}
|
||||
|
||||
export function TaskCard({ task, isDragging = false }: TaskCardProps) {
|
||||
const priorityColors = {
|
||||
Low: 'bg-blue-100 text-blue-700',
|
||||
Medium: 'bg-yellow-100 text-yellow-700',
|
||||
High: 'bg-orange-100 text-orange-700',
|
||||
Urgent: 'bg-red-100 text-red-700',
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={`cursor-move transition-shadow hover:shadow-md ${
|
||||
isDragging ? 'opacity-50 shadow-lg' : ''
|
||||
}`}
|
||||
>
|
||||
<CardHeader className="p-4 pb-2">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<h4 className="text-sm font-medium leading-tight">{task.title}</h4>
|
||||
<span
|
||||
className={`rounded-full px-2 py-0.5 text-xs font-medium ${
|
||||
priorityColors[task.priority as keyof typeof priorityColors] ||
|
||||
priorityColors.Medium
|
||||
}`}
|
||||
>
|
||||
{task.priority}
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4 pt-0">
|
||||
{task.description && (
|
||||
<p className="mb-3 line-clamp-2 text-xs text-muted-foreground">
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
{task.estimatedHours && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="h-3 w-3" />
|
||||
<span>{task.estimatedHours}h</span>
|
||||
</div>
|
||||
)}
|
||||
{task.assigneeId && (
|
||||
<div className="flex items-center gap-1">
|
||||
<User className="h-3 w-3" />
|
||||
<span>Assigned</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
162
components/features/projects/CreateProjectDialog.tsx
Normal file
162
components/features/projects/CreateProjectDialog.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
'use client';
|
||||
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormDescription,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useCreateProject } from '@/lib/hooks/use-projects';
|
||||
import type { CreateProjectDto } from '@/types/project';
|
||||
|
||||
const projectSchema = z.object({
|
||||
name: z.string().min(1, 'Project name is required').max(200, 'Project name cannot exceed 200 characters'),
|
||||
description: z.string().max(2000, 'Description cannot exceed 2000 characters'),
|
||||
key: z
|
||||
.string()
|
||||
.min(2, 'Project key must be at least 2 characters')
|
||||
.max(10, 'Project key cannot exceed 10 characters')
|
||||
.regex(/^[A-Z]+$/, 'Project key must contain only uppercase letters'),
|
||||
});
|
||||
|
||||
interface CreateProjectDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function CreateProjectDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
}: CreateProjectDialogProps) {
|
||||
const createProject = useCreateProject();
|
||||
|
||||
const form = useForm<CreateProjectDto>({
|
||||
resolver: zodResolver(projectSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
key: '',
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: CreateProjectDto) => {
|
||||
try {
|
||||
// TODO: Replace with actual user ID from auth context
|
||||
const projectData = {
|
||||
...data,
|
||||
ownerId: '00000000-0000-0000-0000-000000000001',
|
||||
};
|
||||
await createProject.mutateAsync(projectData);
|
||||
form.reset();
|
||||
onOpenChange(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to create project:', error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-[525px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create New Project</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new project to organize your work. Click create when you're done.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="My Awesome Project" {...field} />
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
The name of your project.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="key"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Project Key</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="MAP"
|
||||
{...field}
|
||||
onChange={(e) => {
|
||||
field.onChange(e.target.value.toUpperCase());
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
A unique identifier for the project (2-10 uppercase letters).
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="description"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="A brief description of the project..."
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormDescription>
|
||||
Optional description for your project.
|
||||
</FormDescription>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createProject.isPending}>
|
||||
{createProject.isPending ? 'Creating...' : 'Create Project'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user