knacky/mimic
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(frontend): merge Schedule tab into Description on EngagementDetailPage

Browse Source 
Reduces from 3 tabs (Schedule / Description / Simulations) to 2
(Description / Simulations). Schedule content (start/end/status/created_at
+ Edit button) moved into a header block at the top of the Description
panel, separated from description text by a hairline <hr>. Default tab
changed from 'schedule' to 'description'.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Knacky
2026-06-21 23:16:00 +02:00
parent 10d4293f44
commit 3cdfba636e
1 changed files with 24 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/pages/EngagementDetailPage.tsx
View File

@@ -1,4 +1,4 @@
import { useParams } from 'react-router-dom';
import { useParams, Link } from 'react-router-dom';
import { extractApiError } from '@/api/client';
import { useAuth } from '@/hooks/useAuth';
import { useEngagement } from '@/hooks/useEngagements';
@@ -11,9 +11,8 @@ 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';
type TabId = 'schedule' | 'description' | 'simulations';
type TabId = 'description' | 'simulations';
export function EngagementDetailPage(): JSX.Element {
const { id } = useParams<{ id: string }>();
@@ -23,7 +22,7 @@ export function EngagementDetailPage(): JSX.Element {
const detail = useEngagement(numericId);
const simsQuery = useEngagementSimulations(numericId);
const [activeTabRaw, setActiveTab] = useHashTab('schedule');
const [activeTabRaw, setActiveTab] = useHashTab('description');
const activeTab = activeTabRaw as TabId;
if (detail.isLoading) return <LoadingState label="Loading engagement…" />;
@@ -41,7 +40,6 @@ export function EngagementDetailPage(): JSX.Element {
const simCount = simsQuery.data?.length;
const tabs = [
{ id: 'schedule', label: 'Schedule' },
{ id: 'description', label: 'Description' },
{ id: 'simulations', label: 'Simulations', count: simCount },
];
@@ -60,12 +58,7 @@ export function EngagementDetailPage(): JSX.Element {
</div>
</div>
{canEditEngagements ? (
<div className="flex items-center gap-sm">
<ExportEngagementButton engagementId={eng.id} />
<Link to={`/engagements/${eng.id}/edit`} className="btn-outline">
Edit
</Link>
</div>
<ExportEngagementButton engagementId={eng.id} />
) : null}
</header>
@@ -76,25 +69,27 @@ export function EngagementDetailPage(): JSX.Element {
id={`tabpanel-${activeTab}`}
aria-labelledby={`tab-${activeTab}`}
>
{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]">
<dt className="text-graphite">Start date</dt>
<dd className="text-ink font-mono">{eng.start_date}</dd>
<dt className="text-graphite">End date</dt>
<dd className="text-ink font-mono">{eng.end_date ?? '—'}</dd>
<dt className="text-graphite">Status</dt>
<dd className="text-ink capitalize">{eng.status}</dd>
<dt className="text-graphite">Created at</dt>
<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>
<div className="card-product flex flex-col gap-md">
<header className="flex items-start justify-between gap-md">
<dl className="grid grid-cols-2 gap-x-lg gap-y-xxs text-caption-md">
<dt className="text-graphite">Start date</dt>
<dd className="font-mono">{eng.start_date}</dd>
<dt className="text-graphite">End date</dt>
<dd className="font-mono">{eng.end_date ?? '—'}</dd>
<dt className="text-graphite">Status</dt>
<dd><StatusBadge status={eng.status} /></dd>
<dt className="text-graphite">Created at</dt>
<dd className="font-mono">{eng.created_at}</dd>
</dl>
{canEditEngagements ? (
<Link to={`/engagements/${eng.id}/edit`} className="btn-outline shrink-0">
Edit
</Link>
) : null}
</header>
<hr className="border-hairline" />
<h2 className="text-display-sm">Description</h2>
<p className="text-[16px] text-charcoal whitespace-pre-line">
{eng.description?.trim() ? eng.description : 'No description provided.'}
</p>