345 lines
11 KiB
TypeScript
345 lines
11 KiB
TypeScript
import { useEffect, useState, type ReactElement } from 'react';
|
|
import { useNavigate, useParams } from 'react-router-dom';
|
|
import { MissionTimeline } from '@/components/projects/mission-timeline';
|
|
import { PrdViewer } from '@/components/projects/prd-viewer';
|
|
import { TaskDetailModal } from '@/components/tasks/task-detail-modal';
|
|
import { TaskListView } from '@/components/tasks/task-list-view';
|
|
import { TaskStatusSummary } from '@/components/tasks/task-status-summary';
|
|
import { api } from '@/lib/api';
|
|
import { cn } from '@/lib/cn';
|
|
import type { Mission, Project, Task, TaskStatus } from '@/lib/types';
|
|
import { getErrorMessage } from './page-errors';
|
|
|
|
type Tab = 'overview' | 'tasks' | 'missions' | 'prd';
|
|
|
|
const projectStatusColors: Record<string, string> = {
|
|
active: 'bg-success/20 text-success',
|
|
paused: 'bg-warning/20 text-warning',
|
|
completed: 'bg-blue-600/20 text-blue-400',
|
|
archived: 'bg-gray-600/20 text-gray-400',
|
|
};
|
|
|
|
const taskStatusColors: Record<string, string> = {
|
|
'not-started': 'bg-gray-600/20 text-gray-300',
|
|
'in-progress': 'bg-blue-600/20 text-blue-400',
|
|
blocked: 'bg-error/20 text-error',
|
|
done: 'bg-success/20 text-success',
|
|
cancelled: 'bg-gray-600/20 text-gray-500',
|
|
};
|
|
|
|
interface TabButtonProps {
|
|
id: Tab;
|
|
label: string;
|
|
activeTab: Tab;
|
|
onClick: (tab: Tab) => void;
|
|
}
|
|
|
|
function TabButton({ id, label, activeTab, onClick }: TabButtonProps): ReactElement {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onClick(id)}
|
|
className={cn(
|
|
'border-b-2 px-4 py-2 text-sm transition-colors',
|
|
activeTab === id
|
|
? 'border-text-primary text-text-primary'
|
|
: 'border-transparent text-text-muted hover:text-text-secondary',
|
|
)}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
export function ProjectDetailPage(): ReactElement {
|
|
const { id = '' } = useParams();
|
|
const navigate = useNavigate();
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [missions, setMissions] = useState<Mission[]>([]);
|
|
const [tasks, setTasks] = useState<Task[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [activeTab, setActiveTab] = useState<Tab>('overview');
|
|
const [taskFilter, setTaskFilter] = useState<TaskStatus | 'all'>('all');
|
|
const [selectedTask, setSelectedTask] = useState<Task | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!id) {
|
|
setError('Project id is missing.');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
void Promise.all([
|
|
api<Project>('/api/projects/' + id),
|
|
api<Mission[]>('/api/missions').catch(() => [] as Mission[]),
|
|
api<Task[]>('/api/tasks?projectId=' + id).catch(() => [] as Task[]),
|
|
])
|
|
.then(([loadedProject, allMissions, loadedTasks]) => {
|
|
if (cancelled) return;
|
|
setProject(loadedProject);
|
|
setMissions(allMissions.filter((mission) => mission.projectId === id));
|
|
setTasks(loadedTasks);
|
|
})
|
|
.catch((caught: unknown) => {
|
|
if (cancelled) return;
|
|
setError(getErrorMessage(caught, 'Failed to load project.'));
|
|
})
|
|
.finally(() => {
|
|
if (cancelled) return;
|
|
setLoading(false);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [id]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
|
|
<header className="mb-6 border-b px-1 pb-3">
|
|
<h1 className="text-2xl font-semibold">Project</h1>
|
|
</header>
|
|
<p className="py-16 text-center text-sm text-text-muted">Loading project...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error || !project) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
|
|
<header className="mb-6 border-b px-1 pb-3">
|
|
<h1 className="text-2xl font-semibold">Project</h1>
|
|
</header>
|
|
<div role="alert" className="rounded-lg border border-error/40 px-4 py-3 text-sm">
|
|
{error ?? 'Project not found.'}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate('/projects')}
|
|
className="mt-4 w-fit text-sm underline"
|
|
>
|
|
Back to projects
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const filteredTasks =
|
|
taskFilter === 'all' ? tasks : tasks.filter((task) => task.status === taskFilter);
|
|
const prdContent = getPrdContent(project);
|
|
const tabs: Array<{ id: Tab; label: string }> = [
|
|
{ id: 'overview', label: 'Overview' },
|
|
{ id: 'tasks', label: `Tasks (${tasks.length})` },
|
|
{ id: 'missions', label: `Missions (${missions.length})` },
|
|
...(prdContent ? [{ id: 'prd' as const, label: 'PRD' }] : []),
|
|
];
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col px-4 py-6 sm:px-6">
|
|
<header className="mb-6 border-b px-1 pb-3">
|
|
<nav className="mb-4 flex items-center gap-2 text-sm text-text-muted">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate('/projects')}
|
|
className="hover:text-text-secondary"
|
|
>
|
|
Projects
|
|
</button>
|
|
<span>/</span>
|
|
<span className="text-text-primary">{project.name}</span>
|
|
</nav>
|
|
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-2xl font-semibold text-text-primary">{project.name}</h1>
|
|
<span
|
|
className={cn(
|
|
'rounded-full px-2 py-0.5 text-xs',
|
|
projectStatusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
|
|
)}
|
|
>
|
|
{project.status}
|
|
</span>
|
|
</div>
|
|
{project.description ? (
|
|
<p className="mt-1 text-sm text-text-muted">{project.description}</p>
|
|
) : null}
|
|
<p className="mt-2 text-xs text-text-muted">
|
|
Created {new Date(project.createdAt).toLocaleDateString()} · Updated{' '}
|
|
{new Date(project.updatedAt).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
<StatCard label="Tasks" value={String(tasks.length)} />
|
|
<StatCard
|
|
label="Done"
|
|
value={String(tasks.filter((task) => task.status === 'done').length)}
|
|
valueClass="text-success"
|
|
/>
|
|
<StatCard
|
|
label="In Progress"
|
|
value={String(tasks.filter((task) => task.status === 'in-progress').length)}
|
|
valueClass="text-blue-400"
|
|
/>
|
|
<StatCard
|
|
label="Blocked"
|
|
value={String(tasks.filter((task) => task.status === 'blocked').length)}
|
|
valueClass={tasks.some((task) => task.status === 'blocked') ? 'text-error' : undefined}
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-6 flex gap-0 border-b border-surface-border">
|
|
{tabs.map((tab) => (
|
|
<TabButton
|
|
key={tab.id}
|
|
id={tab.id}
|
|
label={tab.label}
|
|
activeTab={activeTab}
|
|
onClick={setActiveTab}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{activeTab === 'overview' ? (
|
|
<OverviewTab project={project} missions={missions} tasks={tasks} />
|
|
) : null}
|
|
|
|
{activeTab === 'tasks' ? (
|
|
<div>
|
|
<div className="mb-4">
|
|
<TaskStatusSummary
|
|
tasks={tasks}
|
|
activeFilter={taskFilter}
|
|
onFilterChange={setTaskFilter}
|
|
/>
|
|
</div>
|
|
<TaskListView tasks={filteredTasks} onTaskClick={setSelectedTask} />
|
|
</div>
|
|
) : null}
|
|
|
|
{activeTab === 'missions' ? <MissionTimeline missions={missions} /> : null}
|
|
|
|
{activeTab === 'prd' && prdContent ? (
|
|
<div className="rounded-lg border border-surface-border bg-surface-card p-6">
|
|
<PrdViewer content={prdContent} />
|
|
</div>
|
|
) : null}
|
|
|
|
{selectedTask ? (
|
|
<TaskDetailModal task={selectedTask} onClose={() => setSelectedTask(null)} />
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function OverviewTab({
|
|
project,
|
|
missions,
|
|
tasks,
|
|
}: {
|
|
project: Project;
|
|
missions: Mission[];
|
|
tasks: Task[];
|
|
}): ReactElement {
|
|
const recentTasks = [...tasks]
|
|
.sort((left, right) => new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime())
|
|
.slice(0, 5);
|
|
|
|
return (
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<section>
|
|
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Recent Tasks</h2>
|
|
{recentTasks.length === 0 ? (
|
|
<div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
|
|
<p className="text-sm text-text-muted">No tasks yet</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{recentTasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="flex items-center justify-between gap-2 rounded-lg border border-surface-border bg-surface-card px-3 py-2"
|
|
>
|
|
<span className="truncate text-sm text-text-primary">{task.title}</span>
|
|
<span
|
|
className={cn(
|
|
'shrink-0 rounded-full px-2 py-0.5 text-xs',
|
|
taskStatusColors[task.status] ?? 'bg-gray-600/20 text-gray-400',
|
|
)}
|
|
>
|
|
{task.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Missions</h2>
|
|
{missions.length === 0 ? (
|
|
<div className="rounded-lg border border-surface-border bg-surface-card p-4 text-center">
|
|
<p className="text-sm text-text-muted">No missions yet</p>
|
|
</div>
|
|
) : (
|
|
<MissionTimeline missions={missions.slice(0, 4)} />
|
|
)}
|
|
</section>
|
|
|
|
{project.metadata && Object.keys(project.metadata).length > 0 ? (
|
|
<section className="lg:col-span-2">
|
|
<h2 className="mb-3 text-sm font-semibold text-text-secondary">Project Metadata</h2>
|
|
<div className="rounded-lg border border-surface-border bg-surface-card p-4">
|
|
<pre className="overflow-x-auto text-xs text-text-muted">
|
|
{JSON.stringify(project.metadata, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</section>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatCard({
|
|
label,
|
|
value,
|
|
valueClass,
|
|
}: {
|
|
label: string;
|
|
value: string;
|
|
valueClass?: string;
|
|
}): ReactElement {
|
|
return (
|
|
<div className="rounded-lg border border-surface-border bg-surface-card p-3">
|
|
<p className="text-xs text-text-muted">{label}</p>
|
|
<p className={cn('mt-1 text-lg font-semibold', valueClass ?? 'text-text-primary')}>{value}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function getPrdContent(project: Project): string | null {
|
|
if (!project.metadata) return null;
|
|
|
|
const prd = project.metadata['prd'];
|
|
if (typeof prd === 'string' && prd.trim().length > 0) {
|
|
return prd;
|
|
}
|
|
|
|
const prdContent = project.metadata['prdContent'];
|
|
if (typeof prdContent === 'string' && prdContent.trim().length > 0) {
|
|
return prdContent;
|
|
}
|
|
|
|
return null;
|
|
}
|