From 004d075cad53115bef032ab102edab8b516d49a3 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Sun, 21 Jun 2026 22:11:04 +0200
Subject: [PATCH] feat(frontend): refactor EngagementDetailPage to 3-tab layout

Tabs: Schedule (default) / Description / Simulations, wired via
useHashTab('schedule'). Count pill on Simulations tab. BackLink
replaces hand-rolled Link.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/EngagementDetailPage.tsx | 33 ++++++++++++++++-----
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/EngagementDetailPage.tsx b/frontend/src/pages/EngagementDetailPage.tsx
index 97b2741..589c6f3 100644
--- a/frontend/src/pages/EngagementDetailPage.tsx
+++ b/frontend/src/pages/EngagementDetailPage.tsx
@@ -1,12 +1,17 @@
-import { Link, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { extractApiError } from '@/api/client';
 import { useAuth } from '@/hooks/useAuth';
 import { useEngagement } from '@/hooks/useEngagements';
+import { useHashTab } from '@/hooks/useHashTab';
+import { useEngagementSimulations } from '@/hooks/useSimulations';
 import { LoadingState } from '@/components/LoadingState';
 import { ErrorState } from '@/components/ErrorState';
 import { StatusBadge } from '@/components/StatusBadge';
 import { SimulationList } from '@/components/SimulationList';
 import { ExportEngagementButton } from '@/components/ExportEngagementButton';
+import { BackLink } from '@/components/BackLink';
+import { Tabs } from '@/components/Tabs';
+import { Link } from 'react-router-dom';
 
 export function EngagementDetailPage(): JSX.Element {
   const { id } = useParams<{ id: string }>();
@@ -14,6 +19,9 @@ export function EngagementDetailPage(): JSX.Element {
   const { canEditEngagements } = useAuth();
 
   const detail = useEngagement(numericId);
+  const simsQuery = useEngagementSimulations(numericId);
+
+  const [activeTab, setActiveTab] = useHashTab('schedule');
 
   if (detail.isLoading) return <LoadingState label="Loading engagement…" />;
   if (detail.isError) {
@@ -27,14 +35,19 @@ export function EngagementDetailPage(): JSX.Element {
   if (!detail.data) return <ErrorState message="Engagement not found" />;
 
   const eng = detail.data;
+  const simCount = simsQuery.data?.length;
+
+  const tabs = [
+    { id: 'schedule', label: 'Schedule' },
+    { id: 'description', label: 'Description' },
+    { id: 'simulations', label: 'Simulations', count: simCount },
+  ];
 
   return (
     <div className="flex flex-col gap-xl">
       <header className="flex items-start justify-between gap-md">
         <div className="flex flex-col gap-sm">
-          <Link to="/engagements" className="btn-text-link text-[14px]">
-            ← Back to engagements
-          </Link>
+          <BackLink to="/engagements">Back to engagements</BackLink>
           <h1 className="text-[32px] font-medium leading-none">{eng.name}</h1>
           <div className="flex items-center gap-md">
             <StatusBadge status={eng.status} />
@@ -53,7 +66,9 @@ export function EngagementDetailPage(): JSX.Element {
         ) : null}
       </header>
 
-      <section className="grid grid-cols-1 md:grid-cols-2 gap-md">
+      <Tabs items={tabs} activeId={activeTab} onChange={setActiveTab} />
+
+      {activeTab === 'schedule' && (
         <div className="card-product">
           <h2 className="text-[20px] font-medium mb-md">Schedule</h2>
           <dl className="grid grid-cols-2 gap-md text-[14px]">
@@ -67,18 +82,20 @@ export function EngagementDetailPage(): JSX.Element {
             <dd className="text-ink font-mono">{eng.created_at}</dd>
           </dl>
         </div>
+      )}
 
+      {activeTab === 'description' && (
         <div className="card-product">
           <h2 className="text-[20px] font-medium mb-md">Description</h2>
           <p className="text-[16px] text-charcoal whitespace-pre-line">
             {eng.description?.trim() ? eng.description : 'No description provided.'}
           </p>
         </div>
-      </section>
+      )}
 
-      <section>
+      {activeTab === 'simulations' && (
         <SimulationList engagementId={eng.id} />
-      </section>
+      )}
     </div>
   );
 }