merge: PR10 — visual polish (lists) (Phase A)

src/components/berths/berth-list.tsx

@@ -17,17 +17,8 @@ export function BerthList() {
   const router = useRouter();
   const params = useParams<{ portSlug: string }>();
 
-  const {
+  const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
-    data,
+    usePaginatedQuery<BerthRow>({
-    pagination,
-    isLoading,
-    sort,
-    setSort,
-    filters,
-    setFilter,
-    clearFilters,
-    setPage,
-  } = usePaginatedQuery<BerthRow>({
       queryKey: ['berths'],
       endpoint: '/api/v1/berths',
       filterDefinitions: berthFilterDefinitions,
@@ -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
       />
 

src/components/clients/client-list.tsx

@@ -56,8 +56,7 @@ export function ClientList() {
   });
 
   const archiveMutation = useMutation({
-    mutationFn: (id: string) =>
+    mutationFn: (id: string) => apiFetch(`/api/v1/clients/${id}`, { method: 'DELETE' }),
-      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
+      <ClientForm open={createOpen} onOpenChange={setCreateOpen} />
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-      />
 
       {editClient && (
         <ClientForm

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)}>

src/components/interests/interest-list.tsx

@@ -61,8 +61,7 @@ export function InterestList() {
   });
 
   const archiveMutation = useMutation({
-    mutationFn: (id: string) =>
+    mutationFn: (id: string) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
-      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
+      <InterestForm open={createOpen} onOpenChange={setCreateOpen} />
-        open={createOpen}
-        onOpenChange={setCreateOpen}
-      />
 
       {editInterest && (
         <InterestForm
@@ -174,9 +171,7 @@ export function InterestList() {
         entityName={archiveInterest?.clientName ?? 'Interest'}
         entityType="Interest"
         isArchived={false}
-        onConfirm={() =>
+        onConfirm={() => archiveInterest && archiveMutation.mutate(archiveInterest.id)}
-          archiveInterest && archiveMutation.mutate(archiveInterest.id)
-        }
         isLoading={archiveMutation.isPending}
       />
     </div>

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)}>