feat: add description field to orders and support marking menu items as sold out
This commit is contained in:
Firman Ramdhani
@@ -3,6 +3,7 @@ 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'
|
||||
@@ -96,55 +97,62 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Daftar Penitip (Submissions) */}
|
||||
<div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden">
|
||||
<div className="p-5 sm:p-6 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
|
||||
<Users className="w-4 h-4" />
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
|
||||
{/* Left 2 Cols: Daftar Penitip */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
<div className="bg-white dark:bg-slate-900 rounded-3xl border border-slate-200/60 dark:border-slate-800 shadow-sm overflow-hidden">
|
||||
<div className="p-5 sm:p-6 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-xl bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center">
|
||||
<Users className="w-4 h-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="p-4 sm:p-6 flex items-start gap-4 hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
|
||||
{sub.user.photo ? (
|
||||
<img src={sub.user.photo} alt={sub.user.name} className="w-10 h-10 rounded-full object-cover shrink-0" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center font-bold text-sm shrink-0">
|
||||
{sub.user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-bold text-slate-800 dark:text-slate-200 text-sm mb-2">{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 px-2 py-0.5 rounded-md text-[11px] font-medium border ${
|
||||
item.is_custom
|
||||
? 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800'
|
||||
: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
{item.qty}x {item.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-slate-500 font-medium">Belum ada yang menitip.</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Jadilah yang pertama untuk menitip pesanan!</p>
|
||||
</div>
|
||||
)}
|
||||
</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="p-4 sm:p-6 flex items-start gap-4 hover:bg-slate-50/50 dark:hover:bg-slate-800/20 transition-colors">
|
||||
{sub.user.photo ? (
|
||||
<img src={sub.user.photo} alt={sub.user.name} className="w-10 h-10 rounded-full object-cover shrink-0" />
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-500 flex items-center justify-center font-bold text-sm shrink-0">
|
||||
{sub.user.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="font-bold text-slate-800 dark:text-slate-200 text-sm mb-2">{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 px-2 py-0.5 rounded-md text-[11px] font-medium border ${
|
||||
item.is_custom
|
||||
? 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800'
|
||||
: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700'
|
||||
}`}
|
||||
>
|
||||
{item.qty}x {item.name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="p-12 text-center">
|
||||
<p className="text-slate-500 font-medium">Belum ada yang menitip.</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Jadilah yang pertama untuk menitip pesanan!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Right 1 Col: Summary Generators */}
|
||||
<SummaryGenerator order={order} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user