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/admin/custom-fields/custom-field-form.tsx

@@ -0,0 +1,343 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Plus, X } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { apiFetch } from '@/lib/api/client';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface CustomFieldDefinition {
+  id: string;
+  entityType: string;
+  fieldName: string;
+  fieldLabel: string;
+  fieldType: string;
+  selectOptions: string[] | null;
+  isRequired: boolean;
+  sortOrder: number;
+}
+
+interface CustomFieldFormProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  field?: CustomFieldDefinition | null;
+  onSuccess: () => void;
+}
+
+const ENTITY_TYPE_LABELS: Record<string, string> = {
+  client: 'Clients',
+  interest: 'Interests',
+  berth: 'Berths',
+};
+
+const FIELD_TYPE_LABELS: Record<string, string> = {
+  text: 'Text',
+  number: 'Number',
+  date: 'Date',
+  boolean: 'Yes / No',
+  select: 'Dropdown (Select)',
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function CustomFieldForm({
+  open,
+  onOpenChange,
+  field,
+  onSuccess,
+}: CustomFieldFormProps) {
+  const isEdit = !!field;
+
+  // Form state
+  const [entityType, setEntityType] = useState(field?.entityType ?? 'client');
+  const [fieldName, setFieldName] = useState(field?.fieldName ?? '');
+  const [fieldLabel, setFieldLabel] = useState(field?.fieldLabel ?? '');
+  const [fieldType, setFieldType] = useState(field?.fieldType ?? 'text');
+  const [selectOptions, setSelectOptions] = useState<string[]>(
+    field?.selectOptions ?? [],
+  );
+  const [newOption, setNewOption] = useState('');
+  const [isRequired, setIsRequired] = useState(field?.isRequired ?? false);
+  const [sortOrder, setSortOrder] = useState(field?.sortOrder ?? 0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (open) {
+      setEntityType(field?.entityType ?? 'client');
+      setFieldName(field?.fieldName ?? '');
+      setFieldLabel(field?.fieldLabel ?? '');
+      setFieldType(field?.fieldType ?? 'text');
+      setSelectOptions(field?.selectOptions ?? []);
+      setNewOption('');
+      setIsRequired(field?.isRequired ?? false);
+      setSortOrder(field?.sortOrder ?? 0);
+      setError(null);
+    }
+  }, [open, field]);
+
+  // ── Select options management ──────────────────────────────────────────────
+
+  function addOption() {
+    const trimmed = newOption.trim();
+    if (!trimmed || selectOptions.includes(trimmed)) return;
+    setSelectOptions((prev) => [...prev, trimmed]);
+    setNewOption('');
+  }
+
+  function removeOption(opt: string) {
+    setSelectOptions((prev) => prev.filter((o) => o !== opt));
+  }
+
+  function handleOptionKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addOption();
+    }
+  }
+
+  // ── Submit ─────────────────────────────────────────────────────────────────
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (fieldType === 'select' && selectOptions.length === 0) {
+      setError('Select fields must have at least one option.');
+      return;
+    }
+
+    setLoading(true);
+    try {
+      if (isEdit) {
+        await apiFetch(`/api/v1/admin/custom-fields/${field.id}`, {
+          method: 'PATCH',
+          body: {
+            fieldLabel,
+            selectOptions: fieldType === 'select' ? selectOptions : undefined,
+            isRequired,
+            sortOrder,
+          },
+        });
+      } else {
+        await apiFetch('/api/v1/admin/custom-fields', {
+          method: 'POST',
+          body: {
+            entityType,
+            fieldName,
+            fieldLabel,
+            fieldType,
+            selectOptions: fieldType === 'select' ? selectOptions : undefined,
+            isRequired,
+            sortOrder,
+          },
+        });
+      }
+      onSuccess();
+      onOpenChange(false);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Something went wrong';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>
+            {isEdit ? 'Edit Custom Field' : 'New Custom Field'}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-5 py-2">
+          {/* Entity Type — create only */}
+          <div className="space-y-1.5">
+            <Label htmlFor="cf-entity-type">Entity Type</Label>
+            {isEdit ? (
+              <p className="text-sm text-muted-foreground">
+                {ENTITY_TYPE_LABELS[entityType] ?? entityType}
+              </p>
+            ) : (
+              <Select value={entityType} onValueChange={setEntityType}>
+                <SelectTrigger id="cf-entity-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(ENTITY_TYPE_LABELS).map(([val, label]) => (
+                    <SelectItem key={val} value={val}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* Field Name — create only */}
+          <div className="space-y-1.5">
+            <Label htmlFor="cf-field-name">
+              Field Name
+              <span className="ml-1 text-xs text-muted-foreground">(snake_case)</span>
+            </Label>
+            {isEdit ? (
+              <p className="font-mono text-sm text-muted-foreground">{fieldName}</p>
+            ) : (
+              <Input
+                id="cf-field-name"
+                value={fieldName}
+                onChange={(e) => setFieldName(e.target.value)}
+                placeholder="e.g. vessel_type"
+                pattern="^[a-z_][a-z0-9_]*$"
+                maxLength={50}
+                required
+              />
+            )}
+          </div>
+
+          {/* Field Label */}
+          <div className="space-y-1.5">
+            <Label htmlFor="cf-field-label">Display Label</Label>
+            <Input
+              id="cf-field-label"
+              value={fieldLabel}
+              onChange={(e) => setFieldLabel(e.target.value)}
+              placeholder="e.g. Vessel Type"
+              maxLength={100}
+              required
+            />
+          </div>
+
+          {/* Field Type — create only */}
+          <div className="space-y-1.5">
+            <Label htmlFor="cf-field-type">Field Type</Label>
+            {isEdit ? (
+              <div>
+                <p className="text-sm text-muted-foreground">
+                  {FIELD_TYPE_LABELS[fieldType] ?? fieldType}
+                </p>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  Type cannot be changed after creation.
+                </p>
+              </div>
+            ) : (
+              <Select value={fieldType} onValueChange={setFieldType}>
+                <SelectTrigger id="cf-field-type">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {Object.entries(FIELD_TYPE_LABELS).map(([val, label]) => (
+                    <SelectItem key={val} value={val}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+
+          {/* Select Options — visible when fieldType = 'select' */}
+          {fieldType === 'select' && (
+            <div className="space-y-2">
+              <Label>Options</Label>
+              <div className="flex gap-2">
+                <Input
+                  value={newOption}
+                  onChange={(e) => setNewOption(e.target.value)}
+                  onKeyDown={handleOptionKeyDown}
+                  placeholder="Add option..."
+                  maxLength={100}
+                />
+                <Button type="button" variant="outline" size="sm" onClick={addOption}>
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+              {selectOptions.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 pt-1">
+                  {selectOptions.map((opt) => (
+                    <span
+                      key={opt}
+                      className="flex items-center gap-1 rounded-md border bg-muted px-2 py-0.5 text-sm"
+                    >
+                      {opt}
+                      <button
+                        type="button"
+                        onClick={() => removeOption(opt)}
+                        className="ml-0.5 text-muted-foreground hover:text-destructive"
+                        aria-label={`Remove option ${opt}`}
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Is Required */}
+          <div className="flex items-center justify-between">
+            <Label htmlFor="cf-is-required">Required field</Label>
+            <Switch
+              id="cf-is-required"
+              checked={isRequired}
+              onCheckedChange={setIsRequired}
+            />
+          </div>
+
+          {/* Sort Order */}
+          <div className="space-y-1.5">
+            <Label htmlFor="cf-sort-order">Sort Order</Label>
+            <Input
+              id="cf-sort-order"
+              type="number"
+              value={sortOrder}
+              onChange={(e) => setSortOrder(parseInt(e.target.value, 10) || 0)}
+              min={0}
+            />
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Field'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/admin/custom-fields/custom-fields-manager.tsx

@@ -0,0 +1,224 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { Pencil, Trash2, Plus } from 'lucide-react';
+
+import { DataTable } from '@/components/shared/data-table';
+import { PageHeader } from '@/components/shared/page-header';
+import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { apiFetch } from '@/lib/api/client';
+import {
+  CustomFieldForm,
+  type CustomFieldDefinition,
+} from './custom-field-form';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type EntityTab = 'client' | 'interest' | 'berth';
+
+const TAB_LABELS: Record<EntityTab, string> = {
+  client: 'Clients',
+  interest: 'Interests',
+  berth: 'Berths',
+};
+
+const FIELD_TYPE_LABELS: Record<string, string> = {
+  text: 'Text',
+  number: 'Number',
+  date: 'Date',
+  boolean: 'Yes / No',
+  select: 'Dropdown',
+};
+
+// ─── Component ────────────────────────────────────────────────────────────────
+
+export function CustomFieldsManager() {
+  const [activeTab, setActiveTab] = useState<EntityTab>('client');
+  const [fields, setFields] = useState<CustomFieldDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingField, setEditingField] = useState<CustomFieldDefinition | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+
+  const fetchFields = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiFetch<{ data: CustomFieldDefinition[] }>(
+        '/api/v1/admin/custom-fields',
+      );
+      setFields(res.data);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchFields();
+  }, [fetchFields]);
+
+  const filteredFields = fields.filter((f) => f.entityType === activeTab);
+
+  function handleCreate() {
+    setEditingField(null);
+    setFormOpen(true);
+  }
+
+  function handleEdit(field: CustomFieldDefinition) {
+    setEditingField(field);
+    setFormOpen(true);
+  }
+
+  async function handleDelete(id: string) {
+    setDeletingId(id);
+    try {
+      await apiFetch(`/api/v1/admin/custom-fields/${id}`, { method: 'DELETE' });
+      await fetchFields();
+    } finally {
+      setDeletingId(null);
+    }
+  }
+
+  function getDeleteDescription(field: CustomFieldDefinition): string {
+    return `Are you sure you want to delete "${field.fieldLabel}" (${field.fieldName})? All stored values for this field will also be permanently deleted.`;
+  }
+
+  const columns: ColumnDef<CustomFieldDefinition, unknown>[] = [
+    {
+      accessorKey: 'fieldName',
+      header: 'Name',
+      cell: ({ row }) => (
+        <span className="font-mono text-sm">{row.original.fieldName}</span>
+      ),
+    },
+    {
+      accessorKey: 'fieldLabel',
+      header: 'Label',
+      cell: ({ row }) => (
+        <span className="font-medium">{row.original.fieldLabel}</span>
+      ),
+    },
+    {
+      accessorKey: 'fieldType',
+      header: 'Type',
+      cell: ({ row }) => (
+        <Badge variant="secondary">
+          {FIELD_TYPE_LABELS[row.original.fieldType] ?? row.original.fieldType}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: 'isRequired',
+      header: 'Required',
+      cell: ({ row }) =>
+        row.original.isRequired ? (
+          <Badge variant="destructive" className="text-xs">
+            Required
+          </Badge>
+        ) : (
+          <span className="text-xs text-muted-foreground">Optional</span>
+        ),
+    },
+    {
+      accessorKey: 'sortOrder',
+      header: 'Order',
+      cell: ({ row }) => (
+        <span className="tabular-nums text-muted-foreground">
+          {row.original.sortOrder}
+        </span>
+      ),
+    },
+    {
+      id: 'actions',
+      header: '',
+      cell: ({ row }) => (
+        <div className="flex items-center justify-end gap-1">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleEdit(row.original)}
+          >
+            <Pencil className="h-4 w-4" />
+            <span className="sr-only">Edit</span>
+          </Button>
+          <ConfirmationDialog
+            trigger={
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-destructive hover:text-destructive"
+                disabled={deletingId === row.original.id}
+              >
+                <Trash2 className="h-4 w-4" />
+                <span className="sr-only">Delete</span>
+              </Button>
+            }
+            title="Delete Custom Field"
+            description={getDeleteDescription(row.original)}
+            confirmLabel="Delete Field"
+            onConfirm={() => handleDelete(row.original.id)}
+            loading={deletingId === row.original.id}
+          />
+        </div>
+      ),
+      enableSorting: false,
+      size: 80,
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <PageHeader
+        title="Custom Fields"
+        description="Define custom fields for clients and records"
+        actions={
+          <Button onClick={handleCreate}>
+            <Plus className="mr-1.5 h-4 w-4" />
+            New Field
+          </Button>
+        }
+      />
+
+      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as EntityTab)}>
+        <TabsList>
+          {(Object.keys(TAB_LABELS) as EntityTab[]).map((tab) => (
+            <TabsTrigger key={tab} value={tab}>
+              {TAB_LABELS[tab]}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        {(Object.keys(TAB_LABELS) as EntityTab[]).map((tab) => (
+          <TabsContent key={tab} value={tab} className="mt-4">
+            <DataTable
+              columns={columns}
+              data={filteredFields}
+              isLoading={loading}
+              getRowId={(row) => row.id}
+              emptyState={
+                <div className="py-8 text-center">
+                  <p className="text-muted-foreground">
+                    No custom fields for {TAB_LABELS[tab]} yet.
+                  </p>
+                  <Button variant="link" onClick={handleCreate} className="mt-2">
+                    Create the first field
+                  </Button>
+                </div>
+              }
+            />
+          </TabsContent>
+        ))}
+      </Tabs>
+
+      <CustomFieldForm
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        field={editingField}
+        onSuccess={fetchFields}
+      />
+    </div>
+  );
+}