From 8edb717dd20fa2c90187bfefe7be875bb5022e3a Mon Sep 17 00:00:00 2001
From: Logan <Logan@simplestepsolutions.com>
Date: Sat, 20 Jun 2026 23:34:45 -0400
Subject: [PATCH] Add trips to UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lib/types.ts — TripRecord and TripEvent types

lib/c2api.ts — getTrips, getTrip, createTrip, deleteTrip, createTripEvent, deleteTripEvent

lib/useTrips.ts — Firestore realtime hook on the trips collection, ordered by start date

app/trips/page.tsx — List page split into Upcoming / Past sections, card click navigates to detail, "+ New Trip" modal for admins with all fields including date range and maps link

app/trips/[id]/page.tsx — Detail page fetched via C2 API (gets trip + events in one call), day-by-day itinerary with time, location, maps link, notes, and Discord attendees. Add Event modal (date constrained to trip range). Admin-only delete trip + remove event.

components/Nav.tsx — Trips link added to the nav
---
 drb-frontend/app/trips/[id]/page.tsx | 403 +++++++++++++++++++++++++++
 drb-frontend/app/trips/page.tsx      | 238 ++++++++++++++++
 drb-frontend/components/Nav.tsx      |   1 +
 drb-frontend/lib/c2api.ts            |  13 +
 drb-frontend/lib/types.ts            |  26 ++
 drb-frontend/lib/useTrips.ts         |  38 +++
 6 files changed, 719 insertions(+)
 create mode 100644 drb-frontend/app/trips/[id]/page.tsx
 create mode 100644 drb-frontend/app/trips/page.tsx
 create mode 100644 drb-frontend/lib/useTrips.ts

diff --git a/drb-frontend/app/trips/[id]/page.tsx b/drb-frontend/app/trips/[id]/page.tsx
new file mode 100644
index 0000000..ca4833a
--- /dev/null
+++ b/drb-frontend/app/trips/[id]/page.tsx
@@ -0,0 +1,403 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import { c2api } from "@/lib/c2api";
+import type { TripRecord, TripEvent } from "@/lib/types";
+
+// ---------------------------------------------------------------------------
+// Formatting helpers
+// ---------------------------------------------------------------------------
+
+function fmtDate(iso: string) {
+  return new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", {
+    month: "short", day: "numeric", year: "numeric",
+  });
+}
+
+function fmtDayLabel(iso: string) {
+  return new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", {
+    weekday: "long", month: "short", day: "numeric",
+  });
+}
+
+function fmtTime(t: string | null) {
+  if (!t) return null;
+  const [h, m] = t.split(":").map(Number);
+  const d = new Date();
+  d.setHours(h, m, 0, 0);
+  return d.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
+}
+
+function dateRange(start: string, end: string): string[] {
+  const dates: string[] = [];
+  const cur = new Date(`${start}T12:00:00`);
+  const endDate = new Date(`${end}T12:00:00`);
+  while (cur <= endDate) {
+    dates.push(cur.toISOString().slice(0, 10));
+    cur.setDate(cur.getDate() + 1);
+  }
+  return dates;
+}
+
+// ---------------------------------------------------------------------------
+// Add Event modal
+// ---------------------------------------------------------------------------
+
+function AddEventModal({ trip, onClose, onAdd }: {
+  trip: TripRecord;
+  onClose: () => void;
+  onAdd: (body: object) => Promise<void>;
+}) {
+  const [title,    setTitle]    = useState("");
+  const [date,     setDate]     = useState(trip.start_date);
+  const [time,     setTime]     = useState("");
+  const [location, setLocation] = useState("");
+  const [mapsLink, setMapsLink] = useState("");
+  const [notes,    setNotes]    = useState("");
+  const [saving,   setSaving]   = useState(false);
+  const [error,    setError]    = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    setError(null);
+    try {
+      await onAdd({
+        title,
+        date,
+        time: time || null,
+        location: location || null,
+        maps_link: mapsLink || null,
+        notes: notes || null,
+      });
+      onClose();
+    } catch {
+      setError("Failed to add event. Make sure the date is within the trip range.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <form
+        onSubmit={handleSubmit}
+        className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4"
+      >
+        <h2 className="text-white font-bold">Add Event</h2>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Title</label>
+          <input
+            required value={title} onChange={(e) => setTitle(e.target.value)}
+            placeholder="Dinner on Broadway"
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="text-xs text-gray-400 block mb-1">Date</label>
+            <input
+              required type="date"
+              min={trip.start_date} max={trip.end_date}
+              value={date} onChange={(e) => setDate(e.target.value)}
+              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-gray-400 block mb-1">Time (optional)</label>
+            <input
+              type="time" value={time} onChange={(e) => setTime(e.target.value)}
+              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">
+            Location (optional — inherits trip location)
+          </label>
+          <input
+            value={location} onChange={(e) => setLocation(e.target.value)}
+            placeholder={trip.location}
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Google Maps link (optional)</label>
+          <input
+            type="url" value={mapsLink} onChange={(e) => setMapsLink(e.target.value)}
+            placeholder="https://maps.google.com/…"
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Notes (optional)</label>
+          <textarea
+            value={notes} onChange={(e) => setNotes(e.target.value)} rows={2}
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none resize-none"
+          />
+        </div>
+
+        {error && <p className="text-red-400 text-xs">{error}</p>}
+
+        <div className="flex gap-3 justify-end">
+          <button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
+            Cancel
+          </button>
+          <button
+            type="submit" disabled={saving}
+            className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm rounded-lg px-4 py-2"
+          >
+            {saving ? "Adding…" : "Add Event"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Event card
+// ---------------------------------------------------------------------------
+
+function EventCard({ event, isAdmin, onDelete }: {
+  event: TripEvent;
+  isAdmin: boolean;
+  onDelete: (id: string) => void;
+}) {
+  const time = fmtTime(event.time);
+  const attendees = Object.values(event.attendees ?? {});
+
+  return (
+    <div className="flex gap-4 items-start">
+      <div className="w-20 shrink-0 text-right">
+        {time ? (
+          <span className="text-gray-400 text-xs font-mono">{time}</span>
+        ) : (
+          <span className="text-gray-700 text-xs font-mono">—</span>
+        )}
+      </div>
+      <div className="flex-1 min-w-0 pb-4 border-b border-gray-800">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-white text-sm font-medium">{event.title}</p>
+          {isAdmin && (
+            <button
+              onClick={() => onDelete(event.event_id)}
+              className="text-xs text-red-500 hover:text-red-400 transition-colors shrink-0"
+            >
+              Remove
+            </button>
+          )}
+        </div>
+        {!event.location_inherited && (
+          <div className="flex items-center gap-1 mt-0.5">
+            <p className="text-gray-500 text-xs">{event.location}</p>
+            {event.maps_link && (
+              <a
+                href={event.maps_link}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+                className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors"
+              >
+                Maps
+              </a>
+            )}
+          </div>
+        )}
+        {event.location_inherited && event.maps_link && (
+          <a
+            href={event.maps_link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-xs text-indigo-400 hover:text-indigo-300 transition-colors mt-0.5 block"
+          >
+            Maps
+          </a>
+        )}
+        {event.notes && (
+          <p className="text-gray-500 text-xs mt-1 italic">{event.notes}</p>
+        )}
+        {attendees.length > 0 && (
+          <p className="text-gray-600 text-xs mt-1">{attendees.join(", ")}</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+
+export default function TripDetailPage() {
+  const { id }          = useParams<{ id: string }>();
+  const router          = useRouter();
+  const { isAdmin }     = useAuth();
+
+  const [trip, setTrip]         = useState<(TripRecord & { events: TripEvent[] }) | null>(null);
+  const [loading, setLoading]   = useState(true);
+  const [showAdd, setShowAdd]   = useState(false);
+
+  async function load() {
+    try {
+      const data = await c2api.getTrip(id);
+      setTrip(data as TripRecord & { events: TripEvent[] });
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => { load(); }, [id]);
+
+  async function handleDeleteTrip() {
+    if (!trip) return;
+    try {
+      await c2api.deleteTrip(trip.trip_id);
+      router.push("/trips");
+    } catch (e) { console.error(e); }
+  }
+
+  async function handleDeleteEvent(eventId: string) {
+    if (!trip) return;
+    try {
+      await c2api.deleteTripEvent(trip.trip_id, eventId);
+      setTrip((prev) => prev ? { ...prev, events: prev.events.filter((e) => e.event_id !== eventId) } : prev);
+    } catch (e) { console.error(e); }
+  }
+
+  async function handleAddEvent(body: object) {
+    if (!trip) return;
+    const event = await c2api.createTripEvent(trip.trip_id, body);
+    setTrip((prev) => {
+      if (!prev) return prev;
+      const events = [...prev.events, event].sort((a, b) =>
+        a.date.localeCompare(b.date) || (a.time ?? "").localeCompare(b.time ?? "")
+      );
+      return { ...prev, events };
+    });
+  }
+
+  if (loading) {
+    return <p className="text-gray-500 text-sm font-mono">Loading…</p>;
+  }
+
+  if (!trip) {
+    return <p className="text-gray-500 text-sm font-mono">Trip not found.</p>;
+  }
+
+  const attendees = Object.values(trip.attendees ?? {});
+  const eventsByDate: Record<string, TripEvent[]> = {};
+  for (const e of trip.events ?? []) {
+    (eventsByDate[e.date] ??= []).push(e);
+  }
+  const days = dateRange(trip.start_date, trip.end_date).filter((d) => eventsByDate[d]);
+
+  return (
+    <div className="space-y-8 max-w-2xl">
+      {/* Back */}
+      <button
+        onClick={() => router.push("/trips")}
+        className="text-sm font-mono text-gray-500 hover:text-gray-300 transition-colors"
+      >
+        ← Trips
+      </button>
+
+      {/* Header */}
+      <div className="space-y-2">
+        <div className="flex items-start justify-between gap-4">
+          <h1 className="text-white text-2xl font-bold">{trip.name}</h1>
+          {isAdmin && (
+            <button
+              onClick={handleDeleteTrip}
+              className="text-xs text-red-500 hover:text-red-400 transition-colors shrink-0 mt-1"
+            >
+              Delete trip
+            </button>
+          )}
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-gray-400">
+          <span>{trip.location}</span>
+          {trip.maps_link && (
+            <a
+              href={trip.maps_link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-indigo-400 hover:text-indigo-300 text-xs transition-colors"
+            >
+              View on Maps
+            </a>
+          )}
+          <span className="text-gray-600">•</span>
+          <span className="font-mono text-xs">
+            {fmtDate(trip.start_date)} — {fmtDate(trip.end_date)}
+          </span>
+        </div>
+
+        {attendees.length > 0 && (
+          <p className="text-gray-500 text-xs">
+            Going: {attendees.join(", ")}
+          </p>
+        )}
+      </div>
+
+      {/* Itinerary */}
+      <div className="space-y-8">
+        <div className="flex items-center justify-between">
+          <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider">Itinerary</h2>
+          {isAdmin && (
+            <button
+              onClick={() => setShowAdd(true)}
+              className="text-sm bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg px-3 py-1.5 transition-colors"
+            >
+              + Add Event
+            </button>
+          )}
+        </div>
+
+        {days.length === 0 ? (
+          <p className="text-gray-600 text-sm font-mono">
+            No events yet.{isAdmin ? " Use \"Add Event\" to build the itinerary." : ""}
+          </p>
+        ) : (
+          <div className="space-y-6">
+            {days.map((day) => (
+              <div key={day}>
+                <p className="text-xs font-mono text-gray-500 uppercase tracking-wider mb-3">
+                  {fmtDayLabel(day)}
+                </p>
+                <div className="space-y-0">
+                  {(eventsByDate[day] ?? []).map((event) => (
+                    <EventCard
+                      key={event.event_id}
+                      event={event}
+                      isAdmin={isAdmin}
+                      onDelete={handleDeleteEvent}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {showAdd && trip && (
+        <AddEventModal
+          trip={trip}
+          onClose={() => setShowAdd(false)}
+          onAdd={handleAddEvent}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/drb-frontend/app/trips/page.tsx b/drb-frontend/app/trips/page.tsx
new file mode 100644
index 0000000..8ada768
--- /dev/null
+++ b/drb-frontend/app/trips/page.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import { useTrips } from "@/lib/useTrips";
+import { c2api } from "@/lib/c2api";
+import type { TripRecord } from "@/lib/types";
+
+function fmtDate(iso: string) {
+  return new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function TripCard({ trip, isAdmin, onDelete }: {
+  trip: TripRecord;
+  isAdmin: boolean;
+  onDelete: (id: string) => void;
+}) {
+  const router = useRouter();
+  const today = new Date().toISOString().slice(0, 10);
+  const upcoming = trip.start_date >= today;
+  const attendeeCount = Object.keys(trip.attendees ?? {}).length;
+
+  return (
+    <div
+      className="bg-gray-900 border border-gray-800 rounded-xl p-5 cursor-pointer hover:border-gray-700 transition-colors"
+      onClick={() => router.push(`/trips/${trip.trip_id}`)}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            <span className={`text-xs font-mono px-2 py-0.5 rounded-full ${
+              upcoming ? "bg-indigo-900 text-indigo-300" : "bg-gray-800 text-gray-500"
+            }`}>
+              {upcoming ? "Upcoming" : "Past"}
+            </span>
+          </div>
+          <h3 className="text-white font-semibold text-sm leading-snug">{trip.name}</h3>
+          <p className="text-gray-400 text-xs mt-1">{trip.location}</p>
+          <p className="text-gray-500 text-xs font-mono mt-1">
+            {fmtDate(trip.start_date)} — {fmtDate(trip.end_date)}
+          </p>
+          {attendeeCount > 0 && (
+            <p className="text-gray-500 text-xs mt-1">
+              {attendeeCount} going
+            </p>
+          )}
+        </div>
+        {isAdmin && (
+          <button
+            onClick={(e) => { e.stopPropagation(); onDelete(trip.trip_id); }}
+            className="text-xs text-red-500 hover:text-red-400 transition-colors shrink-0"
+          >
+            Delete
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function CreateModal({ onClose, onCreate }: {
+  onClose: () => void;
+  onCreate: (body: object) => Promise<void>;
+}) {
+  const [name,     setName]     = useState("");
+  const [location, setLocation] = useState("");
+  const [start,    setStart]    = useState("");
+  const [end,      setEnd]      = useState("");
+  const [mapsLink, setMapsLink] = useState("");
+  const [saving,   setSaving]   = useState(false);
+  const [error,    setError]    = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (end < start) { setError("End date must be on or after start date."); return; }
+    setSaving(true);
+    setError(null);
+    try {
+      await onCreate({
+        name,
+        location,
+        start_date: start,
+        end_date: end,
+        maps_link: mapsLink || null,
+      });
+      onClose();
+    } catch {
+      setError("Failed to create trip.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
+      <form
+        onSubmit={handleSubmit}
+        className="bg-gray-900 border border-gray-700 rounded-xl p-6 w-full max-w-md space-y-4"
+      >
+        <h2 className="text-white font-bold">New Trip</h2>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Name</label>
+          <input
+            required value={name} onChange={(e) => setName(e.target.value)}
+            placeholder="Road trip to Nashville"
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Location</label>
+          <input
+            required value={location} onChange={(e) => setLocation(e.target.value)}
+            placeholder="Nashville, TN"
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-3">
+          <div>
+            <label className="text-xs text-gray-400 block mb-1">Start date</label>
+            <input
+              required type="date" value={start} onChange={(e) => setStart(e.target.value)}
+              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            />
+          </div>
+          <div>
+            <label className="text-xs text-gray-400 block mb-1">End date</label>
+            <input
+              required type="date" value={end} onChange={(e) => setEnd(e.target.value)}
+              min={start}
+              className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="text-xs text-gray-400 block mb-1">Google Maps link (optional)</label>
+          <input
+            type="url" value={mapsLink} onChange={(e) => setMapsLink(e.target.value)}
+            placeholder="https://maps.google.com/…"
+            className="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-indigo-500"
+          />
+        </div>
+
+        {error && <p className="text-red-400 text-xs">{error}</p>}
+
+        <div className="flex gap-3 justify-end">
+          <button type="button" onClick={onClose} className="text-sm text-gray-400 hover:text-gray-200 px-4 py-2">
+            Cancel
+          </button>
+          <button
+            type="submit" disabled={saving}
+            className="bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm rounded-lg px-4 py-2"
+          >
+            {saving ? "Creating…" : "Create Trip"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default function TripsPage() {
+  const { isAdmin }            = useAuth();
+  const { trips, loading }     = useTrips();
+  const [showCreate, setShowCreate] = useState(false);
+
+  const today    = new Date().toISOString().slice(0, 10);
+  const upcoming = trips.filter((t) => t.end_date >= today);
+  const past     = trips.filter((t) => t.end_date < today);
+
+  async function handleDelete(id: string) {
+    try { await c2api.deleteTrip(id); }
+    catch (e) { console.error(e); }
+  }
+
+  return (
+    <div className="space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-white text-xl font-bold font-mono">Trips</h1>
+        {isAdmin && (
+          <button
+            onClick={() => setShowCreate(true)}
+            className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm rounded-lg px-4 py-2 transition-colors"
+          >
+            + New Trip
+          </button>
+        )}
+      </div>
+
+      {loading ? (
+        <p className="text-gray-500 text-sm font-mono">Loading…</p>
+      ) : (
+        <>
+          {upcoming.length > 0 && (
+            <section>
+              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Upcoming</h2>
+              <div className="space-y-3">
+                {upcoming.map((t) => (
+                  <TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {past.length > 0 && (
+            <section>
+              <h2 className="text-sm font-mono text-gray-400 uppercase tracking-wider mb-3">Past</h2>
+              <div className="space-y-3">
+                {past.map((t) => (
+                  <TripCard key={t.trip_id} trip={t} isAdmin={isAdmin} onDelete={handleDelete} />
+                ))}
+              </div>
+            </section>
+          )}
+
+          {trips.length === 0 && (
+            <p className="text-gray-600 text-sm font-mono">No trips yet.</p>
+          )}
+        </>
+      )}
+
+      {showCreate && (
+        <CreateModal
+          onClose={() => setShowCreate(false)}
+          onCreate={async (body) => { await c2api.createTrip(body); }}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/drb-frontend/components/Nav.tsx b/drb-frontend/components/Nav.tsx
index afe91e1..9632068 100644
--- a/drb-frontend/components/Nav.tsx
+++ b/drb-frontend/components/Nav.tsx
@@ -16,6 +16,7 @@ const links = [
   { href: "/incidents",  label: "Incidents" },
   { href: "/map",        label: "Map" },
   { href: "/alerts",     label: "Alerts" },
+  { href: "/trips",      label: "Trips" },
 ];
 
 const adminLinks = [
diff --git a/drb-frontend/lib/c2api.ts b/drb-frontend/lib/c2api.ts
index e0c76a4..8d822b8 100644
--- a/drb-frontend/lib/c2api.ts
+++ b/drb-frontend/lib/c2api.ts
@@ -134,6 +134,19 @@ export const c2api = {
   setPreferredToken: (tokenId: string, systemId: string) =>
     request<{ ok: boolean; preferred_for_system_id: string | null }>(`/tokens/${tokenId}/prefer/${systemId}`, { method: "PUT" }),
 
+  // Trips
+  getTrips: () => request<import("@/lib/types").TripRecord[]>("/trips"),
+  getTrip: (id: string) =>
+    request<import("@/lib/types").TripRecord & { events: import("@/lib/types").TripEvent[] }>(`/trips/${id}`),
+  createTrip: (body: object) =>
+    request<import("@/lib/types").TripRecord>("/trips", { method: "POST", body: JSON.stringify(body) }),
+  deleteTrip: (id: string) =>
+    request(`/trips/${id}`, { method: "DELETE" }),
+  createTripEvent: (tripId: string, body: object) =>
+    request<import("@/lib/types").TripEvent>(`/trips/${tripId}/events`, { method: "POST", body: JSON.stringify(body) }),
+  deleteTripEvent: (tripId: string, eventId: string) =>
+    request(`/trips/${tripId}/events/${eventId}`, { method: "DELETE" }),
+
   // Per-system AI flag overrides
   setSystemAiFlags: (systemId: string, flags: { stt_enabled?: boolean | null; correlation_enabled?: boolean | null }) =>
     request<{ ok: boolean; ai_flags: Record<string, boolean> }>(`/systems/${systemId}/ai-flags`, {
diff --git a/drb-frontend/lib/types.ts b/drb-frontend/lib/types.ts
index 8f16264..0058002 100644
--- a/drb-frontend/lib/types.ts
+++ b/drb-frontend/lib/types.ts
@@ -98,6 +98,32 @@ export interface AlertRule {
   created_at?: string;
 }
 
+export interface TripEvent {
+  event_id: string;
+  trip_id: string;
+  title: string;
+  date: string;
+  time: string | null;
+  location: string;
+  location_inherited: boolean;
+  maps_link: string | null;
+  notes: string | null;
+  attendees: Record<string, string>;
+  created_at: string;
+}
+
+export interface TripRecord {
+  trip_id: string;
+  name: string;
+  location: string;
+  maps_link: string | null;
+  start_date: string;
+  end_date: string;
+  attendees: Record<string, string>;
+  created_at: string;
+  events?: TripEvent[];
+}
+
 export interface AlertEvent {
   alert_id: string;
   rule_id: string;
diff --git a/drb-frontend/lib/useTrips.ts b/drb-frontend/lib/useTrips.ts
new file mode 100644
index 0000000..bdd3ac0
--- /dev/null
+++ b/drb-frontend/lib/useTrips.ts
@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { collection, onSnapshot, query, orderBy } from "firebase/firestore";
+import { onAuthStateChanged } from "firebase/auth";
+import { db, auth } from "@/lib/firebase";
+import type { TripRecord } from "@/lib/types";
+
+export function useTrips() {
+  const [trips, setTrips] = useState<TripRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let unsubFirestore: (() => void) | undefined;
+
+    const unsubAuth = onAuthStateChanged(auth, (user) => {
+      if (unsubFirestore) { unsubFirestore(); unsubFirestore = undefined; }
+      if (!user) { setTrips([]); setLoading(false); return; }
+
+      const q = query(collection(db, "trips"), orderBy("start_date", "asc"));
+      unsubFirestore = onSnapshot(
+        q,
+        (snap) => {
+          setTrips(snap.docs.map((d) => d.data() as TripRecord));
+          setLoading(false);
+        },
+        (err) => {
+          console.error("useTrips:", err);
+          setLoading(false);
+        }
+      );
+    });
+
+    return () => { unsubAuth(); if (unsubFirestore) unsubFirestore(); };
+  }, []);
+
+  return { trips, loading };
+}