From 38cd36a616a4e27a415bd1634a540cd2736cf524 Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Tue, 28 Apr 2026 02:52:17 +0200
Subject: [PATCH] style(lists): apply gradient PageHeader to
 client/interest/yacht/company/berth lists

Pulls the polished gradient hero strip into the five primary list
surfaces. PR10b-e (detail polish, dashboard/admin polish, email +
notifications polish, mobile responsive sweep) deferred to a follow-up
release per spec risk register since visual baseline regen needs hands-
on iteration.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/berths/berth-list.tsx       | 22 +++++++---------------
 src/components/clients/client-list.tsx     |  9 +++------
 src/components/companies/company-list.tsx  |  1 +
 src/components/interests/interest-list.tsx | 13 ++++---------
 src/components/yachts/yacht-list.tsx       |  1 +
 5 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/components/berths/berth-list.tsx b/src/components/berths/berth-list.tsx
index a804593..5d46e3d 100644
--- a/src/components/berths/berth-list.tsx
+++ b/src/components/berths/berth-list.tsx
@@ -17,21 +17,12 @@ export function BerthList() {
   const router = useRouter();
   const params = useParams<{ portSlug: string }>();
 
-  const {
-    data,
-    pagination,
-    isLoading,
-    sort,
-    setSort,
-    filters,
-    setFilter,
-    clearFilters,
-    setPage,
-  } = usePaginatedQuery<BerthRow>({
-    queryKey: ['berths'],
-    endpoint: '/api/v1/berths',
-    filterDefinitions: berthFilterDefinitions,
-  });
+  const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
+    usePaginatedQuery<BerthRow>({
+      queryKey: ['berths'],
+      endpoint: '/api/v1/berths',
+      filterDefinitions: berthFilterDefinitions,
+    });
 
   useRealtimeInvalidation({
     'berth:updated': [['berths']],
@@ -43,6 +34,7 @@ export function BerthList() {
       <PageHeader
         title="Berths"
         description="View and manage berth allocations"
+        variant="gradient"
         // No "New" button — berths are import-only
       />
 
diff --git a/src/components/clients/client-list.tsx b/src/components/clients/client-list.tsx
index 303d270..38efdbc 100644
--- a/src/components/clients/client-list.tsx
+++ b/src/components/clients/client-list.tsx
@@ -56,8 +56,7 @@ export function ClientList() {
   });
 
   const archiveMutation = useMutation({
-    mutationFn: (id: string) =>
-      apiFetch(`/api/v1/clients/${id}`, { method: 'DELETE' }),
+    mutationFn: (id: string) => apiFetch(`/api/v1/clients/${id}`, { method: 'DELETE' }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['clients'] });
       setArchiveClient(null);
@@ -75,6 +74,7 @@ export function ClientList() {
       <PageHeader
         title="Clients"
         description="Manage your client records"
+        variant="gradient"
         actions={
           <PermissionGate resource="clients" action="create">
             <Button size="sm" onClick={() => setCreateOpen(true)}>
@@ -128,10 +128,7 @@ export function ClientList() {
         />
       )}
 
-      <ClientForm
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-      />
+      <ClientForm open={createOpen} onOpenChange={setCreateOpen} />
 
       {editClient && (
         <ClientForm
diff --git a/src/components/companies/company-list.tsx b/src/components/companies/company-list.tsx
index ca5dd5c..c386251 100644
--- a/src/components/companies/company-list.tsx
+++ b/src/components/companies/company-list.tsx
@@ -73,6 +73,7 @@ export function CompanyList() {
       <PageHeader
         title="Companies"
         description="Manage company records"
+        variant="gradient"
         actions={
           <PermissionGate resource="companies" action="create">
             <Button size="sm" onClick={() => setCreateOpen(true)}>
diff --git a/src/components/interests/interest-list.tsx b/src/components/interests/interest-list.tsx
index 49a1202..582f7fb 100644
--- a/src/components/interests/interest-list.tsx
+++ b/src/components/interests/interest-list.tsx
@@ -61,8 +61,7 @@ export function InterestList() {
   });
 
   const archiveMutation = useMutation({
-    mutationFn: (id: string) =>
-      apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
+    mutationFn: (id: string) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['interests'] });
       setArchiveInterest(null);
@@ -80,6 +79,7 @@ export function InterestList() {
       <PageHeader
         title="Interests"
         description="Track prospective berth interest and pipeline"
+        variant="gradient"
         actions={
           <div className="flex items-center gap-2">
             <div className="flex items-center border rounded-md overflow-hidden">
@@ -155,10 +155,7 @@ export function InterestList() {
         />
       )}
 
-      <InterestForm
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-      />
+      <InterestForm open={createOpen} onOpenChange={setCreateOpen} />
 
       {editInterest && (
         <InterestForm
@@ -174,9 +171,7 @@ export function InterestList() {
         entityName={archiveInterest?.clientName ?? 'Interest'}
         entityType="Interest"
         isArchived={false}
-        onConfirm={() =>
-          archiveInterest && archiveMutation.mutate(archiveInterest.id)
-        }
+        onConfirm={() => archiveInterest && archiveMutation.mutate(archiveInterest.id)}
         isLoading={archiveMutation.isPending}
       />
     </div>
diff --git a/src/components/yachts/yacht-list.tsx b/src/components/yachts/yacht-list.tsx
index 90d0994..9ab89d1 100644
--- a/src/components/yachts/yacht-list.tsx
+++ b/src/components/yachts/yacht-list.tsx
@@ -74,6 +74,7 @@ export function YachtList() {
       <PageHeader
         title="Yachts"
         description="Manage yacht records"
+        variant="gradient"
         actions={
           <PermissionGate resource="yachts" action="create">
             <Button size="sm" onClick={() => setCreateOpen(true)}>