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