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/app/(dashboard)/[portSlug]/admin/audit/page.tsx

@@ -0,0 +1,16 @@
+export default function AuditLogPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Audit Log</h1>
+        <p className="text-muted-foreground">Review system activity and changes</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/backup/page.tsx

@@ -0,0 +1,16 @@
+export default function BackupManagementPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Backup Management</h1>
+        <p className="text-muted-foreground">Manage system backups and restoration</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/custom-fields/page.tsx

@@ -0,0 +1,5 @@
+import { CustomFieldsManager } from '@/components/admin/custom-fields/custom-fields-manager';
+
+export default function CustomFieldsPage() {
+  return <CustomFieldsManager />;
+}

src/app/(dashboard)/[portSlug]/admin/forms/page.tsx

@@ -0,0 +1,16 @@
+export default function FormTemplatesPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Form Templates</h1>
+        <p className="text-muted-foreground">Create and manage intake form templates</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 3</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/import/page.tsx

@@ -0,0 +1,16 @@
+export default function DataImportPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Data Import</h1>
+        <p className="text-muted-foreground">Import data from external sources</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/monitoring/[queueName]/page.tsx

@@ -0,0 +1,19 @@
+import { QueueDetailTable } from '@/components/admin/queue-detail-table';
+
+interface QueueDetailPageProps {
+  params: Promise<{ portSlug: string; queueName: string }>;
+}
+
+export default async function QueueDetailPage({ params }: QueueDetailPageProps) {
+  const { queueName } = await params;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground capitalize">{queueName} Queue</h1>
+        <p className="text-muted-foreground">Inspect and manage jobs in the {queueName} queue</p>
+      </div>
+      <QueueDetailTable queueName={queueName} />
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/monitoring/page.tsx

@@ -0,0 +1,5 @@
+import { SystemMonitoringDashboard } from '@/components/admin/system-monitoring-dashboard';
+
+export default function MonitoringPage() {
+  return <SystemMonitoringDashboard />;
+}

src/app/(dashboard)/[portSlug]/admin/onboarding/page.tsx

@@ -0,0 +1,16 @@
+export default function OnboardingPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Onboarding</h1>
+        <p className="text-muted-foreground">Guided setup for new port configurations</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 4</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/ports/page.tsx

@@ -0,0 +1,16 @@
+export default function PortManagementPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Port Management</h1>
+        <p className="text-muted-foreground">Manage port locations and configurations</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/reports/page.tsx

@@ -0,0 +1,16 @@
+export default function ScheduledReportsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Scheduled Reports</h1>
+        <p className="text-muted-foreground">Configure and manage automated report delivery</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 3</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/roles/page.tsx

@@ -0,0 +1,16 @@
+export default function RoleManagementPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Role Management</h1>
+        <p className="text-muted-foreground">Configure roles and permissions</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/settings/page.tsx

@@ -0,0 +1,16 @@
+export default function SystemSettingsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">System Settings</h1>
+        <p className="text-muted-foreground">Configure system-wide settings</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/tags/page.tsx

@@ -0,0 +1,5 @@
+import { TagList } from '@/components/admin/tags/tag-list';
+
+export default function TagManagementPage() {
+  return <TagList />;
+}

src/app/(dashboard)/[portSlug]/admin/templates/page.tsx

@@ -0,0 +1,5 @@
+import { TemplateList } from '@/components/admin/document-templates/template-list';
+
+export default function DocumentTemplatesPage() {
+  return <TemplateList />;
+}

src/app/(dashboard)/[portSlug]/admin/users/page.tsx

@@ -0,0 +1,16 @@
+export default function UserManagementPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">User Management</h1>
+        <p className="text-muted-foreground">Manage user accounts and access</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/admin/webhooks/page.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+import { apiFetch } from '@/lib/api/client';
+import { WebhookForm } from '@/components/admin/webhooks/webhook-form';
+import { WebhookDeliveryLog } from '@/components/admin/webhooks/webhook-delivery-log';
+import { WebhookSecretDisplay } from '@/components/admin/webhooks/webhook-secret-display';
+
+interface Webhook {
+  id: string;
+  name: string;
+  url: string;
+  events: string[];
+  isActive: boolean;
+  secretMasked: string;
+  createdAt: string;
+}
+
+export default function WebhooksPage() {
+  const [webhooks, setWebhooks] = useState<Webhook[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [formOpen, setFormOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<Webhook | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<Webhook | null>(null);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [regenerating, setRegenerating] = useState<string | null>(null);
+  const [newSecret, setNewSecret] = useState<{ webhookId: string; secret: string; masked: string } | null>(null);
+
+  const loadWebhooks = useCallback(async () => {
+    try {
+      const result = await apiFetch<{ data: Webhook[] }>('/api/v1/admin/webhooks');
+      setWebhooks(result.data);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadWebhooks();
+  }, [loadWebhooks]);
+
+  async function handleDelete() {
+    if (!deleteTarget) return;
+    try {
+      await apiFetch(`/api/v1/admin/webhooks/${deleteTarget.id}`, { method: 'DELETE' });
+      setDeleteTarget(null);
+      void loadWebhooks();
+    } catch {
+      // ignore
+    }
+  }
+
+  async function handleRegenerate(webhookId: string) {
+    setRegenerating(webhookId);
+    try {
+      const result = await apiFetch<{ data: { secret: string; secretMasked: string } }>(
+        `/api/v1/admin/webhooks/${webhookId}/regenerate-secret`,
+        { method: 'POST' },
+      );
+      setNewSecret({ webhookId, secret: result.data.secret, masked: result.data.secretMasked });
+      void loadWebhooks();
+    } catch {
+      // ignore
+    } finally {
+      setRegenerating(null);
+    }
+  }
+
+  async function handleToggleActive(webhook: Webhook) {
+    try {
+      await apiFetch(`/api/v1/admin/webhooks/${webhook.id}`, {
+        method: 'PATCH',
+        body: { isActive: !webhook.isActive },
+      });
+      void loadWebhooks();
+    } catch {
+      // ignore
+    }
+  }
+
+  function toggleExpand(id: string) {
+    setExpandedId((prev) => (prev === id ? null : id));
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-foreground">Webhooks</h1>
+          <p className="text-muted-foreground">Configure outgoing webhook integrations</p>
+        </div>
+        <Button onClick={() => { setEditTarget(null); setFormOpen(true); }}>
+          Add Webhook
+        </Button>
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading...</p>
+      ) : webhooks.length === 0 ? (
+        <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+          <p className="text-lg font-medium text-muted-foreground">No webhooks configured</p>
+          <p className="text-sm text-muted-foreground mt-1">
+            Add a webhook to receive real-time notifications of CRM events.
+          </p>
+          <Button className="mt-4" onClick={() => { setEditTarget(null); setFormOpen(true); }}>
+            Add Webhook
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {webhooks.map((webhook) => (
+            <div key={webhook.id} className="rounded-lg border bg-card">
+              <div className="flex items-center gap-4 p-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium truncate">{webhook.name}</span>
+                    <Badge variant={webhook.isActive ? 'default' : 'secondary'}>
+                      {webhook.isActive ? 'Active' : 'Inactive'}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-muted-foreground font-mono truncate mt-0.5">
+                    {webhook.url}
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {webhook.events.length} event{webhook.events.length !== 1 ? 's' : ''}
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-2 shrink-0">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleToggleActive(webhook)}
+                  >
+                    {webhook.isActive ? 'Disable' : 'Enable'}
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => { setEditTarget(webhook); setFormOpen(true); }}
+                  >
+                    Edit
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-destructive"
+                    onClick={() => setDeleteTarget(webhook)}
+                  >
+                    Delete
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => toggleExpand(webhook.id)}
+                  >
+                    {expandedId === webhook.id ? 'Collapse' : 'Details'}
+                  </Button>
+                </div>
+              </div>
+
+              {expandedId === webhook.id && (
+                <div className="border-t px-4 py-4 space-y-6">
+                  {/* Events */}
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">Subscribed Events</h3>
+                    <div className="flex flex-wrap gap-1">
+                      {webhook.events.map((e) => (
+                        <Badge key={e} variant="outline" className="font-mono text-xs">
+                          {e}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+
+                  {/* Secret */}
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">Signing Secret</h3>
+                    {newSecret?.webhookId === webhook.id ? (
+                      <WebhookSecretDisplay
+                        plaintext={newSecret.secret}
+                        masked={newSecret.masked}
+                      />
+                    ) : (
+                      <WebhookSecretDisplay masked={webhook.secretMasked} />
+                    )}
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="mt-2"
+                      disabled={regenerating === webhook.id}
+                      onClick={() => handleRegenerate(webhook.id)}
+                    >
+                      {regenerating === webhook.id ? 'Regenerating...' : 'Regenerate Secret'}
+                    </Button>
+                  </div>
+
+                  {/* Delivery Log */}
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">Delivery Log</h3>
+                    <WebhookDeliveryLog webhookId={webhook.id} />
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      <WebhookForm
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        webhook={editTarget}
+        onSuccess={loadWebhooks}
+      />
+
+      <AlertDialog open={!!deleteTarget} onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete Webhook</AlertDialogTitle>
+            <AlertDialogDescription>
+              Delete &quot;{deleteTarget?.name}&quot;? This will also delete all delivery history. This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-destructive text-destructive-foreground">
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/berths/[berthId]/page.tsx

@@ -0,0 +1,10 @@
+import { BerthDetail } from '@/components/berths/berth-detail';
+
+interface BerthPageProps {
+  params: Promise<{ portSlug: string; berthId: string }>;
+}
+
+export default async function BerthPage({ params }: BerthPageProps) {
+  const { berthId } = await params;
+  return <BerthDetail berthId={berthId} />;
+}

src/app/(dashboard)/[portSlug]/berths/page.tsx

@@ -0,0 +1,5 @@
+import { BerthList } from '@/components/berths/berth-list';
+
+export default function BerthsPage() {
+  return <BerthList />;
+}

src/app/(dashboard)/[portSlug]/clients/[clientId]/page.tsx

@@ -0,0 +1,16 @@
+import { ClientDetail } from '@/components/clients/client-detail';
+import { auth } from '@/lib/auth';
+import { headers } from 'next/headers';
+
+interface ClientDetailPageProps {
+  params: Promise<{ clientId: string }>;
+}
+
+export default async function ClientDetailPage({ params }: ClientDetailPageProps) {
+  const { clientId } = await params;
+
+  const session = await auth.api.getSession({ headers: await headers() });
+  const currentUserId = session?.user?.id;
+
+  return <ClientDetail clientId={clientId} currentUserId={currentUserId} />;
+}

src/app/(dashboard)/[portSlug]/clients/page.tsx

@@ -0,0 +1,5 @@
+import { ClientList } from '@/components/clients/client-list';
+
+export default function ClientsPage() {
+  return <ClientList />;
+}

src/app/(dashboard)/[portSlug]/documents/page.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { Grid, List, Upload } from 'lucide-react';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { Button } from '@/components/ui/button';
+import { PageHeader } from '@/components/shared/page-header';
+import { PermissionGate } from '@/components/shared/permission-gate';
+import { FileGrid } from '@/components/files/file-grid';
+import { FolderTree } from '@/components/files/folder-tree';
+import { FileUploadZone } from '@/components/files/file-upload-zone';
+import { FilePreviewDialog } from '@/components/files/file-preview-dialog';
+import { usePaginatedQuery } from '@/hooks/use-paginated-query';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { useFileBrowserStore } from '@/stores/file-browser-store';
+import { apiFetch } from '@/lib/api/client';
+import type { FileRow } from '@/components/files/file-grid';
+
+export default function DocumentsPage() {
+  const params = useParams<{ portSlug: string }>();
+  const queryClient = useQueryClient();
+
+  const { viewMode, setViewMode, currentFolder, setCurrentFolder } = useFileBrowserStore();
+  const [showUpload, setShowUpload] = useState(false);
+  const [previewFile, setPreviewFile] = useState<FileRow | null>(null);
+  const [renameFile, setRenameFile] = useState<FileRow | null>(null);
+
+  const { data, isLoading } = usePaginatedQuery<FileRow & { storagePath: string }>({
+    queryKey: ['files'],
+    endpoint: '/api/v1/files',
+    filterDefinitions: [],
+  });
+
+  useRealtimeInvalidation({
+    'file:uploaded': [['files']],
+    'file:updated': [['files']],
+    'file:deleted': [['files']],
+  });
+
+  const filesInFolder = currentFolder
+    ? data.filter((f) => f.storagePath?.includes(currentFolder))
+    : data;
+
+  const handleDownload = async (file: FileRow) => {
+    try {
+      const res = await apiFetch<{ data: { url: string; filename: string } }>(
+        `/api/v1/files/${file.id}/download`,
+      );
+      const a = document.createElement('a');
+      a.href = res.data.url;
+      a.download = res.data.filename;
+      a.click();
+    } catch {
+      // silent
+    }
+  };
+
+  const handleDelete = async (file: FileRow) => {
+    if (!confirm(`Delete "${file.filename}"? This cannot be undone.`)) return;
+    try {
+      await apiFetch(`/api/v1/files/${file.id}`, { method: 'DELETE' });
+      queryClient.invalidateQueries({ queryKey: ['files'] });
+    } catch {
+      // silent
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <PageHeader
+        title="Documents"
+        description="Store and manage port documents and attachments"
+        actions={
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setViewMode(viewMode === 'grid' ? 'list' : 'grid')}
+            >
+              {viewMode === 'grid' ? (
+                <List className="h-4 w-4" />
+              ) : (
+                <Grid className="h-4 w-4" />
+              )}
+            </Button>
+            <PermissionGate resource="files" action="upload">
+              <Button size="sm" onClick={() => setShowUpload((v) => !v)}>
+                <Upload className="mr-1.5 h-4 w-4" />
+                Upload
+              </Button>
+            </PermissionGate>
+          </div>
+        }
+      />
+
+      {showUpload && (
+        <PermissionGate resource="files" action="upload">
+          <FileUploadZone
+            onUploadComplete={() => {
+              queryClient.invalidateQueries({ queryKey: ['files'] });
+              setShowUpload(false);
+            }}
+          />
+        </PermissionGate>
+      )}
+
+      <div className="flex flex-1 gap-4 overflow-hidden">
+        {/* Folder tree sidebar */}
+        <aside className="w-48 shrink-0 overflow-y-auto rounded-lg border bg-card p-2">
+          <p className="mb-1 px-2 text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            Folders
+          </p>
+          <FolderTree
+            files={data}
+            currentFolder={currentFolder}
+            onFolderSelect={setCurrentFolder}
+          />
+        </aside>
+
+        {/* Main content */}
+        <main className="flex-1 overflow-y-auto rounded-lg border bg-card p-4">
+          <FileGrid
+            files={filesInFolder}
+            onDownload={handleDownload}
+            onPreview={setPreviewFile}
+            onRename={setRenameFile}
+            onDelete={handleDelete}
+            isLoading={isLoading}
+          />
+        </main>
+      </div>
+
+      <FilePreviewDialog
+        open={!!previewFile}
+        onOpenChange={(open) => !open && setPreviewFile(null)}
+        fileId={previewFile?.id}
+        fileName={previewFile?.filename}
+        mimeType={previewFile?.mimeType ?? undefined}
+      />
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/email/page.tsx

@@ -0,0 +1,16 @@
+export default function EmailPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Email</h1>
+        <p className="text-muted-foreground">Send and manage client communications</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 3</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/expenses/[id]/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+
+import { ExpenseDetail } from '@/components/expenses/expense-detail';
+import { ExpenseFormDialog } from '@/components/expenses/expense-form-dialog';
+import { useQuery } from '@tanstack/react-query';
+import { apiFetch } from '@/lib/api/client';
+import type { ExpenseRow } from '@/components/expenses/expense-columns';
+
+export default function ExpenseDetailPage() {
+  const params = useParams<{ portSlug: string; id: string }>();
+  const router = useRouter();
+  const [editOpen, setEditOpen] = useState(false);
+
+  const { data } = useQuery<{ data: ExpenseRow }>({
+    queryKey: ['expenses', params.id],
+    queryFn: () => apiFetch(`/api/v1/expenses/${params.id}`),
+    enabled: !!params.id,
+  });
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      <ExpenseDetail
+        expenseId={params.id}
+        onEdit={() => setEditOpen(true)}
+        onArchived={() => router.push(`/${params.portSlug}/expenses`)}
+      />
+
+      {data?.data && (
+        <ExpenseFormDialog
+          open={editOpen}
+          onOpenChange={setEditOpen}
+          expense={data.data}
+        />
+      )}
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/expenses/page.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Plus, Download, FileText, FileSpreadsheet } from 'lucide-react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DataTable } from '@/components/shared/data-table';
+import { FilterBar } from '@/components/shared/filter-bar';
+import { PageHeader } from '@/components/shared/page-header';
+import { EmptyState } from '@/components/shared/empty-state';
+import { TableSkeleton } from '@/components/shared/loading-skeleton';
+import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
+import { PermissionGate } from '@/components/shared/permission-gate';
+import { ExpenseFormDialog } from '@/components/expenses/expense-form-dialog';
+import { expenseFilterDefinitions } from '@/components/expenses/expense-filters';
+import { getExpenseColumns, type ExpenseRow } from '@/components/expenses/expense-columns';
+import { usePaginatedQuery } from '@/hooks/use-paginated-query';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+
+export default function ExpensesPage() {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const queryClient = useQueryClient();
+
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editExpense, setEditExpense] = useState<ExpenseRow | null>(null);
+  const [archiveExpense, setArchiveExpense] = useState<ExpenseRow | null>(null);
+
+  const {
+    data,
+    pagination,
+    isLoading,
+    isFetching,
+    sort,
+    setSort,
+    setPage,
+    setPageSize,
+    filters,
+    setFilter,
+    clearFilters,
+  } = usePaginatedQuery<ExpenseRow>({
+    queryKey: ['expenses'],
+    endpoint: '/api/v1/expenses',
+    filterDefinitions: expenseFilterDefinitions,
+  });
+
+  useRealtimeInvalidation({
+    'expense:created': [['expenses']],
+    'expense:updated': [['expenses']],
+    'expense:archived': [['expenses']],
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiFetch(`/api/v1/expenses/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['expenses'] });
+      setArchiveExpense(null);
+    },
+  });
+
+  async function handleExport(type: 'csv' | 'pdf') {
+    const res = await fetch(`/api/v1/expenses/export/${type}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(filters),
+      credentials: 'include',
+    });
+    if (!res.ok) return;
+    const blob = await res.blob();
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `expenses.${type}`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  const columns = getExpenseColumns({
+    portSlug,
+    onEdit: (expense) => setEditExpense(expense),
+    onArchive: (expense) => setArchiveExpense(expense),
+  });
+
+  return (
+    <div className="space-y-4">
+      <PageHeader
+        title="Expenses"
+        description="Track and manage port expenses"
+        actions={
+          <div className="flex items-center gap-2">
+            <PermissionGate resource="expenses" action="view">
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <Download className="mr-1.5 h-4 w-4" />
+                    Export
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => handleExport('csv')}>
+                    <FileSpreadsheet className="mr-2 h-4 w-4" />
+                    Export CSV
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => handleExport('pdf')}>
+                    <FileText className="mr-2 h-4 w-4" />
+                    Export PDF
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </PermissionGate>
+
+            <PermissionGate resource="expenses" action="create">
+              <Button size="sm" onClick={() => setCreateOpen(true)}>
+                <Plus className="mr-1.5 h-4 w-4" />
+                New Expense
+              </Button>
+            </PermissionGate>
+          </div>
+        }
+      />
+
+      <FilterBar
+        filters={expenseFilterDefinitions}
+        values={filters}
+        onChange={setFilter}
+        onClear={clearFilters}
+      />
+
+      {isLoading ? (
+        <TableSkeleton />
+      ) : (
+        <DataTable
+          columns={columns}
+          data={data}
+          pagination={pagination}
+          onPaginationChange={(p, ps) => {
+            setPage(p);
+            setPageSize(ps);
+          }}
+          sort={sort}
+          onSortChange={setSort}
+          isLoading={isFetching && !isLoading}
+          getRowId={(row) => row.id}
+          emptyState={
+            <EmptyState
+              title="No expenses found"
+              description="Get started by adding your first expense."
+              action={{ label: 'New Expense', onClick: () => setCreateOpen(true) }}
+            />
+          }
+        />
+      )}
+
+      <ExpenseFormDialog open={createOpen} onOpenChange={setCreateOpen} />
+
+      {editExpense && (
+        <ExpenseFormDialog
+          open={!!editExpense}
+          onOpenChange={(open) => !open && setEditExpense(null)}
+          expense={editExpense}
+        />
+      )}
+
+      <ArchiveConfirmDialog
+        open={!!archiveExpense}
+        onOpenChange={(open) => !open && setArchiveExpense(null)}
+        entityName={archiveExpense?.establishmentName ?? 'this expense'}
+        entityType="Expense"
+        isArchived={false}
+        onConfirm={() => archiveExpense && archiveMutation.mutate(archiveExpense.id)}
+        isLoading={archiveMutation.isPending}
+      />
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/expenses/scan/page.tsx

@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useRef } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useMutation } from '@tanstack/react-query';
+import { Upload, Loader2, Camera, ScanLine } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { apiFetch } from '@/lib/api/client';
+import { EXPENSE_CATEGORIES } from '@/lib/constants';
+
+interface ScanResult {
+  establishment: string | null;
+  date: string | null;
+  amount: number | null;
+  currency: string | null;
+  lineItems: Array<{ description: string; amount: number }>;
+  confidence: number;
+}
+
+export default function ScanReceiptPage() {
+  const params = useParams<{ portSlug: string }>();
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [scanResult, setScanResult] = useState<ScanResult | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  // Editable fields from scan
+  const [establishment, setEstablishment] = useState('');
+  const [amount, setAmount] = useState('');
+  const [currency, setCurrency] = useState('USD');
+  const [date, setDate] = useState('');
+  const [category, setCategory] = useState('');
+
+  const scanMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append('file', file);
+      const res = await fetch('/api/v1/expenses/scan-receipt', {
+        method: 'POST',
+        body: formData,
+        credentials: 'include',
+      });
+      if (!res.ok) throw new Error('Scan failed');
+      return res.json() as Promise<{ data: ScanResult }>;
+    },
+    onSuccess: (response) => {
+      const result = response.data;
+      setScanResult(result);
+      if (result.establishment) setEstablishment(result.establishment);
+      if (result.amount) setAmount(String(result.amount));
+      if (result.currency) setCurrency(result.currency);
+      if (result.date) setDate(result.date.split('T')[0] ?? result.date);
+    },
+  });
+
+  const saveMutation = useMutation({
+    mutationFn: () =>
+      apiFetch('/api/v1/expenses', {
+        method: 'POST',
+        body: {
+          establishmentName: establishment,
+          amount: Number(amount),
+          currency,
+          category: category || undefined,
+          expenseDate: date ? new Date(date) : new Date(),
+          paymentStatus: 'unpaid',
+        },
+      }),
+    onSuccess: () => {
+      router.push(`/${params.portSlug}/expenses`);
+    },
+  });
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    scanMutation.mutate(file);
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold">Scan Receipt</h1>
+        <p className="text-muted-foreground mt-1">
+          Upload a receipt image and we will extract the expense details automatically.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2 text-base">
+            <ScanLine className="h-4 w-4" />
+            Upload Receipt
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div
+            className="border-2 border-dashed rounded-lg p-8 text-center cursor-pointer hover:bg-muted/50 transition-colors"
+            onClick={() => fileInputRef.current?.click()}
+          >
+            {previewUrl ? (
+              <img
+                src={previewUrl}
+                alt="Receipt preview"
+                className="max-h-64 mx-auto rounded object-contain"
+              />
+            ) : (
+              <div className="space-y-2">
+                <Upload className="h-8 w-8 mx-auto text-muted-foreground" />
+                <p className="text-sm text-muted-foreground">
+                  Click to upload or drag and drop
+                </p>
+                <p className="text-xs text-muted-foreground">
+                  JPEG, PNG, WebP up to 10MB
+                </p>
+              </div>
+            )}
+          </div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleFileChange}
+          />
+
+          {scanMutation.isPending && (
+            <div className="flex items-center justify-center gap-2 mt-4 text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" />
+              <span className="text-sm">Scanning receipt...</span>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {(scanResult || scanMutation.isSuccess) && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">
+              Extracted Details
+              {scanResult && (
+                <span className="text-sm font-normal text-muted-foreground ml-2">
+                  (confidence: {Math.round((scanResult.confidence ?? 0) * 100)}%)
+                </span>
+              )}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="scan-amount">Amount</Label>
+                <Input
+                  id="scan-amount"
+                  type="number"
+                  step="0.01"
+                  value={amount}
+                  onChange={(e) => setAmount(e.target.value)}
+                  placeholder="0.00"
+                />
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="scan-currency">Currency</Label>
+                <Input
+                  id="scan-currency"
+                  value={currency}
+                  onChange={(e) => setCurrency(e.target.value.toUpperCase())}
+                  maxLength={3}
+                  placeholder="USD"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-1">
+              <Label htmlFor="scan-establishment">Establishment</Label>
+              <Input
+                id="scan-establishment"
+                value={establishment}
+                onChange={(e) => setEstablishment(e.target.value)}
+                placeholder="Establishment name"
+              />
+            </div>
+
+            <div className="space-y-1">
+              <Label htmlFor="scan-date">Date</Label>
+              <Input
+                id="scan-date"
+                type="date"
+                value={date}
+                onChange={(e) => setDate(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <Label htmlFor="scan-category">Category</Label>
+              <Select value={category} onValueChange={setCategory}>
+                <SelectTrigger id="scan-category">
+                  <SelectValue placeholder="Select category" />
+                </SelectTrigger>
+                <SelectContent>
+                  {EXPENSE_CATEGORIES.map((cat) => (
+                    <SelectItem key={cat} value={cat}>
+                      {cat.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {saveMutation.isError && (
+              <p className="text-sm text-destructive">
+                {(saveMutation.error as Error).message}
+              </p>
+            )}
+
+            <div className="flex gap-2 pt-2">
+              <Button
+                variant="outline"
+                onClick={() => router.push(`/${params.portSlug}/expenses`)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() => saveMutation.mutate()}
+                disabled={saveMutation.isPending || !amount}
+              >
+                {saveMutation.isPending && (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                )}
+                Save as Expense
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/interests/[interestId]/page.tsx

@@ -0,0 +1,16 @@
+import { InterestDetail } from '@/components/interests/interest-detail';
+import { auth } from '@/lib/auth';
+import { headers } from 'next/headers';
+
+interface InterestDetailPageProps {
+  params: Promise<{ interestId: string }>;
+}
+
+export default async function InterestDetailPage({ params }: InterestDetailPageProps) {
+  const { interestId } = await params;
+
+  const session = await auth.api.getSession({ headers: await headers() });
+  const currentUserId = session?.user?.id;
+
+  return <InterestDetail interestId={interestId} currentUserId={currentUserId} />;
+}

src/app/(dashboard)/[portSlug]/interests/page.tsx

@@ -0,0 +1,5 @@
+import { InterestList } from '@/components/interests/interest-list';
+
+export default function InterestsPage() {
+  return <InterestList />;
+}

src/app/(dashboard)/[portSlug]/invoices/[id]/page.tsx

@@ -0,0 +1,15 @@
+import { use } from 'react';
+import { InvoiceDetail } from '@/components/invoices/invoice-detail';
+
+interface InvoiceDetailPageProps {
+  params: Promise<{ portSlug: string; id: string }>;
+}
+
+export default function InvoiceDetailPage({ params }: InvoiceDetailPageProps) {
+  const { id } = use(params);
+  return (
+    <div className="max-w-4xl mx-auto space-y-6">
+      <InvoiceDetail invoiceId={id} />
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/invoices/new/page.tsx

@@ -0,0 +1,388 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useForm, FormProvider } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ChevronLeft, ChevronRight, Check, Loader2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { InvoiceLineItems } from '@/components/invoices/invoice-line-items';
+import { apiFetch } from '@/lib/api/client';
+import { createInvoiceSchema, type CreateInvoiceInput } from '@/lib/validators/invoices';
+
+const PAYMENT_TERMS = [
+  { label: 'Immediate', value: 'immediate' },
+  { label: 'Net 10', value: 'net10' },
+  { label: 'Net 15', value: 'net15' },
+  { label: 'Net 30', value: 'net30' },
+  { label: 'Net 45', value: 'net45' },
+  { label: 'Net 60', value: 'net60' },
+];
+
+const STEPS = [
+  { id: 1, label: 'Client Info' },
+  { id: 2, label: 'Line Items' },
+  { id: 3, label: 'Review' },
+];
+
+export default function NewInvoicePage() {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const router = useRouter();
+
+  const [step, setStep] = useState(1);
+
+  const methods = useForm<CreateInvoiceInput>({
+    resolver: zodResolver(createInvoiceSchema),
+    defaultValues: {
+      paymentTerms: 'net30',
+      currency: 'USD',
+      lineItems: [],
+      expenseIds: [],
+    },
+  });
+
+  const { register, handleSubmit, watch, setValue, formState: { errors } } = methods;
+
+  const watchedValues = watch();
+  const lineItems = watchedValues.lineItems ?? [];
+  const subtotal = lineItems.reduce(
+    (sum, li) => sum + (Number(li.quantity) || 0) * (Number(li.unitPrice) || 0),
+    0,
+  );
+  const isNet10 = watchedValues.paymentTerms === 'net10';
+  const discountPct = isNet10 ? 2 : 0;
+  const discountAmount = (subtotal * discountPct) / 100;
+  const total = subtotal - discountAmount;
+
+  const createMutation = useMutation({
+    mutationFn: (data: CreateInvoiceInput) =>
+      apiFetch('/api/v1/invoices', {
+        method: 'POST',
+        body: data,
+      }),
+    onSuccess: (res: any) => {
+      const id = res?.data?.id;
+      if (id) {
+        router.push(`/${portSlug}/invoices/${id}`);
+      } else {
+        router.push(`/${portSlug}/invoices`);
+      }
+    },
+  });
+
+  async function goNext() {
+    if (step === 1) {
+      const valid = await methods.trigger([
+        'clientName',
+        'billingEmail',
+        'billingAddress',
+        'dueDate',
+        'paymentTerms',
+        'currency',
+      ]);
+      if (valid) setStep(2);
+    } else if (step === 2) {
+      setStep(3);
+    }
+  }
+
+  function goBack() {
+    setStep((s) => Math.max(1, s - 1));
+  }
+
+  function onSubmit(data: CreateInvoiceInput) {
+    createMutation.mutate(data);
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => router.push(`/${portSlug}/invoices`)}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <h1 className="text-xl font-semibold">New Invoice</h1>
+      </div>
+
+      {/* Step indicator */}
+      <div className="flex items-center gap-2">
+        {STEPS.map((s, idx) => (
+          <div key={s.id} className="flex items-center gap-2">
+            <div
+              className={`flex items-center justify-center w-7 h-7 rounded-full text-xs font-medium ${
+                step > s.id
+                  ? 'bg-primary text-primary-foreground'
+                  : step === s.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground'
+              }`}
+            >
+              {step > s.id ? <Check className="h-3.5 w-3.5" /> : s.id}
+            </div>
+            <span
+              className={`text-sm ${
+                step === s.id ? 'font-medium' : 'text-muted-foreground'
+              }`}
+            >
+              {s.label}
+            </span>
+            {idx < STEPS.length - 1 && (
+              <div className="w-8 h-px bg-border mx-1" />
+            )}
+          </div>
+        ))}
+      </div>
+
+      <FormProvider {...methods}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {/* Step 1: Client Info */}
+          {step === 1 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Client Information</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="clientName">
+                    Client Name <span className="text-destructive">*</span>
+                  </Label>
+                  <Input
+                    id="clientName"
+                    {...register('clientName')}
+                    placeholder="Client or company name"
+                  />
+                  {errors.clientName && (
+                    <p className="text-xs text-destructive">{errors.clientName.message}</p>
+                  )}
+                </div>
+
+                <div className="space-y-1">
+                  <Label htmlFor="billingEmail">Billing Email</Label>
+                  <Input
+                    id="billingEmail"
+                    type="email"
+                    {...register('billingEmail')}
+                    placeholder="billing@example.com"
+                  />
+                  {errors.billingEmail && (
+                    <p className="text-xs text-destructive">{errors.billingEmail.message}</p>
+                  )}
+                </div>
+
+                <div className="space-y-1">
+                  <Label htmlFor="billingAddress">Billing Address</Label>
+                  <Textarea
+                    id="billingAddress"
+                    {...register('billingAddress')}
+                    placeholder="Address"
+                    rows={3}
+                  />
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="space-y-1">
+                    <Label htmlFor="dueDate">
+                      Due Date <span className="text-destructive">*</span>
+                    </Label>
+                    <Input
+                      id="dueDate"
+                      type="date"
+                      {...register('dueDate')}
+                    />
+                    {errors.dueDate && (
+                      <p className="text-xs text-destructive">{errors.dueDate.message}</p>
+                    )}
+                  </div>
+
+                  <div className="space-y-1">
+                    <Label>Payment Terms</Label>
+                    <Select
+                      defaultValue="net30"
+                      onValueChange={(v) => setValue('paymentTerms', v as any)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="Select terms" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {PAYMENT_TERMS.map((t) => (
+                          <SelectItem key={t.value} value={t.value}>
+                            {t.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="space-y-1">
+                  <Label>Currency</Label>
+                  <Input
+                    {...register('currency')}
+                    placeholder="USD"
+                    maxLength={3}
+                    className="uppercase w-24"
+                  />
+                </div>
+
+                <div className="space-y-1">
+                  <Label htmlFor="notes">Notes</Label>
+                  <Textarea
+                    id="notes"
+                    {...register('notes')}
+                    placeholder="Payment instructions or notes..."
+                    rows={3}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Step 2: Line Items */}
+          {step === 2 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Line Items</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <InvoiceLineItems name="lineItems" />
+                {errors.lineItems && !Array.isArray(errors.lineItems) && (
+                  <p className="text-xs text-destructive mt-2">
+                    {(errors.lineItems as any).message}
+                  </p>
+                )}
+                {errors.root && (
+                  <p className="text-xs text-destructive mt-2">{errors.root.message}</p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Step 3: Review */}
+          {step === 3 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Review & Create</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4 text-sm">
+                  <div>
+                    <span className="text-muted-foreground">Client</span>
+                    <p className="font-medium mt-0.5">{watchedValues.clientName}</p>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Due Date</span>
+                    <p className="font-medium mt-0.5">{watchedValues.dueDate}</p>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Payment Terms</span>
+                    <p className="font-medium mt-0.5 capitalize">
+                      {watchedValues.paymentTerms}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Currency</span>
+                    <p className="font-medium mt-0.5">{watchedValues.currency}</p>
+                  </div>
+                </div>
+
+                {lineItems.length > 0 && (
+                  <div className="border rounded-md p-3 space-y-2">
+                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                      Line Items
+                    </p>
+                    {lineItems.map((li, i) => (
+                      <div key={i} className="flex justify-between text-sm">
+                        <span>{li.description}</span>
+                        <span className="tabular-nums">
+                          {(Number(li.quantity) * Number(li.unitPrice)).toFixed(2)}{' '}
+                          {watchedValues.currency}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                <div className="border rounded-md p-3 space-y-1 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Subtotal</span>
+                    <span className="tabular-nums">
+                      {subtotal.toFixed(2)} {watchedValues.currency}
+                    </span>
+                  </div>
+                  {isNet10 && (
+                    <div className="flex justify-between text-green-600">
+                      <span>Net 10 Discount (~2%)</span>
+                      <span className="tabular-nums">
+                        -{discountAmount.toFixed(2)} {watchedValues.currency}
+                      </span>
+                    </div>
+                  )}
+                  <div className="flex justify-between font-semibold border-t pt-2 mt-1">
+                    <span>Total</span>
+                    <span className="tabular-nums">
+                      {total.toFixed(2)} {watchedValues.currency}
+                    </span>
+                  </div>
+                </div>
+
+                {createMutation.isError && (
+                  <p className="text-sm text-destructive">
+                    Failed to create invoice. Please try again.
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Navigation */}
+          <div className="flex items-center justify-between">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={goBack}
+              disabled={step === 1}
+            >
+              <ChevronLeft className="mr-1.5 h-4 w-4" />
+              Back
+            </Button>
+
+            {step < 3 ? (
+              <Button type="button" onClick={goNext}>
+                Next
+                <ChevronRight className="ml-1.5 h-4 w-4" />
+              </Button>
+            ) : (
+              <Button type="submit" disabled={createMutation.isPending}>
+                {createMutation.isPending ? (
+                  <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                ) : (
+                  <Check className="mr-1.5 h-4 w-4" />
+                )}
+                Create Invoice
+              </Button>
+            )}
+          </div>
+        </form>
+      </FormProvider>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/invoices/page.tsx

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Plus, Trash2 } from 'lucide-react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { Button } from '@/components/ui/button';
+import { DataTable } from '@/components/shared/data-table';
+import { FilterBar } from '@/components/shared/filter-bar';
+import { PageHeader } from '@/components/shared/page-header';
+import { EmptyState } from '@/components/shared/empty-state';
+import { TableSkeleton } from '@/components/shared/loading-skeleton';
+import { PermissionGate } from '@/components/shared/permission-gate';
+import { invoiceFilterDefinitions } from '@/components/invoices/invoice-filters';
+import { getInvoiceColumns, type InvoiceRow } from '@/components/invoices/invoice-columns';
+import { usePaginatedQuery } from '@/hooks/use-paginated-query';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+
+const STATUS_TABS = [
+  { label: 'All', value: '' },
+  { label: 'Draft', value: 'draft' },
+  { label: 'Sent', value: 'sent' },
+  { label: 'Paid', value: 'paid' },
+  { label: 'Overdue', value: 'overdue' },
+] as const;
+
+export default function InvoicesPage() {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
+  const [deleteTarget, setDeleteTarget] = useState<InvoiceRow | null>(null);
+
+  const {
+    data,
+    pagination,
+    isLoading,
+    isFetching,
+    sort,
+    setSort,
+    setPage,
+    setPageSize,
+    filters,
+    setFilter,
+    clearFilters,
+  } = usePaginatedQuery<InvoiceRow>({
+    queryKey: ['invoices'],
+    endpoint: '/api/v1/invoices',
+    filterDefinitions: invoiceFilterDefinitions,
+  });
+
+  const activeStatus = (filters.status as string) ?? '';
+
+  useRealtimeInvalidation({
+    'invoice:created': [['invoices']],
+    'invoice:updated': [['invoices']],
+    'invoice:sent': [['invoices']],
+    'invoice:paid': [['invoices']],
+    'invoice:overdue': [['invoices']],
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiFetch(`/api/v1/invoices/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+      setDeleteTarget(null);
+    },
+  });
+
+  const sendMutation = useMutation({
+    mutationFn: (id: string) =>
+      apiFetch(`/api/v1/invoices/${id}/send`, { method: 'POST' }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+    },
+  });
+
+  const columns = getInvoiceColumns({
+    portSlug,
+    onSend: (invoice) => sendMutation.mutate(invoice.id),
+    onRecordPayment: (invoice) =>
+      router.push(`/${portSlug}/invoices/${invoice.id}?tab=payment`),
+    onDelete: (invoice) => setDeleteTarget(invoice),
+  });
+
+  return (
+    <div className="space-y-4">
+      <PageHeader
+        title="Invoices"
+        description="Create and manage port invoices"
+        actions={
+          <PermissionGate resource="invoices" action="create">
+            <Button size="sm" onClick={() => router.push(`/${portSlug}/invoices/new`)}>
+              <Plus className="mr-1.5 h-4 w-4" />
+              New Invoice
+            </Button>
+          </PermissionGate>
+        }
+      />
+
+      {/* Status quick-filter tabs */}
+      <div className="flex items-center gap-1 border-b">
+        {STATUS_TABS.map((tab) => (
+          <button
+            key={tab.value}
+            onClick={() => setFilter('status', tab.value || undefined)}
+            className={`px-3 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
+              activeStatus === tab.value
+                ? 'border-primary text-primary'
+                : 'border-transparent text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <FilterBar
+        filters={invoiceFilterDefinitions.filter((f) => f.key !== 'status')}
+        values={filters}
+        onChange={setFilter}
+        onClear={clearFilters}
+      />
+
+      {isLoading ? (
+        <TableSkeleton />
+      ) : (
+        <DataTable
+          columns={columns}
+          data={data}
+          pagination={pagination}
+          onPaginationChange={(p, ps) => {
+            setPage(p);
+            setPageSize(ps);
+          }}
+          sort={sort}
+          onSortChange={setSort}
+          isLoading={isFetching && !isLoading}
+          getRowId={(row) => row.id}
+          emptyState={
+            <EmptyState
+              title="No invoices found"
+              description="Get started by creating your first invoice."
+              action={{
+                label: 'New Invoice',
+                onClick: () => router.push(`/${portSlug}/invoices/new`),
+              }}
+            />
+          }
+        />
+      )}
+
+      {/* Delete confirmation */}
+      {deleteTarget && (
+        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center">
+          <div className="bg-background border rounded-lg shadow-lg p-6 max-w-sm w-full space-y-4">
+            <h3 className="font-semibold">Delete Invoice?</h3>
+            <p className="text-sm text-muted-foreground">
+              This will permanently delete invoice{' '}
+              <span className="font-mono font-medium">{deleteTarget.invoiceNumber}</span>.
+              This action cannot be undone.
+            </p>
+            <div className="flex items-center gap-2 justify-end">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setDeleteTarget(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={() => deleteMutation.mutate(deleteTarget.id)}
+                disabled={deleteMutation.isPending}
+              >
+                <Trash2 className="mr-1.5 h-4 w-4" />
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/page.tsx

@@ -0,0 +1,5 @@
+import { DashboardShell } from '@/components/dashboard/dashboard-shell';
+
+export default function DashboardPage() {
+  return <DashboardShell />;
+}

src/app/(dashboard)/[portSlug]/reminders/page.tsx

@@ -0,0 +1,16 @@
+export default function RemindersPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Reminders</h1>
+        <p className="text-muted-foreground">Manage tasks and follow-up reminders</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/[portSlug]/reports/page.tsx

@@ -0,0 +1,5 @@
+import { ReportsPageClient } from '@/components/reports/reports-page-client';
+
+export default function ReportsPage() {
+  return <ReportsPageClient />;
+}

src/app/(dashboard)/[portSlug]/settings/page.tsx

@@ -0,0 +1,16 @@
+export default function SettingsPage() {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
+        <p className="text-muted-foreground">Manage your account and port preferences</p>
+      </div>
+      <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12">
+        <p className="text-lg font-medium text-muted-foreground">Coming in Layer 2</p>
+        <p className="text-sm text-muted-foreground">
+          This feature will be implemented in the next phase.
+        </p>
+      </div>
+    </div>
+  );
+}