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

2026-09-11 10:40:23 +07:00
parent e3c8f980f7
commit f4358eb00b
14 changed files with 435 additions and 211 deletions
@@ -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>
  )
 }
-
-
@@ -7,10 +7,11 @@ import { DialogContent, DialogTitle } from '@/components/ui/dialog'
 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 { submitOrder, getUserSubmission, getSessionUser, getOrderDetail } from '@/app/actions'
 import { PlusCircle, MinusCircle, CheckCircle2 } from 'lucide-react'

 export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: () => void }) {
+  const [liveOrder, setLiveOrder] = useState<any>(order)
  const [userId, setUserId] = useState<string>('')
  const [items, setItems] = useState<Record<string, { selected: boolean, qty: number }>>({})
  const [customItems, setCustomItems] = useState<Array<{ id: string, name: string, qty: number }>>([])
@@ -19,32 +20,35 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()

  useEffect(() => {
    const init = async () => {
+      const freshOrder = await getOrderDetail(order.id)
+      if (freshOrder) setLiveOrder(freshOrder)
+        
      const user = await getSessionUser()
      if (user?.id) {
        setUserId(user.id)
-        loadExistingSubmission(user.id)
+        loadExistingSubmission(user.id, freshOrder || order)
      }
    }
    init()
  }, [order.id])

-  const loadExistingSubmission = async (uid: string) => {
-    const sub = await getUserSubmission(order.id, uid)
+  const loadExistingSubmission = async (uid: string, currentOrder: any) => {
+    const sub = await getUserSubmission(currentOrder.id, uid)
    if (sub) {
-      const newItems: any = { ...items }
+      const freshItems: any = {}
      const newCustoms: any[] = []
      
      sub.items.forEach((item: any) => {
        if (!item.is_custom) {
-          const stdItem = order.available_items.find((ai: any) => ai.name === item.name)
+          const stdItem = currentOrder.available_items.find((ai: any) => ai.name === item.name)
          if (stdItem) {
-            newItems[stdItem.id] = { selected: true, qty: item.qty }
+            freshItems[stdItem.id] = { selected: true, qty: item.qty }
          }
        } else {
          newCustoms.push({ id: Math.random().toString(), name: item.name, qty: item.qty })
        }
      })
-      setItems(newItems)
+      setItems(freshItems)
      setCustomItems(newCustoms)
    }
  }
@@ -86,7 +90,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
    
    const payloadItems: any[] = []
    
-    order.available_items.forEach((ai: any) => {
+    liveOrder.available_items.forEach((ai: any) => {
      const state = items[ai.id]
      if (state?.selected && state.qty > 0) {
        payloadItems.push({ name: ai.name, qty: state.qty, is_custom: false })
@@ -106,7 +110,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
    }

    const res = await submitOrder({
-      order_id: order.id,
+      order_id: liveOrder.id,
      user_id: userId,
      items: payloadItems
    })
@@ -124,7 +128,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
      <div className="bg-gradient-to-br from-[#1B2CC1] to-[#121E85] p-6 text-white">
        <span className="text-[11px] font-bold uppercase tracking-wider text-blue-200">Form Titipan</span>
        <DialogTitle className="text-2xl font-black tracking-tight text-white mt-1">
-          {order.title}
+          {liveOrder.title}
        </DialogTitle>
        <p className="text-xs text-blue-100 mt-1">
          Pilih menu yang tersedia di bawah atau tambahkan item khusus jika diizinkan.
@@ -138,7 +142,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
            Daftar Menu Tersedia
          </Label>
          <div className="space-y-2">
-            {order.available_items.map((item: any) => {
+            {liveOrder.available_items.map((item: any) => {
              const isSelected = items[item.id]?.selected || false
              const qty = items[item.id]?.qty || 0
              return (
@@ -154,12 +158,18 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
                  <div className="flex items-center gap-3 flex-1 min-w-0">
                    <Checkbox 
                      id={`item-${item.id}`} 
-                      checked={isSelected}
-                      onCheckedChange={(c) => handleStandardItemToggle(item.id, c as boolean)}
-                      className="rounded-lg data-[state=checked]:bg-[#1B2CC1] data-[state=checked]:border-[#1B2CC1]"
+                      checked={isSelected && !item.is_sold_out}
+                      disabled={item.is_sold_out}
+                      onCheckedChange={(c) => !item.is_sold_out && handleStandardItemToggle(item.id, c as boolean)}
+                      className="rounded-lg data-[state=checked]:bg-[#1B2CC1] data-[state=checked]:border-[#1B2CC1] disabled:opacity-50"
                    />
-                    <Label htmlFor={`item-${item.id}`} className="text-sm font-bold text-slate-800 dark:text-slate-200 cursor-pointer truncate">
-                      {item.name}
+                    <Label htmlFor={`item-${item.id}`} className={cn("text-sm font-bold truncate flex items-center gap-2", item.is_sold_out ? "text-slate-400 dark:text-slate-500 cursor-not-allowed" : "text-slate-800 dark:text-slate-200 cursor-pointer")}>
+                      <span className={item.is_sold_out ? "line-through" : ""}>{item.name}</span>
+                      {item.is_sold_out && (
+                        <span className="text-[9px] bg-rose-100 dark:bg-rose-950/30 text-rose-600 dark:text-rose-400 px-1.5 py-0.5 rounded font-black uppercase tracking-wider border border-rose-200 dark:border-rose-900/50">
+                          Sold Out
+                        </span>
+                      )}
                    </Label>
                  </div>
                  {isSelected && (
@@ -188,7 +198,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
                </div>
              )
            })}
-            {order.available_items.length === 0 && (
+            {liveOrder.available_items.length === 0 && (
              <p className="text-xs text-slate-400 text-center py-3 bg-slate-50 dark:bg-slate-800/40 rounded-xl border border-dashed border-slate-200 dark:border-slate-800">
                Tidak ada menu standar yang ditentukan.
              </p>
@@ -197,7 +207,7 @@ export function OrderFormModal({ order, onSuccess }: { order: any, onSuccess: ()
        </div>

        {/* Custom Items */}
-        {order.allow_custom && (
+        {liveOrder.allow_custom && (
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Label className="text-xs font-bold uppercase tracking-wider text-slate-400">
@@ -240,7 +240,7 @@ export function Sidebar({ isOpen, onClose }: { isOpen?: boolean; onClose?: () =>
        {/* Copyright */}
        <div className="mt-4 pt-4 border-t border-slate-100 dark:border-slate-800 text-center">
          <p className="text-[10px] text-slate-400 font-medium">
-            &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan<br/>by firmanramdhani
+            &copy; {new Date().getFullYear()} TitipIn - Sistem Titip Pesanan
          </p>
        </div>
      </aside>
@@ -0,0 +1,99 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Copy, Check, Receipt } from 'lucide-react'
+
+export function SummaryGenerator({ order }: { order: any }) {
+  const [copiedPerson, setCopiedPerson] = useState(false)
+  const [copiedItem, setCopiedItem] = useState(false)
+
+  // Generate Summaries
+  let summaryByPerson = `${order.title}\n`
+  const itemCounts: Record<string, number> = {}
+
+  order.submissions?.forEach((sub: any) => {
+    const itemStrings = sub.items.map((i: any) => `${i.name} ${i.qty}x`)
+    summaryByPerson += `- ${sub.user?.name || 'Unknown'} : ${itemStrings.join(', ')}\n`
+    
+    sub.items.forEach((i: any) => {
+      itemCounts[i.name] = (itemCounts[i.name] || 0) + i.qty
+    })
+  })
+
+  let summaryByItem = `${order.title}\n`
+  Object.entries(itemCounts).forEach(([name, qty]) => {
+    summaryByItem += `- ${name} : ${qty} pcs\n`
+  })
+
+  const handleCopyPerson = () => {
+    navigator.clipboard.writeText(summaryByPerson)
+    setCopiedPerson(true)
+    setTimeout(() => setCopiedPerson(false), 2000)
+  }
+
+  const handleCopyItem = () => {
+    navigator.clipboard.writeText(summaryByItem)
+    setCopiedItem(true)
+    setTimeout(() => setCopiedItem(false), 2000)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="px-1">
+        <h3 className="text-lg font-black text-slate-900 dark:text-white flex items-center gap-2">
+          <Receipt className="w-5 h-5 text-[#1B2CC1]" />
+          <span>Generator Rekap</span>
+        </h3>
+        <p className="text-xs text-slate-500 mt-0.5">Salin format teks siap kirim ke WhatsApp / grup.</p>
+      </div>
+
+      {/* Rekap Per Orang */}
+      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/40">
+          <span className="text-xs font-bold text-slate-800 dark:text-slate-200">
+            Rekap per Orang
+          </span>
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={handleCopyPerson} 
+            className="h-8 text-xs font-bold rounded-lg border-slate-200 gap-1.5 hover:bg-[#1B2CC1] hover:text-white transition-all"
+          >
+            {copiedPerson ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+            <span>{copiedPerson ? 'Tersalin!' : 'Copy Text'}</span>
+          </Button>
+        </div>
+        <CardContent className="p-4">
+          <pre className="text-xs font-mono bg-slate-50 dark:bg-slate-800/80 p-3.5 rounded-xl overflow-x-auto whitespace-pre-wrap border border-slate-200/80 dark:border-slate-700 text-slate-700 dark:text-slate-300 leading-relaxed">
+            {summaryByPerson}
+          </pre>
+        </CardContent>
+      </Card>
+      
+      {/* Rekap Per Item */}
+      <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
+        <div className="p-4 border-b border-slate-100 dark:border-slate-800 flex justify-between items-center bg-slate-50/50 dark:bg-slate-800/40">
+          <span className="text-xs font-bold text-slate-800 dark:text-slate-200">
+            Rekap per Item (Akumulasi)
+          </span>
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={handleCopyItem} 
+            className="h-8 text-xs font-bold rounded-lg border-slate-200 gap-1.5 hover:bg-[#1B2CC1] hover:text-white transition-all"
+          >
+            {copiedItem ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
+            <span>{copiedItem ? 'Tersalin!' : 'Copy Text'}</span>
+          </Button>
+        </div>
+        <CardContent className="p-4">
+          <pre className="text-xs font-mono bg-slate-50 dark:bg-slate-800/80 p-3.5 rounded-xl overflow-x-auto whitespace-pre-wrap border border-slate-200/80 dark:border-slate-700 text-slate-700 dark:text-slate-300 leading-relaxed">
+            {summaryByItem}
+          </pre>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}