Add detail pages, property panels, and restyle list pages

New pages: AgentDetail, GoalDetail, IssueDetail, ProjectDetail, Inbox, MyIssues. New feature components: AgentProperties, GoalProperties, IssueProperties, ProjectProperties, GoalTree, NewIssueDialog. Add heartbeats API client. Restyle all list pages (Agents, Issues, Goals, Projects, Dashboard, Costs, Activity, Org) with EntityRow, FilterBar, and improved layouts. Add routing for detail views. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-17 09:57:06 -06:00
parent fad1bd27ce
commit f4339668f3
22 changed files with 1833 additions and 293 deletions
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -0,0 +1,105 @@
+import { useCallback, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { projectsApi } from "../api/projects";
+import { issuesApi } from "../api/issues";
+import { useApi } from "../hooks/useApi";
+import { usePanel } from "../context/PanelContext";
+import { useCompany } from "../context/CompanyContext";
+import { useBreadcrumbs } from "../context/BreadcrumbContext";
+import { ProjectProperties } from "../components/ProjectProperties";
+import { StatusBadge } from "../components/StatusBadge";
+import { EntityRow } from "../components/EntityRow";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { Issue } from "@paperclip/shared";
+
+export function ProjectDetail() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const { selectedCompanyId } = useCompany();
+  const { openPanel, closePanel } = usePanel();
+  const { setBreadcrumbs } = useBreadcrumbs();
+
+  const projectFetcher = useCallback(() => {
+    if (!projectId) return Promise.reject(new Error("No project ID"));
+    return projectsApi.get(projectId);
+  }, [projectId]);
+
+  const issuesFetcher = useCallback(() => {
+    if (!selectedCompanyId) return Promise.resolve([] as Issue[]);
+    return issuesApi.list(selectedCompanyId);
+  }, [selectedCompanyId]);
+
+  const { data: project, loading, error } = useApi(projectFetcher);
+  const { data: allIssues } = useApi(issuesFetcher);
+
+  const projectIssues = (allIssues ?? []).filter((i) => i.projectId === projectId);
+
+  useEffect(() => {
+    setBreadcrumbs([
+      { label: "Projects", href: "/projects" },
+      { label: project?.name ?? projectId ?? "Project" },
+    ]);
+  }, [setBreadcrumbs, project, projectId]);
+
+  useEffect(() => {
+    if (project) {
+      openPanel(<ProjectProperties project={project} />);
+    }
+    return () => closePanel();
+  }, [project]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (loading) return <p className="text-sm text-muted-foreground">Loading...</p>;
+  if (error) return <p className="text-sm text-destructive">{error.message}</p>;
+  if (!project) return null;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-bold">{project.name}</h2>
+        {project.description && (
+          <p className="text-sm text-muted-foreground mt-1">{project.description}</p>
+        )}
+      </div>
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="issues">Issues ({projectIssues.length})</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="mt-4">
+          <div className="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <span className="text-muted-foreground">Status</span>
+              <div className="mt-1">
+                <StatusBadge status={project.status} />
+              </div>
+            </div>
+            {project.targetDate && (
+              <div>
+                <span className="text-muted-foreground">Target Date</span>
+                <p>{project.targetDate}</p>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="issues" className="mt-4">
+          {projectIssues.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No issues in this project.</p>
+          ) : (
+            <div className="border border-border rounded-md">
+              {projectIssues.map((issue) => (
+                <EntityRow
+                  key={issue.id}
+                  identifier={issue.id.slice(0, 8)}
+                  title={issue.title}
+                  trailing={<StatusBadge status={issue.status} />}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}