feat(expenses+interests): trip/event grouping (lightweight)

Per the trips/events design discussion: instead of building a full
events domain (table + CRUD UI + calendar) for the 6–12 yacht shows
a year, ship the cheap version that covers the actual asks.

Expenses — `tripLabel` free-text:
- New `expenses.trip_label` text column (migration 0039) + index for
  filter / autocomplete lookup.
- Validator: createExpenseShape + listExpensesSchema +
  exportExpensePdfSchema.filter all accept tripLabel.
- Service: createExpense + updateExpense persist; listExpenses filters;
  new `listTripLabels(portId, search?)` returns distinct values
  ordered by most-recent expenseDate so the autocomplete surfaces
  recently-used labels first.
- New `GET /api/v1/expenses/trip-labels` endpoint (gated by
  expenses.view) backs the autocomplete.
- Form dialog: native `<datalist>` powered by the autocomplete query
  so reps don't end up with "Palm Beach 2026" / "palm-beach 2026"
  fragmented across two PDF sections.
- Expense list: new "Trip" column (badge) + free-text filter.
- Detail page: trip label rendered alongside Category / Payer.
- PDF export: GroupBy gains 'trip'; filter.tripLabel narrows the
  export. Untagged rows fall under "(no trip)".
- Trim/normalize on write so " Palm Beach 2026 " === "Palm Beach 2026".

Interests — event tagging via existing tag system:
- Reps can tag interests with an event tag (e.g. "Palm Beach 2026")
  via the existing InlineTagEditor on the detail page; tags are
  port-scoped and reusable.
- Interest list now has a TagPicker filter rendered next to the
  FilterBar so reps can sort prospects by event attended ("show me
  every lead from Palm Beach"). Hidden 'relation'-typed
  FilterDefinition for tagIds wires URL round-trip + saved-views
  capture without rendering inside the FilterBar.
- FilterBar deserializer now handles `relation` types as comma-joined
  arrays on URL load.

Why a free-text trip label and not a trips table:
- 6–12 events/year doesn't justify a domain. The CRUD UI cost would
  be most of the engineering, and reps already have the events on
  their personal calendars.
- If usage proves demand for per-event ROI dashboards or richer
  attribution, promote to a real `trips` table later. Migration
  path: trip_label → tripId is a backfill+swap.

Test status: 1168/1168 vitest. tsc clean. Migration 0039 applied
in dev (also caught + fixed an unrelated audit-v3 follow-up: 0037
had `idx_br_interest` colliding with the existing
`berth_recommendations.idx_br_interest`; renamed to
`idx_brr_interest` / `idx_brr_contract_file`).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/expenses/expense-columns.tsx

@@ -28,6 +28,7 @@ export interface ExpenseRow {
   payer: string | null;
   receiptFileIds: string[] | null;
   noReceiptAcknowledged?: boolean;
+  tripLabel: string | null;
   archivedAt: string | null;
   createdAt: string;
   /** Set by the dedup engine when this expense looks like a duplicate of another. */
@@ -122,6 +123,21 @@ export function getExpenseColumns({
         );
       },
     },
+    {
+      id: 'tripLabel',
+      accessorKey: 'tripLabel',
+      header: 'Trip',
+      enableSorting: false,
+      cell: ({ getValue }) => {
+        const trip = getValue() as string | null;
+        if (!trip) return <span className="text-muted-foreground text-xs">-</span>;
+        return (
+          <Badge variant="secondary" className="text-xs font-normal">
+            {trip}
+          </Badge>
+        );
+      },
+    },
     {
       id: 'paymentStatus',
       accessorKey: 'paymentStatus',

src/components/expenses/expense-detail.tsx

@@ -235,6 +235,18 @@ export function ExpenseDetail({ expenseId, onEdit, onArchived }: ExpenseDetailPr
             <span className="text-muted-foreground">Payer</span>
             <p className="mt-0.5">{expense.payer ?? '-'}</p>
           </div>
+          <div>
+            <span className="text-muted-foreground">Trip / event</span>
+            <p className="mt-0.5">
+              {expense.tripLabel ? (
+                <Badge variant="secondary" className="text-xs font-normal">
+                  {expense.tripLabel}
+                </Badge>
+              ) : (
+                '-'
+              )}
+            </p>
+          </div>
           <div>
             <span className="text-muted-foreground">Description</span>
             <p className="mt-0.5">{expense.description ?? '-'}</p>

src/components/expenses/expense-filters.tsx

@@ -45,6 +45,12 @@ export const expenseFilterDefinitions: FilterDefinition[] = [
     type: 'text',
     placeholder: 'e.g. USD, EUR',
   },
+  {
+    key: 'tripLabel',
+    label: 'Trip / event',
+    type: 'text',
+    placeholder: 'e.g. Palm Beach 2026',
+  },
   {
     key: 'includeArchived',
     label: 'Include Archived',

src/components/expenses/expense-form-dialog.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { AlertTriangle, Loader2, Upload, X } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
@@ -59,6 +59,16 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
     },
   });
 
+  // Distinct trip labels for the port — fed into the datalist so the
+  // form input doubles as an autocomplete. Cached for the dialog's life
+  // since the list rarely changes mid-session.
+  const tripLabelsQuery = useQuery<{ data: string[] }>({
+    queryKey: ['expenses', 'trip-labels'],
+    queryFn: () => apiFetch('/api/v1/expenses/trip-labels'),
+    enabled: open,
+    staleTime: 60_000,
+  });
+
   useEffect(() => {
     if (open && expense) {
       reset({
@@ -70,6 +80,7 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
         payer: expense.payer ?? undefined,
         expenseDate: new Date(expense.expenseDate),
         paymentStatus: (expense.paymentStatus as CreateExpenseInput['paymentStatus']) ?? 'unpaid',
+        tripLabel: expense.tripLabel ?? undefined,
       });
       setUploadedReceipt(null);
       setPreviewUrl(null);
@@ -295,6 +306,30 @@ export function ExpenseFormDialog({ open, onOpenChange, expense }: ExpenseFormDi
             </Select>
           </div>
 
+          <div className="space-y-2">
+            <Label htmlFor="tripLabel">Trip / event</Label>
+            <Input
+              id="tripLabel"
+              placeholder="e.g. Palm Beach 2026 (optional)"
+              maxLength={120}
+              list="expense-trip-label-suggestions"
+              autoComplete="off"
+              {...register('tripLabel')}
+            />
+            {/* Native datalist gives the rep prior trip values as
+             *  autocomplete suggestions — keeps spellings consistent
+             *  ("Palm Beach 2026" vs "palm-beach 2026") so the PDF
+             *  group-by-trip section actually merges them. */}
+            <datalist id="expense-trip-label-suggestions">
+              {(tripLabelsQuery.data?.data ?? []).map((label) => (
+                <option key={label} value={label} />
+              ))}
+            </datalist>
+            <p className="text-xs text-muted-foreground">
+              Group expenses by yacht show or business trip. Leave empty for everyday spend.
+            </p>
+          </div>
+
           <div className="space-y-2">
             <Label htmlFor="description">Description</Label>
             <Textarea

src/components/interests/interest-filters.tsx

@@ -58,4 +58,12 @@ export const interestFilterDefinitions: FilterDefinition[] = [
     label: 'Include Archived',
     type: 'boolean',
   },
+  // Rendered OUTSIDE the FilterBar by `<TagPicker>` in interest-list, but
+  // declared here so URL round-trip + saved-views capture the value.
+  // `relation` skips the FilterBar's render switch.
+  {
+    key: 'tagIds',
+    label: 'Tags',
+    type: 'relation',
+  },
 ];

src/components/interests/interest-list.tsx

@@ -19,6 +19,7 @@ import { PipelineBoard } from '@/components/interests/pipeline-board';
 import { interestFilterDefinitions } from '@/components/interests/interest-filters';
 import { getInterestColumns, type InterestRow } from '@/components/interests/interest-columns';
 import { InterestCard } from '@/components/interests/interest-card';
+import { TagPicker } from '@/components/shared/tag-picker';
 import { usePaginatedQuery } from '@/hooks/use-paginated-query';
 import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
 import { apiFetch } from '@/lib/api/client';
@@ -123,13 +124,24 @@ export function InterestList() {
         }
       />
 
-      <div className="flex items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2">
         <FilterBar
           filters={interestFilterDefinitions}
           values={filters}
           onChange={setFilter}
           onClear={clearFilters}
         />
+        {/* Tag picker — primary use case is filtering by event/yacht-show
+         *  ("Palm Beach 2026") that the rep tagged interests with at the
+         *  show. The validator already accepts `tagIds` on listInterests;
+         *  this surfaces the input in the filter UI. */}
+        <div className="min-w-[200px]">
+          <TagPicker
+            selectedIds={Array.isArray(filters.tagIds) ? (filters.tagIds as string[]) : []}
+            onChange={(ids) => setFilter('tagIds', ids)}
+            placeholder="Filter by tag / event…"
+          />
+        </div>
         <SavedViewsDropdown
           entityType="interests"
           currentFilters={filters}

src/components/shared/filter-bar.tsx

@@ -5,11 +5,7 @@ import { X, Filter, ChevronDown } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Badge } from '@/components/ui/badge';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   Select,
   SelectContent,
@@ -20,13 +16,7 @@ import {
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 
-export type FilterType =
-  | 'text'
-  | 'select'
-  | 'multi-select'
-  | 'date-range'
-  | 'boolean'
-  | 'relation';
+export type FilterType = 'text' | 'select' | 'multi-select' | 'date-range' | 'boolean' | 'relation';
 
 export interface FilterOption {
   label: string;
@@ -77,7 +67,9 @@ export function deserializeFiltersFromParams(
   for (const def of definitions) {
     const raw = params.get(def.key);
     if (!raw) continue;
-    if (def.type === 'multi-select') {
+    if (def.type === 'multi-select' || def.type === 'relation') {
+      // `relation` types (e.g. tag-pickers rendered outside the FilterBar)
+      // also serialize as comma-joined arrays so the URL round-trips.
       values[def.key] = raw.split(',');
     } else if (def.type === 'boolean') {
       values[def.key] = raw === 'true';
@@ -148,8 +140,10 @@ export function FilterBar({ filters, values, onChange, onClear }: FilterBarProps
           const displayValue = Array.isArray(value)
             ? `${value.length} selected`
             : typeof value === 'boolean'
-              ? value ? 'Yes' : 'No'
-              : filter.options?.find((o) => o.value === String(value))?.label ?? String(value);
+              ? value
+                ? 'Yes'
+                : 'No'
+              : (filter.options?.find((o) => o.value === String(value))?.label ?? String(value));
 
           return (
             <Badge key={filter.key} variant="secondary" className="h-7 gap-1 px-2 font-normal">
@@ -194,10 +188,7 @@ function FilterField({
       return (
         <div className="space-y-1">
           <Label className="text-xs">{definition.label}</Label>
-          <Select
-            value={(value as string) ?? ''}
-            onValueChange={(v) => onChange(v || undefined)}
-          >
+          <Select value={(value as string) ?? ''} onValueChange={(v) => onChange(v || undefined)}>
             <SelectTrigger className="h-8">
               <SelectValue placeholder={definition.placeholder ?? 'Any'} />
             </SelectTrigger>