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,
|
GraduationCap,
|
||||||
Handshake,
|
Handshake,
|
||||||
History,
|
History,
|
||||||
|
Plane,
|
||||||
Trophy,
|
Trophy,
|
||||||
User,
|
User,
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
@@ -91,6 +92,11 @@ const navigation: NavItem[] = [
|
|||||||
href: '/admin/mentors',
|
href: '/admin/mentors',
|
||||||
icon: GraduationCap,
|
icon: GraduationCap,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Logistics',
|
||||||
|
href: '/admin/logistics',
|
||||||
|
icon: Plane,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Awards',
|
name: 'Awards',
|
||||||
href: '/admin/awards',
|
href: '/admin/awards',
|
||||||
|
|||||||
Reference in New Issue
Block a user