jettypod 4.4.118 → 4.4.121

package/apps/dashboard/app/work/[id]/page.tsx

@@ -1,121 +1,138 @@
-import { getWorkItem, getChildWorkItems, getDecisionsForWorkItem } from '@/lib/db';
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
 import { WorkItemTree } from '@/components/WorkItemTree';
 import { WorkItemHeader } from '@/components/WorkItemHeader';
 import { EditableDetailTitle } from '@/components/EditableDetailTitle';
 import { EditableDetailDescription } from '@/components/EditableDetailDescription';
-import Link from 'next/link';
-import { notFound } from 'next/navigation';
-
-const typeLabels: Record<string, { icon: string; label: string }> = {
-  epic: { icon: '🎯', label: 'Epic' },
-  feature: { icon: '✨', label: 'Feature' },
-  chore: { icon: '🔧', label: 'Chore' },
-  bug: { icon: '🐛', label: 'Bug' },
-};
-
-const statusLabels: Record<string, { label: string; color: string }> = {
-  backlog: { label: 'Backlog', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
-  todo: { label: 'Todo', color: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300' },
-  in_progress: { label: 'In Progress', color: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300' },
-  done: { label: 'Done', color: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' },
-  cancelled: { label: 'Cancelled', color: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300' },
-};
-
-const modeLabels: Record<string, { label: string; color: string }> = {
-  speed: { label: 'Speed Mode', color: 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200' },
-  stable: { label: 'Stable Mode', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200' },
-  production: { label: 'Production Mode', color: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' },
-};
-
-interface PageProps {
-  params: Promise<{ id: string }>;
-}
-
-export default async function WorkItemPage({ params }: PageProps) {
-  const { id } = await params;
-  const workItemId = parseInt(id, 10);
-
-  if (isNaN(workItemId)) {
-    notFound();
-  }
-
-  const item = getWorkItem(workItemId);
-
-  if (!item) {
-    notFound();
+import { TYPE_LABELS, STATUS_LABELS, MODE_LABELS_FULL } from '@/lib/constants';
+import { TypeIcon } from '@/components/TypeIcon';
+import { DetailReviewActions } from '@/components/DetailReviewActions';
+import { dataBridge, prefetch } from '@/lib/data-bridge';
+import type { WorkItemData, DecisionData } from '@/lib/data-bridge';
+
+export default function WorkItemPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [item, setItem] = useState<WorkItemData | null>(null);
+  const [children, setChildren] = useState<WorkItemData[]>([]);
+  const [decisions, setDecisions] = useState<DecisionData[]>([]);
+  const [parentItem, setParentItem] = useState<WorkItemData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notFound, setNotFound] = useState(false);
+
+  useEffect(() => {
+    async function loadData() {
+      const workItemId = parseInt(id || '', 10);
+      if (isNaN(workItemId)) {
+        setNotFound(true);
+        setLoading(false);
+        return;
+      }
+
+      try {
+        // Uses prefetch cache — if the user hovered the kanban card, data is
+        // already loaded. Otherwise fetches fresh (same parallel IPC calls).
+        const { item: workItem, children: childItems, decisions: decisionItems } =
+          await prefetch.workItem(workItemId);
+
+        if (!workItem) {
+          setNotFound(true);
+          setLoading(false);
+          return;
+        }
+
+        // Parent fetch depends on the work item's parent_id, but we can
+        // overlap it with setState calls since React batches them.
+        const parent = workItem.parent_id
+          ? await dataBridge.getWorkItem(workItem.parent_id)
+          : null;
+
+        setItem(workItem);
+        setChildren(childItems);
+        setDecisions(decisionItems);
+        setParentItem(parent);
+      } catch (err) {
+        console.error('Failed to load work item:', err);
+        setNotFound(true);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData();
+  }, [id]);
+
+  const handleTitleChange = useCallback((newTitle: string) => {
+    setItem(prev => prev ? { ...prev, title: newTitle } : prev);
+  }, []);
+
+  const handleDescriptionChange = useCallback((newDescription: string) => {
+    setItem(prev => prev ? { ...prev, description: newDescription } : prev);
+  }, []);
+
+  if (loading) return null;
+
+  if (notFound) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">Not Found</h1>
+          <p className="text-zinc-500 mb-4">Work item not found.</p>
+          <Link to="/" viewTransition className="text-[#5a7d7f] hover:underline">← Back to Dashboard</Link>
+        </div>
+      </div>
+    );
   }
 
-  const children = getChildWorkItems(workItemId);
-  const decisions = getDecisionsForWorkItem(workItemId);
-  const parentItem = item.parent_id ? getWorkItem(item.parent_id) : null;
+  if (!item) return null;
 
-  const typeInfo = typeLabels[item.type] || { icon: '📄', label: 'Item' };
-  const statusInfo = statusLabels[item.status] || statusLabels.backlog;
+  const typeInfo = TYPE_LABELS[item.type] || { icon: '📄', label: 'Item' };
+  const statusInfo = STATUS_LABELS[item.status] || STATUS_LABELS.backlog;
 
   return (
-    <div className="min-h-screen bg-zinc-50 dark:bg-zinc-950">
-      {/* Header */}
+    <div className="flex-1 overflow-y-auto bg-zinc-50 dark:bg-zinc-950">
       <header className="border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
-        <div className="max-w-4xl mx-auto px-4 py-4">
-          <Link href="/" className="text-blue-600 dark:text-blue-400 hover:underline text-sm">
-            ← Back to Dashboard
-          </Link>
+        <div className="max-w-4xl mx-auto px-6 py-6">
+          <Link to="/" viewTransition className="text-[#5a7d7f] dark:text-[#a3bfc0] hover:underline text-base">← Back to Dashboard</Link>
         </div>
       </header>
 
       <main className="max-w-4xl mx-auto px-4 py-6">
-        {/* Breadcrumb */}
         {parentItem && (
-          <div className="mb-4 text-sm text-zinc-500">
-            <Link href={`/work/${parentItem.id}`} className="hover:underline">
-              {typeLabels[parentItem.type]?.icon} #{parentItem.id} {parentItem.title}
+          <div className="mb-6 text-base text-zinc-500">
+            <Link to={`/work/${parentItem.id}`} viewTransition className="inline-flex items-center gap-1.5 hover:underline">
+              <TypeIcon type={parentItem.type} className="w-6 h-6" /> #{parentItem.id} {parentItem.title}
             </Link>
             <span className="mx-2">→</span>
           </div>
         )}
 
-        {/* Main card */}
         <div className="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
-          {/* Header */}
-          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-            <div className="flex items-start justify-between gap-4">
+          <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
+            <div className="flex items-start justify-between gap-6">
               <div className="flex-1 min-w-0">
-                <WorkItemHeader
-                  id={item.id}
-                  title={item.title}
-                  type={item.type}
-                  typeIcon={typeInfo.icon}
-                  typeLabel={typeInfo.label}
-                />
-                <EditableDetailTitle title={item.title} itemId={item.id} />
+                <WorkItemHeader id={item.id} title={item.title} type={item.type} typeLabel={typeInfo.label} />
+                <EditableDetailTitle title={item.title} itemId={item.id} onTitleChange={handleTitleChange} />
               </div>
               <div className="flex items-center gap-2">
-                {item.mode && modeLabels[item.mode] && (
-                  <span className={`text-sm px-2 py-1 rounded ${modeLabels[item.mode].color}`}>
-                    {modeLabels[item.mode].label}
+                {item.mode && MODE_LABELS_FULL[item.mode] && (
+                  <span className={`text-base px-3 py-1.5 rounded ${MODE_LABELS_FULL[item.mode].color}`}>
+                    {MODE_LABELS_FULL[item.mode].label}
                   </span>
                 )}
-                <span className={`text-sm px-2 py-1 rounded ${statusInfo.color}`}>
-                  {statusInfo.label}
-                </span>
+                <span className={`text-base px-3 py-1.5 rounded ${statusInfo.color}`}>{statusInfo.label}</span>
+                {!!item.ready_for_review && <DetailReviewActions workItemId={item.id} />}
               </div>
             </div>
           </div>
 
-          {/* Description */}
-          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-2">
-              Description
-            </h2>
-            <EditableDetailDescription description={item.description} itemId={item.id} />
+          <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Description</h2>
+            <EditableDetailDescription description={item.description} itemId={item.id} onDescriptionChange={handleDescriptionChange} />
           </div>
 
-          {/* Metadata */}
-          <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-            <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-              Details
-            </h2>
-            <dl className="grid grid-cols-2 gap-4 text-sm">
+          <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">Details</h2>
+            <dl className="grid grid-cols-2 gap-6 text-base">
               {item.branch_name && (
                 <div>
                   <dt className="text-zinc-500">Branch</dt>
@@ -130,59 +147,41 @@ export default async function WorkItemPage({ params }: PageProps) {
               )}
               <div>
                 <dt className="text-zinc-500">Created</dt>
-                <dd className="text-zinc-900 dark:text-zinc-100">
-                  {new Date(item.created_at).toLocaleDateString()}
-                </dd>
+                <dd className="text-zinc-900 dark:text-zinc-100">{new Date(item.created_at).toLocaleDateString()}</dd>
               </div>
               {item.completed_at && (
                 <div>
                   <dt className="text-zinc-500">Completed</dt>
-                  <dd className="text-zinc-900 dark:text-zinc-100">
-                    {new Date(item.completed_at).toLocaleDateString()}
-                  </dd>
+                  <dd className="text-zinc-900 dark:text-zinc-100">{new Date(item.completed_at).toLocaleDateString()}</dd>
                 </div>
               )}
             </dl>
           </div>
 
-          {/* Decisions */}
           {decisions.length > 0 && (
-            <div className="px-6 py-4 border-b border-zinc-200 dark:border-zinc-800">
-              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
-                Decisions
-              </h2>
-              <div className="space-y-4">
+            <div className="px-8 py-6 border-b border-zinc-200 dark:border-zinc-800">
+              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-3">Decisions</h2>
+              <div className="space-y-6">
                 {decisions.map((decision) => (
-                  <div key={decision.id} className="bg-zinc-50 dark:bg-zinc-800 rounded-lg p-4">
-                    <div className="flex items-center gap-2 mb-2">
-                      <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
-                        {decision.aspect}
-                      </span>
-                      <span className="text-xs text-zinc-500">
-                        {new Date(decision.created_at).toLocaleDateString()}
-                      </span>
+                  <div key={decision.id} className="bg-zinc-50 dark:bg-zinc-800 rounded-lg p-6">
+                    <div className="flex items-center gap-3 mb-3">
+                      <span className="text-base font-medium text-zinc-900 dark:text-zinc-100">{decision.aspect}</span>
+                      <span className="text-base text-zinc-500">{new Date(decision.created_at).toLocaleDateString()}</span>
                     </div>
-                    <p className="text-zinc-700 dark:text-zinc-300 font-medium">
-                      {decision.decision}
-                    </p>
-                    {decision.rationale && (
-                      <p className="text-sm text-zinc-500 mt-1">
-                        {decision.rationale}
-                      </p>
-                    )}
+                    <p className="text-zinc-700 dark:text-zinc-300 font-medium">{decision.decision}</p>
+                    {decision.rationale && <p className="text-base text-zinc-500 mt-1.5">{decision.rationale}</p>}
                   </div>
                 ))}
               </div>
             </div>
           )}
 
-          {/* Children */}
           {children.length > 0 && (
-            <div className="px-6 py-4">
-              <h2 className="text-sm font-semibold text-zinc-500 uppercase tracking-wide mb-3">
+            <div className="px-8 py-6">
+              <h2 className="text-base font-semibold text-zinc-500 uppercase tracking-wide mb-4">
                 {item.type === 'epic' ? 'Features & Chores' : 'Child Items'} ({children.length})
               </h2>
-              <WorkItemTree items={children.map(c => ({ ...c, children: [] }))} />
+              <WorkItemTree items={children.map(c => ({ ...c, type: c.type, children: [], epic_id: c.parent_id, rejection_round: c.rejection_round ?? null, rejection_history: c.rejection_history ?? null }))} />
             </div>
           )}
         </div>