feat(trips): trip tracking with analytics, tag conversion, and transaction assignment

Adds trips table usage across API and UI: trip CRUD, per-trip analytics (category/daily/merchant/tag/participant breakdowns), tag-to-trip conversion, trip assignment via transaction overrides, and trip filter in the transactions view. Recovered from working tree after local git corruption; feature was already live via host-context Docker builds.
2026-07-19 20:00:51 +10:00
parent b706973fb5
commit 48ec151c15
21 changed files with 1506 additions and 55 deletions
@@ -0,0 +1,157 @@
+"use client";
+
+import { useState } from "react";
+import { useCreateTrip, useUpdateTrip } from "@/lib/hooks";
+import type { TripRow } from "@/lib/hooks";
+
+export function CreateTripModal({
+  trip,
+  onClose,
+}: {
+  trip?: TripRow;
+  onClose: () => void;
+}) {
+  const isEdit = !!trip;
+  const [name, setName] = useState(trip?.name ?? "");
+  const [description, setDescription] = useState(trip?.description ?? "");
+  const [startDate, setStartDate] = useState(trip?.start_date?.slice(0, 10) ?? "");
+  const [endDate, setEndDate] = useState(trip?.end_date?.slice(0, 10) ?? "");
+  const [color, setColor] = useState(trip?.color ?? "#6366f1");
+  const [archived, setArchived] = useState(trip?.archived ?? false);
+  const [error, setError] = useState("");
+
+  const createTrip = useCreateTrip();
+  const updateTrip = useUpdateTrip();
+  const isPending = createTrip.isPending || updateTrip.isPending;
+
+  async function handleSave() {
+    setError("");
+    if (!name.trim()) { setError("Name is required"); return; }
+    try {
+      if (isEdit) {
+        await updateTrip.mutateAsync({
+          id: trip!.id,
+          name: name.trim(),
+          description: description || null,
+          start_date: startDate || null,
+          end_date: endDate || null,
+          color,
+          archived,
+        });
+      } else {
+        await createTrip.mutateAsync({
+          name: name.trim(),
+          description: description || null,
+          start_date: startDate || null,
+          end_date: endDate || null,
+          color,
+          archived,
+        });
+      }
+      onClose();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save");
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black/60" onClick={onClose}>
+      <div
+        className="bg-zinc-900 border border-zinc-700 rounded-xl w-full max-w-md mx-4 shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="px-6 pt-5 pb-4 border-b border-zinc-800">
+          <h3 className="font-semibold text-sm text-zinc-300">{isEdit ? "Edit Trip" : "New Trip"}</h3>
+        </div>
+
+        <div className="px-6 py-4 space-y-4">
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Name *</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Europe 2026"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-500"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs text-zinc-500 mb-1">Description</label>
+            <textarea
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={2}
+              placeholder="Optional notes about this trip"
+              className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm resize-none focus:outline-none focus:border-zinc-500"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Start Date</label>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">End Date</label>
+              <input
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm focus:outline-none focus:border-zinc-500"
+              />
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Color</label>
+              <input
+                type="color"
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                className="h-9 w-16 rounded border border-zinc-700 bg-zinc-800 cursor-pointer"
+              />
+            </div>
+            {isEdit && (
+              <label className="flex items-center gap-2 text-sm text-zinc-400 mt-4 cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={archived}
+                  onChange={(e) => setArchived(e.target.checked)}
+                  className="accent-indigo-500"
+                />
+                Archived
+              </label>
+            )}
+          </div>
+        </div>
+
+        <div className="px-6 py-4 border-t border-zinc-800 flex gap-2 items-center">
+          {error && <p className="text-red-400 text-xs mr-auto">{error}</p>}
+          <div className="flex gap-2 ml-auto">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-lg text-sm"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={handleSave}
+              disabled={isPending}
+              className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white rounded-lg text-sm font-medium"
+            >
+              {isPending ? "Saving…" : isEdit ? "Save Changes" : "Create Trip"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -7,6 +7,7 @@ import {
  useAddTransactionTag,
  useRemoveTransactionTag,
  useTransactionSplits,
+  useTrips,
 } from "@/lib/hooks";
 import { SplitModal } from "./split-modal";
 import { CATEGORIES, formatCategory } from "@/lib/categories";
@@ -93,6 +94,7 @@ export function EditTransactionModal({
 }) {
  const isManual = !transaction.statement_id;
  const updateTxn = useUpdateTransaction();
+  const { data: trips = [] } = useTrips();

  // Editable override fields
  const [merchant, setMerchant] = useState(transaction.merchant_override ?? transaction.merchant_normalized ?? "");
@@ -105,6 +107,8 @@ export function EditTransactionModal({
  const [description, setDescription] = useState(transaction.description);
  const [amount, setAmount] = useState(String(transaction.amount));

+  const [tripId, setTripId] = useState<number | null>(transaction.trip_id ?? null);
+
  // Splits — live via hook so they refresh after SplitModal saves
  const { data: liveSplits = [] } = useTransactionSplits(transaction.id);

@@ -136,6 +140,9 @@ export function EditTransactionModal({
          patch.amount = parseFloat(amount);
      }

+      if (tripId !== (transaction.trip_id ?? null))
+        patch.trip_id = tripId;
+
      await updateTxn.mutateAsync(patch);
      onClose();
    } catch (e) {
@@ -255,6 +262,21 @@ export function EditTransactionModal({
              </div>
            </div>

+            {/* Trip */}
+            <div>
+              <label className="block text-xs text-zinc-500 mb-1">Trip</label>
+              <select
+                value={tripId ?? ""}
+                onChange={(e) => setTripId(e.target.value ? Number(e.target.value) : null)}
+                className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1.5 text-sm"
+              >
+                <option value="">— No Trip —</option>
+                {trips.filter((t) => !t.archived).map((t) => (
+                  <option key={t.id} value={t.id}>{t.name}</option>
+                ))}
+              </select>
+            </div>
+
            {/* Tags */}
            <div>
              <p className="text-xs text-zinc-500 mb-1.5">Tags</p>
@@ -7,6 +7,7 @@ import { useState, useEffect } from "react";
 const NAV_ITEMS = [
  { href: "/transactions", label: "Transactions", icon: "receipt" },
  { href: "/statements", label: "Statements", icon: "file-text" },
+  { href: "/trips", label: "Trips", icon: "map-pin" },
  { href: "/shared", label: "Shared", icon: "users" },
  { href: "/budget", label: "Analytics", icon: "bar-chart" },
  { href: "/insights", label: "Insights", icon: "lightbulb" },
@@ -27,6 +28,12 @@ const ICONS: Record<string, React.ReactNode> = {
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
    </svg>
  ),
+  "map-pin": (
+    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  ),
  users: (
    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />