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/activity-feed.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { formatDistanceToNow } from 'date-fns';
+
+import { apiFetch } from '@/lib/api/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { WidgetErrorBoundary } from './widget-error-boundary';
+
+interface ActivityItem {
+  id: string;
+  action: string;
+  entityType: string;
+  entityId: string | null;
+  userId: string | null;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+}
+
+const ACTION_VARIANTS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+  create: 'default',
+  update: 'secondary',
+  delete: 'destructive',
+  archive: 'outline',
+  restore: 'secondary',
+};
+
+function ActionBadge({ action }: { action: string }) {
+  const variant = ACTION_VARIANTS[action] ?? 'outline';
+  return (
+    <Badge variant={variant} className="shrink-0 capitalize text-xs">
+      {action}
+    </Badge>
+  );
+}
+
+function ActivityFeedInner() {
+  const { data, isLoading } = useQuery<ActivityItem[]>({
+    queryKey: ['dashboard', 'activity'],
+    queryFn: () => apiFetch<ActivityItem[]>('/api/v1/dashboard/activity'),
+    staleTime: 30_000,
+    retry: 2,
+  });
+
+  if (isLoading) {
+    return <CardSkeleton />;
+  }
+
+  const items = data ?? [];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Recent Activity</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {items.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No recent activity.</p>
+        ) : (
+          <div className="max-h-80 overflow-y-auto space-y-3 pr-1">
+            {items.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-start gap-3 text-sm border-b border-border pb-3 last:border-0 last:pb-0"
+              >
+                <ActionBadge action={item.action} />
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-foreground">
+                    <span className="font-medium capitalize">{item.entityType}</span>
+                    {item.entityId && (
+                      <span className="ml-1 text-muted-foreground font-mono text-xs">
+                        {item.entityId.slice(0, 8)}
+                      </span>
+                    )}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {formatDistanceToNow(new Date(item.createdAt), { addSuffix: true })}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ActivityFeed() {
+  return (
+    <WidgetErrorBoundary>
+      <ActivityFeedInner />
+    </WidgetErrorBoundary>
+  );
+}

src/components/dashboard/dashboard-shell.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { KpiCardsWithBoundary } from './kpi-cards';
+import { PipelineChart } from './pipeline-chart';
+import { RevenueForecast } from './revenue-forecast';
+import { ActivityFeed } from './activity-feed';
+
+export function DashboardShell() {
+  useRealtimeInvalidation({
+    'interest:stageChanged': [['dashboard', 'pipeline'], ['dashboard', 'forecast']],
+    'client:created': [['dashboard', 'kpis']],
+    'berth:statusChanged': [['dashboard', 'kpis'], ['dashboard', 'forecast']],
+  });
+
+  return (
+    <div className="space-y-6">
+      {/* Row 1: KPI cards */}
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+        <KpiCardsWithBoundary />
+      </div>
+
+      {/* Row 2: Pipeline chart + Revenue forecast */}
+      <div className="grid gap-4 grid-cols-1 lg:grid-cols-3">
+        <div className="lg:col-span-2">
+          <PipelineChart />
+        </div>
+        <div className="lg:col-span-1">
+          <RevenueForecast />
+        </div>
+      </div>
+
+      {/* Row 3: Activity feed */}
+      <ActivityFeed />
+    </div>
+  );
+}

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

src/components/dashboard/pipeline-chart.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+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 PipelineRow {
+  stage: string;
+  count: number;
+}
+
+const STAGE_LABELS: Record<string, string> = {
+  open: 'Open',
+  details_sent: 'Details Sent',
+  in_communication: 'In Communication',
+  visited: 'Visited',
+  signed_eoi_nda: 'Signed EOI/NDA',
+  deposit_10pct: 'Deposit 10%',
+  contract: 'Contract',
+  completed: 'Completed',
+};
+
+function PipelineChartInner() {
+  const { data, isLoading } = useQuery<PipelineRow[]>({
+    queryKey: ['dashboard', 'pipeline'],
+    queryFn: () => apiFetch<PipelineRow[]>('/api/v1/dashboard/pipeline'),
+    staleTime: 60_000,
+    retry: 2,
+  });
+
+  if (isLoading) {
+    return <CardSkeleton />;
+  }
+
+  const chartData = (data ?? []).map((row) => ({
+    stage: STAGE_LABELS[row.stage] ?? row.stage,
+    count: row.count,
+  }));
+
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle className="text-base">Pipeline Overview</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={260}>
+          <BarChart data={chartData} margin={{ top: 4, right: 8, left: -16, bottom: 60 }}>
+            <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
+            <XAxis
+              dataKey="stage"
+              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+              angle={-40}
+              textAnchor="end"
+              interval={0}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: 'hsl(var(--muted-foreground))' }}
+              allowDecimals={false}
+            />
+            <Tooltip
+              contentStyle={{
+                background: 'hsl(var(--popover))',
+                border: '1px solid hsl(var(--border))',
+                borderRadius: '6px',
+                fontSize: 12,
+              }}
+            />
+            <Bar dataKey="count" fill="hsl(var(--chart-1))" radius={[4, 4, 0, 0]} />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function PipelineChart() {
+  return (
+    <WidgetErrorBoundary>
+      <PipelineChartInner />
+    </WidgetErrorBoundary>
+  );
+}

src/components/dashboard/revenue-forecast.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { apiFetch } from '@/lib/api/client';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { CardSkeleton } from '@/components/shared/loading-skeleton';
+import { WidgetErrorBoundary } from './widget-error-boundary';
+
+interface StageBreakdownRow {
+  stage: string;
+  count: number;
+  weightedValue: number;
+}
+
+interface ForecastData {
+  totalWeightedValue: number;
+  stageBreakdown: StageBreakdownRow[];
+  weightsSource: 'db' | 'default';
+}
+
+const STAGE_LABELS: Record<string, string> = {
+  open: 'Open',
+  details_sent: 'Details Sent',
+  in_communication: 'In Communication',
+  visited: 'Visited',
+  signed_eoi_nda: 'Signed EOI/NDA',
+  deposit_10pct: 'Deposit 10%',
+  contract: 'Contract',
+  completed: 'Completed',
+};
+
+function formatCurrency(value: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 0,
+  }).format(value);
+}
+
+function RevenueForecastInner() {
+  const { data, isLoading } = useQuery<ForecastData>({
+    queryKey: ['dashboard', 'forecast'],
+    queryFn: () => apiFetch<ForecastData>('/api/v1/dashboard/forecast'),
+    staleTime: 60_000,
+    retry: 2,
+  });
+
+  if (isLoading) {
+    return <CardSkeleton />;
+  }
+
+  const activeStages = (data?.stageBreakdown ?? []).filter((s) => s.count > 0);
+
+  return (
+    <Card className="h-full">
+      <CardHeader className="flex flex-row items-start justify-between gap-2">
+        <CardTitle className="text-base">Revenue Forecast</CardTitle>
+        {data?.weightsSource === 'default' && (
+          <Badge variant="secondary" className="shrink-0 text-xs">
+            Using default weights
+          </Badge>
+        )}
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="text-xs text-muted-foreground">Weighted Pipeline Value</p>
+          <p className="text-2xl font-bold">
+            {formatCurrency(data?.totalWeightedValue ?? 0)}
+          </p>
+        </div>
+
+        {activeStages.length > 0 && (
+          <div className="space-y-2">
+            {activeStages.map((s) => (
+              <div key={s.stage} className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">
+                  {STAGE_LABELS[s.stage] ?? s.stage}
+                  <span className="ml-1 text-xs">({s.count})</span>
+                </span>
+                <span className="font-medium tabular-nums">
+                  {formatCurrency(s.weightedValue)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {activeStages.length === 0 && (
+          <p className="text-sm text-muted-foreground">No active interests with linked berths.</p>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function RevenueForecast() {
+  return (
+    <WidgetErrorBoundary>
+      <RevenueForecastInner />
+    </WidgetErrorBoundary>
+  );
+}

src/components/dashboard/widget-error-boundary.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import React, { Component, type ReactNode } from 'react';
+
+import { Card, CardContent } from '@/components/ui/card';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class WidgetErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  reset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center gap-3 py-8">
+            <p className="text-sm text-muted-foreground">Widget unavailable</p>
+            <button
+              onClick={this.reset}
+              className="text-xs text-muted-foreground underline-offset-2 hover:underline"
+            >
+              Retry
+            </button>
+          </CardContent>
+        </Card>
+      );
+    }
+
+    return this.props.children;
+  }
+}