feat: logistics page shell + Confirmations/Travel/Hotels tabs
- /admin/logistics page with shadcn Tabs (3 active + 5 disabled "(soon)" placeholder tabs for Visas / Lunch / Documents / Email Templates / Settings). - Sidebar entry "Logistics" between Mentors and Awards (Plane icon). - Confirmations tab: read-only table with status filter pills, browser- local-time deadline display, attendee count, decline reason snippet. - Hotels tab: single-hotel form (name/address/link/notes) with live email-preview card showing what teams will see. - Travel tab: per-attendee flight tracker with arrival/departure datetimes, flight numbers, IATA airports, click-to-toggle status badge, edit Sheet, and unfilled/pending/confirmed filter pills. Smoke-tested end-to-end: navigation, sidebar entry, all three tabs render, hotel save persists to DB and renders in preview card.
This commit is contained in:
Matt
426
src/components/admin/logistics/travel-tab.tsx
Normal file
426
src/components/admin/logistics/travel-tab.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetFooter,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
} from '@/components/ui/sheet'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { Loader2, Plane } from 'lucide-react'
|
||||
import type { FlightDetailStatus } from '@prisma/client'
|
||||
|
||||
interface Props {
|
||||
programId: string
|
||||
}
|
||||
|
||||
type AttendeeRow = {
|
||||
id: string
|
||||
needsVisa: boolean
|
||||
user: { id: string; name: string | null; email: string; country: string | null }
|
||||
confirmation: {
|
||||
project: {
|
||||
id: string
|
||||
title: string
|
||||
country: string | null
|
||||
competitionCategory: string | null
|
||||
}
|
||||
}
|
||||
flightDetail: {
|
||||
id: string
|
||||
arrivalAt: Date | null
|
||||
arrivalFlightNumber: string | null
|
||||
arrivalAirport: string | null
|
||||
departureAt: Date | null
|
||||
departureFlightNumber: string | null
|
||||
departureAirport: string | null
|
||||
status: FlightDetailStatus
|
||||
adminNotes: string | null
|
||||
} | null
|
||||
}
|
||||
|
||||
type StatusFilter = 'all' | 'PENDING' | 'CONFIRMED' | 'unfilled'
|
||||
|
||||
function formatDateTime(d: Date | null): string {
|
||||
if (!d) return '—'
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(d))
|
||||
}
|
||||
|
||||
function isoLocalForInput(d: Date | null): string {
|
||||
if (!d) return ''
|
||||
// Format as 'YYYY-MM-DDTHH:mm' for datetime-local input
|
||||
const local = new Date(d.getTime() - new Date().getTimezoneOffset() * 60000)
|
||||
return local.toISOString().slice(0, 16)
|
||||
}
|
||||
|
||||
function FlightEditorSheet({
|
||||
attendee,
|
||||
programId,
|
||||
open,
|
||||
onClose,
|
||||
}: {
|
||||
attendee: AttendeeRow | null
|
||||
programId: string
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}) {
|
||||
const utils = trpc.useUtils()
|
||||
const [arrivalAt, setArrivalAt] = useState('')
|
||||
const [arrivalFlightNumber, setArrivalFlightNumber] = useState('')
|
||||
const [arrivalAirport, setArrivalAirport] = useState('')
|
||||
const [departureAt, setDepartureAt] = useState('')
|
||||
const [departureFlightNumber, setDepartureFlightNumber] = useState('')
|
||||
const [departureAirport, setDepartureAirport] = useState('')
|
||||
const [adminNotes, setAdminNotes] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (!attendee) return
|
||||
const fd = attendee.flightDetail
|
||||
setArrivalAt(isoLocalForInput(fd?.arrivalAt ?? null))
|
||||
setArrivalFlightNumber(fd?.arrivalFlightNumber ?? '')
|
||||
setArrivalAirport(fd?.arrivalAirport ?? '')
|
||||
setDepartureAt(isoLocalForInput(fd?.departureAt ?? null))
|
||||
setDepartureFlightNumber(fd?.departureFlightNumber ?? '')
|
||||
setDepartureAirport(fd?.departureAirport ?? '')
|
||||
setAdminNotes(fd?.adminNotes ?? '')
|
||||
}, [attendee])
|
||||
|
||||
const upsertMutation = trpc.logistics.upsertFlightDetail.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Flight details saved')
|
||||
utils.logistics.listFlightDetails.invalidate({ programId })
|
||||
onClose()
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
if (!attendee) return null
|
||||
|
||||
const handleSave = () => {
|
||||
upsertMutation.mutate({
|
||||
attendingMemberId: attendee.id,
|
||||
arrivalAt: arrivalAt ? new Date(arrivalAt) : null,
|
||||
arrivalFlightNumber: arrivalFlightNumber.trim() || null,
|
||||
arrivalAirport: arrivalAirport.trim().toUpperCase() || null,
|
||||
departureAt: departureAt ? new Date(departureAt) : null,
|
||||
departureFlightNumber: departureFlightNumber.trim() || null,
|
||||
departureAirport: departureAirport.trim().toUpperCase() || null,
|
||||
adminNotes: adminNotes.trim() || null,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={(o) => !o && onClose()}>
|
||||
<SheetContent className="sm:max-w-md overflow-y-auto">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{attendee.user.name ?? attendee.user.email}</SheetTitle>
|
||||
<SheetDescription>
|
||||
{attendee.confirmation.project.title}
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
|
||||
<div className="space-y-5 py-6">
|
||||
<div className="space-y-3 rounded-md border p-3">
|
||||
<div className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
|
||||
Arrival
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="arr-at">Date & time</Label>
|
||||
<Input
|
||||
id="arr-at"
|
||||
type="datetime-local"
|
||||
value={arrivalAt}
|
||||
onChange={(e) => setArrivalAt(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="arr-flight">Flight number</Label>
|
||||
<Input
|
||||
id="arr-flight"
|
||||
value={arrivalFlightNumber}
|
||||
onChange={(e) => setArrivalFlightNumber(e.target.value)}
|
||||
placeholder="AF7400"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="arr-airport">Airport (IATA)</Label>
|
||||
<Input
|
||||
id="arr-airport"
|
||||
value={arrivalAirport}
|
||||
onChange={(e) => setArrivalAirport(e.target.value)}
|
||||
placeholder="NCE"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 rounded-md border p-3">
|
||||
<div className="text-muted-foreground text-xs font-medium uppercase tracking-wide">
|
||||
Departure
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="dep-at">Date & time</Label>
|
||||
<Input
|
||||
id="dep-at"
|
||||
type="datetime-local"
|
||||
value={departureAt}
|
||||
onChange={(e) => setDepartureAt(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="dep-flight">Flight number</Label>
|
||||
<Input
|
||||
id="dep-flight"
|
||||
value={departureFlightNumber}
|
||||
onChange={(e) => setDepartureFlightNumber(e.target.value)}
|
||||
placeholder="AF7405"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="dep-airport">Airport (IATA)</Label>
|
||||
<Input
|
||||
id="dep-airport"
|
||||
value={departureAirport}
|
||||
onChange={(e) => setDepartureAirport(e.target.value)}
|
||||
placeholder="NCE"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="notes">Admin notes</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
value={adminNotes}
|
||||
onChange={(e) => setAdminNotes(e.target.value)}
|
||||
placeholder="e.g. paid by program, awaiting receipt"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SheetFooter>
|
||||
<Button variant="outline" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={upsertMutation.isPending}>
|
||||
{upsertMutation.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : null}
|
||||
Save
|
||||
</Button>
|
||||
</SheetFooter>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
)
|
||||
}
|
||||
|
||||
export function TravelTab({ programId }: Props) {
|
||||
const utils = trpc.useUtils()
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
|
||||
const [editing, setEditing] = useState<AttendeeRow | null>(null)
|
||||
|
||||
const { data, isLoading } = trpc.logistics.listFlightDetails.useQuery(
|
||||
{ programId },
|
||||
{ refetchInterval: 60_000 },
|
||||
)
|
||||
|
||||
const setStatusMutation = trpc.logistics.setFlightStatus.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Status updated')
|
||||
utils.logistics.listFlightDetails.invalidate({ programId })
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!data) return []
|
||||
if (statusFilter === 'all') return data
|
||||
if (statusFilter === 'unfilled') return data.filter((r) => !r.flightDetail)
|
||||
return data.filter((r) => r.flightDetail?.status === statusFilter)
|
||||
}, [data, statusFilter])
|
||||
|
||||
const totals = useMemo(() => {
|
||||
const c = { all: 0, PENDING: 0, CONFIRMED: 0, unfilled: 0 }
|
||||
for (const r of data ?? []) {
|
||||
c.all++
|
||||
if (!r.flightDetail) c.unfilled++
|
||||
else c[r.flightDetail.status]++
|
||||
}
|
||||
return c
|
||||
}, [data])
|
||||
|
||||
const StatusPill = ({
|
||||
value,
|
||||
label,
|
||||
count,
|
||||
}: {
|
||||
value: StatusFilter
|
||||
label: string
|
||||
count: number
|
||||
}) => (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStatusFilter(value)}
|
||||
className={`rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ${
|
||||
statusFilter === value
|
||||
? 'bg-primary text-primary-foreground border-primary'
|
||||
: 'bg-background hover:bg-muted'
|
||||
}`}
|
||||
>
|
||||
{label} <span className="tabular-nums opacity-80">({count})</span>
|
||||
</button>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<Card>
|
||||
<CardHeader className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Plane className="text-muted-foreground h-4 w-4" />
|
||||
<CardTitle className="text-base">Travel for confirmed finalists</CardTitle>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<StatusPill value="all" label="All" count={totals.all} />
|
||||
<StatusPill value="unfilled" label="Unfilled" count={totals.unfilled} />
|
||||
<StatusPill value="PENDING" label="Pending" count={totals.PENDING} />
|
||||
<StatusPill value="CONFIRMED" label="Confirmed" count={totals.CONFIRMED} />
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="text-muted-foreground py-12 text-center text-sm">
|
||||
{data && data.length === 0
|
||||
? 'No confirmed finalist attendees yet.'
|
||||
: 'No attendees match this filter.'}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Attendee</TableHead>
|
||||
<TableHead>Arrival</TableHead>
|
||||
<TableHead>Departure</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((r) => {
|
||||
const fd = r.flightDetail
|
||||
return (
|
||||
<TableRow key={r.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium">
|
||||
{r.user.name ?? r.user.email}
|
||||
</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{r.confirmation.project.title}
|
||||
{r.needsVisa ? ' · needs visa' : ''}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<div>{formatDateTime(fd?.arrivalAt ?? null)}</div>
|
||||
{(fd?.arrivalFlightNumber || fd?.arrivalAirport) && (
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{fd.arrivalFlightNumber ?? '—'}
|
||||
{fd.arrivalAirport ? ` · ${fd.arrivalAirport}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<div>{formatDateTime(fd?.departureAt ?? null)}</div>
|
||||
{(fd?.departureFlightNumber || fd?.departureAirport) && (
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{fd.departureFlightNumber ?? '—'}
|
||||
{fd.departureAirport ? ` · ${fd.departureAirport}` : ''}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{fd ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setStatusMutation.mutate({
|
||||
flightDetailId: fd.id,
|
||||
status: fd.status === 'PENDING' ? 'CONFIRMED' : 'PENDING',
|
||||
})
|
||||
}
|
||||
className="cursor-pointer"
|
||||
title="Click to toggle"
|
||||
>
|
||||
<Badge
|
||||
variant={fd.status === 'CONFIRMED' ? 'default' : 'secondary'}
|
||||
className="text-xs"
|
||||
>
|
||||
{fd.status === 'CONFIRMED' ? 'Confirmed' : 'Pending'}
|
||||
</Badge>
|
||||
</button>
|
||||
) : (
|
||||
<Badge variant="outline" className="text-xs">
|
||||
No info
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setEditing(r as AttendeeRow)}
|
||||
>
|
||||
Edit
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<FlightEditorSheet
|
||||
attendee={editing}
|
||||
programId={programId}
|
||||
open={!!editing}
|
||||
onClose={() => setEditing(null)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user