39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { TaskCard } from './TaskCard'
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
const columns = ['todo', 'in_progress', 'review', 'done']
|
|
|
|
export function Kanban() {
|
|
const { data: tasks = [] } = useQuery({
|
|
queryKey: ['tasks'],
|
|
queryFn: async () => {
|
|
const res = await fetch('/api/v1/tasks')
|
|
return res.json()
|
|
},
|
|
})
|
|
|
|
return (
|
|
<div>
|
|
<h2 className="text-2xl font-semibold mb-6">Project Kanban</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
{columns.map((status) => (
|
|
<div key={status} className="bg-card border border-border rounded-3xl p-4">
|
|
<h3 className="uppercase text-xs tracking-widest text-muted-foreground mb-4 px-1">
|
|
{status.replace('_', ' ')}
|
|
<span className="ml-2 text-zinc-600">
|
|
{tasks.filter((t: any) => t.status === status).length}
|
|
</span>
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{tasks
|
|
.filter((t: any) => t.status === status)
|
|
.map((task: any) => (
|
|
<TaskCard key={task.id} task={task} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|