letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style(detail): apply gradient header strip to client/interest/yacht/company/berth/residential/invoice details

Browse Source 
Adds shared <DetailHeaderStrip> wrapper (rounded-xl + gradient-brand-soft + shadow-xs)
and applies it to every legacy domain detail header. Residential client/interest and
invoice detail get an inline gradient strip with eyebrow ('Residential Client',
'Residential Interest', 'Invoice'). Residential bodies normalized to lg:grid-cols-[2fr_1fr]
per spec.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt Ciaccio
2026-04-28 12:09:47 +02:00
parent cda44e721b
commit 22f944fde2
9 changed files with 81 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/residential/residential-client-detail.tsx
View File

@@ -113,14 +113,17 @@ export function ResidentialClientDetail({ clientId }: { clientId: string }) {
</Link>
</div>
<div className="rounded-lg border bg-card p-6 space-y-6">
<div>
<h1 className="text-2xl font-semibold">
<InlineEditableField value={client.fullName} onSave={save('fullName')} />
</h1>
<div className="rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs">
<div className="text-xs font-semibold uppercase tracking-wide text-brand">
Residential Client
</div>
<h1 className="mt-1 truncate text-2xl font-bold tracking-tight text-foreground">
<InlineEditableField value={client.fullName} onSave={save('fullName')} />
</h1>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="rounded-lg border bg-card p-6 space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Contact</h3>
<Row label="Email">

36
src/components/residential/residential-interest-detail.tsx
View File

@@ -87,25 +87,25 @@ export function ResidentialInterestDetail({ interestId }: { interestId: string }
</Link>
</div>
<div className="rounded-lg border bg-card p-6 space-y-6">
<div>
<p className="text-xs uppercase text-muted-foreground tracking-wider mb-1">
Residential interest
</p>
{interest.client && (
<h1 className="text-2xl font-semibold">
<Link
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
href={`/${portSlug}/residential/clients/${interest.client.id}` as any}
className="hover:underline"
>
{interest.client.fullName}
</Link>
</h1>
)}
</div>
<div className="rounded-xl border border-slate-200 bg-gradient-brand-soft px-5 py-4 shadow-xs">
<p className="text-xs uppercase font-semibold tracking-wide text-brand">
Residential Interest
</p>
{interest.client && (
<h1 className="mt-1 truncate text-2xl font-bold tracking-tight text-foreground">
<Link
/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
href={`/${portSlug}/residential/clients/${interest.client.id}` as any}
className="hover:underline"
>
{interest.client.fullName}
</Link>
</h1>
)}
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="rounded-lg border bg-card p-6 space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-6">
<div className="space-y-1">
<h3 className="text-sm font-medium mb-2">Pipeline</h3>
<Row label="Stage">