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/invoices/invoice-columns.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import Link from 'next/link';
+import { format } from 'date-fns';
+import { MoreHorizontal, Eye, Send, CreditCard, Trash2, FileText } from 'lucide-react';
+import type { ColumnDef } from '@tanstack/react-table';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+
+export interface InvoiceRow {
+  id: string;
+  invoiceNumber: string;
+  clientName: string;
+  total: string;
+  currency: string;
+  status: string;
+  paymentStatus: string | null;
+  dueDate: string;
+  pdfFileId: string | null;
+  archivedAt: string | null;
+  createdAt: string;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: 'bg-gray-100 text-gray-700 border-gray-200',
+  sent: 'bg-blue-100 text-blue-700 border-blue-200',
+  paid: 'bg-green-100 text-green-700 border-green-200',
+  overdue: 'bg-red-100 text-red-700 border-red-200',
+  cancelled: 'bg-gray-100 text-gray-500 border-gray-200',
+};
+
+interface GetColumnsOptions {
+  portSlug: string;
+  onSend?: (invoice: InvoiceRow) => void;
+  onRecordPayment?: (invoice: InvoiceRow) => void;
+  onDelete?: (invoice: InvoiceRow) => void;
+}
+
+export function getInvoiceColumns({
+  portSlug,
+  onSend,
+  onRecordPayment,
+  onDelete,
+}: GetColumnsOptions): ColumnDef<InvoiceRow, unknown>[] {
+  const today = new Date().toISOString().split('T')[0]!;
+
+  return [
+    {
+      id: 'invoiceNumber',
+      accessorKey: 'invoiceNumber',
+      header: 'Invoice #',
+      cell: ({ row }) => (
+        <Link
+          href={`/${portSlug}/invoices/${row.original.id}`}
+          className="font-medium text-primary hover:underline font-mono text-sm"
+          onClick={(e) => e.stopPropagation()}
+        >
+          {row.original.invoiceNumber}
+        </Link>
+      ),
+    },
+    {
+      id: 'clientName',
+      accessorKey: 'clientName',
+      header: 'Client',
+      cell: ({ getValue }) => (
+        <span className="font-medium">{getValue() as string}</span>
+      ),
+    },
+    {
+      id: 'total',
+      header: 'Total',
+      enableSorting: false,
+      cell: ({ row }) => (
+        <span className="font-medium tabular-nums">
+          {Number(row.original.total).toLocaleString('en-US', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          })}{' '}
+          {row.original.currency}
+        </span>
+      ),
+    },
+    {
+      id: 'status',
+      accessorKey: 'status',
+      header: 'Status',
+      cell: ({ getValue }) => {
+        const status = (getValue() as string) ?? 'draft';
+        const colorClass = STATUS_COLORS[status] ?? STATUS_COLORS.draft;
+        return (
+          <Badge
+            variant="outline"
+            className={`capitalize text-xs border ${colorClass}`}
+          >
+            {status}
+          </Badge>
+        );
+      },
+    },
+    {
+      id: 'dueDate',
+      accessorKey: 'dueDate',
+      header: 'Due Date',
+      cell: ({ row }) => {
+        const due = row.original.dueDate;
+        const isOverdue =
+          row.original.status === 'sent' && due < today;
+        return (
+          <span
+            className={`text-sm ${isOverdue ? 'text-red-600 font-medium' : 'text-muted-foreground'}`}
+          >
+            {format(new Date(due), 'MMM d, yyyy')}
+          </span>
+        );
+      },
+    },
+    {
+      id: 'actions',
+      header: '',
+      enableSorting: false,
+      size: 48,
+      cell: ({ row }) => {
+        const invoice = row.original;
+        return (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem asChild>
+                <Link href={`/${portSlug}/invoices/${invoice.id}`}>
+                  <Eye className="mr-2 h-3.5 w-3.5" />
+                  View
+                </Link>
+              </DropdownMenuItem>
+              {invoice.pdfFileId && (
+                <DropdownMenuItem asChild>
+                  <Link href={`/api/v1/files/${invoice.pdfFileId}/preview`} target="_blank">
+                    <FileText className="mr-2 h-3.5 w-3.5" />
+                    View PDF
+                  </Link>
+                </DropdownMenuItem>
+              )}
+              {invoice.status === 'draft' && onSend && (
+                <DropdownMenuItem onClick={() => onSend(invoice)}>
+                  <Send className="mr-2 h-3.5 w-3.5" />
+                  Send
+                </DropdownMenuItem>
+              )}
+              {(invoice.status === 'sent' || invoice.status === 'overdue') &&
+                onRecordPayment && (
+                  <DropdownMenuItem onClick={() => onRecordPayment(invoice)}>
+                    <CreditCard className="mr-2 h-3.5 w-3.5" />
+                    Record Payment
+                  </DropdownMenuItem>
+                )}
+              {invoice.status === 'draft' && onDelete && (
+                <DropdownMenuItem
+                  className="text-destructive"
+                  onClick={() => onDelete(invoice)}
+                >
+                  <Trash2 className="mr-2 h-3.5 w-3.5" />
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        );
+      },
+    },
+  ];
+}

src/components/invoices/invoice-detail.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import { Loader2, Send, CreditCard } from 'lucide-react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { InvoicePdfPreview } from './invoice-pdf-preview';
+import { apiFetch } from '@/lib/api/client';
+import { recordPaymentSchema, type RecordPaymentInput } from '@/lib/validators/invoices';
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: 'bg-gray-100 text-gray-700 border-gray-200',
+  sent: 'bg-blue-100 text-blue-700 border-blue-200',
+  paid: 'bg-green-100 text-green-700 border-green-200',
+  overdue: 'bg-red-100 text-red-700 border-red-200',
+  cancelled: 'bg-gray-100 text-gray-500 border-gray-200',
+};
+
+interface InvoiceDetailProps {
+  invoiceId: string;
+}
+
+export function InvoiceDetail({ invoiceId }: InvoiceDetailProps) {
+  const queryClient = useQueryClient();
+  const [tab, setTab] = useState('overview');
+
+  const { data, isLoading, error } = useQuery<{ data: any }>({
+    queryKey: ['invoices', invoiceId],
+    queryFn: () => apiFetch(`/api/v1/invoices/${invoiceId}`),
+  });
+
+  const sendMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/invoices/${invoiceId}/send`, { method: 'POST' }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+    },
+  });
+
+  const paymentForm = useForm<RecordPaymentInput>({
+    resolver: zodResolver(recordPaymentSchema),
+    defaultValues: { paymentDate: new Date().toISOString().split('T')[0] },
+  });
+
+  const paymentMutation = useMutation({
+    mutationFn: (values: RecordPaymentInput) =>
+      apiFetch(`/api/v1/invoices/${invoiceId}/payment`, {
+        method: 'PATCH',
+        body: JSON.stringify(values),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
+      queryClient.invalidateQueries({ queryKey: ['invoices'] });
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-12">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  if (error || !data?.data) {
+    return (
+      <div className="p-6 text-center text-muted-foreground">
+        Failed to load invoice details.
+      </div>
+    );
+  }
+
+  const invoice = data.data;
+  const statusColor = STATUS_COLORS[invoice.status] ?? STATUS_COLORS.draft;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <h2 className="text-xl font-semibold font-mono">{invoice.invoiceNumber}</h2>
+            <Badge variant="outline" className={`capitalize text-sm border ${statusColor}`}>
+              {invoice.status}
+            </Badge>
+          </div>
+          <p className="text-sm text-muted-foreground mt-0.5">{invoice.clientName}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {invoice.status === 'draft' && (
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => sendMutation.mutate()}
+              disabled={sendMutation.isPending}
+            >
+              {sendMutation.isPending ? (
+                <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="mr-1.5 h-4 w-4" />
+              )}
+              Send Invoice
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <Tabs value={tab} onValueChange={setTab}>
+        <TabsList>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="expenses">Linked Expenses</TabsTrigger>
+          <TabsTrigger value="pdf">PDF Preview</TabsTrigger>
+          <TabsTrigger value="payment">Payment</TabsTrigger>
+        </TabsList>
+
+        {/* Overview */}
+        <TabsContent value="overview" className="space-y-4 pt-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Total</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-2xl font-bold tabular-nums">
+                  {Number(invoice.total).toLocaleString('en-US', {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  })}{' '}
+                  {invoice.currency}
+                </p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Due Date</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm">{invoice.dueDate}</p>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Payment Terms</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm capitalize">{invoice.paymentTerms}</p>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Line items */}
+          {invoice.lineItems && invoice.lineItems.length > 0 && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Line Items</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground border-b pb-2">
+                    <span className="col-span-6">Description</span>
+                    <span className="col-span-2 text-right">Qty</span>
+                    <span className="col-span-2 text-right">Unit Price</span>
+                    <span className="col-span-2 text-right">Total</span>
+                  </div>
+                  {invoice.lineItems.map((li: any) => (
+                    <div key={li.id} className="grid grid-cols-12 gap-2 text-sm">
+                      <span className="col-span-6">{li.description}</span>
+                      <span className="col-span-2 text-right tabular-nums">{li.quantity}</span>
+                      <span className="col-span-2 text-right tabular-nums">
+                        {Number(li.unitPrice).toFixed(2)}
+                      </span>
+                      <span className="col-span-2 text-right tabular-nums font-medium">
+                        {Number(li.total).toFixed(2)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Totals */}
+                <div className="mt-4 border-t pt-4 space-y-1 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Subtotal</span>
+                    <span className="tabular-nums">
+                      {Number(invoice.subtotal).toFixed(2)} {invoice.currency}
+                    </span>
+                  </div>
+                  {Number(invoice.discountAmount) > 0 && (
+                    <div className="flex justify-between text-green-600">
+                      <span>Discount ({invoice.discountPct}%)</span>
+                      <span className="tabular-nums">
+                        -{Number(invoice.discountAmount).toFixed(2)} {invoice.currency}
+                      </span>
+                    </div>
+                  )}
+                  {Number(invoice.feeAmount) > 0 && (
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Fee ({invoice.feePct}%)</span>
+                      <span className="tabular-nums">
+                        +{Number(invoice.feeAmount).toFixed(2)} {invoice.currency}
+                      </span>
+                    </div>
+                  )}
+                  <div className="flex justify-between font-semibold border-t pt-2">
+                    <span>Total</span>
+                    <span className="tabular-nums">
+                      {Number(invoice.total).toFixed(2)} {invoice.currency}
+                    </span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {invoice.notes && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Notes</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                  {invoice.notes}
+                </p>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        {/* Linked Expenses */}
+        <TabsContent value="expenses" className="pt-4">
+          {invoice.linkedExpenses && invoice.linkedExpenses.length > 0 ? (
+            <div className="space-y-2">
+              {invoice.linkedExpenses.map((exp: any) => (
+                <div
+                  key={exp.id}
+                  className="flex items-center justify-between p-3 border rounded-md text-sm"
+                >
+                  <div>
+                    <p className="font-medium">
+                      {exp.establishmentName ?? 'Unnamed Expense'}
+                    </p>
+                    <p className="text-muted-foreground text-xs">
+                      {exp.category ?? '—'} &middot; {exp.expenseDate}
+                    </p>
+                  </div>
+                  <span className="font-medium tabular-nums">
+                    {Number(exp.amount).toFixed(2)} {exp.currency}
+                  </span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="text-sm text-muted-foreground py-6 text-center">
+              No expenses linked to this invoice.
+            </p>
+          )}
+        </TabsContent>
+
+        {/* PDF Preview */}
+        <TabsContent value="pdf" className="pt-4">
+          <InvoicePdfPreview
+            invoiceId={invoiceId}
+            pdfFileId={invoice.pdfFileId}
+          />
+        </TabsContent>
+
+        {/* Payment */}
+        <TabsContent value="payment" className="pt-4">
+          {invoice.status === 'paid' ? (
+            <Card>
+              <CardContent className="pt-6 space-y-3 text-sm">
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant="outline"
+                    className="bg-green-100 text-green-700 border-green-200"
+                  >
+                    Paid
+                  </Badge>
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <span className="text-muted-foreground">Payment Date</span>
+                    <p className="mt-0.5">{invoice.paymentDate ?? '—'}</p>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Method</span>
+                    <p className="mt-0.5 capitalize">
+                      {invoice.paymentMethod ?? '—'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-muted-foreground">Reference</span>
+                    <p className="mt-0.5">{invoice.paymentReference ?? '—'}</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Record Payment</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <form
+                  onSubmit={paymentForm.handleSubmit((values) =>
+                    paymentMutation.mutate(values),
+                  )}
+                  className="space-y-4"
+                >
+                  <div className="space-y-1">
+                    <Label htmlFor="paymentDate">Payment Date</Label>
+                    <Input
+                      id="paymentDate"
+                      type="date"
+                      {...paymentForm.register('paymentDate')}
+                    />
+                    {paymentForm.formState.errors.paymentDate && (
+                      <p className="text-xs text-destructive">
+                        {paymentForm.formState.errors.paymentDate.message}
+                      </p>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <Label htmlFor="paymentMethod">Payment Method</Label>
+                    <Input
+                      id="paymentMethod"
+                      placeholder="e.g. bank_transfer, credit_card"
+                      {...paymentForm.register('paymentMethod')}
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <Label htmlFor="paymentReference">Reference / Transaction ID</Label>
+                    <Input
+                      id="paymentReference"
+                      placeholder="Optional reference"
+                      {...paymentForm.register('paymentReference')}
+                    />
+                  </div>
+                  <Button
+                    type="submit"
+                    disabled={paymentMutation.isPending}
+                  >
+                    {paymentMutation.isPending ? (
+                      <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+                    ) : (
+                      <CreditCard className="mr-1.5 h-4 w-4" />
+                    )}
+                    Mark as Paid
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/invoices/invoice-filters.tsx

@@ -0,0 +1,45 @@
+import type { FilterDefinition } from '@/components/shared/filter-bar';
+
+export const invoiceFilterDefinitions: FilterDefinition[] = [
+  {
+    key: 'search',
+    label: 'Search',
+    type: 'text',
+    placeholder: 'Search by invoice # or client...',
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'multi-select',
+    options: [
+      { label: 'Draft', value: 'draft' },
+      { label: 'Sent', value: 'sent' },
+      { label: 'Paid', value: 'paid' },
+      { label: 'Overdue', value: 'overdue' },
+      { label: 'Cancelled', value: 'cancelled' },
+    ],
+  },
+  {
+    key: 'clientName',
+    label: 'Client Name',
+    type: 'text',
+    placeholder: 'Filter by client name...',
+  },
+  {
+    key: 'dateFrom',
+    label: 'Due From',
+    type: 'text',
+    placeholder: 'YYYY-MM-DD',
+  },
+  {
+    key: 'dateTo',
+    label: 'Due To',
+    type: 'text',
+    placeholder: 'YYYY-MM-DD',
+  },
+  {
+    key: 'includeArchived',
+    label: 'Include Archived',
+    type: 'boolean',
+  },
+];

src/components/invoices/invoice-line-items.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { Plus, Trash2 } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface LineItem {
+  description: string;
+  quantity: number;
+  unitPrice: number;
+}
+
+interface InvoiceLineItemsProps {
+  name?: string;
+}
+
+export function InvoiceLineItems({ name = 'lineItems' }: InvoiceLineItemsProps) {
+  const { register, watch, formState: { errors } } = useFormContext();
+  const { fields, append, remove } = useFieldArray({ name });
+
+  const lineItems: LineItem[] = watch(name) ?? [];
+
+  const subtotal = lineItems.reduce(
+    (sum, li) => sum + (Number(li.quantity) || 0) * (Number(li.unitPrice) || 0),
+    0,
+  );
+
+  return (
+    <div className="space-y-3">
+      {/* Header */}
+      {fields.length > 0 && (
+        <div className="grid grid-cols-12 gap-2 text-xs font-medium text-muted-foreground px-1">
+          <span className="col-span-6">Description</span>
+          <span className="col-span-2 text-right">Qty</span>
+          <span className="col-span-2 text-right">Unit Price</span>
+          <span className="col-span-1 text-right">Total</span>
+          <span className="col-span-1" />
+        </div>
+      )}
+
+      {/* Line items */}
+      {fields.map((field, index) => {
+        const qty = Number(lineItems[index]?.quantity) || 0;
+        const price = Number(lineItems[index]?.unitPrice) || 0;
+        const lineTotal = qty * price;
+
+        return (
+          <div key={field.id} className="grid grid-cols-12 gap-2 items-start">
+            <div className="col-span-6">
+              <Input
+                {...register(`${name}.${index}.description`)}
+                placeholder="Description"
+                className="h-8 text-sm"
+              />
+            </div>
+            <div className="col-span-2">
+              <Input
+                {...register(`${name}.${index}.quantity`, { valueAsNumber: true })}
+                type="number"
+                min="0.001"
+                step="any"
+                placeholder="1"
+                className="h-8 text-sm text-right"
+              />
+            </div>
+            <div className="col-span-2">
+              <Input
+                {...register(`${name}.${index}.unitPrice`, { valueAsNumber: true })}
+                type="number"
+                min="0"
+                step="any"
+                placeholder="0.00"
+                className="h-8 text-sm text-right"
+              />
+            </div>
+            <div className="col-span-1 flex items-center justify-end h-8">
+              <span className="text-sm tabular-nums">
+                {lineTotal.toLocaleString('en-US', {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+              </span>
+            </div>
+            <div className="col-span-1 flex items-center justify-end h-8">
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-7 w-7 text-muted-foreground hover:text-destructive"
+                onClick={() => remove(index)}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </div>
+          </div>
+        );
+      })}
+
+      {/* Empty state */}
+      {fields.length === 0 && (
+        <p className="text-sm text-muted-foreground py-4 text-center border border-dashed rounded-md">
+          No line items yet. Add your first item below.
+        </p>
+      )}
+
+      {/* Add button + subtotal */}
+      <div className="flex items-center justify-between pt-1">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() =>
+            append({ description: '', quantity: 1, unitPrice: 0 })
+          }
+        >
+          <Plus className="mr-1.5 h-3.5 w-3.5" />
+          Add Line Item
+        </Button>
+        {fields.length > 0 && (
+          <div className="text-sm font-medium">
+            Subtotal:{' '}
+            <span className="tabular-nums">
+              {subtotal.toLocaleString('en-US', {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+              })}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/invoices/invoice-pdf-preview.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Loader2, RefreshCw, FileText } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { apiFetch } from '@/lib/api/client';
+
+interface InvoicePdfPreviewProps {
+  invoiceId: string;
+  pdfFileId?: string | null;
+}
+
+export function InvoicePdfPreview({ invoiceId, pdfFileId: initialPdfFileId }: InvoicePdfPreviewProps) {
+  const queryClient = useQueryClient();
+  const [pdfFileId, setPdfFileId] = useState(initialPdfFileId);
+
+  const { data: previewData, isLoading: previewLoading } = useQuery<{ url: string; mimeType: string }>({
+    queryKey: ['file-preview', pdfFileId],
+    queryFn: () => apiFetch(`/api/v1/files/${pdfFileId}/preview`),
+    enabled: !!pdfFileId,
+  });
+
+  const regenerateMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/invoices/${invoiceId}/generate-pdf`, { method: 'POST' }),
+    onSuccess: (data: any) => {
+      const fileId = data?.data?.id;
+      if (fileId) {
+        setPdfFileId(fileId);
+        queryClient.invalidateQueries({ queryKey: ['invoices', invoiceId] });
+        queryClient.invalidateQueries({ queryKey: ['file-preview', fileId] });
+      }
+    },
+  });
+
+  if (!pdfFileId) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12 border border-dashed rounded-md">
+        <FileText className="h-10 w-10 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">No PDF generated yet</p>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => regenerateMutation.mutate()}
+          disabled={regenerateMutation.isPending}
+        >
+          {regenerateMutation.isPending ? (
+            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="mr-1.5 h-4 w-4" />
+          )}
+          Generate PDF
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-end">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => regenerateMutation.mutate()}
+          disabled={regenerateMutation.isPending}
+        >
+          {regenerateMutation.isPending ? (
+            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
+          ) : (
+            <RefreshCw className="mr-1.5 h-4 w-4" />
+          )}
+          Regenerate PDF
+        </Button>
+      </div>
+
+      {previewLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        </div>
+      ) : previewData?.url ? (
+        <iframe
+          src={previewData.url}
+          className="w-full rounded border"
+          style={{ height: '600px' }}
+          title="Invoice PDF"
+        />
+      ) : (
+        <div className="flex items-center justify-center py-12 border rounded">
+          <p className="text-sm text-muted-foreground">Unable to load PDF preview</p>
+        </div>
+      )}
+    </div>
+  );
+}