feat(ux): adopt shared Empty primitive across all empty states

- one Empty/EmptyHeader/EmptyMedia/EmptyTitle/EmptyDescription
  component replaces ~18 ad-hoc empty states
- projects gains a real empty state (was four bare columns) with a
  create CTA wired to the existing handler
- governance/ops/customize/comms/comments empty states unified;
  existing CTAs and conditions preserved (presentational only)

app/(app)/payments/payments-client.tsx

@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { X, RefreshCcw } from 'lucide-react'
+import { X, RefreshCcw, Receipt } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import { toast } from 'sonner'
 import { logCashPayment, linkPaymentToMember } from '@/lib/actions'
 import type { Tables } from '@/types/database'
@@ -243,8 +244,14 @@ export function PaymentsClient({ payments: initialPayments, members, integration
                   </tr>
                 )) : (
                   <tr>
-                    <td colSpan={5} className="px-4 py-12 text-center font-sans text-sm text-muted-foreground">
-                      No payments recorded yet
+                    <td colSpan={5} className="p-0">
+                      <Empty className="border-0">
+                        <EmptyHeader>
+                          <EmptyMedia variant="icon"><Receipt /></EmptyMedia>
+                          <EmptyTitle>No payments yet</EmptyTitle>
+                          <EmptyDescription>Synced and logged transactions show up here once they exist.</EmptyDescription>
+                        </EmptyHeader>
+                      </Empty>
                     </td>
                   </tr>
                 )}