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/reports/reports-list.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Download, FileText } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { ReportStatusBadge } from '@/components/reports/report-status-badge';
+import { apiFetch } from '@/lib/api/client';
+
+interface GeneratedReport {
+  id: string;
+  name: string;
+  reportType: string;
+  status: 'queued' | 'processing' | 'ready' | 'failed';
+  requestedBy: string;
+  createdAt: string;
+  completedAt: string | null;
+  errorMessage: string | null;
+  fileId: string | null;
+}
+
+interface ReportsResponse {
+  data: GeneratedReport[];
+  pagination: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+  };
+}
+
+const REPORT_TYPE_LABELS: Record<string, string> = {
+  pipeline: 'Pipeline Summary',
+  revenue: 'Revenue',
+  activity: 'Activity Log',
+  occupancy: 'Berth Occupancy',
+};
+
+export function ReportsList() {
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+
+  const { data, isLoading } = useQuery<ReportsResponse>({
+    queryKey: ['reports'],
+    queryFn: () => apiFetch<ReportsResponse>('/api/v1/reports?limit=50'),
+    refetchInterval: (query) => {
+      const rows = query.state.data?.data ?? [];
+      const hasPending = rows.some(
+        (r) => r.status === 'queued' || r.status === 'processing',
+      );
+      return hasPending ? 5000 : false;
+    },
+  });
+
+  const handleDownload = async (reportId: string) => {
+    setDownloadingId(reportId);
+    try {
+      const result = await apiFetch<{ url: string }>(
+        `/api/v1/reports/${reportId}/download`,
+      );
+      window.open(result.url, '_blank');
+    } catch (err) {
+      console.error('Download failed', err);
+    } finally {
+      setDownloadingId(null);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Generated Reports</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <div className="space-y-2">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className="h-10 w-full" />
+            ))}
+          </div>
+        ) : !data?.data.length ? (
+          <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
+            <FileText className="mb-2 h-8 w-8 text-muted-foreground" />
+            <p className="text-sm font-medium text-muted-foreground">
+              No reports generated yet
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Use the form above to generate your first report.
+            </p>
+          </div>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Requested</TableHead>
+                <TableHead>Completed</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {data.data.map((report) => (
+                <TableRow key={report.id}>
+                  <TableCell className="font-medium">{report.name}</TableCell>
+                  <TableCell className="text-muted-foreground">
+                    {REPORT_TYPE_LABELS[report.reportType] ?? report.reportType}
+                  </TableCell>
+                  <TableCell>
+                    <ReportStatusBadge status={report.status} />
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {new Date(report.createdAt).toLocaleString('en-GB', {
+                      dateStyle: 'short',
+                      timeStyle: 'short',
+                    })}
+                  </TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {report.completedAt
+                      ? new Date(report.completedAt).toLocaleString('en-GB', {
+                          dateStyle: 'short',
+                          timeStyle: 'short',
+                        })
+                      : report.status === 'failed' && report.errorMessage
+                        ? (
+                          <span className="text-destructive text-xs" title={report.errorMessage}>
+                            Failed
+                          </span>
+                        )
+                        : '—'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {report.status === 'ready' && report.fileId && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDownload(report.id)}
+                        disabled={downloadingId === report.id}
+                      >
+                        <Download className="mr-1 h-4 w-4" />
+                        {downloadingId === report.id ? 'Opening...' : 'Download'}
+                      </Button>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+    </Card>
+  );
+}