feat: implement flexible payment processing with partial cash payments and automatic balance deduction in reports

src/app/(app)/my-orders/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { getOrderDetail, updateSubmissionPayment, updateOrderStatus, updateOrder, deleteOrder, getSessionUser } from '@/app/actions'
+import { getOrderDetail, updateSubmissionPayment, updateOrderStatus, updateOrder, deleteOrder, getSessionUser, getBalancesAsCreator } from '@/app/actions'
 import { Card, CardContent } from '@/components/ui/card'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
@@ -11,7 +11,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { format } from 'date-fns'
+import { format, isToday } from 'date-fns'
 import { 
   Copy, 
   Loader2, 
@@ -23,6 +23,7 @@ import {
   ToggleLeft,
   AlertCircle,
   Pencil,
+  ShoppingBag,
   PlusCircle,
   MinusCircle,
   Trash2,
@@ -38,6 +39,7 @@ export default function OrderDetailPage() {
   const [userId, setUserId] = useState<string | null>(null)
   const [order, setOrder] = useState<any>(null)
   const [loading, setLoading] = useState(true)
+  const [balances, setBalances] = useState<any[]>([])
   const [copiedPerson, setCopiedPerson] = useState(false)
   const [copiedItem, setCopiedItem] = useState(false)
   const [updatingStatus, setUpdatingStatus] = useState(false)
@@ -52,15 +54,22 @@ export default function OrderDetailPage() {
       if (user?.id) {
         setUserId(user.id)
       }
-      if (orderId) loadOrder()
+      if (orderId) loadOrder(user?.id)
     }
     init()
   }, [orderId])
 
-  const loadOrder = async () => {
+  const loadOrder = async (currentUserId?: string) => {
     setLoading(true)
     const data = await getOrderDetail(orderId)
     setOrder(data)
+    
+    const idToUse = currentUserId || userId
+    if (data && idToUse === data.creator_id) {
+      const bals = await getBalancesAsCreator(idToUse)
+      setBalances(bals)
+    }
+    
     setLoading(false)
   }
 
@@ -230,46 +239,52 @@ export default function OrderDetailPage() {
       )}
 
       {/* Hero Overview Card */}
-      <Card className="rounded-3xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden">
-        <div className="p-6 sm:p-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-100 dark:border-slate-800">
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
+      <Card className="rounded-2xl border border-slate-200/80 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden mb-6">
+        <div className="p-5 sm:p-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-5 border-b border-slate-100 dark:border-slate-800">
+          <div className="space-y-1.5 w-full md:w-auto">
+            <div className="flex items-center gap-2 mb-2">
               <span className={cn(
-                "inline-flex items-center px-3 py-0.5 rounded-full text-xs font-black tracking-wide",
-                order.status === 'OPEN' ? 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-400' :
-                order.status === 'CLOSE' ? 'bg-rose-50 text-rose-700 border border-rose-200 dark:bg-rose-950/50 dark:text-rose-400' :
-                'bg-slate-100 text-slate-700 border border-slate-200 dark:bg-slate-800 dark:text-slate-300'
+                "inline-flex items-center px-2.5 py-0.5 rounded-md text-[10px] font-black tracking-wider uppercase",
+                order.status === 'OPEN' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400' :
+                order.status === 'CLOSE' ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/60 dark:text-rose-400' :
+                'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300'
               )}>
-                ● {order.status}
+                {order.status}
               </span>
               <span className="text-xs text-slate-400 font-medium">
-                {format(new Date(order.date), 'dd MMMM yyyy')}
+                {format(new Date(order.date), 'dd MMM yyyy')}
               </span>
             </div>
-            <h1 className="text-2xl sm:text-3xl font-black text-slate-900 dark:text-white tracking-tight">
+            <h1 className="text-xl sm:text-2xl font-black text-slate-900 dark:text-white tracking-tight leading-tight">
               {order.title}
             </h1>
-            <p className="text-xs text-slate-500 font-medium">
-              Dibuat oleh: <span className="text-slate-800 dark:text-slate-200 font-bold">{order.creator.name}</span>
+            <p className="text-xs text-slate-500 font-medium pt-0.5">
+              Oleh <span className="text-slate-800 dark:text-slate-200 font-bold">{order.creator.name}</span>
             </p>
           </div>
 
-          <div className="flex items-center gap-4 bg-slate-50 dark:bg-slate-800/50 p-4 rounded-2xl border border-slate-200/80 dark:border-slate-700/60">
-            <div className="text-center px-2">
-              <span className="text-[10px] uppercase font-bold text-slate-400 block">Total Pemesan</span>
-              <span className="text-2xl font-black text-[#1B2CC1] dark:text-blue-400">{order.submissions.length}</span>
+          <div className="flex w-full md:w-auto items-center gap-3">
+            <div className="flex-1 md:flex-none flex items-center justify-between gap-3 bg-slate-50 dark:bg-slate-800/40 p-3 rounded-xl border border-slate-100 dark:border-slate-700/50 min-w-[120px]">
+              <div className="flex flex-col">
+                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Pemesan</span>
+                <span className="text-lg font-black text-[#1B2CC1] dark:text-blue-400 leading-none mt-1">{order.submissions.length}</span>
+              </div>
+              <Users className="w-5 h-5 text-slate-300 dark:text-slate-600" />
             </div>
-            <div className="h-8 w-px bg-slate-200 dark:bg-slate-700" />
-            <div className="text-center px-2">
-              <span className="text-[10px] uppercase font-bold text-slate-400 block">Total Menu</span>
-              <span className="text-2xl font-black text-slate-800 dark:text-white">{order.available_items.length}</span>
+            
+            <div className="flex-1 md:flex-none flex items-center justify-between gap-3 bg-slate-50 dark:bg-slate-800/40 p-3 rounded-xl border border-slate-100 dark:border-slate-700/50 min-w-[120px]">
+              <div className="flex flex-col">
+                <span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Menu</span>
+                <span className="text-lg font-black text-slate-700 dark:text-slate-300 leading-none mt-1">{order.available_items.length}</span>
+              </div>
+              <ShoppingBag className="w-5 h-5 text-slate-300 dark:text-slate-600" />
             </div>
           </div>
         </div>
 
         {/* Creator Control Toolbar (Status, Edit, Delete) */}
         {isCreator && (
-          <div className="p-4 sm:px-8 bg-slate-50/70 dark:bg-slate-800/40 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+          <div className="p-4 sm:px-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
             <div className="flex items-center gap-2">
               <ToggleLeft className="w-4 h-4 text-[#1B2CC1]" />
               <span className="text-xs font-bold text-slate-700 dark:text-slate-300">
@@ -278,8 +293,8 @@ export default function OrderDetailPage() {
             </div>
 
             <div className="flex items-center gap-2 flex-wrap">
-              {/* Edit Button (Available when not CLOSE) */}
-              {!isClosed && (
+              {/* Edit Button (Available when not CLOSE and date is today) */}
+              {!isClosed && isToday(new Date(order.date)) && (
                 <Button
                   size="sm"
                   variant="outline"
@@ -292,7 +307,7 @@ export default function OrderDetailPage() {
               )}
 
               {/* Status Change Buttons */}
-              {order.status === 'DRAFT' && (
+              {order.status === 'DRAFT' && isToday(new Date(order.date)) && (
                 <Button
                   size="sm"
                   onClick={() => handleStatusChange('OPEN')}
@@ -316,7 +331,7 @@ export default function OrderDetailPage() {
                 </Button>
               )}
 
-              {order.status === 'CLOSE' && (
+              {order.status === 'CLOSE' && isToday(new Date(order.date)) && (
                 <Button
                   size="sm"
                   onClick={() => handleStatusChange('OPEN')}
@@ -395,15 +410,19 @@ export default function OrderDetailPage() {
                   )
                 }
                 
-                return filteredSubmissions.map((sub: any) => (
-                  <SubmissionRow 
-                    key={sub.id} 
-                    sub={sub} 
-                    isCreator={isCreator} 
-                    isClosed={isClosed} 
-                    onUpdate={loadOrder} 
-                  />
-                ))
+                return filteredSubmissions.map((sub: any) => {
+                  const userBalance = balances.find(b => b.user.id === sub.user.id)?.amount || 0
+                  return (
+                    <SubmissionRow 
+                      key={sub.id} 
+                      sub={sub} 
+                      isCreator={isCreator} 
+                      isClosed={isClosed} 
+                      currentBalance={userBalance}
+                      onUpdate={() => loadOrder(userId || undefined)} 
+                    />
+                  )
+                })
               })()}
             </div>
           )}
@@ -474,43 +493,88 @@ function SubmissionRow({
   sub, 
   isCreator, 
   isClosed, 
+  currentBalance,
   onUpdate 
 }: { 
   sub: any
   isCreator: boolean
   isClosed: boolean
+  currentBalance?: number
   onUpdate: () => void 
 }) {
   const [bill, setBill] = useState(sub.bill ?? '')
+  const [paidAmount, setPaidAmount] = useState(sub.paid_amount ?? '')
   const [status, setStatus] = useState(sub.payment_status || 'BELUM_BAYAR')
   const [saving, setSaving] = useState(false)
 
-  const handleSave = async () => {
+  // Sync state when props change after save
+  useEffect(() => {
+    setBill(sub.bill ?? '')
+    setPaidAmount(sub.paid_amount ?? '')
+    setStatus(sub.payment_status || 'BELUM_BAYAR')
+  }, [sub])
+
+  const handleSave = async (overrideStatus?: string, overridePaid?: string | number) => {
     setSaving(true)
-    await updateSubmissionPayment(sub.id, bill !== '' ? parseInt(bill as string) : null, status)
+    const finalBill = bill !== '' ? parseInt(bill as string) : null
+    let finalStatus = overrideStatus || status
+    
+    let finalPaid: number | null = null
+    if (overridePaid !== undefined) {
+      finalPaid = overridePaid !== '' ? parseInt(overridePaid as string) : null
+    } else {
+      finalPaid = paidAmount !== '' ? parseInt(paidAmount as string) : null
+    }
+
+    // AUTO-LUNAS LOGIC: Jika Uang Diterima >= Tagihan, otomatis set jadi LUNAS
+    if (finalPaid !== null && finalBill !== null && finalPaid >= finalBill && finalBill > 0) {
+      finalStatus = 'LUNAS'
+      setStatus('LUNAS')
+    }
+
+    const res = await updateSubmissionPayment(sub.id, finalBill, finalStatus, finalPaid)
+    
+    // Tampilkan pesan error jika gagal (contoh: Prisma error)
+    if (res && res.error) {
+      alert("Gagal menyimpan: " + res.error + "\n\nPastikan Anda sudah me-restart server (npm run dev) jika baru ada perubahan database.")
+    }
+
     onUpdate()
     setSaving(false)
   }
 
+  const handleUseBalance = () => {
+    setPaidAmount('0')
+    setStatus('LUNAS')
+    handleSave('LUNAS', '0')
+  }
+
   const formatRupiah = (angka: number) => {
     return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(angka)
   }
 
   return (
     <Card className="rounded-2xl border border-slate-200/90 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm overflow-hidden hover:border-[#1B2CC1]/30 transition-all">
-      <div className="p-5 flex flex-col md:flex-row gap-5 items-start md:items-center">
+      <div className="p-4 flex flex-col md:flex-row gap-4 items-start md:items-stretch">
         {/* Left: User & Order items */}
-        <div className="flex-1 space-y-3 w-full">
+        <div className="flex-1 space-y-2 w-full flex flex-col justify-center">
           <div className="flex items-center gap-3">
             {sub.user.photo ? (
-              <img src={sub.user.photo} alt={sub.user.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800" />
+              <img src={sub.user.photo} alt={sub.user.name} className="w-9 h-9 rounded-full object-cover ring-2 ring-slate-100 dark:ring-slate-800" />
             ) : (
-              <div className="w-10 h-10 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-sm ring-2 ring-slate-100 dark:ring-slate-800">
+              <div className="w-9 h-9 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-sm ring-2 ring-slate-100 dark:ring-slate-800">
                 {sub.user.name.charAt(0).toUpperCase()}
               </div>
             )}
             <div>
-              <p className="font-bold text-slate-900 dark:text-white text-sm">{sub.user.name}</p>
+              <div className="flex items-center gap-2">
+                <p className="font-bold text-slate-900 dark:text-white text-sm">{sub.user.name}</p>
+                {currentBalance !== undefined && currentBalance !== 0 && (
+                  <span className={cn("text-[9px] font-bold px-1.5 py-0.5 rounded-full", currentBalance > 0 ? "bg-emerald-50 text-emerald-700 border border-emerald-200" : "bg-rose-50 text-rose-700 border border-rose-200")}>
+                    Saldo: {formatRupiah(currentBalance)}
+                  </span>
+                )}
+              </div>
               <div className="flex items-center gap-2 mt-0.5">
                 <span className={cn(
                   "inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-black",
@@ -529,7 +593,7 @@ function SubmissionRow({
             </div>
           </div>
 
-          <div className="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-xl border border-slate-200/70 dark:border-slate-800">
+          <div className="bg-slate-50 dark:bg-slate-800/50 p-2.5 rounded-xl border border-slate-200/70 dark:border-slate-800 mt-2">
             <ul className="space-y-1 text-xs">
               {sub.items.map((item: any) => (
                 <li key={item.id} className="flex justify-between items-center font-medium">
@@ -545,43 +609,103 @@ function SubmissionRow({
 
         {/* Right: Bill input if Creator */}
         {isCreator && (
-          <div className="w-full md:w-60 border-t md:border-t-0 md:border-l pt-4 md:pt-0 md:pl-5 border-slate-200/80 dark:border-slate-800 space-y-2.5 shrink-0">
+          <div className="w-full md:w-[380px] border-t md:border-t-0 md:border-l pt-3 md:pt-0 md:pl-4 border-slate-200/80 dark:border-slate-800 space-y-2 shrink-0 flex flex-col justify-center">
             {isClosed ? (
               <>
-                <div className="space-y-1">
-                  <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
-                    Nominal Tagihan (Rp)
-                  </label>
-                  <Input 
-                    type="number" 
-                    placeholder="Contoh: 25000" 
-                    value={bill} 
-                    onChange={e => setBill(e.target.value)}
-                    className="h-9 rounded-lg font-bold text-xs"
-                  />
+                <div className="grid grid-cols-3 gap-2">
+                  <div className="space-y-1">
+                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400 block mb-1">
+                      Tagihan
+                    </label>
+                    <Input 
+                      type="number" 
+                      placeholder="Rp" 
+                      value={bill} 
+                      disabled={sub.payment_status === 'LUNAS'}
+                      onChange={e => {
+                        const val = e.target.value
+                        setBill(val)
+                        const pBill = val !== '' ? parseInt(val) : 0
+                        const pPaid = paidAmount !== '' ? parseInt(paidAmount as string) : 0
+                        if (val !== '' && pPaid >= pBill && pBill > 0) {
+                          setStatus('LUNAS')
+                        } else {
+                          setStatus('BELUM_BAYAR')
+                        }
+                      }}
+                      className="h-8 rounded-md font-bold text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                      Diterima
+                    </label>
+                    <Input 
+                      type="number" 
+                      placeholder="Rp" 
+                      value={paidAmount} 
+                      disabled={sub.payment_status === 'LUNAS'}
+                      onChange={e => {
+                        const val = e.target.value
+                        setPaidAmount(val)
+                        const pBill = bill !== '' ? parseInt(bill as string) : 0
+                        const pPaid = val !== '' ? parseInt(val) : 0
+                        if (val !== '' && pPaid >= pBill && pBill > 0) {
+                          setStatus('LUNAS')
+                        } else {
+                          setStatus('BELUM_BAYAR')
+                        }
+                      }}
+                      className="h-8 rounded-md font-bold text-xs"
+                    />
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                      Status
+                    </label>
+                    <Select value={status} onValueChange={setStatus} disabled={sub.payment_status === 'LUNAS'}>
+                      <SelectTrigger className="h-8 rounded-md text-xs font-semibold px-2">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="BELUM_BAYAR">Belum</SelectItem>
+                        <SelectItem value="LUNAS">Lunas</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-                <div className="space-y-1">
-                  <label className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
-                    Status Bayar
-                  </label>
-                  <Select value={status} onValueChange={setStatus}>
-                    <SelectTrigger className="h-9 rounded-lg text-xs font-semibold">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="BELUM_BAYAR">Belum Bayar</SelectItem>
-                      <SelectItem value="LUNAS">Lunas</SelectItem>
-                    </SelectContent>
-                  </Select>
+                
+                <div className="flex gap-2 w-full mt-1">
+                  {sub.payment_status !== 'LUNAS' ? (
+                    <>
+                      <Button 
+                        size="sm" 
+                        onClick={() => handleSave()} 
+                        disabled={saving} 
+                        className="flex-1 h-8 rounded-md bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-sm gap-1.5"
+                      >
+                        {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <><Save className="w-3.5 h-3.5" /> Simpan</>}
+                      </Button>
+                      
+                      {currentBalance !== undefined && currentBalance > 0 && status !== 'LUNAS' && (
+                        <Button
+                          size="sm"
+                          onClick={handleUseBalance}
+                          disabled={saving || !bill}
+                          variant="outline"
+                          className="flex-1 h-8 rounded-md border-emerald-200 text-emerald-700 hover:bg-emerald-50 font-bold text-xs shadow-sm"
+                          title={!bill ? "Isi nominal tagihan dulu" : "Potong saldo"}
+                        >
+                          Pakai Saldo
+                        </Button>
+                      )}
+                    </>
+                  ) : (
+                    <div className="w-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800 rounded-md h-8 flex items-center justify-center text-xs font-bold gap-1.5 cursor-not-allowed opacity-80">
+                      <Check className="w-4 h-4" /> Telah Lunas
+                    </div>
+                  )}
                 </div>
-                <Button 
-                  size="sm" 
-                  onClick={handleSave} 
-                  disabled={saving} 
-                  className="w-full h-9 rounded-lg bg-[#1B2CC1] hover:bg-[#15229E] text-white font-bold text-xs shadow-sm gap-1.5 mt-1"
-                >
-                  {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <><Save className="w-3.5 h-3.5" /> Simpan Tagihan</>}
-                </Button>
               </>
             ) : (
               <div className="p-3 bg-slate-50 dark:bg-slate-800/40 rounded-xl text-center border border-dashed border-slate-200 dark:border-slate-800">