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
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user