T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker
- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
This commit is contained in:
Hermes
@@ -0,0 +1,394 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Plus, ArrowLeft, GripVertical, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { SectionDialog } from "@/components/projects/section-dialog";
|
||||
import { ProjectTimeline } from "@/components/projects/project-timeline";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Section {
|
||||
id: string;
|
||||
name: string;
|
||||
projectId: string;
|
||||
kind: 'section' | 'milestone';
|
||||
status: 'planned' | 'in_progress' | 'complete';
|
||||
targetDate: string | null;
|
||||
sortOrder: number;
|
||||
}
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
sectionId: string | null;
|
||||
order: number;
|
||||
}
|
||||
|
||||
interface ProjectDetail {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
status: string;
|
||||
color: string | null;
|
||||
icon: string | null;
|
||||
targetDate: string | null;
|
||||
sections: Section[];
|
||||
tasks: Task[];
|
||||
taskCount: number;
|
||||
completedCount: number;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
active: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||
paused: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
|
||||
completed: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
|
||||
archived: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
|
||||
};
|
||||
|
||||
const taskStatusColors: Record<string, string> = {
|
||||
todo: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300",
|
||||
in_progress: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200",
|
||||
done: "bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-200",
|
||||
cancelled: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200",
|
||||
};
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.id as string;
|
||||
const [project, setProject] = useState<ProjectDetail | null>(null);
|
||||
const [domainId, setDomainId] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [sectionDialogOpen, setSectionDialogOpen] = useState(false);
|
||||
const [editSection, setEditSection] = useState<Section | null>(null);
|
||||
const [deleteSection, setDeleteSection] = useState<Section | null>(null);
|
||||
const [deletingSection, setDeletingSection] = useState(false);
|
||||
const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
|
||||
|
||||
// Extract domainId from the project data
|
||||
const fetchProject = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// We need to find the domain first — use the first domain
|
||||
const domainsRes = await fetch('/api/domains?sort=sort_order');
|
||||
const domainsData = await domainsRes.json();
|
||||
const firstDomain = domainsData.items?.[0];
|
||||
if (!firstDomain) {
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setDomainId(firstDomain.id);
|
||||
|
||||
const res = await fetch(`/api/domains/${firstDomain.id}/projects/${projectId}`);
|
||||
if (!res.ok) throw new Error('Not found');
|
||||
const data = await res.json();
|
||||
setProject(data);
|
||||
} catch {
|
||||
toast.error('Failed to load project');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProject();
|
||||
}, [fetchProject]);
|
||||
|
||||
const handleMoveTask = async (taskId: string, sectionId: string | null) => {
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${domainId}/tasks/${taskId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ sectionId }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to move task');
|
||||
toast.success('Task moved');
|
||||
fetchProject();
|
||||
} catch {
|
||||
toast.error('Failed to move task');
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for custom event to open section dialog
|
||||
useEffect(() => {
|
||||
const handler = () => setSectionDialogOpen(true);
|
||||
document.addEventListener('open-create-section', handler);
|
||||
return () => document.removeEventListener('open-create-section', handler);
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return <div className="py-12 text-center text-muted-foreground">Loading project...</div>;
|
||||
}
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<div className="py-12 text-center">
|
||||
<p className="text-muted-foreground">Project not found.</p>
|
||||
<Link href="/projects" className="mt-4 inline-block text-primary hover:underline">
|
||||
← Back to projects
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Group tasks by section
|
||||
const tasksBySection = new Map<string | 'unsectioned', Task[]>();
|
||||
tasksBySection.set('unsectioned', []);
|
||||
for (const section of project.sections) {
|
||||
tasksBySection.set(section.id, []);
|
||||
}
|
||||
for (const task of project.tasks) {
|
||||
const key = task.sectionId || 'unsectioned';
|
||||
if (!tasksBySection.has(key)) tasksBySection.set(key, []);
|
||||
tasksBySection.get(key)!.push(task);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<Link href="/projects" className="mb-2 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground">
|
||||
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
|
||||
Back to projects
|
||||
</Link>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
{project.color && (
|
||||
<div className="h-4 w-4 rounded-full shrink-0" style={{ backgroundColor: project.color }} />
|
||||
)}
|
||||
<h1 className="text-2xl font-bold">{project.name}</h1>
|
||||
<Badge variant="secondary" className={`text-xs ${statusColors[project.status] || ''}`}>
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
{project.description && (
|
||||
<p className="mt-1 text-muted-foreground">{project.description}</p>
|
||||
)}
|
||||
{project.targetDate && (
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Target: {new Date(project.targetDate).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-1">
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
||||
<span>{project.completedCount}/{project.taskCount} tasks completed</span>
|
||||
<span>{project.progress}%</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sections board */}
|
||||
<div className="flex gap-4 overflow-x-auto pb-4">
|
||||
{/* Unsectioned tasks column */}
|
||||
<div className="min-w-[280px] max-w-[320px] flex-shrink-0">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Unassigned
|
||||
</h3>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(tasksBySection.get('unsectioned') || []).length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{(tasksBySection.get('unsectioned') || []).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => setDraggedTaskId(task.id)}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={() => {
|
||||
if (draggedTaskId && draggedTaskId !== task.id) {
|
||||
handleMoveTask(draggedTaskId, null);
|
||||
}
|
||||
setDraggedTaskId(null);
|
||||
}}
|
||||
className="rounded-lg border bg-card p-3 cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
|
||||
<span className="text-sm flex-1">{task.title}</span>
|
||||
<Badge variant="secondary" className={`text-xs ${taskStatusColors[task.status] || ''}`}>
|
||||
{task.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(tasksBySection.get('unsectioned') || []).length === 0 && (
|
||||
<div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
|
||||
Drop tasks here
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Section columns */}
|
||||
{project.sections.map((section) => (
|
||||
<div key={section.id} className="min-w-[280px] max-w-[320px] flex-shrink-0">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
{section.name}
|
||||
</h3>
|
||||
{section.kind === 'milestone' && (
|
||||
<Badge variant="outline" className="text-xs">Milestone</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{(tasksBySection.get(section.id) || []).length}
|
||||
</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
||||
aria-label={`Options for ${section.name}`}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => setEditSection(section)}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setDeleteSection(section)}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="space-y-2 min-h-[100px]"
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={() => {
|
||||
if (draggedTaskId) {
|
||||
handleMoveTask(draggedTaskId, section.id);
|
||||
}
|
||||
setDraggedTaskId(null);
|
||||
}}
|
||||
>
|
||||
{(tasksBySection.get(section.id) || []).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
draggable
|
||||
onDragStart={() => setDraggedTaskId(task.id)}
|
||||
className="rounded-lg border bg-card p-3 cursor-grab active:cursor-grabbing"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<GripVertical className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
|
||||
<span className="text-sm flex-1">{task.title}</span>
|
||||
<Badge variant="secondary" className={`text-xs ${taskStatusColors[task.status] || ''}`}>
|
||||
{task.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{(tasksBySection.get(section.id) || []).length === 0 && (
|
||||
<div className="rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground">
|
||||
Drop tasks here
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add section button */}
|
||||
<div className="min-w-[280px] max-w-[320px] flex-shrink-0">
|
||||
<button
|
||||
onClick={() => setSectionDialogOpen(true)}
|
||||
className="flex h-full w-full items-center justify-center rounded-lg border-2 border-dashed p-4 text-sm text-muted-foreground hover:text-foreground hover:border-accent-foreground/50 transition-colors"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
Add section
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline */}
|
||||
<ProjectTimeline sections={project.sections} projectTargetDate={project.targetDate} />
|
||||
|
||||
<SectionDialog
|
||||
open={sectionDialogOpen}
|
||||
onOpenChange={setSectionDialogOpen}
|
||||
projectId={projectId}
|
||||
domainId={domainId || ''}
|
||||
onCreated={fetchProject}
|
||||
/>
|
||||
|
||||
{editSection && (
|
||||
<SectionDialog
|
||||
open={!!editSection}
|
||||
onOpenChange={(open) => { if (!open) setEditSection(null); }}
|
||||
projectId={projectId}
|
||||
domainId={domainId || ''}
|
||||
onCreated={fetchProject}
|
||||
existingSection={editSection}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AlertDialog open={!!deleteSection} onOpenChange={(open) => { if (!open) setDeleteSection(null); }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete Section</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete "{deleteSection?.name}"? This action cannot be undone. Tasks in this section will become unassigned.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={deletingSection}
|
||||
onClick={async () => {
|
||||
if (!deleteSection || !domainId) return;
|
||||
setDeletingSection(true);
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${domainId}/projects/${projectId}/sections/${deleteSection.id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to delete');
|
||||
toast.success('Section deleted');
|
||||
setDeleteSection(null);
|
||||
fetchProject();
|
||||
} catch {
|
||||
toast.error('Failed to delete section');
|
||||
} finally {
|
||||
setDeletingSection(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{deletingSection ? 'Deleting...' : 'Delete'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Plus, FolderKanban, ExternalLink, MoreHorizontal, Pencil, Archive } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { ProjectCreateDialog } from "@/components/projects/project-create-dialog";
|
||||
import { ProjectEditDialog } from "@/components/projects/project-edit-dialog";
|
||||
import { CreateItemDialog } from "@/components/create-item-dialog";
|
||||
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
|
||||
import Link from "next/link";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
status: 'active' | 'paused' | 'completed' | 'archived';
|
||||
domainId: string;
|
||||
color: string | null;
|
||||
icon: string | null;
|
||||
targetDate: string | null;
|
||||
taskCount: number;
|
||||
completedCount: number;
|
||||
progress: number;
|
||||
tags: { id: string; name: string; color: string | null }[];
|
||||
}
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
active: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
|
||||
paused: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
|
||||
completed: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
|
||||
archived: "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200",
|
||||
};
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [domainId, setDomainId] = useState<string | null>(null);
|
||||
const [domains, setDomains] = useState<{ id: string; name: string }[]>([]);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const { open: storeOpen, openCreate, closeCreate } = useCreateDialogStore();
|
||||
const [editProject, setEditProject] = useState<Project | null>(null);
|
||||
const [archiveProject, setArchiveProject] = useState<Project | null>(null);
|
||||
const [archiving, setArchiving] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// Fetch domains
|
||||
useEffect(() => {
|
||||
fetch('/api/domains?sort=sort_order')
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const items = data.items || [];
|
||||
setDomains(items);
|
||||
if (items.length > 0 && !domainId) {
|
||||
setDomainId(items[0].id);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
// Fetch projects
|
||||
const fetchProjects = useCallback(async () => {
|
||||
if (!domainId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${domainId}/projects`);
|
||||
const data = await res.json();
|
||||
setProjects(data.items || []);
|
||||
} catch {
|
||||
toast.error('Failed to load projects');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [domainId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, [fetchProjects]);
|
||||
|
||||
// Listen for custom event to open create dialog
|
||||
useEffect(() => {
|
||||
const handler = () => setCreateOpen(true);
|
||||
document.addEventListener('open-create-project', handler);
|
||||
return () => document.removeEventListener('open-create-project', handler);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<p className="mt-1 text-muted-foreground">Organize work into milestones and track progress.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{domains.length > 1 && (
|
||||
<select
|
||||
value={domainId || ''}
|
||||
onChange={(e) => setDomainId(e.target.value)}
|
||||
className="rounded-md border bg-background px-3 py-1.5 text-sm"
|
||||
aria-label="Select domain"
|
||||
>
|
||||
{domains.map((d) => (
|
||||
<option key={d.id} value={d.id}>{d.name}</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<Button onClick={() => { setCreateOpen(true); openCreate('project'); }}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New project
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="py-12 text-center text-muted-foreground">Loading projects...</div>
|
||||
) : projects.length === 0 ? (
|
||||
<div className="py-12 text-center">
|
||||
<FolderKanban className="mx-auto h-12 w-12 text-muted-foreground/50" aria-hidden="true" />
|
||||
<p className="mt-4 text-muted-foreground">No projects yet. Create your first one!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id} className="relative">
|
||||
<Link href={`/projects/${project.id}`}>
|
||||
<Card className="h-full cursor-pointer transition-colors hover:bg-accent/50">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{project.color && (
|
||||
<div
|
||||
className="h-3 w-3 rounded-full shrink-0"
|
||||
style={{ backgroundColor: project.color }}
|
||||
/>
|
||||
)}
|
||||
<CardTitle className="text-base">{project.name}</CardTitle>
|
||||
</div>
|
||||
<ExternalLink className="h-4 w-4 text-muted-foreground shrink-0" aria-hidden="true" />
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{project.description && (
|
||||
<p className="mb-3 text-sm text-muted-foreground line-clamp-2">{project.description}</p>
|
||||
)}
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<Badge variant="secondary" className={`text-xs ${statusColors[project.status] || ''}`}>
|
||||
{project.status}
|
||||
</Badge>
|
||||
{project.targetDate && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Due {new Date(project.targetDate).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>{project.completedCount}/{project.taskCount} tasks</span>
|
||||
<span>{project.progress}%</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" />
|
||||
</div>
|
||||
{project.tags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-1">
|
||||
{project.tags.map((tag) => (
|
||||
<span
|
||||
key={tag.id}
|
||||
className="inline-flex items-center rounded-full px-2 py-0.5 text-xs"
|
||||
style={{ backgroundColor: tag.color || '#e2e8f0', color: '#1e293b' }}
|
||||
>
|
||||
{tag.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
<div className="absolute right-2 top-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
className="rounded-md p-1 text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
|
||||
aria-label={`Options for ${project.name}`}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={(e) => { e.stopPropagation(); setEditProject(project); }}>
|
||||
<Pencil className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={(e) => { e.stopPropagation(); setArchiveProject(project); }}>
|
||||
<Archive className="mr-2 h-4 w-4" />
|
||||
Archive
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ProjectCreateDialog
|
||||
open={createOpen}
|
||||
onOpenChange={(o) => { setCreateOpen(o); if (!o) closeCreate(); }}
|
||||
domainId={domainId || ''}
|
||||
onCreated={fetchProjects}
|
||||
/>
|
||||
|
||||
{/* Global CreateItemDialog from useCreateDialogStore — opened by topbar 'New project' button */}
|
||||
<CreateItemDialog
|
||||
type="project"
|
||||
open={storeOpen}
|
||||
onOpenChange={(o) => { if (!o) closeCreate(); else openCreate('project'); }}
|
||||
onCreated={fetchProjects}
|
||||
/>
|
||||
|
||||
{editProject && (
|
||||
<ProjectEditDialog
|
||||
open={!!editProject}
|
||||
onOpenChange={(open) => { if (!open) setEditProject(null); }}
|
||||
project={editProject}
|
||||
domainId={domainId || ''}
|
||||
onUpdated={fetchProjects}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AlertDialog open={!!archiveProject} onOpenChange={(open) => { if (!open) setArchiveProject(null); }}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Archive Project</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to archive "{archiveProject?.name}"? It will be hidden from the active list.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
disabled={archiving}
|
||||
onClick={async () => {
|
||||
if (!archiveProject || !domainId) return;
|
||||
setArchiving(true);
|
||||
try {
|
||||
const res = await fetch(`/api/domains/${domainId}/projects/${archiveProject.id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: 'archived' }),
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to archive');
|
||||
toast.success('Project archived');
|
||||
setArchiveProject(null);
|
||||
fetchProjects();
|
||||
} catch {
|
||||
toast.error('Failed to archive project');
|
||||
} finally {
|
||||
setArchiving(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{archiving ? 'Archiving...' : 'Archive'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user