Initial commit: Port Nimara CRM (Layers 0-4)

Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM,
PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source
files covering clients, berths, interests/pipeline, documents/EOI,
expenses/invoices, email, notifications, dashboard, admin, and
client portal. CI/CD via Gitea Actions with Docker builds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/dashboard/kpi-cards.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { DollarSign, LayoutGrid, TrendingUp, Users } from 'lucide-react';
+
+import { apiFetch } from '@/lib/api/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { WidgetErrorBoundary } from './widget-error-boundary';
+
+interface KpiData {
+  totalClients: number;
+  activeInterests: number;
+  pipelineValueUsd: number;
+  occupancyRate: number;
+}
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function formatPercent(value: number): string {
+  return `${value.toFixed(1)}%`;
+}
+
+export function KpiCards() {
+  const { data, isLoading, isError } = useQuery<KpiData>({
+    queryKey: ['dashboard', 'kpis'],
+    queryFn: () => apiFetch<KpiData>('/api/v1/dashboard/kpis'),
+    staleTime: 60_000,
+    retry: 2,
+  });
+
+  if (isLoading) {
+    return (
+      <>
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+        <CardSkeleton />
+      </>
+    );
+  }
+
+  const kpis = [
+    {
+      label: 'Total Clients',
+      value: isError ? '—' : String(data?.totalClients ?? 0),
+      icon: Users,
+    },
+    {
+      label: 'Active Interests',
+      value: isError ? '—' : String(data?.activeInterests ?? 0),
+      icon: TrendingUp,
+    },
+    {
+      label: 'Pipeline Value',
+      value: isError ? '—' : formatCurrency(data?.pipelineValueUsd ?? 0),
+      icon: DollarSign,
+    },
+    {
+      label: 'Occupancy Rate',
+      value: isError ? '—' : formatPercent(data?.occupancyRate ?? 0),
+      icon: LayoutGrid,
+    },
+  ];
+
+  return (
+    <>
+      {kpis.map(({ label, value, icon: Icon }) => (
+        <Card key={label}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {label}
+            </CardTitle>
+            <Icon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{value}</div>
+            <div className="mt-1 h-1 w-8 rounded-full bg-muted" />
+          </CardContent>
+        </Card>
+      ))}
+    </>
+  );
+}
+
+export function KpiCardsWithBoundary() {
+  return (
+    <WidgetErrorBoundary>
+      <KpiCards />
+    </WidgetErrorBoundary>
+  );
+}