mbatchelder
8f55626e03
- Reorganize into apps/, packages/, docs/, e2e/, pocketbase/ directories - Add Dockerfiles for web, worker, and PocketBase services - Add docker-compose.yml for local orchestration - Add turbo.json for monorepo task management - Add Playwright e2e test infrastructure - Add PocketBase backend with migrations - Remove Vite/Next.js/ESLint/PostCSS config files - Update package.json with workspace dependencies - Add .env.example and .dockerignore
394 lines
14 KiB
TypeScript
394 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import { ArrowLeft, Calendar, CheckCircle2, Circle, Flag } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import Link from 'next/link';
|
|
|
|
interface Project {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
status: 'active' | 'paused' | 'archived';
|
|
domain: string;
|
|
progress: number;
|
|
task_count: number;
|
|
completed_count: number;
|
|
due_date?: string;
|
|
}
|
|
|
|
interface Task {
|
|
id: string;
|
|
title: string;
|
|
status: 'todo' | 'in_progress' | 'done';
|
|
priority: 'low' | 'medium' | 'high' | 'urgent';
|
|
due_date?: string;
|
|
}
|
|
|
|
interface Milestone {
|
|
id: string;
|
|
name: string;
|
|
description?: string;
|
|
due_date?: string;
|
|
status: 'planned' | 'in_progress' | 'completed';
|
|
completed_tasks: number;
|
|
total_tasks: number;
|
|
}
|
|
|
|
export default function ProjectDetailPage() {
|
|
const params = useParams();
|
|
const projectId = params.id as string;
|
|
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [milestones, setMilestones] = useState<Milestone[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (projectId) {
|
|
fetchProject();
|
|
fetchTasks();
|
|
fetchMilestones();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [projectId]);
|
|
|
|
async function fetchProject() {
|
|
try {
|
|
const response = await fetch(`/api/projects/${projectId}`);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setProject(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch project:', error);
|
|
}
|
|
}
|
|
|
|
async function fetchTasks() {
|
|
try {
|
|
const response = await fetch(
|
|
`/api/tasks?filter=project_id%3D%22${projectId}%22&sort=-created`
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setTasks(data.items || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch tasks:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function fetchMilestones() {
|
|
try {
|
|
const response = await fetch(
|
|
`/api/milestones?filter=project_id%3D%22${projectId}%22&sort=due_date`
|
|
);
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setMilestones(data.items || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch milestones:', error);
|
|
}
|
|
}
|
|
|
|
async function toggleTaskComplete(taskId: string, currentStatus: string) {
|
|
const newStatus = currentStatus === 'done' ? 'todo' : 'done';
|
|
try {
|
|
await fetch(`/api/tasks/${taskId}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ status: newStatus }),
|
|
});
|
|
fetchTasks();
|
|
fetchProject();
|
|
} catch (error) {
|
|
console.error('Failed to toggle task:', error);
|
|
}
|
|
}
|
|
|
|
if (loading || !project) {
|
|
return <p className="text-muted-foreground">Loading project...</p>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Back button */}
|
|
<Link href="/projects">
|
|
<Button variant="ghost" size="sm" className="mb-4">
|
|
<ArrowLeft className="mr-2 h-4 w-4" aria-hidden="true" />
|
|
Back to projects
|
|
</Button>
|
|
</Link>
|
|
|
|
{/* Project header */}
|
|
<div className="mb-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold">{project.name}</h1>
|
|
{project.description && (
|
|
<p className="mt-1 text-muted-foreground">{project.description}</p>
|
|
)}
|
|
</div>
|
|
<Badge
|
|
variant={
|
|
project.status === 'active'
|
|
? 'default'
|
|
: project.status === 'paused'
|
|
? 'secondary'
|
|
: 'outline'
|
|
}
|
|
>
|
|
{project.status}
|
|
</Badge>
|
|
</div>
|
|
|
|
{/* Project stats */}
|
|
<div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-3">
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Progress</p>
|
|
<p className="text-2xl font-bold">{project.progress}%</p>
|
|
</div>
|
|
<CheckCircle2 className="h-8 w-8 text-green-600" aria-hidden="true" />
|
|
</div>
|
|
<Progress value={project.progress} className="mt-2 h-2" />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Tasks</p>
|
|
<p className="text-2xl font-bold">
|
|
{project.completed_count} / {project.task_count}
|
|
</p>
|
|
</div>
|
|
<Circle className="h-8 w-8 text-blue-600" aria-hidden="true" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Due Date</p>
|
|
<p className="text-2xl font-bold">
|
|
{project.due_date
|
|
? new Date(project.due_date).toLocaleDateString()
|
|
: 'No date'}
|
|
</p>
|
|
</div>
|
|
<Calendar className="h-8 w-8 text-orange-600" aria-hidden="true" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs defaultValue="tasks">
|
|
<TabsList>
|
|
<TabsTrigger value="tasks">Tasks ({tasks.length})</TabsTrigger>
|
|
<TabsTrigger value="milestones">
|
|
Milestones ({milestones.length})
|
|
</TabsTrigger>
|
|
<TabsTrigger value="habits">Habits</TabsTrigger>
|
|
<TabsTrigger value="notes">Notes</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="tasks" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Project Tasks</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{tasks.length === 0 ? (
|
|
<p className="py-8 text-center text-muted-foreground">
|
|
No tasks yet
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{tasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="flex items-center gap-3 rounded-lg border p-3"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-11 w-11 shrink-0"
|
|
onClick={() =>
|
|
toggleTaskComplete(task.id, task.status)
|
|
}
|
|
aria-label={`Mark "${task.title}" as ${task.status === 'done' ? 'incomplete' : 'complete'}`}
|
|
>
|
|
{task.status === 'done' ? (
|
|
<CheckCircle2 className="h-5 w-5 text-green-600" />
|
|
) : (
|
|
<Circle className="h-5 w-5" />
|
|
)}
|
|
</Button>
|
|
<div className="flex-1">
|
|
<p
|
|
className={`text-sm font-medium ${
|
|
task.status === 'done'
|
|
? 'text-muted-foreground line-through'
|
|
: ''
|
|
}`}
|
|
>
|
|
{task.title}
|
|
</p>
|
|
</div>
|
|
<Badge
|
|
variant={
|
|
task.priority === 'urgent'
|
|
? 'destructive'
|
|
: task.priority === 'high'
|
|
? 'default'
|
|
: 'secondary'
|
|
}
|
|
>
|
|
{task.priority}
|
|
</Badge>
|
|
{task.due_date && (
|
|
<span className="text-xs text-muted-foreground">
|
|
{new Date(task.due_date).toLocaleDateString()}
|
|
</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="milestones" className="mt-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Milestones</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{milestones.length === 0 ? (
|
|
<p className="py-8 text-center text-muted-foreground">
|
|
No milestones yet
|
|
</p>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{milestones.map((milestone, index) => (
|
|
<div key={milestone.id} className="relative flex gap-4">
|
|
{/* Timeline line */}
|
|
{index < milestones.length - 1 && (
|
|
<div className="absolute left-5 top-12 h-full w-0.5 bg-border" />
|
|
)}
|
|
|
|
{/* Milestone marker */}
|
|
<div className="relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-2 bg-background">
|
|
<Flag
|
|
className={`h-5 w-5 ${
|
|
milestone.status === 'completed'
|
|
? 'text-green-600'
|
|
: milestone.status === 'in_progress'
|
|
? 'text-blue-600'
|
|
: 'text-muted-foreground'
|
|
}`}
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
{/* Milestone content */}
|
|
<div className="flex-1 pb-6">
|
|
<div className="flex items-start justify-between">
|
|
<div>
|
|
<h2 className="font-semibold">
|
|
{milestone.name}
|
|
</h2>
|
|
{milestone.description && (
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{milestone.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Badge
|
|
variant={
|
|
milestone.status === 'completed'
|
|
? 'default'
|
|
: milestone.status === 'in_progress'
|
|
? 'secondary'
|
|
: 'outline'
|
|
}
|
|
>
|
|
{milestone.status}
|
|
</Badge>
|
|
</div>
|
|
{milestone.due_date && (
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|
Due:{' '}
|
|
{new Date(
|
|
milestone.due_date
|
|
).toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
<div className="mt-2">
|
|
<div className="mb-1 flex items-center justify-between text-xs">
|
|
<span className="text-muted-foreground">
|
|
Tasks
|
|
</span>
|
|
<span>
|
|
{milestone.completed_tasks} /{' '}
|
|
{milestone.total_tasks}
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={
|
|
milestone.total_tasks > 0
|
|
? (milestone.completed_tasks /
|
|
milestone.total_tasks) *
|
|
100
|
|
: 0
|
|
}
|
|
className="h-1.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="habits" className="mt-6">
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
Habits linked to this project will appear here
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="notes" className="mt-6">
|
|
<Card>
|
|
<CardContent className="py-8 text-center text-muted-foreground">
|
|
Notes linked to this project will appear here
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
}
|