firmanr/titipin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: add description field to orders and support marking menu items as sold out

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-11 10:40:23 +07:00
parent e3c8f980f7
commit f4358eb00b
14 changed files with 435 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OrderCard.tsx
+40 -23
View File
@@ -8,9 +8,10 @@ import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { submitOrder, getUserSubmission, getSessionUser } from '@/app/actions'
import { PlusCircle, MinusCircle, User, CheckCircle2, ShoppingBag, Sparkles, Users } from 'lucide-react'
import { PlusCircle, MinusCircle, User, CheckCircle2, ShoppingBag, Sparkles, Users, Eye } from 'lucide-react'
import { OrderFormModal } from '@/components/OrderFormModal'
import { ShareButton } from '@/components/ShareButton'
import Link from 'next/link'
import { format } from 'date-fns'
import { id as idLocale } from 'date-fns/locale'
@@ -18,15 +19,24 @@ import { id as idLocale } from 'date-fns/locale'
export function OrderCard({ order }: { order: any }) {
const [open, setOpen] = useState(false)
const activeItems = order.available_items.filter((i: any) => !i.is_sold_out)
return (
<div className="flex flex-col md:flex-row h-full md:h-auto rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm hover:shadow-xl hover:border-[#1B2CC1]/40 dark:hover:border-blue-500/40 transition-all duration-300 group overflow-hidden items-start md:items-stretch">
{/* Left: Info */}
<div className="flex-[1.2] p-5 md:border-r border-slate-100 dark:border-slate-800/80 flex flex-col justify-center min-w-0 w-full">
<div className="flex justify-between items-start gap-4">
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-2 leading-snug flex-1 min-w-0 group-hover:text-[#1B2CC1] dark:group-hover:text-blue-400 transition-colors">
{order.title}
</h3>
<div className="flex-1 min-w-0">
<h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-2 leading-snug group-hover:text-[#1B2CC1] dark:group-hover:text-blue-400 transition-colors">
{order.title}
</h3>
{order.description && (
<p className="text-xs text-slate-500 mt-1 line-clamp-2 font-medium">
{order.description}
</p>
)}
</div>
<div className="flex flex-col sm:flex-row items-end sm:items-center gap-2 shrink-0">
<span className="text-[10px] sm:text-[11px] text-slate-500 font-semibold bg-slate-100/80 dark:bg-slate-800 px-2.5 py-1 rounded-full whitespace-nowrap">
{format(new Date(order.date), 'EEEE, dd MMM yyyy', { locale: idLocale })}
@@ -64,7 +74,7 @@ export function OrderCard({ order }: { order: any }) {
<div className="w-full md:w-64 p-5 md:border-r border-slate-100 dark:border-slate-800/80 flex flex-col justify-center border-t md:border-t-0">
<div className="flex items-center justify-between mb-2">
<span className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block">
Item Tersedia ({order.available_items.length})
Item Tersedia ({activeItems.length})
</span>
{order.allow_custom && (
<div className="inline-flex items-center gap-1 text-[9px] font-semibold text-[#1B2CC1] bg-blue-50 dark:bg-blue-950/40 px-1.5 py-0.5 rounded-md">
@@ -75,7 +85,7 @@ export function OrderCard({ order }: { order: any }) {
<div className="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-xl border border-slate-200/70 dark:border-slate-800 max-h-24 overflow-y-auto scrollbar-thin">
<ul className="space-y-1.5">
{order.available_items.map((item: any) => (
{activeItems.map((item: any) => (
<li key={item.id} className="text-[11px] flex items-start gap-2 text-slate-700 dark:text-slate-300 font-medium">
<div className="w-3.5 h-3.5 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center shrink-0 mt-0.5">
<CheckCircle2 className="w-2.5 h-2.5" />
@@ -83,34 +93,41 @@ export function OrderCard({ order }: { order: any }) {
<span className="truncate leading-snug">{item.name}</span>
</li>
))}
{order.available_items.length === 0 && (
<li className="text-[10px] text-slate-400 italic">Hanya menerima item kustom.</li>
{activeItems.length === 0 && (
<li className="text-[10px] text-slate-400 italic">
{order.allow_custom ? "Hanya menerima kustom." : "Semua item habis."}
</li>
)}
</ul>
</div>
</div>
{/* Right: Actions */}
<div className="w-full md:w-48 p-5 bg-slate-50/60 dark:bg-slate-800/40 flex flex-col items-center justify-center gap-3 shrink-0">
<div className="w-full md:w-56 p-5 bg-slate-50/60 dark:bg-slate-800/40 flex flex-col items-center justify-center gap-2.5 shrink-0">
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger className={cn(
buttonVariants({ size: "sm" }),
"w-full h-9 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold shadow-md shadow-[#1B2CC1]/20 transition-all hover:scale-[1.01] gap-1.5 cursor-pointer"
)}>
<ShoppingBag className="w-3.5 h-3.5 shrink-0" />
<DialogTrigger className="w-full flex items-center justify-center h-10 rounded-xl bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-md shadow-[#1B2CC1]/20 gap-1.5 transition-all cursor-pointer px-2">
<ShoppingBag className="w-4 h-4 shrink-0" />
<span className="truncate">Titip Sekarang</span>
</DialogTrigger>
<OrderFormModal order={order} onSuccess={() => setOpen(false)} />
{open && <OrderFormModal order={order} onSuccess={() => setOpen(false)} />}
</Dialog>
<ShareButton
orderId={order.id}
className="w-full h-9 rounded-xl font-bold text-xs gap-1.5 shadow-sm bg-white dark:bg-slate-900"
showText={true}
/>
<div className="flex w-full gap-2">
<Link
href={`/order/${order.id}`}
className="flex-1 flex items-center justify-center h-9 rounded-xl bg-white dark:bg-slate-900 hover:bg-slate-50 dark:hover:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold text-xs shadow-sm gap-1.5 transition-all cursor-pointer px-1 border border-slate-200 dark:border-slate-700"
>
<Eye className="w-3.5 h-3.5 shrink-0" />
<span className="truncate">Detail</span>
</Link>
<ShareButton
orderId={order.id}
className="flex-1 h-9 rounded-xl font-bold text-xs gap-1.5 shadow-sm bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 transition-all text-slate-700 dark:text-slate-300 px-1"
showText={true}
/>
</div>
</div>
</div>
)
}