roberto/adiuva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Integrate KanbanBoard component with drag-and-drop functionality using @hello-pangea/dnd

Browse Source
This commit is contained in:
Roberto Musso
2026-02-21 01:10:16 +01:00
parent c75788503f
commit 40ac075633
10 changed files with 350 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/renderer/components/projects/ProjectDetail.tsx
View File

@@ -1,19 +1,22 @@
import { useMemo } from 'react';
import { Sparkles, FileText, CheckCircle2, Milestone } from 'lucide-react';
import { useMemo, useState } from 'react';
import { Sparkles, FileText, CheckCircle2, Milestone, Plus } from 'lucide-react';
import { trpc } from '@/lib/trpc';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription } from '@/components/ui/item';
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbList,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb';
import { KanbanBoard } from './KanbanBoard';
type ProjectDetailProps = {
projectId: string;
};
export function ProjectDetail({ projectId }: ProjectDetailProps) {
const [newTaskOpen, setNewTaskOpen] = useState(false);
const { data: project, isLoading } = trpc.projects.get.useQuery({ id: projectId });
const { data: clientsList } = trpc.clients.list.useQuery();
const { data: notesList } = trpc.notes.list.useQuery({ projectId });
@@ -68,81 +71,85 @@ export function ProjectDetail({ projectId }: ProjectDetailProps) {
}
return (
<div className="p-6 max-w-4xl mx-auto flex flex-col gap-6">
{/* Breadcrumb */}
{breadcrumbPath.length > 0 && (
<Breadcrumb>
<BreadcrumbList>
{breadcrumbPath.map((segment, i) => (
<BreadcrumbItem key={i}>
{i > 0 && <BreadcrumbSeparator />}
<span className="text-muted-foreground">{segment}</span>
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
)}
{/* Project Name */}
<h1 className="text-2xl font-semibold text-foreground">{project.name}</h1>
<div className="p-6 pe-8 flex flex-col gap-6">
{/* Breadcrumb + Project Name */}
<div className="flex flex-col gap-1">
{breadcrumbPath.length > 0 && (
<Breadcrumb>
<BreadcrumbList>
{breadcrumbPath.map((segment, i) => (
<BreadcrumbItem key={i}>
{i > 0 && <BreadcrumbSeparator />}
<span className="text-muted-foreground">{segment}</span>
</BreadcrumbItem>
))}
</BreadcrumbList>
</Breadcrumb>
)}
<h1 className="text-2xl font-semibold text-foreground">{project.name}</h1>
</div>
{/* Stat Cards */}
<div className="grid grid-cols-3 gap-4">
<Card className="py-4">
<CardHeader className="pb-0 pt-0">
<div className="flex items-center gap-2">
<FileText className="h-5 w-5 text-muted-foreground" />
<CardTitle className="text-sm font-medium text-muted-foreground">Notes</CardTitle>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="text-2xl font-semibold">{notesCount}</div>
</CardContent>
</Card>
<Item variant="muted">
<ItemMedia variant="icon">
<FileText />
</ItemMedia>
<ItemContent>
<ItemTitle>{notesCount}</ItemTitle>
<ItemDescription>Notes</ItemDescription>
</ItemContent>
</Item>
<Card className="py-4">
<CardHeader className="pb-0 pt-0">
<div className="flex items-center gap-2">
<CheckCircle2 className="h-5 w-5 text-muted-foreground" />
<CardTitle className="text-sm font-medium text-muted-foreground">Tasks Complete</CardTitle>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="text-2xl font-semibold">
{taskStats.done}/{taskStats.total}
</div>
</CardContent>
</Card>
<Item variant="muted">
<ItemMedia variant="icon">
<CheckCircle2 />
</ItemMedia>
<ItemContent>
<ItemTitle>{taskStats.done}/{taskStats.total}</ItemTitle>
<ItemDescription>Tasks Complete</ItemDescription>
</ItemContent>
</Item>
<Card className="py-4">
<CardHeader className="pb-0 pt-0">
<div className="flex items-center gap-2">
<Milestone className="h-5 w-5 text-muted-foreground" />
<CardTitle className="text-sm font-medium text-muted-foreground">Checkpoints</CardTitle>
</div>
</CardHeader>
<CardContent className="pt-0">
<div className="text-2xl font-semibold">
{checkpointStats.approved}/{checkpointStats.total}
</div>
</CardContent>
</Card>
<Item variant="muted">
<ItemMedia variant="icon">
<Milestone />
</ItemMedia>
<ItemContent>
<ItemTitle>{checkpointStats.approved}/{checkpointStats.total}</ItemTitle>
<ItemDescription>Checkpoints</ItemDescription>
</ItemContent>
</Item>
</div>
{/* AI Project Summary */}
<Card>
<CardHeader>
<div className="flex items-center gap-2">
<Sparkles className="h-5 w-5 text-muted-foreground" />
<CardTitle className="text-sm font-medium">AI Project Summary</CardTitle>
</div>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground">
<Item variant="outline">
<ItemMedia variant="icon">
<Sparkles />
</ItemMedia>
<ItemContent>
<ItemTitle>AI Project Summary</ItemTitle>
<ItemDescription>
{project.aiSummary || 'AI summary will appear here'}
</p>
</CardContent>
</Card>
</ItemDescription>
</ItemContent>
</Item>
{/* Tasks Kanban */}
<div className="flex flex-col gap-3">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold">Tasks</h2>
<Button variant="ghost" size="sm" onClick={() => setNewTaskOpen(true)}>
<Plus className="h-4 w-4 mr-1" />
Add
</Button>
</div>
<KanbanBoard
projectId={projectId}
newTaskOpen={newTaskOpen}
onNewTaskOpenChange={setNewTaskOpen}
/>
</div>
</div>
);
}