Phase 3b: Case Detail view with workflow timeline

New dynamic route /cases/[caseNumber] wired to the FastAPI details endpoint, using Next 16's async params pattern with React's use() hook. TanStack Query handles 5s refetchInterval so the page self-updates during long-running processing without manual polling. New components: CaseHeader (breadcrumb + meta), WorkflowTimeline (5-phase RTL pipeline view), DocumentsPanel (categorized list). Tabs split overview/documents/actions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-11 16:06:27 +00:00
parent 51064f3a03
commit d0daa0efe8
5 changed files with 367 additions and 1 deletions
--- a/web-ui/src/components/cases/workflow-timeline.tsx
+++ b/web-ui/src/components/cases/workflow-timeline.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import type { CaseStatus } from "@/lib/api/cases";
+import { STATUS_LABELS } from "@/components/cases/status-badge";
+
+/*
+ * Vertical RTL workflow timeline showing the 13-status case pipeline.
+ * Groups the raw statuses into the 5 visual phases used across the app
+ * (intake → prep → thinking → writing → done) so the user sees
+ * "where am I in the process" rather than 13 micro-steps.
+ */
+
+type Phase = {
+  key: string;
+  label: string;
+  statuses: CaseStatus[];
+};
+
+const PHASES: Phase[] = [
+  { key: "intake",   label: "קליטה ועיבוד",   statuses: ["new", "uploading", "processing"] },
+  { key: "prep",     label: "הכנת תיק",        statuses: ["documents_ready", "outcome_set"] },
+  { key: "thinking", label: "ניתוח וכיוון",    statuses: ["brainstorming", "direction_approved"] },
+  { key: "writing",  label: "כתיבת טיוטה",     statuses: ["drafting", "qa_review", "drafted"] },
+  { key: "done",     label: "סגירה",           statuses: ["exported", "reviewed", "final"] },
+];
+
+function phaseIndexOf(status?: CaseStatus): number {
+  if (!status) return -1;
+  return PHASES.findIndex((p) => p.statuses.includes(status));
+}
+
+export function WorkflowTimeline({ status }: { status?: CaseStatus }) {
+  const currentIdx = phaseIndexOf(status);
+
+  return (
+    <ol className="relative space-y-4">
+      <div
+        className="absolute top-2 bottom-2 right-[11px] w-px bg-rule"
+        aria-hidden
+      />
+      {PHASES.map((phase, i) => {
+        const state =
+          currentIdx === -1 ? "pending"
+          : i < currentIdx ? "done"
+          : i === currentIdx ? "current"
+          : "pending";
+
+        const dotTone =
+          state === "done"    ? "bg-success border-success"
+          : state === "current" ? "bg-gold border-gold shadow-[0_0_0_4px_color-mix(in_oklab,var(--color-gold)_20%,transparent)]"
+          : "bg-surface border-rule";
+
+        const labelTone =
+          state === "done"    ? "text-ink-soft"
+          : state === "current" ? "text-navy font-semibold"
+          : "text-ink-muted";
+
+        return (
+          <li key={phase.key} className="relative flex items-start gap-3 ps-7">
+            <span
+              className={`absolute right-[5px] top-1 inline-block w-3 h-3 rounded-full border-2 ${dotTone}`}
+              aria-hidden
+            />
+            <div className="flex flex-col">
+              <span className={`text-sm ${labelTone}`}>{phase.label}</span>
+              {state === "current" && status && (
+                <span className="text-[0.72rem] text-gold-deep mt-0.5">
+                  {STATUS_LABELS[status]}
+                </span>
+              )}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}