Add trips to UI
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
This commit is contained in:
Logan
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -16,6 +16,7 @@ const links = [
|
||||
{ href: "/incidents", label: "Incidents" },
|
||||
{ href: "/map", label: "Map" },
|
||||
{ href: "/alerts", label: "Alerts" },
|
||||
{ href: "/trips", label: "Trips" },
|
||||
];
|
||||
|
||||
const adminLinks = [
|
||||
|
||||
@@ -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`, {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 };
|
||||
}
|
||||
Reference in New Issue
Block a user