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

src/components/OrderFormModal.tsx

@@ -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">