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>
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user