feat: add PiutangManager component for handling receivables and bulk payments

src/app/(app)/my-orders/page.tsx

@@ -53,6 +53,7 @@ import {
   ChevronLeft,
   ChevronRight,
 } from 'lucide-react'
+import PiutangManager from '@/components/PiutangManager'
 
 export default function MyOrdersPage() {
   const [userId, setUserId] = useState<string | null>(null)
@@ -63,6 +64,7 @@ export default function MyOrdersPage() {
   const [orderToDelete, setOrderToDelete] = useState<any | null>(null)
   const [orderToDuplicate, setOrderToDuplicate] = useState<any | null>(null)
   const [deleting, setDeleting] = useState(false)
+  const [mainTab, setMainTab] = useState<'PO' | 'PIUTANG'>('PO')
   const [activeTab, setActiveTab] = useState<'ALL' | 'OPEN' | 'DRAFT' | 'CLOSE'>('ALL')
   const [currentPage, setCurrentPage] = useState(1)
   const [searchQuery, setSearchQuery] = useState('')
@@ -154,6 +156,34 @@ export default function MyOrdersPage() {
 
   return (
     <div className="animate-in fade-in space-y-6 pb-12 duration-500">
+      {/* Main Tab Switcher */}
+      <div className="flex w-full max-w-sm rounded-xl border border-slate-200 bg-slate-100 p-1 dark:border-slate-800 dark:bg-slate-900">
+        <button
+          onClick={() => setMainTab('PO')}
+          className={cn(
+            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
+            mainTab === 'PO'
+              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
+              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
+          )}
+        >
+          Daftar PO
+        </button>
+        <button
+          onClick={() => setMainTab('PIUTANG')}
+          className={cn(
+            'flex-1 rounded-lg py-2 text-xs font-bold transition-all',
+            mainTab === 'PIUTANG'
+              ? 'bg-white text-slate-900 shadow-sm dark:bg-slate-800 dark:text-white'
+              : 'text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'
+          )}
+        >
+          Kelola Piutang
+        </button>
+      </div>
+
+      {mainTab === 'PO' ? (
+        <>
           {/* Top Controls & Segmented Control */}
           <div className="flex flex-col items-start justify-between gap-4 rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm md:flex-row md:items-center dark:border-slate-800 dark:bg-slate-900">
         <div className="flex w-full flex-col items-start gap-4 md:w-auto md:flex-row md:items-center">
@@ -618,6 +648,10 @@ export default function MyOrdersPage() {
           )}
         </div>
       )}
+        </>
+      ) : (
+        <PiutangManager creatorId={userId!} />
+      )}
     </div>
   )
 }

src/app/(app)/my-purchases/page.tsx

@@ -436,14 +436,15 @@ export default function MyPurchasesPage() {
                           </Button>
                         </div>
                       ) : (
-                        <div className="flex items-center justify-center gap-1.5 rounded-xl bg-slate-100/70 py-2 text-[11px] font-medium text-slate-400 dark:bg-slate-800/40">
+                        // <div className="flex items-center justify-center gap-1.5 rounded-xl bg-slate-100/70 py-2 text-[11px] font-medium text-slate-400 dark:bg-slate-800/40">
-                          <Lock className="h-3 w-3" />
+                        //   <Lock className="h-3 w-3" />
-                          <span className="text-center leading-tight">
+                        //   <span className="text-center leading-tight">
-                            PO ditutup
+                        //     PO ditutup
-                            <br />
+                        //     <br />
-                            (pesanan terkunci)
+                        //     (pesanan terkunci)
-                          </span>
+                        //   </span>
-                        </div>
+                        // </div>
+                        <div></div>
                       )}
                     </div>
                   </div>

src/app/actions.ts

@@ -490,6 +490,11 @@ export async function processBulkPayment(data: {
   user_id: string
 }) {
   try {
+    const me = await getSessionUser()
+    if (!me || me.id !== data.creator_id) {
+      return { success: false, error: 'Unauthorized' }
+    }
+
     let currentBalance = 0
     if (data.use_balance) {
       const balanceData = await getBalancesAsCreator(data.creator_id)
@@ -499,7 +504,7 @@ export async function processBulkPayment(data: {
 
     const submissions = await prisma.submission.findMany({
       where: { id: { in: data.submission_ids } },
-      include: { order: { select: { date: true } } },
+      include: { order: { select: { date: true, status: true } } },
     })
 
     // Sort by order date ascending (oldest first)
@@ -515,11 +520,31 @@ export async function processBulkPayment(data: {
       const sub = submissions[i]
       const isLast = i === submissions.length - 1
 
+      // Don't process if order isn't CLOSE
+      if (sub.order.status !== 'CLOSE') continue
+
       const subBill = sub.bill || 0
       const prevPaid = sub.paid_amount || 0
-      const amountToCover = Math.max(0, subBill - prevPaid)
+      const prevSaldoUsed = sub.saldo_used || 0
+      const amountToCover = Math.max(0, subBill - prevPaid - prevSaldoUsed)
 
-      if (totalAvailable >= amountToCover && amountToCover > 0) {
+      if (amountToCover === 0) {
+        // It's already fully paid somehow, just mark LUNAS. Give excess cash if last.
+        let finalPaid = prevPaid
+        if (isLast && remainingCash > 0) {
+          finalPaid += remainingCash
+          remainingCash = 0
+        }
+        ops.push(
+          prisma.submission.update({
+            where: { id: sub.id },
+            data: { payment_status: 'LUNAS', paid_amount: finalPaid },
+          })
+        )
+        continue
+      }
+
+      if (totalAvailable >= amountToCover) {
         // Fully covered -> LUNAS
         let balanceToUse = Math.min(remainingBalance, amountToCover)
         remainingBalance -= balanceToUse
@@ -533,44 +558,31 @@ export async function processBulkPayment(data: {
           finalPaid += remainingCash
           remainingCash = 0
         }
+        let finalSaldoUsed = prevSaldoUsed + balanceToUse
 
         ops.push(
           prisma.submission.update({
             where: { id: sub.id },
-            data: { payment_status: 'LUNAS', paid_amount: finalPaid },
+            data: { payment_status: 'LUNAS', paid_amount: finalPaid, saldo_used: finalSaldoUsed },
-          })
-        )
-      } else if (totalAvailable >= amountToCover && amountToCover === 0) {
-        // It's already fully paid somehow, just mark LUNAS. Give excess cash if last.
-        let finalPaid = prevPaid
-        if (isLast && remainingCash > 0) {
-          finalPaid += remainingCash
-          remainingCash = 0
-        }
-        ops.push(
-          prisma.submission.update({
-            where: { id: sub.id },
-            data: { payment_status: 'LUNAS', paid_amount: finalPaid },
           })
         )
       } else if (totalAvailable > 0) {
-        // Partially covered -> BELUM_BAYAR. Only use cash.
+        // Partially covered -> BELUM_BAYAR
-        let finalPaid = prevPaid + remainingCash
+        let balanceToUse = Math.min(remainingBalance, totalAvailable)
-        remainingCash = 0
+        remainingBalance -= balanceToUse
-        totalAvailable = remainingBalance // only balance left, which can't be used
+        
+        let cashToUse = totalAvailable - balanceToUse
+        remainingCash -= cashToUse
+        
+        let finalPaid = prevPaid + cashToUse
+        let finalSaldoUsed = prevSaldoUsed + balanceToUse
+        
+        totalAvailable = 0
 
         ops.push(
           prisma.submission.update({
             where: { id: sub.id },
-            data: { payment_status: 'BELUM_BAYAR', paid_amount: finalPaid },
+            data: { payment_status: 'BELUM_BAYAR', paid_amount: finalPaid, saldo_used: finalSaldoUsed },
-          })
-        )
-      } else {
-        // totalAvailable == 0. No more money. Just leave it as is, or update to BELUM_BAYAR.
-        ops.push(
-          prisma.submission.update({
-            where: { id: sub.id },
-            data: { payment_status: 'BELUM_BAYAR' },
           })
         )
       }
@@ -873,3 +885,53 @@ export async function broadcastToMattermost(orderId: string, orderUrl: string) {
     return { success: false, error: 'Gagal mengirim ke Mattermost' }
   }
 }
+
+export async function getPiutangSummary(creator_id: string) {
+  const unpaidSubmissions = await prisma.submission.findMany({
+    where: {
+      order: {
+        creator_id,
+        status: 'CLOSE',
+      },
+      payment_status: 'BELUM_BAYAR',
+    },
+    include: {
+      user: {
+        select: { id: true, name: true, photo: true },
+      },
+      order: {
+        select: { id: true, title: true, date: true },
+      },
+    },
+    orderBy: {
+      order: { date: 'asc' },
+    },
+  })
+
+  const grouped = new Map<string, any>()
+  
+  unpaidSubmissions.forEach((sub) => {
+    if (!grouped.has(sub.user_id)) {
+      grouped.set(sub.user_id, {
+        user: sub.user,
+        totalPiutang: 0,
+        submissions: [],
+      })
+    }
+    
+    const u = grouped.get(sub.user_id)
+    
+    const paidAmount = (sub.paid_amount || 0) + (sub.saldo_used || 0)
+    const unpaid = Math.max(0, (sub.bill || 0) - paidAmount)
+    
+    if (unpaid > 0) {
+      u.totalPiutang += unpaid
+      u.submissions.push({
+         ...sub,
+         unpaidAmount: unpaid
+      })
+    }
+  })
+  
+  return Array.from(grouped.values()).filter(g => g.totalPiutang > 0)
+}

src/components/PiutangManager.tsx

@@ -0,0 +1,366 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { format } from 'date-fns'
+import { getPiutangSummary, processBulkPayment, getBalancesAsCreator } from '@/app/actions'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { CheckCircle2, Package, Search, ChevronDown, ChevronUp, Users, Loader2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from '@/components/ui/dialog'
+import { cn } from '@/lib/utils'
+
+const formatRupiah = (value: number) =>
+  new Intl.NumberFormat('id-ID', {
+    style: 'currency',
+    currency: 'IDR',
+    maximumFractionDigits: 0,
+  }).format(value)
+
+export default function PiutangManager({ creatorId }: { creatorId: string }) {
+  const [data, setData] = useState<any[]>([])
+  const [balancesData, setBalancesData] = useState<any[]>([])
+  const [loading, setLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({})
+  const [modalOpen, setModalOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  const [target, setTarget] = useState<{
+    ids: string[]
+    label: string
+    amount: number
+    userId: string
+  }>({ ids: [], label: '', amount: 0, userId: '' })
+  const [cashInput, setCashInput] = useState<string>('')
+
+  const loadData = async () => {
+    setLoading(true)
+    const [piutang, balances] = await Promise.all([
+      getPiutangSummary(creatorId),
+      getBalancesAsCreator(creatorId),
+    ])
+    setData(piutang)
+    setBalancesData(balances)
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [creatorId])
+
+  const toggleRow = (userId: string) => {
+    setExpandedRows((prev) => ({ ...prev, [userId]: !prev[userId] }))
+  }
+
+  const openModal = (
+    e: React.MouseEvent,
+    ids: string[],
+    label: string,
+    amount: number,
+    userId: string
+  ) => {
+    e.stopPropagation()
+    setTarget({ ids, label, amount, userId })
+    setCashInput('')
+    setModalOpen(true)
+  }
+
+  const handleConfirm = async () => {
+    if (!target.ids.length) return
+    setSaving(true)
+    const cash = Number(cashInput.replace(/\D/g, '')) || 0
+    const res = await processBulkPayment({
+      submission_ids: target.ids,
+      cash_amount: cash,
+      use_balance: true,
+      creator_id: creatorId,
+      user_id: target.userId,
+    })
+    setSaving(false)
+    if (res.success) {
+      setModalOpen(false)
+      loadData()
+    } else {
+      alert(res.error || 'Terjadi kesalahan')
+    }
+  }
+
+  const filteredData = data.filter((u) =>
+    u.user.name.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const targetUserBalance = balancesData.find((b) => b.user.id === target.userId)?.amount || 0
+
+  if (loading) {
+    return (
+      <div className="flex min-h-[30vh] flex-col items-center justify-center gap-3">
+        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
+        <span className="text-xs font-semibold text-slate-500">Memuat data piutang...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-2 rounded-xl border border-slate-200/80 bg-white px-3 py-2 shadow-sm dark:border-slate-800 dark:bg-slate-900">
+        <Search className="h-4 w-4 text-slate-400" />
+        <input
+          type="text"
+          placeholder="Cari nama penitip..."
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          className="flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-white"
+        />
+      </div>
+
+      {filteredData.length === 0 ? (
+        <div className="rounded-3xl border-2 border-dashed border-slate-200 bg-white p-12 text-center shadow-sm dark:border-slate-800 dark:bg-slate-900">
+          <p className="text-sm font-medium text-slate-500">
+            {searchQuery
+              ? 'Tidak ada penitip yang cocok dengan pencarian.'
+              : 'Tidak ada penitip yang memiliki hutang pada PO yang sudah CLOSE.'}
+          </p>
+        </div>
+      ) : (
+        <Card className="overflow-hidden border-slate-200/80 shadow-sm dark:border-slate-800">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm">
+              <thead className="bg-slate-50 text-xs font-bold tracking-wider text-slate-500 uppercase dark:bg-slate-800/50">
+                <tr>
+                  <th className="px-6 py-4">Penitip</th>
+                  <th className="px-6 py-4 text-right">Total Piutang</th>
+                  <th className="px-6 py-4 text-center">Aksi</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100 dark:divide-slate-800/60">
+                {filteredData.map((userObj) => {
+                  const isExpanded = !!expandedRows[userObj.user.id]
+                  return (
+                    <React.Fragment key={userObj.user.id}>
+                      <tr
+                        onClick={() => toggleRow(userObj.user.id)}
+                        className="group cursor-pointer bg-white transition-colors hover:bg-slate-50/70 dark:bg-slate-900 dark:hover:bg-slate-800/50"
+                      >
+                        <td className="px-6 py-4">
+                          <div className="flex items-center gap-3">
+                            {userObj.user.photo ? (
+                              <img
+                                src={userObj.user.photo}
+                                alt={userObj.user.name}
+                                className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-800"
+                              />
+                            ) : (
+                              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 font-bold text-slate-600 shadow-sm ring-2 ring-white dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-900">
+                                {userObj.user.name.charAt(0).toUpperCase()}
+                              </div>
+                            )}
+                            <div className="flex flex-col">
+                              <span className="font-bold text-slate-900 dark:text-slate-100">
+                                {userObj.user.name}
+                              </span>
+                              <span className="text-[10px] font-semibold text-slate-400 uppercase">
+                                {userObj.submissions.length} Pesanan Belum Lunas
+                              </span>
+                            </div>
+                            <div className="ml-auto text-slate-400 transition-colors group-hover:text-[#1B2CC1]">
+                              {isExpanded ? (
+                                <ChevronUp className="h-4 w-4" />
+                              ) : (
+                                <ChevronDown className="h-4 w-4" />
+                              )}
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                          <span className="text-base font-black text-rose-600 dark:text-rose-400">
+                            {formatRupiah(userObj.totalPiutang)}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          <Button
+                            onClick={(e) =>
+                              openModal(
+                                e,
+                                userObj.submissions.map((s: any) => s.id),
+                                `Semua tagihan ${userObj.user.name}`,
+                                userObj.totalPiutang,
+                                userObj.user.id
+                              )
+                            }
+                            size="sm"
+                            className="h-8 gap-1 bg-[#1B2CC1] px-3 text-[11px] font-bold text-white shadow-sm shadow-[#1B2CC1]/30 hover:bg-[#121E85]"
+                          >
+                            <CheckCircle2 className="h-3.5 w-3.5" /> Pelunasan
+                          </Button>
+                        </td>
+                      </tr>
+
+                      {isExpanded && (
+                        <tr className="bg-slate-50 dark:bg-slate-900/60">
+                          <td colSpan={3} className="border-l-4 border-l-[#1B2CC1] px-6 py-5">
+                            <div className="space-y-3 pl-8">
+                              <h4 className="flex items-center gap-1.5 text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                                <Package className="h-3.5 w-3.5" /> Rincian Piutang per PO
+                              </h4>
+                              <div className="grid gap-2 sm:grid-cols-2">
+                                {userObj.submissions.map((sub: any) => (
+                                  <div
+                                    key={sub.id}
+                                    className="flex items-center justify-between rounded-xl border border-slate-200/60 bg-white p-3 shadow-sm dark:border-slate-700/50 dark:bg-slate-800"
+                                  >
+                                    <div className="flex flex-col">
+                                      <span className="line-clamp-1 text-xs font-bold text-slate-800 dark:text-slate-200">
+                                        {sub.order.title}
+                                      </span>
+                                      <span className="text-[10px] text-slate-400">
+                                        PO: {format(new Date(sub.order.date), 'dd MMM yyyy')}
+                                      </span>
+                                    </div>
+                                    <div className="text-right">
+                                      <span className="text-sm font-bold text-rose-600 dark:text-rose-400">
+                                        {formatRupiah(sub.unpaidAmount)}
+                                      </span>
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      )}
+
+      {/* Modal Konfirmasi Pelunasan */}
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="overflow-hidden rounded-3xl border-0 p-0 shadow-2xl sm:max-w-[400px]">
+          <div className="bg-gradient-to-br from-[#1B2CC1] to-[#0A1259] px-6 pt-8 pb-12 text-center text-white">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white/10 ring-4 ring-white/5 backdrop-blur-md">
+              <CheckCircle2 className="h-8 w-8 text-white" />
+            </div>
+            <DialogTitle className="mt-5 text-2xl font-black tracking-tight text-white">
+              Pelunasan Tagihan
+            </DialogTitle>
+            <DialogDescription className="mt-1.5 text-blue-100/80">
+              Terima uang dari <strong>{target.label.replace('Semua tagihan ', '')}</strong>
+            </DialogDescription>
+          </div>
+
+          <div className="relative z-10 -mt-10 space-y-6 rounded-t-3xl bg-white px-6 pt-6 pb-6 shadow-[-0_-10px_40px_rgba(0,0,0,0.1)] dark:bg-slate-950">
+            <div className="rounded-2xl border border-rose-100 bg-rose-50 p-5 text-center shadow-inner dark:border-rose-900/30 dark:bg-rose-950/40">
+              <span className="text-[10px] font-bold tracking-widest text-rose-400 uppercase">
+                Total Tagihan Saat Ini
+              </span>
+              <p className="mt-1 text-4xl font-black tracking-tight text-rose-600 dark:text-rose-500">
+                {formatRupiah(target.amount)}
+              </p>
+            </div>
+
+            <div className="space-y-3">
+              <label className="text-xs font-bold tracking-wider text-slate-500 uppercase dark:text-slate-400">
+                Uang Tunai Diterima
+              </label>
+              <div className="relative">
+                <span className="absolute top-3.5 left-4 text-sm font-bold text-slate-400">Rp</span>
+                <input
+                  type="text"
+                  value={cashInput}
+                  onChange={(e) => {
+                    const val = e.target.value.replace(/\D/g, '')
+                    setCashInput(val ? new Intl.NumberFormat('id-ID').format(Number(val)) : '')
+                  }}
+                  placeholder="0"
+                  className="h-14 w-full rounded-2xl border border-slate-200 bg-white pr-4 pl-11 text-xl font-black tracking-wide text-slate-900 shadow-sm transition-all focus:border-[#1B2CC1] focus:ring-4 focus:ring-[#1B2CC1]/10 focus:outline-none dark:border-slate-800 dark:bg-slate-900 dark:text-white"
+                />
+              </div>
+
+              {targetUserBalance > 0 && (
+                <div className="flex items-center justify-between rounded-xl border border-emerald-100 bg-emerald-50/50 px-4 py-3 dark:border-emerald-900/30 dark:bg-emerald-900/20">
+                  <span className="text-xs font-bold text-emerald-700 dark:text-emerald-400">
+                    + Pakai Saldo Penitip
+                  </span>
+                  <span className="text-sm font-black text-emerald-600 dark:text-emerald-500">
+                    {formatRupiah(targetUserBalance)}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {(() => {
+              const totalBayar = (Number(cashInput.replace(/\D/g, '')) || 0) + targetUserBalance
+              const kurang = target.amount - totalBayar
+
+              if (totalBayar === 0) return null
+
+              return (
+                <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
+                  <div className="border-b border-slate-100 bg-slate-50 px-4 py-2.5 dark:border-slate-700/50 dark:bg-slate-800/50">
+                    <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+                      Kalkulasi Akhir
+                    </p>
+                  </div>
+                  <div className="p-4">
+                    {kurang > 0 ? (
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-bold text-rose-500">Sisa Hutang Nanti:</span>
+                        <span className="text-lg font-black text-rose-600">
+                          {formatRupiah(kurang)}
+                        </span>
+                      </div>
+                    ) : kurang < 0 ? (
+                      <div className="flex items-center justify-between">
+                        <span className="text-sm font-bold text-emerald-600">
+                          Kelebihan (Jadi Saldo):
+                        </span>
+                        <span className="text-lg font-black text-emerald-500">
+                          {formatRupiah(Math.abs(kurang))}
+                        </span>
+                      </div>
+                    ) : (
+                      <div className="flex items-center justify-center gap-2 py-1 font-black text-emerald-600">
+                        <CheckCircle2 className="h-5 w-5" /> LUNAS SEMPURNA
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )
+            })()}
+          </div>
+
+          <div className="flex flex-row gap-3 px-6 pt-2 pb-6">
+            <Button
+              variant="outline"
+              onClick={() => setModalOpen(false)}
+              className="h-12 flex-1 rounded-2xl border-slate-200 font-bold hover:bg-slate-100 dark:border-slate-700"
+              disabled={saving}
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={
+                saving || (Number(cashInput.replace(/\D/g, '')) || 0) + targetUserBalance <= 0
+              }
+              className="h-12 flex-1 rounded-2xl bg-[#1B2CC1] font-bold text-white shadow-lg shadow-[#1B2CC1]/30 hover:bg-[#121E85] disabled:opacity-50"
+            >
+              {saving ? 'Memproses...' : 'Proses Pelunasan'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}