This commit is contained in:
Raul Lugo
@@ -0,0 +1,350 @@
|
||||
import Link from "next/link"
|
||||
import { notFound } from "next/navigation"
|
||||
|
||||
import { CopyInviteButton } from "@/components/admin/copy-invite-button"
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import {
|
||||
getInvitationInteractions,
|
||||
updateToastRequestStatus,
|
||||
} from "@/lib/db/queries/interactions"
|
||||
import { getInvitationDetail } from "@/lib/db/queries/invitations"
|
||||
import { getPhotoUploadByInvitationId } from "@/lib/db/queries/uploads"
|
||||
import { getLanguageLabel } from "@/lib/i18n/config"
|
||||
import { createPresignedDownloadUrl } from "@/lib/storage/uploads"
|
||||
import { toastStatusSchema } from "@/lib/validation/interactions"
|
||||
|
||||
export const dynamic = "force-dynamic"
|
||||
|
||||
function getInviteUrl(token: string) {
|
||||
return new URL(`/invite/${token}`, process.env.APP_URL ?? "http://localhost:3000").toString()
|
||||
}
|
||||
|
||||
function formatDate(date: Date | null | undefined) {
|
||||
if (!date) return "—"
|
||||
|
||||
return new Intl.DateTimeFormat("en", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
function formatBoolean(value: boolean | null) {
|
||||
if (value === true) return "Yes"
|
||||
if (value === false) return "No"
|
||||
return "Pending"
|
||||
}
|
||||
|
||||
function formatDateOnly(value: Date | string | null | undefined) {
|
||||
if (!value) return "—"
|
||||
|
||||
if (value instanceof Date) {
|
||||
return new Intl.DateTimeFormat("en", { dateStyle: "medium" }).format(value)
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
|
||||
async function updateToastStatusAction(formData: FormData) {
|
||||
"use server"
|
||||
|
||||
const toastId = formData.get("toastId")?.toString()
|
||||
const status = toastStatusSchema.safeParse(formData.get("status"))
|
||||
|
||||
if (!toastId || !status.success) return
|
||||
|
||||
await updateToastRequestStatus(toastId, status.data)
|
||||
}
|
||||
|
||||
export default async function GuestDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ id: string }>
|
||||
searchParams: Promise<{ created?: string }>
|
||||
}) {
|
||||
const [{ id }, { created }] = await Promise.all([params, searchParams])
|
||||
const [detail, interactions, photoUpload] = await Promise.all([
|
||||
getInvitationDetail(id),
|
||||
getInvitationInteractions(id),
|
||||
getPhotoUploadByInvitationId(id),
|
||||
])
|
||||
|
||||
if (!detail) notFound()
|
||||
|
||||
const inviteUrl = getInviteUrl(detail.invitation.token)
|
||||
const photoUrl = photoUpload ? await createPresignedDownloadUrl(photoUpload.object_key) : null
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
|
||||
<div>
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<Badge>{detail.derivedStatus}</Badge>
|
||||
<Badge variant="secondary">{getLanguageLabel(detail.invitation.language)}</Badge>
|
||||
</div>
|
||||
<h1 className="text-3xl font-semibold tracking-tight">
|
||||
{detail.invitation.display_name}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">Invitation details and member list.</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/admin/guests">Back to list</Link>
|
||||
</Button>
|
||||
<CopyInviteButton inviteUrl={inviteUrl} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{created ? (
|
||||
<Alert>
|
||||
<AlertTitle>Invitation created</AlertTitle>
|
||||
<AlertDescription>
|
||||
Copy the private invite link below and share it only with this invitation group.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-[1fr_360px]">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invite link</CardTitle>
|
||||
<CardDescription>Private URL for this invitation group.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<code className="flex-1 overflow-x-auto rounded-md bg-muted px-3 py-2 text-sm">
|
||||
{inviteUrl}
|
||||
</code>
|
||||
<CopyInviteButton inviteUrl={inviteUrl} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Metadata</CardTitle>
|
||||
<CardDescription>Admin-managed invitation fields.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 text-sm">
|
||||
<div className="flex justify-between gap-4">
|
||||
<span className="text-muted-foreground">Contact email</span>
|
||||
<span className="text-right">{detail.invitation.contact_email ?? "—"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<span className="text-muted-foreground">Contact phone</span>
|
||||
<span className="text-right">{detail.invitation.contact_phone ?? "—"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<span className="text-muted-foreground">Max party size</span>
|
||||
<span>{detail.invitation.max_party_size}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<span className="text-muted-foreground">Member edits</span>
|
||||
<span>{detail.invitation.allow_member_edits ? "Allowed" : "Disabled"}</span>
|
||||
</div>
|
||||
<div className="flex justify-between gap-4">
|
||||
<span className="text-muted-foreground">Updated</span>
|
||||
<span className="text-right">{formatDate(detail.invitation.updated_at)}</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Members</CardTitle>
|
||||
<CardDescription>
|
||||
Individual attendance and meal details from the guest RSVP.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Primary</TableHead>
|
||||
<TableHead>Attending</TableHead>
|
||||
<TableHead>Meal</TableHead>
|
||||
<TableHead>Dietary restrictions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{detail.members.map((member) => (
|
||||
<TableRow key={member.id}>
|
||||
<TableCell className="font-medium">{member.name}</TableCell>
|
||||
<TableCell>{member.is_primary_contact ? "Yes" : "No"}</TableCell>
|
||||
<TableCell>{formatBoolean(member.attending)}</TableCell>
|
||||
<TableCell>{member.meal_preference ?? "—"}</TableCell>
|
||||
<TableCell>{member.dietary_restrictions ?? "—"}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Travel and RSVP details</CardTitle>
|
||||
<CardDescription>Group-level logistics submitted by the invitation group.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{detail.response ? (
|
||||
<div className="grid gap-4 text-sm md:grid-cols-2">
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Submitted</p>
|
||||
<p className="mt-1 font-medium">{formatDate(detail.response.submitted_at)}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Needs transport help</p>
|
||||
<p className="mt-1 font-medium">
|
||||
{formatBoolean(detail.response.needs_transport_help)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Arrival date</p>
|
||||
<p className="mt-1 font-medium">{formatDateOnly(detail.response.arrival_date)}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Departure date</p>
|
||||
<p className="mt-1 font-medium">{formatDateOnly(detail.response.departure_date)}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Staying at</p>
|
||||
<p className="mt-1 font-medium">{detail.response.stay_location ?? "—"}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4 md:col-span-2">
|
||||
<p className="text-muted-foreground">Message to the couple</p>
|
||||
<p className="mt-1 whitespace-pre-wrap font-medium">
|
||||
{detail.response.message_to_couple ?? "—"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No RSVP response submitted yet.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Admin notes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="whitespace-pre-wrap text-sm text-muted-foreground">
|
||||
{detail.invitation.notes ?? "No notes yet."}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Wedding surprise photo</CardTitle>
|
||||
<CardDescription>One image uploaded by this invitation group.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{photoUpload && photoUrl ? (
|
||||
<div className="grid gap-4 lg:grid-cols-[280px_1fr]">
|
||||
<div className="overflow-hidden rounded-lg border bg-muted">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={photoUrl}
|
||||
alt={photoUpload.original_filename ?? "Uploaded wedding activity photo"}
|
||||
className="aspect-square w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-3 text-sm">
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Filename</p>
|
||||
<p className="mt-1 font-medium">{photoUpload.original_filename ?? "—"}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Content type</p>
|
||||
<p className="mt-1 font-medium">{photoUpload.content_type ?? "—"}</p>
|
||||
</div>
|
||||
<div className="rounded-lg border p-4">
|
||||
<p className="text-muted-foreground">Size</p>
|
||||
<p className="mt-1 font-medium">
|
||||
{photoUpload.size_bytes
|
||||
? `${(photoUpload.size_bytes / 1024 / 1024).toFixed(2)} MB`
|
||||
: "—"}
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild variant="outline">
|
||||
<a href={photoUrl} target="_blank" rel="noreferrer">
|
||||
Open signed preview
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No photo uploaded yet.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Toast requests</CardTitle>
|
||||
<CardDescription>Optional speech requests. Status is managed by admins.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{interactions.toastRequests.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{interactions.toastRequests.map((toast) => (
|
||||
<div className="rounded-lg border p-4" key={toast.id}>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{toast.speaker_name}</p>
|
||||
<Badge variant="secondary">{toast.status}</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Estimated time: {toast.estimated_minutes ?? "—"} minutes
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(["pending", "accepted", "declined", "scheduled"] as const).map(
|
||||
(status) => (
|
||||
<form action={updateToastStatusAction} key={status}>
|
||||
<input type="hidden" name="toastId" value={toast.id} />
|
||||
<input type="hidden" name="status" value={status} />
|
||||
<Button
|
||||
type="submit"
|
||||
size="sm"
|
||||
variant={toast.status === status ? "default" : "outline"}
|
||||
>
|
||||
{status}
|
||||
</Button>
|
||||
</form>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No toast requests submitted yet.</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user