206 lines
9.2 KiB
TypeScript
206 lines
9.2 KiB
TypeScript
import { getOrderDetail, getSessionUser } from '@/app/actions'
|
|
import { redirect, notFound } from 'next/navigation'
|
|
import { Store, User, Users, CheckCircle2, ChevronLeft, MapPin, Sparkles } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { PublicOrderActions } from './PublicOrderActions'
|
|
import { SummaryGenerator } from '@/components/SummaryGenerator'
|
|
import { format } from 'date-fns'
|
|
import { id as idLocale } from 'date-fns/locale'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export const dynamic = 'force-dynamic'
|
|
|
|
export default async function PublicOrderDetailPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string }>
|
|
}) {
|
|
const { id } = await params
|
|
const session = await getSessionUser()
|
|
|
|
if (!session) {
|
|
redirect(`/login?callbackUrl=/order/${id}`)
|
|
}
|
|
|
|
const order = await getOrderDetail(id)
|
|
|
|
if (!order) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<div className="animate-in fade-in mx-auto max-w-4xl space-y-6 pb-20 duration-500">
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/"
|
|
className="-ml-2 rounded-xl p-2 text-slate-500 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
|
|
>
|
|
<ChevronLeft className="h-5 w-5" />
|
|
</Link>
|
|
<h1 className="text-xl font-black tracking-tight text-slate-900 dark:text-white">
|
|
Detail PO
|
|
</h1>
|
|
</div>
|
|
|
|
{/* Hero Card */}
|
|
<div className="relative overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="absolute top-0 left-0 h-24 w-full bg-gradient-to-r from-[#1B2CC1] to-[#121E85]" />
|
|
|
|
<div className="relative flex flex-col items-center px-5 pt-10 pb-5 text-center sm:px-6 sm:pb-6">
|
|
<div className="mb-3 flex h-20 w-20 items-center justify-center rounded-2xl border-4 border-white bg-white shadow-md dark:border-slate-900 dark:bg-slate-900">
|
|
{order.creator.photo ? (
|
|
<img
|
|
src={order.creator.photo}
|
|
alt={order.creator.name}
|
|
className="h-full w-full rounded-xl object-cover"
|
|
/>
|
|
) : (
|
|
<Store className="h-8 w-8 text-[#1B2CC1]" />
|
|
)}
|
|
</div>
|
|
|
|
<h2 className="mb-2 text-xl leading-tight font-black text-slate-900 sm:text-2xl dark:text-white">
|
|
{order.title}
|
|
</h2>
|
|
|
|
<div className="flex flex-wrap items-center justify-center gap-3 text-sm font-semibold text-slate-600 dark:text-slate-400">
|
|
<span className="flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1 dark:bg-slate-800">
|
|
<User className="h-4 w-4 text-[#1B2CC1]" />
|
|
{order.creator.name}
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
'flex items-center gap-1.5 rounded-full border px-3 py-1',
|
|
order.status === 'OPEN'
|
|
? 'border-emerald-100 bg-emerald-50 text-emerald-700 dark:border-emerald-900/50 dark:bg-emerald-950/30 dark:text-emerald-400'
|
|
: 'border-rose-100 bg-rose-50 text-rose-700 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-400'
|
|
)}
|
|
>
|
|
<CheckCircle2 className="h-4 w-4" />
|
|
{order.status}
|
|
</span>
|
|
{order.allow_custom && (
|
|
<span className="flex items-center gap-1.5 rounded-full border border-blue-100 bg-blue-50 px-3 py-1 text-blue-700 dark:border-blue-900/50 dark:bg-blue-950/30 dark:text-blue-400">
|
|
<Sparkles className="h-4 w-4" />
|
|
Custom Item
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<PublicOrderActions order={order} />
|
|
</div>
|
|
|
|
<div className="flex flex-col divide-y divide-slate-200 border-t border-slate-100 bg-slate-50 p-4 sm:flex-row sm:divide-x sm:divide-y-0 sm:p-5 dark:divide-slate-700 dark:border-slate-800 dark:bg-slate-800/50">
|
|
<div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
|
|
<p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
|
|
Tanggal PO
|
|
</p>
|
|
<p className="text-base font-black text-slate-800 dark:text-slate-200">
|
|
{format(new Date(order.date), 'dd MMM yyyy', { locale: idLocale })}
|
|
</p>
|
|
</div>
|
|
<div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
|
|
<p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
|
|
Total Orang
|
|
</p>
|
|
<p className="text-base font-black text-slate-800 dark:text-slate-200">
|
|
{order.submissions.length}{' '}
|
|
<span className="text-xs font-semibold text-slate-500">menitip</span>
|
|
</p>
|
|
</div>
|
|
<div className="flex-1 py-3 text-center sm:px-4 sm:py-0">
|
|
<p className="mb-0.5 text-[10px] font-bold tracking-wider text-slate-400 uppercase">
|
|
Menu Tersedia
|
|
</p>
|
|
<p className="text-base font-black text-slate-800 dark:text-slate-200">
|
|
{order.available_items.length}{' '}
|
|
<span className="text-xs font-semibold text-slate-500">item</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-3">
|
|
{/* Left 2 Cols: Daftar Penitip & Description */}
|
|
<div className="space-y-6 lg:col-span-2">
|
|
{order.description && (
|
|
<div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white p-5 shadow-sm sm:p-6 dark:border-slate-800 dark:bg-slate-900">
|
|
<h3 className="mb-3 font-bold text-slate-900 dark:text-white">Deskripsi</h3>
|
|
<div className="text-sm leading-relaxed whitespace-pre-wrap text-slate-600 dark:text-slate-300">
|
|
{order.description}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="overflow-hidden rounded-3xl border border-slate-200/60 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div className="flex items-center justify-between border-b border-slate-100 bg-slate-50/50 p-5 sm:p-6 dark:border-slate-800 dark:bg-slate-800/30">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1]">
|
|
<Users className="h-4 w-4" />
|
|
</div>
|
|
<h3 className="font-bold text-slate-900 dark:text-white">Daftar Penitip</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-slate-100 dark:divide-slate-800">
|
|
{order.submissions.length > 0 ? (
|
|
order.submissions.map((sub: any) => (
|
|
<div
|
|
key={sub.id}
|
|
className="flex items-start gap-4 p-4 transition-colors hover:bg-slate-50/50 sm:p-6 dark:hover:bg-slate-800/20"
|
|
>
|
|
{sub.user.photo ? (
|
|
<img
|
|
src={sub.user.photo}
|
|
alt={sub.user.name}
|
|
className="h-10 w-10 shrink-0 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-100 text-sm font-bold text-slate-500 dark:bg-slate-800">
|
|
{sub.user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<h4 className="mb-2 text-sm font-bold text-slate-800 dark:text-slate-200">
|
|
{sub.user.name}
|
|
</h4>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{sub.items.map((item: any) => (
|
|
<span
|
|
key={item.id}
|
|
className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium ${
|
|
item.is_custom
|
|
? 'border-purple-200 bg-purple-50 text-purple-700 dark:border-purple-800 dark:bg-purple-900/30 dark:text-purple-300'
|
|
: 'border-slate-200 bg-slate-100 text-slate-700 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300'
|
|
}`}
|
|
>
|
|
{item.qty}x {item.name}{' '}
|
|
{item.note && (
|
|
<span className="ml-0.5 italic opacity-70">({item.note})</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="p-12 text-center">
|
|
<p className="font-medium text-slate-500">Belum ada yang menitip.</p>
|
|
<p className="mt-1 text-xs text-slate-400">
|
|
Jadilah yang pertama untuk menitip pesanan!
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right 1 Col: Summary Generators */}
|
|
<SummaryGenerator order={order} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|