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
87
src/app/(admin)/admin/logistics/page.tsx
Normal file
87
src/app/(admin)/admin/logistics/page.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useEdition } from '@/contexts/edition-context'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import {
|
||||
CheckCircle2,
|
||||
FileText,
|
||||
Hotel as HotelIcon,
|
||||
Plane,
|
||||
Salad,
|
||||
ScrollText,
|
||||
Settings,
|
||||
Stamp,
|
||||
} from 'lucide-react'
|
||||
import { ConfirmationsTab } from '@/components/admin/logistics/confirmations-tab'
|
||||
import { TravelTab } from '@/components/admin/logistics/travel-tab'
|
||||
import { HotelsTab } from '@/components/admin/logistics/hotels-tab'
|
||||
|
||||
export default function LogisticsPage() {
|
||||
const { currentEdition } = useEdition()
|
||||
const [tab, setTab] = useState('confirmations')
|
||||
|
||||
if (!currentEdition) {
|
||||
return (
|
||||
<p className="text-muted-foreground py-12 text-center text-sm">
|
||||
Select an edition to view logistics.
|
||||
</p>
|
||||
)
|
||||
}
|
||||
const programId = currentEdition.id
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Logistics</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Operational hub for the grand finale: confirmations, travel, hotels, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={tab} onValueChange={setTab} className="space-y-6">
|
||||
<TabsList className="flex-wrap">
|
||||
<TabsTrigger value="confirmations">
|
||||
<CheckCircle2 className="mr-2 h-4 w-4" /> Confirmations
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="travel">
|
||||
<Plane className="mr-2 h-4 w-4" /> Travel
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="hotels">
|
||||
<HotelIcon className="mr-2 h-4 w-4" /> Hotels
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="visas" disabled>
|
||||
<Stamp className="mr-2 h-4 w-4" /> Visas
|
||||
<span className="text-muted-foreground ml-1 text-xs">(soon)</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="lunch" disabled>
|
||||
<Salad className="mr-2 h-4 w-4" /> Lunch
|
||||
<span className="text-muted-foreground ml-1 text-xs">(soon)</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="documents" disabled>
|
||||
<FileText className="mr-2 h-4 w-4" /> Documents
|
||||
<span className="text-muted-foreground ml-1 text-xs">(soon)</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="email-templates" disabled>
|
||||
<ScrollText className="mr-2 h-4 w-4" /> Email Templates
|
||||
<span className="text-muted-foreground ml-1 text-xs">(soon)</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="settings" disabled>
|
||||
<Settings className="mr-2 h-4 w-4" /> Settings
|
||||
<span className="text-muted-foreground ml-1 text-xs">(soon)</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="confirmations">
|
||||
<ConfirmationsTab programId={programId} />
|
||||
</TabsContent>
|
||||
<TabsContent value="travel">
|
||||
<TravelTab programId={programId} />
|
||||
</TabsContent>
|
||||
<TabsContent value="hotels">
|
||||
<HotelsTab programId={programId} />
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
193
src/components/admin/logistics/confirmations-tab.tsx
Normal file
193
src/components/admin/logistics/confirmations-tab.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
'use client'
|
||||
|
||||
import { useMemo, useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from '@/components/ui/table'
|
||||
import { formatEnumLabel } from '@/lib/utils'
|
||||
import type { FinalistConfirmationStatus } from '@prisma/client'
|
||||
|
||||
interface Props {
|
||||
programId: string
|
||||
}
|
||||
|
||||
type StatusFilter = 'all' | FinalistConfirmationStatus
|
||||
|
||||
const STATUS_BADGE: Record<
|
||||
FinalistConfirmationStatus,
|
||||
{ label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }
|
||||
> = {
|
||||
PENDING: { label: 'Pending', variant: 'secondary' },
|
||||
CONFIRMED: { label: 'Confirmed', variant: 'default' },
|
||||
DECLINED: { label: 'Declined', variant: 'destructive' },
|
||||
EXPIRED: { label: 'Expired', variant: 'outline' },
|
||||
SUPERSEDED: { label: 'Superseded', variant: 'outline' },
|
||||
}
|
||||
|
||||
function formatDeadline(d: Date): string {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(d)
|
||||
}
|
||||
|
||||
function relativeFromNow(d: Date): string {
|
||||
const ms = d.getTime() - Date.now()
|
||||
if (ms <= 0) return 'past deadline'
|
||||
const hours = Math.floor(ms / 3_600_000)
|
||||
const days = Math.floor(hours / 24)
|
||||
if (days >= 1) return `in ${days}d`
|
||||
return `in ${hours}h`
|
||||
}
|
||||
|
||||
export function ConfirmationsTab({ programId }: Props) {
|
||||
const [statusFilter, setStatusFilter] = useState<StatusFilter>('all')
|
||||
const { data, isLoading } = trpc.logistics.listConfirmations.useQuery(
|
||||
{ programId },
|
||||
{ refetchInterval: 60_000 },
|
||||
)
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!data) return []
|
||||
return statusFilter === 'all' ? data : data.filter((r) => r.status === statusFilter)
|
||||
}, [data, statusFilter])
|
||||
|
||||
const totals = useMemo(() => {
|
||||
const counts: Record<FinalistConfirmationStatus, number> = {
|
||||
PENDING: 0,
|
||||
CONFIRMED: 0,
|
||||
DECLINED: 0,
|
||||
EXPIRED: 0,
|
||||
SUPERSEDED: 0,
|
||||
}
|
||||
for (const r of data ?? []) counts[r.status]++
|
||||
return counts
|
||||
}, [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">
|
||||
<CardTitle className="text-base">All confirmations</CardTitle>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<StatusPill
|
||||
value="all"
|
||||
label="All"
|
||||
count={(data ?? []).length}
|
||||
/>
|
||||
<StatusPill value="PENDING" label="Pending" count={totals.PENDING} />
|
||||
<StatusPill value="CONFIRMED" label="Confirmed" count={totals.CONFIRMED} />
|
||||
<StatusPill value="DECLINED" label="Declined" count={totals.DECLINED} />
|
||||
<StatusPill value="EXPIRED" label="Expired" count={totals.EXPIRED} />
|
||||
<StatusPill value="SUPERSEDED" label="Superseded" count={totals.SUPERSEDED} />
|
||||
</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">
|
||||
{statusFilter === 'all'
|
||||
? 'No finalists have been selected yet. Use the grand-finale round page to send confirmations.'
|
||||
: 'No confirmations match this filter.'}
|
||||
</p>
|
||||
) : (
|
||||
<div className="overflow-hidden rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Deadline</TableHead>
|
||||
<TableHead className="text-right">Attendees</TableHead>
|
||||
<TableHead>Notes</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{filtered.map((r) => {
|
||||
const badge = STATUS_BADGE[r.status]
|
||||
return (
|
||||
<TableRow key={r.id}>
|
||||
<TableCell>
|
||||
<div className="font-medium">{r.project.title}</div>
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{formatEnumLabel(r.category)}
|
||||
{r.project.country && (
|
||||
<>
|
||||
{' · '}
|
||||
{r.project.country}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={badge.variant} className="text-xs">
|
||||
{badge.label}
|
||||
</Badge>
|
||||
{r.promotedFromWaitlistEntryId && (
|
||||
<Badge variant="outline" className="ml-1 text-xs">
|
||||
Waitlist
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-sm">
|
||||
<div>{formatDeadline(new Date(r.deadline))}</div>
|
||||
{r.status === 'PENDING' && (
|
||||
<div className="text-muted-foreground text-xs">
|
||||
{relativeFromNow(new Date(r.deadline))}
|
||||
</div>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right tabular-nums">
|
||||
{r.attendeeCount}
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground max-w-[20rem] truncate text-xs">
|
||||
{r.status === 'DECLINED' && r.declineReason
|
||||
? `Reason: ${r.declineReason}`
|
||||
: r.status === 'CONFIRMED' && r.confirmedAt
|
||||
? `Confirmed ${formatDeadline(new Date(r.confirmedAt))}`
|
||||
: r.status === 'EXPIRED' && r.expiredAt
|
||||
? `Expired ${formatDeadline(new Date(r.expiredAt))}`
|
||||
: '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
175
src/components/admin/logistics/hotels-tab.tsx
Normal file
175
src/components/admin/logistics/hotels-tab.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { toast } from 'sonner'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Button } from '@/components/ui/button'
|
||||
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 { ExternalLink, Hotel as HotelIcon, Loader2, Save } from 'lucide-react'
|
||||
|
||||
interface Props {
|
||||
programId: string
|
||||
}
|
||||
|
||||
export function HotelsTab({ programId }: Props) {
|
||||
const utils = trpc.useUtils()
|
||||
const { data: hotel, isLoading } = trpc.logistics.getHotel.useQuery({ programId })
|
||||
|
||||
const [name, setName] = useState('')
|
||||
const [address, setAddress] = useState('')
|
||||
const [link, setLink] = useState('')
|
||||
const [notes, setNotes] = useState('')
|
||||
|
||||
// Sync form state from server data on first load / after save.
|
||||
useEffect(() => {
|
||||
if (hotel) {
|
||||
setName(hotel.name)
|
||||
setAddress(hotel.address ?? '')
|
||||
setLink(hotel.link ?? '')
|
||||
setNotes(hotel.notes ?? '')
|
||||
}
|
||||
}, [hotel])
|
||||
|
||||
const upsertMutation = trpc.logistics.upsertHotel.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success('Hotel saved')
|
||||
utils.logistics.getHotel.invalidate({ programId })
|
||||
},
|
||||
onError: (err) => toast.error(err.message),
|
||||
})
|
||||
|
||||
const handleSave = () => {
|
||||
if (!name.trim()) {
|
||||
toast.error('Hotel name is required')
|
||||
return
|
||||
}
|
||||
upsertMutation.mutate({
|
||||
programId,
|
||||
name: name.trim(),
|
||||
address: address.trim() || undefined,
|
||||
link: link.trim() || '',
|
||||
notes: notes.trim() || undefined,
|
||||
})
|
||||
}
|
||||
|
||||
if (isLoading) return <Skeleton className="h-96 w-full" />
|
||||
|
||||
const dirty =
|
||||
name !== (hotel?.name ?? '') ||
|
||||
address !== (hotel?.address ?? '') ||
|
||||
link !== (hotel?.link ?? '') ||
|
||||
notes !== (hotel?.notes ?? '')
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="md:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<HotelIcon className="text-muted-foreground h-4 w-4" />
|
||||
<CardTitle className="text-base">Hotel for this edition</CardTitle>
|
||||
</div>
|
||||
<CardDescription>
|
||||
One hotel per edition. Used in confirmation emails and finalist communications.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hotel-name">Name *</Label>
|
||||
<Input
|
||||
id="hotel-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Hôtel de Paris"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hotel-address">Address</Label>
|
||||
<Textarea
|
||||
id="hotel-address"
|
||||
value={address}
|
||||
onChange={(e) => setAddress(e.target.value)}
|
||||
placeholder="Place du Casino, 98000 Monaco"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hotel-link">Hotel website / booking link</Label>
|
||||
<Input
|
||||
id="hotel-link"
|
||||
type="url"
|
||||
value={link}
|
||||
onChange={(e) => setLink(e.target.value)}
|
||||
placeholder="https://hoteldeparismontecarlo.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="hotel-notes">Internal notes</Label>
|
||||
<Textarea
|
||||
id="hotel-notes"
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Check-in time, special arrangements, etc."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!dirty || upsertMutation.isPending}
|
||||
>
|
||||
{upsertMutation.isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="md:col-span-1">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Email preview</CardTitle>
|
||||
<CardDescription>What teams will see in confirmation emails.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{!name.trim() ? (
|
||||
<p className="text-muted-foreground text-sm">Save a hotel to see the preview.</p>
|
||||
) : (
|
||||
<div className="bg-muted/30 rounded-md border p-4 text-sm">
|
||||
<div className="text-muted-foreground mb-1 text-xs uppercase tracking-wide">
|
||||
Your accommodation
|
||||
</div>
|
||||
<div className="font-semibold">{name}</div>
|
||||
{address.trim() && (
|
||||
<div className="text-muted-foreground mt-1 whitespace-pre-line text-xs">
|
||||
{address}
|
||||
</div>
|
||||
)}
|
||||
{link.trim() && (
|
||||
<a
|
||||
href={link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary mt-2 inline-flex items-center gap-1 text-xs hover:underline"
|
||||
>
|
||||
Visit hotel website <ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
GraduationCap,
|
||||
Handshake,
|
||||
History,
|
||||
Plane,
|
||||
Trophy,
|
||||
User,
|
||||
MessageSquare,
|
||||
@@ -91,6 +92,11 @@ const navigation: NavItem[] = [
|
||||
href: '/admin/mentors',
|
||||
icon: GraduationCap,
|
||||
},
|
||||
{
|
||||
name: 'Logistics',
|
||||
href: '/admin/logistics',
|
||||
icon: Plane,
|
||||
},
|
||||
{
|
||||
name: 'Awards',
|
||||
href: '/admin/awards',
|
||||
|
||||
Reference in New Issue
Block a user