feat: add balance withdrawal management with history and deletion support

AGENTS.md

@@ -182,3 +182,13 @@ Buatkan file `README.md` yang mendokumentasikan panduan lengkap langkah demi lan
 - Pengaturan Environment: Cara setup konfigurasi environment variables `.env` berdasarkan struktur yang sudah dijelaskan di atas.
 - Eksekusi Migrasi Database: Perintah terminal yang wajib dijalankan secara berurutan untuk sinkronisasi database dan mengaktifkan Prisma Client (contoh: `npx prisma generate` lalu `npx prisma db push`).
 - Menjalankan Aplikasi: Cara menjalankan server lokal (development mode) dan URL default yang bisa diakses di browser.
+
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->

prisma/schema.prisma

@@ -8,17 +8,19 @@ datasource db {
 }
 
 model User {
-  id         String       @id @default(uuid())
+  id                  String               @id @default(uuid())
-  username   String       @unique
+  username            String               @unique
-  name       String
+  name                String
-  password   String
+  password            String
-  photo      String?
+  photo               String?
-  role       String       @default("user")
+  role                String               @default("user")
-  is_active  Boolean      @default(true)
+  is_active           Boolean              @default(true)
-  created_at DateTime     @default(now())
+  created_at          DateTime             @default(now())
-  updated_at DateTime     @updatedAt
+  updated_at          DateTime             @updatedAt
-  orders     Order[]      @relation("CreatedOrders")
+  orders              Order[]              @relation("CreatedOrders")
-  purchases  Submission[]
+  purchases           Submission[]
+  creator_withdrawals BalanceWithdrawal[]  @relation("CreatorWithdrawals")
+  user_withdrawals    BalanceWithdrawal[]  @relation("UserWithdrawals")
 }
 
 model Order {
@@ -78,3 +80,14 @@ model Setting {
   value      String
   updated_at DateTime @updatedAt
 }
+
+model BalanceWithdrawal {
+  id         String   @id @default(uuid())
+  creator_id String
+  user_id    String
+  amount     Int
+  note       String?
+  created_at DateTime @default(now())
+  creator    User     @relation("CreatorWithdrawals", fields: [creator_id], references: [id], onDelete: Cascade)
+  user       User     @relation("UserWithdrawals", fields: [user_id], references: [id], onDelete: Cascade)
+}

src/app/(app)/balances/page.tsx

@@ -1,10 +1,36 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { getBalancesAsCreator, getBalancesAsSubmittor, getSessionUser } from '@/app/actions'
+import {
+  getBalancesAsCreator,
+  getBalancesAsSubmittor,
+  getSessionUser,
+  createWithdrawal,
+  getWithdrawalHistory,
+  deleteWithdrawal,
+} from '@/app/actions'
 import { Card, CardContent } from '@/components/ui/card'
-import { Wallet, ArrowDownRight, ArrowUpRight, Loader2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import {
+  Wallet,
+  ArrowDownRight,
+  ArrowUpRight,
+  Loader2,
+  Banknote,
+  History,
+  Trash2,
+  ChevronDown,
+  ChevronUp,
+  AlertTriangle,
+  CheckCircle2,
+  FileText,
+} from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { format } from 'date-fns'
+import { id as idLocale } from 'date-fns/locale'
 
 export default function BalancesPage() {
   const [activeTab, setActiveTab] = useState<'SUBMITTOR' | 'CREATOR'>('SUBMITTOR')
@@ -13,6 +39,24 @@ export default function BalancesPage() {
   const [creatorBalances, setCreatorBalances] = useState<any[]>([])
   const [loading, setLoading] = useState(true)
 
+  // Modal state
+  const [withdrawTarget, setWithdrawTarget] = useState<any | null>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [withdrawAmount, setWithdrawAmount] = useState('')
+  const [withdrawNote, setWithdrawNote] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [modalError, setModalError] = useState('')
+
+  // History state per user
+  const [historyMap, setHistoryMap] = useState<Record<string, any[]>>({})
+  const [expandedHistory, setExpandedHistory] = useState<Record<string, boolean>>({})
+  const [loadingHistory, setLoadingHistory] = useState<Record<string, boolean>>({})
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+
+  // Delete confirm
+  const [deleteTarget, setDeleteTarget] = useState<{ id: string; amount: number } | null>(null)
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false)
+
   useEffect(() => {
     const init = async () => {
       const user = await getSessionUser()
@@ -42,6 +86,83 @@ export default function BalancesPage() {
       maximumFractionDigits: 0,
     }).format(n)
 
+  const openWithdrawModal = (e: React.MouseEvent, balance: any) => {
+    e.stopPropagation()
+    setWithdrawTarget(balance)
+    setWithdrawAmount(String(balance.amount))
+    setWithdrawNote('')
+    setModalError('')
+    setModalOpen(true)
+  }
+
+  const handleWithdraw = async () => {
+    if (!withdrawTarget || !userId) return
+    const amount = parseInt(withdrawAmount.replace(/\D/g, '')) || 0
+    if (amount <= 0) {
+      setModalError('Nominal harus lebih dari 0')
+      return
+    }
+    if (amount > withdrawTarget.amount) {
+      setModalError(`Tidak boleh melebihi saldo tersedia (${formatRupiah(withdrawTarget.amount)})`)
+      return
+    }
+    setSaving(true)
+    setModalError('')
+    const res = await createWithdrawal({
+      creator_id: userId,
+      user_id: withdrawTarget.user.id,
+      amount,
+      note: withdrawNote.trim() || undefined,
+    })
+    setSaving(false)
+    if (res.success) {
+      setModalOpen(false)
+      loadData(userId)
+      if (expandedHistory[withdrawTarget.user.id]) {
+        loadHistory(withdrawTarget.user.id)
+      }
+    } else {
+      setModalError(res.error || 'Gagal mencatat pengembalian')
+    }
+  }
+
+  const loadHistory = async (targetUserId: string) => {
+    if (!userId) return
+    setLoadingHistory((prev) => ({ ...prev, [targetUserId]: true }))
+    const history = await getWithdrawalHistory(userId, targetUserId)
+    setHistoryMap((prev) => ({ ...prev, [targetUserId]: history }))
+    setLoadingHistory((prev) => ({ ...prev, [targetUserId]: false }))
+  }
+
+  const toggleHistory = (targetUserId: string) => {
+    const willOpen = !expandedHistory[targetUserId]
+    setExpandedHistory((prev) => ({ ...prev, [targetUserId]: willOpen }))
+    if (willOpen && !historyMap[targetUserId]) {
+      loadHistory(targetUserId)
+    }
+  }
+
+  const confirmDelete = (id: string, amount: number) => {
+    setDeleteTarget({ id, amount })
+    setDeleteModalOpen(true)
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget || !userId) return
+    setDeletingId(deleteTarget.id)
+    const res = await deleteWithdrawal(deleteTarget.id)
+    setDeletingId(null)
+    setDeleteModalOpen(false)
+    if (res.success) {
+      loadData(userId)
+      Object.keys(expandedHistory).forEach((uid) => {
+        if (expandedHistory[uid]) loadHistory(uid)
+      })
+    } else {
+      alert(res.error || 'Gagal menghapus')
+    }
+  }
+
   return (
     <div className="animate-in fade-in space-y-6 pb-12 duration-500">
       <div>
@@ -86,149 +207,581 @@ export default function BalancesPage() {
           <span className="text-xs font-semibold text-slate-500">Memuat saldo...</span>
         </div>
       ) : activeTab === 'SUBMITTOR' ? (
-        <div className="space-y-4">
+        <div className="space-y-5">
-          <div className="mb-6 rounded-xl border border-blue-100 bg-blue-50 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
+          <div className="rounded-xl border border-blue-100 bg-blue-50 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
             <h3 className="mb-1 text-sm font-bold text-blue-900 dark:text-blue-100">
               Saldo Anda di Kreator Lain
             </h3>
             <p className="text-xs leading-relaxed text-blue-700 dark:text-blue-300">
               Jika saldo <strong>positif</strong> (hijau), Anda memiliki deposit yang bisa digunakan
-              untuk pesanan berikutnya di kreator tersebut. Jika <strong>negatif</strong> (merah),
+              untuk pesanan berikutnya. Jika <strong>negatif</strong> (merah), Anda berhutang.
-              Anda berhutang.
             </p>
           </div>
 
           {submittorBalances.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">
+            <div className="rounded-2xl border-2 border-dashed border-slate-200 bg-white py-16 text-center dark:border-slate-800 dark:bg-slate-900">
-              <p className="text-xs font-medium text-slate-500">Belum ada catatan saldo.</p>
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800">
+                <Wallet className="h-7 w-7 text-slate-300 dark:text-slate-600" />
+              </div>
+              <p className="text-sm font-semibold text-slate-500">Belum ada catatan saldo</p>
+              <p className="mt-1 text-xs text-slate-400">
+                Saldo muncul saat ada sisa atau kekurangan bayar dari PO.
+              </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+            <div className="space-y-3">
-              {submittorBalances.map((b, i) => (
+              {submittorBalances.map((b, i) => {
-                <Card
+                const isPositive = b.amount > 0
-                  key={i}
+
-                  className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
+                return (
-                >
+                  <div
-                  <div className="flex items-center gap-3 border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
+                    key={i}
-                    {b.creator.photo ? (
+                    className={cn(
-                      <img
+                      'overflow-hidden rounded-2xl border bg-white shadow-sm dark:bg-slate-900',
-                        src={b.creator.photo}
+                      isPositive
-                        alt={b.creator.name}
+                        ? 'border-emerald-100 dark:border-emerald-900/40'
-                        className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
+                        : 'border-rose-100 dark:border-rose-900/40'
-                      />
-                    ) : (
-                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#1B2CC1]/10 text-sm font-bold text-[#1B2CC1] shadow-sm ring-2 ring-white dark:ring-slate-900">
-                        {b.creator.name.charAt(0).toUpperCase()}
-                      </div>
                     )}
-                    <div>
+                  >
-                      <p className="text-sm font-bold text-slate-900 dark:text-white">
+                    <div className="flex items-stretch">
-                        {b.creator.name}
+                      {/* Left accent strip */}
-                      </p>
-                      <p className="text-[10px] font-semibold tracking-wider text-slate-500 uppercase">
-                        Kreator
-                      </p>
-                    </div>
-                  </div>
-                  <CardContent className="bg-white p-4 dark:bg-slate-900">
-                    <div className="flex flex-col gap-1">
-                      <span className="text-[11px] font-bold tracking-wider text-slate-400 uppercase">
-                        Total Saldo
-                      </span>
                       <div
                         className={cn(
-                          'flex items-center gap-1.5 text-xl font-black',
+                          'w-1 shrink-0',
-                          b.amount > 0 ? 'text-emerald-600' : 'text-rose-600'
+                          isPositive ? 'bg-emerald-400' : 'bg-rose-400'
                         )}
-                      >
+                      />
-                        {b.amount > 0 ? (
+
-                          <ArrowUpRight className="h-5 w-5" />
+                      <div className="flex flex-1 flex-col gap-0">
-                        ) : (
+                        {/* Main info row */}
-                          <ArrowDownRight className="h-5 w-5" />
+                        <div className="flex items-center justify-between gap-4 px-4 py-4">
-                        )}
+                          {/* Avatar + name */}
-                        {formatRupiah(b.amount)}
+                          <div className="flex min-w-0 items-center gap-3">
+                            <div className="relative shrink-0">
+                              {b.creator.photo ? (
+                                <img
+                                  src={b.creator.photo}
+                                  alt={b.creator.name}
+                                  className="h-10 w-10 rounded-full object-cover"
+                                />
+                              ) : (
+                                <div
+                                  className={cn(
+                                    'flex h-10 w-10 items-center justify-center rounded-full text-sm font-black',
+                                    isPositive
+                                      ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400'
+                                      : 'bg-rose-100 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400'
+                                  )}
+                                >
+                                  {b.creator.name.charAt(0).toUpperCase()}
+                                </div>
+                              )}
+                              {/* Status dot */}
+                              <span
+                                className={cn(
+                                  'absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2 border-white dark:border-slate-900',
+                                  isPositive ? 'bg-emerald-400' : 'bg-rose-400'
+                                )}
+                              />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="truncate text-sm font-bold text-slate-900 dark:text-white">
+                                {b.creator.name}
+                              </p>
+                              <p className="text-[10px] font-medium text-slate-400">Kreator</p>
+                            </div>
+                          </div>
+
+                          {/* Amount */}
+                          <div className="shrink-0 text-right">
+                            <p className="text-[10px] font-semibold tracking-wider text-slate-400 uppercase">
+                              Total Saldo
+                            </p>
+                            <p
+                              className={cn(
+                                'text-xl font-black tabular-nums',
+                                isPositive
+                                  ? 'text-emerald-600 dark:text-emerald-400'
+                                  : 'text-rose-600 dark:text-rose-400'
+                              )}
+                            >
+                              {formatRupiah(Math.abs(b.amount))}
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Footer */}
+                        <div
+                          className={cn(
+                            'flex items-center justify-between gap-2 border-t px-4 py-2.5',
+                            isPositive
+                              ? 'border-emerald-50 bg-emerald-50/60 dark:border-emerald-900/30 dark:bg-emerald-950/20'
+                              : 'border-rose-50 bg-rose-50/60 dark:border-rose-900/30 dark:bg-rose-950/20'
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold',
+                              isPositive
+                                ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'
+                                : 'bg-rose-100 text-rose-700 dark:bg-rose-950/60 dark:text-rose-400'
+                            )}
+                          >
+                            {isPositive ? (
+                              <ArrowUpRight className="h-3 w-3" />
+                            ) : (
+                              <ArrowDownRight className="h-3 w-3" />
+                            )}
+                            {isPositive ? 'Deposit Tersedia' : 'Anda Berhutang'}
+                          </span>
+
+                          {isPositive && (
+                            <p className="text-[10px] font-medium text-emerald-600 dark:text-emerald-400">
+                              ✓ Bisa dipakai untuk PO
+                            </p>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </CardContent>
+                  </div>
-                </Card>
+                )
-              ))}
+              })}
             </div>
           )}
         </div>
       ) : (
-        <div className="space-y-4">
+        /* TAB CREATOR */
-          <div className="mb-6 rounded-xl border border-amber-100 bg-amber-50 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
+        <div className="space-y-5">
+          <div className="rounded-xl border border-amber-100 bg-amber-50 p-4 dark:border-amber-900/50 dark:bg-amber-950/30">
             <h3 className="mb-1 text-sm font-bold text-amber-900 dark:text-amber-100">
               Saldo Orang Lain di Anda
             </h3>
             <p className="text-xs leading-relaxed text-amber-700 dark:text-amber-300">
-              Jika saldo <strong>positif</strong> (merah bagi Anda), artinya Anda memegang uang
+              Saldo <strong>positif</strong> = Anda memegang uang lebih milik penitip. Klik{' '}
-              lebih milik penitip (Hutang Anda ke mereka). Jika <strong>negatif</strong> (hijau),
+              <strong>Kembalikan</strong> untuk mencatatnya. Saldo <strong>negatif</strong> =
-              mereka berhutang ke Anda.
+              penitip masih berhutang ke Anda.
             </p>
           </div>
 
           {creatorBalances.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">
+            <div className="rounded-2xl border-2 border-dashed border-slate-200 bg-white py-16 text-center dark:border-slate-800 dark:bg-slate-900">
-              <p className="text-xs font-medium text-slate-500">
+              <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800">
-                Belum ada penitip yang memiliki catatan saldo dengan Anda.
+                <Wallet className="h-7 w-7 text-slate-300 dark:text-slate-600" />
+              </div>
+              <p className="text-sm font-semibold text-slate-500">Tidak ada catatan saldo</p>
+              <p className="mt-1 text-xs text-slate-400">
+                Saldo muncul saat ada kelebihan atau kekurangan bayar.
               </p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+            <div className="space-y-3">
-              {creatorBalances.map((b, i) => (
+              {creatorBalances.map((b, i) => {
-                <Card
+                const uid = b.user.id
-                  key={i}
+                const isExpanded = expandedHistory[uid]
-                  className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
+                const history = historyMap[uid] || []
-                >
+                const isLoadingHist = loadingHistory[uid]
-                  <div className="flex items-center gap-3 border-b border-slate-100 bg-slate-50/50 p-4 dark:border-slate-800 dark:bg-slate-800/40">
+                const isPositive = b.amount > 0
-                    {b.user.photo ? (
+
-                      <img
+                return (
-                        src={b.user.photo}
+                  <div
-                        alt={b.user.name}
+                    key={i}
-                        className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
+                    className={cn(
-                      />
+                      'overflow-hidden rounded-2xl border bg-white shadow-sm dark:bg-slate-900',
-                    ) : (
+                      isPositive
-                      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-200 text-sm font-bold text-slate-600 shadow-sm ring-2 ring-white dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-900">
+                        ? 'border-rose-100 dark:border-rose-900/40'
-                        {b.user.name.charAt(0).toUpperCase()}
+                        : 'border-emerald-100 dark:border-emerald-900/40'
-                      </div>
                     )}
-                    <div>
+                  >
-                      <p className="text-sm font-bold text-slate-900 dark:text-white">
+                    <div className="flex items-stretch">
-                        {b.user.name}
+                      {/* Left accent strip */}
-                      </p>
-                      <p className="text-[10px] font-semibold tracking-wider text-slate-500 uppercase">
-                        Penitip
-                      </p>
-                    </div>
-                  </div>
-                  <CardContent className="bg-white p-4 dark:bg-slate-900">
-                    <div className="flex flex-col gap-1">
-                      <span className="text-[11px] font-bold tracking-wider text-slate-400 uppercase">
-                        Saldo Penitip
-                      </span>
-                      {/* From Creator perspective: positive balance of submittor is bad for creator (creator holds their money) */}
                       <div
                         className={cn(
-                          'flex items-center gap-1.5 text-xl font-black',
+                          'w-1 shrink-0',
-                          b.amount > 0 ? 'text-rose-600' : 'text-emerald-600'
+                          isPositive ? 'bg-rose-400' : 'bg-emerald-400'
                         )}
-                      >
+                      />
-                        {b.amount > 0 ? (
+
-                          <ArrowDownRight className="h-5 w-5" />
+                      <div className="flex flex-1 flex-col">
-                        ) : (
+                        {/* Main info row */}
-                          <ArrowUpRight className="h-5 w-5" />
+                        <div className="flex items-center justify-between gap-4 px-4 py-4">
+                          {/* Avatar + name */}
+                          <div className="flex min-w-0 items-center gap-3">
+                            <div className="relative shrink-0">
+                              {b.user.photo ? (
+                                <img
+                                  src={b.user.photo}
+                                  alt={b.user.name}
+                                  className="h-10 w-10 rounded-full object-cover"
+                                />
+                              ) : (
+                                <div
+                                  className={cn(
+                                    'flex h-10 w-10 items-center justify-center rounded-full text-sm font-black',
+                                    isPositive
+                                      ? 'bg-rose-100 text-rose-600 dark:bg-rose-950/60 dark:text-rose-400'
+                                      : 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950/60 dark:text-emerald-400'
+                                  )}
+                                >
+                                  {b.user.name.charAt(0).toUpperCase()}
+                                </div>
+                              )}
+                              <span
+                                className={cn(
+                                  'absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2 border-white dark:border-slate-900',
+                                  isPositive ? 'bg-rose-400' : 'bg-emerald-400'
+                                )}
+                              />
+                            </div>
+                            <div className="min-w-0">
+                              <p className="truncate text-sm font-bold text-slate-900 dark:text-white">
+                                {b.user.name}
+                              </p>
+                              <p className="text-[10px] font-medium text-slate-400">Penitip</p>
+                            </div>
+                          </div>
+
+                          {/* Amount */}
+                          <div className="shrink-0 text-right">
+                            <p className="text-[10px] font-semibold tracking-wider text-slate-400 uppercase">
+                              {isPositive ? 'Anda Hutang' : 'Piutang Anda'}
+                            </p>
+                            <p
+                              className={cn(
+                                'text-xl font-black tabular-nums',
+                                isPositive
+                                  ? 'text-rose-600 dark:text-rose-400'
+                                  : 'text-emerald-600 dark:text-emerald-400'
+                              )}
+                            >
+                              {formatRupiah(Math.abs(b.amount))}
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Footer row */}
+                        <div
+                          className={cn(
+                            'flex items-center justify-between gap-2 border-t px-4 py-2.5',
+                            isPositive
+                              ? 'border-rose-50 bg-rose-50/60 dark:border-rose-900/30 dark:bg-rose-950/20'
+                              : 'border-emerald-50 bg-emerald-50/60 dark:border-emerald-900/30 dark:bg-emerald-950/20'
+                          )}
+                        >
+                          <span
+                            className={cn(
+                              'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-bold',
+                              isPositive
+                                ? 'bg-rose-100 text-rose-700 dark:bg-rose-950/60 dark:text-rose-400'
+                                : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/60 dark:text-emerald-400'
+                            )}
+                          >
+                            {isPositive ? (
+                              <ArrowDownRight className="h-3 w-3" />
+                            ) : (
+                              <ArrowUpRight className="h-3 w-3" />
+                            )}
+                            {isPositive ? 'Perlu dikembalikan' : 'Menunggu pelunasan'}
+                          </span>
+
+                          <div className="flex items-center gap-1.5">
+                            {isPositive && (
+                              <Button
+                                size="sm"
+                                onClick={(e) => openWithdrawModal(e, b)}
+                                className="h-7 gap-1 rounded-lg bg-[#1B2CC1] px-2.5 text-[11px] font-bold text-white hover:bg-[#15229E]"
+                              >
+                                <Banknote className="h-3 w-3" />
+                                Kembalikan
+                              </Button>
+                            )}
+                            <button
+                              onClick={() => toggleHistory(uid)}
+                              className={cn(
+                                'flex h-7 items-center gap-1 rounded-lg border px-2.5 text-[11px] font-bold transition-all',
+                                isExpanded
+                                  ? 'border-slate-300 bg-slate-200 text-slate-700 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200'
+                                  : 'border-slate-200 bg-white text-slate-500 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700'
+                              )}
+                            >
+                              <History className="h-3 w-3" />
+                              Riwayat
+                              {isExpanded ? (
+                                <ChevronUp className="h-3 w-3" />
+                              ) : (
+                                <ChevronDown className="h-3 w-3" />
+                              )}
+                            </button>
+                          </div>
+                        </div>
+
+                        {/* Collapsible History */}
+                        {isExpanded && (
+                          <div className="border-t border-slate-100 px-4 py-3 dark:border-slate-800">
+                            <p className="mb-2.5 text-[10px] font-bold tracking-widest text-slate-400 uppercase">
+                              Riwayat Pengembalian
+                            </p>
+                            {isLoadingHist ? (
+                              <div className="flex items-center gap-2 py-2">
+                                <Loader2 className="h-3.5 w-3.5 animate-spin text-slate-400" />
+                                <span className="text-xs text-slate-400">Memuat riwayat...</span>
+                              </div>
+                            ) : history.length === 0 ? (
+                              <div className="flex items-center gap-2.5 rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-3 dark:border-slate-700 dark:bg-slate-800/50">
+                                <FileText className="h-4 w-4 shrink-0 text-slate-300 dark:text-slate-600" />
+                                <span className="text-xs text-slate-400">
+                                  Belum ada riwayat pengembalian.
+                                </span>
+                              </div>
+                            ) : (
+                              <div className="space-y-1.5">
+                                {history.map((h: any) => (
+                                  <div
+                                    key={h.id}
+                                    className="flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50/80 px-3 py-2.5 dark:border-slate-700/60 dark:bg-slate-800/40"
+                                  >
+                                    <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-100 dark:bg-emerald-950/50">
+                                      <CheckCircle2 className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <p className="text-sm font-bold text-emerald-600 dark:text-emerald-400">
+                                        {formatRupiah(h.amount)}
+                                      </p>
+                                      <div className="mt-0.5 flex items-center gap-1.5">
+                                        <p className="text-[10px] text-slate-400">
+                                          {format(new Date(h.created_at), 'dd MMM yyyy, HH:mm', {
+                                            locale: idLocale,
+                                          })}
+                                        </p>
+                                        {h.note && (
+                                          <>
+                                            <span className="text-[10px] text-slate-300">·</span>
+                                            <p className="truncate text-[10px] text-slate-500 italic">
+                                              "{h.note}"
+                                            </p>
+                                          </>
+                                        )}
+                                      </div>
+                                    </div>
+                                    <button
+                                      onClick={() => confirmDelete(h.id, h.amount)}
+                                      disabled={deletingId === h.id}
+                                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg text-slate-300 transition-colors hover:bg-rose-50 hover:text-rose-500 disabled:opacity-40 dark:text-slate-600 dark:hover:bg-rose-950/40 dark:hover:text-rose-400"
+                                      title="Hapus riwayat ini"
+                                    >
+                                      {deletingId === h.id ? (
+                                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                      ) : (
+                                        <Trash2 className="h-3.5 w-3.5" />
+                                      )}
+                                    </button>
+                                  </div>
+                                ))}
+                              </div>
+                            )}
+                          </div>
                         )}
-                        {formatRupiah(b.amount)}
                       </div>
                     </div>
-                  </CardContent>
+                  </div>
-                </Card>
+                )
-              ))}
+              })}
             </div>
           )}
         </div>
       )}
+
+      {/* MODAL PENGEMBALIAN */}
+      <Dialog open={modalOpen} onOpenChange={(o) => !o && setModalOpen(false)}>
+        <DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[440px] dark:border-slate-800">
+          <div className="flex items-center gap-3 border-b border-[#1B2CC1]/10 bg-[#1B2CC1]/5 p-5">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[#1B2CC1] text-white shadow-md shadow-[#1B2CC1]/20">
+              <Banknote className="h-5 w-5" />
+            </div>
+            <div>
+              <DialogTitle className="text-base font-black text-slate-900 dark:text-white">
+                Kembalikan Saldo
+              </DialogTitle>
+              <p className="text-xs text-slate-500">
+                Catat pengembalian uang ke {withdrawTarget?.user?.name}
+              </p>
+            </div>
+          </div>
+          <div className="space-y-4 bg-white p-5 dark:bg-slate-900">
+            {withdrawTarget && (
+              <div className="flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-800/50">
+                {withdrawTarget.user.photo ? (
+                  <img
+                    src={withdrawTarget.user.photo}
+                    alt={withdrawTarget.user.name}
+                    className="h-9 w-9 rounded-full object-cover ring-2 ring-white dark:ring-slate-900"
+                  />
+                ) : (
+                  <div className="flex h-9 w-9 items-center justify-center rounded-full bg-slate-200 text-sm font-bold text-slate-600 dark:bg-slate-700 dark:text-slate-300">
+                    {withdrawTarget.user.name.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div>
+                  <p className="text-sm font-bold text-slate-900 dark:text-white">
+                    {withdrawTarget.user.name}
+                  </p>
+                  <p className="text-xs text-slate-500">
+                    Saldo tersedia:{' '}
+                    <span className="font-bold text-rose-600">
+                      {formatRupiah(withdrawTarget?.amount || 0)}
+                    </span>
+                  </p>
+                </div>
+              </div>
+            )}
+
+            <div className="space-y-1.5">
+              <Label className="text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                Nominal Pengembalian
+              </Label>
+              <div className="relative">
+                <span className="absolute top-1/2 left-3 -translate-y-1/2 text-xs font-bold text-slate-400">
+                  Rp
+                </span>
+                <Input
+                  type="number"
+                  placeholder="0"
+                  value={withdrawAmount}
+                  onChange={(e) => {
+                    setWithdrawAmount(e.target.value)
+                    setModalError('')
+                  }}
+                  className="h-11 pl-8 text-sm font-bold"
+                  min={1}
+                  max={withdrawTarget?.amount}
+                />
+              </div>
+              {withdrawTarget && (
+                <div className="flex gap-2 pt-1">
+                  <button
+                    onClick={() => setWithdrawAmount(String(withdrawTarget.amount))}
+                    className="rounded-lg border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 px-2.5 py-1 text-[10px] font-bold text-[#1B2CC1] hover:bg-[#1B2CC1]/10 dark:border-[#1B2CC1]/30"
+                  >
+                    Semua ({formatRupiah(withdrawTarget.amount)})
+                  </button>
+                  {withdrawTarget.amount >= 2 && (
+                    <button
+                      onClick={() =>
+                        setWithdrawAmount(String(Math.floor(withdrawTarget.amount / 2)))
+                      }
+                      className="rounded-lg border border-slate-200 bg-slate-50 px-2.5 py-1 text-[10px] font-bold text-slate-600 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400"
+                    >
+                      Setengah ({formatRupiah(Math.floor(withdrawTarget.amount / 2))})
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-1.5">
+              <Label className="text-[11px] font-bold tracking-wider text-slate-500 uppercase">
+                Catatan <span className="font-normal text-slate-400 normal-case">(opsional)</span>
+              </Label>
+              <Input
+                placeholder="Contoh: Transfer BCA, Cash langsung, dll"
+                value={withdrawNote}
+                onChange={(e) => setWithdrawNote(e.target.value)}
+                className="h-10 text-sm"
+                maxLength={100}
+              />
+            </div>
+
+            {modalError && (
+              <div className="flex items-start gap-2 rounded-xl border border-rose-200 bg-rose-50 p-3 dark:border-rose-800 dark:bg-rose-950/30">
+                <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-rose-500" />
+                <p className="text-xs font-semibold text-rose-600 dark:text-rose-400">
+                  {modalError}
+                </p>
+              </div>
+            )}
+
+            <div className="flex gap-2 pt-1">
+              <Button
+                variant="outline"
+                onClick={() => setModalOpen(false)}
+                disabled={saving}
+                className="h-10 flex-1 rounded-xl font-bold"
+              >
+                Batal
+              </Button>
+              <Button
+                onClick={handleWithdraw}
+                disabled={saving || !withdrawAmount}
+                className="h-10 flex-1 gap-2 rounded-xl bg-[#1B2CC1] font-bold text-white shadow-md shadow-[#1B2CC1]/20 hover:bg-[#15229E] disabled:opacity-60"
+              >
+                {saving ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Menyimpan...
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle2 className="h-4 w-4" />
+                    Simpan Pengembalian
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* MODAL DELETE CONFIRM */}
+      <Dialog open={deleteModalOpen} onOpenChange={(o) => !o && setDeleteModalOpen(false)}>
+        <DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-2xl sm:max-w-[400px] dark:border-slate-800">
+          <div className="flex items-center gap-3 border-b border-rose-100 bg-rose-50 p-5 dark:border-rose-900/50 dark:bg-rose-950/30">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-600 text-white shadow-md shadow-rose-600/20">
+              <AlertTriangle className="h-5 w-5" />
+            </div>
+            <div>
+              <DialogTitle className="text-base font-black text-slate-900 dark:text-white">
+                Hapus Riwayat?
+              </DialogTitle>
+              <p className="text-xs text-slate-500">Saldo akan kembali bertambah</p>
+            </div>
+          </div>
+          <div className="space-y-4 bg-white p-5 dark:bg-slate-900">
+            <div className="rounded-xl border border-slate-100 bg-slate-50 p-3 text-center dark:border-slate-800 dark:bg-slate-800/50">
+              <p className="text-xs text-slate-500">Pengembalian sebesar</p>
+              <p className="text-lg font-black text-slate-900 dark:text-white">
+                {formatRupiah(deleteTarget?.amount || 0)}
+              </p>
+              <p className="mt-1 text-xs text-slate-500">akan dihapus dari riwayat.</p>
+            </div>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setDeleteModalOpen(false)}
+                disabled={!!deletingId}
+                className="h-10 flex-1 rounded-xl font-bold"
+              >
+                Batal
+              </Button>
+              <Button
+                onClick={handleDelete}
+                disabled={!!deletingId}
+                className="h-10 flex-1 gap-2 rounded-xl bg-rose-600 font-bold text-white hover:bg-rose-700"
+              >
+                {deletingId ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Menghapus...
+                  </>
+                ) : (
+                  <>
+                    <Trash2 className="h-4 w-4" />
+                    Ya, Hapus
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   )
 }

src/app/actions.ts

@@ -661,14 +661,16 @@ export async function getCreatorReport(creator_id: string, startDate?: Date, end
 
 // === BALANCE ACTIONS ===
 export async function getBalancesAsCreator(creator_id: string) {
-  const submissions = await prisma.submission.findMany({
+  const [submissions, withdrawals] = await Promise.all([
-    where: {
+    prisma.submission.findMany({
-      order: { creator_id },
+      where: { order: { creator_id } },
-    },
+      include: { user: { select: { id: true, name: true, photo: true } } },
-    include: {
+    }),
-      user: { select: { id: true, name: true, photo: true } },
+    prisma.balanceWithdrawal.findMany({
-    },
+      where: { creator_id },
-  })
+      include: { user: { select: { id: true, name: true, photo: true } } },
+    }),
+  ])
 
   const balanceMap = new Map<string, { user: any; amount: number }>()
 
@@ -691,22 +693,35 @@ export async function getBalancesAsCreator(creator_id: string) {
     }
   })
 
+  // Kurangi saldo dengan total withdrawal yang sudah dilakukan
+  withdrawals.forEach((w) => {
+    if (!balanceMap.has(w.user_id)) {
+      balanceMap.set(w.user_id, { user: w.user, amount: -w.amount })
+    } else {
+      balanceMap.get(w.user_id)!.amount -= w.amount
+    }
+  })
+
   return Array.from(balanceMap.values()).filter((b) => b.amount !== 0)
 }
 
 export async function getBalancesAsSubmittor(user_id: string) {
-  const submissions = await prisma.submission.findMany({
+  const [submissions, withdrawals] = await Promise.all([
-    where: {
+    prisma.submission.findMany({
-      user_id,
+      where: { user_id },
-    },
+      include: {
-    include: {
+        order: {
-      order: {
+          include: {
-        include: {
+            creator: { select: { id: true, name: true, photo: true } },
-          creator: { select: { id: true, name: true, photo: true } },
+          },
         },
       },
-    },
+    }),
-  })
+    prisma.balanceWithdrawal.findMany({
+      where: { user_id },
+      include: { creator: { select: { id: true, name: true, photo: true } } },
+    }),
+  ])
 
   const balanceMap = new Map<string, { creator: any; amount: number }>()
 
@@ -730,9 +745,99 @@ export async function getBalancesAsSubmittor(user_id: string) {
     }
   })
 
+  // Kurangi saldo dengan total withdrawal yang dilakukan kreator
+  withdrawals.forEach((w) => {
+    if (!balanceMap.has(w.creator_id)) {
+      balanceMap.set(w.creator_id, { creator: w.creator, amount: -w.amount })
+    } else {
+      balanceMap.get(w.creator_id)!.amount -= w.amount
+    }
+  })
+
   return Array.from(balanceMap.values()).filter((b) => b.amount !== 0)
 }
 
+// === WITHDRAWAL ACTIONS ===
+export async function createWithdrawal(data: {
+  creator_id: string
+  user_id: string
+  amount: number
+  note?: string
+}) {
+  try {
+    const me = await getSessionUser()
+    if (!me || me.id !== data.creator_id) {
+      return { success: false, error: 'Unauthorized' }
+    }
+    if (!data.amount || data.amount <= 0) {
+      return { success: false, error: 'Nominal harus lebih dari 0' }
+    }
+
+    // Hitung saldo tersedia saat ini untuk user ini
+    const balances = await getBalancesAsCreator(data.creator_id)
+    const userBalance = balances.find((b) => b.user.id === data.user_id)
+    const available = userBalance ? userBalance.amount : 0
+
+    if (data.amount > available) {
+      return {
+        success: false,
+        error: `Nominal melebihi saldo tersedia (${new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(available)})`,
+      }
+    }
+
+    await prisma.balanceWithdrawal.create({
+      data: {
+        creator_id: data.creator_id,
+        user_id: data.user_id,
+        amount: data.amount,
+        note: data.note || null,
+      },
+    })
+
+    revalidatePath('/balances')
+    revalidatePath('/my-orders')
+    revalidatePath('/reports')
+    return { success: true }
+  } catch (e) {
+    console.error(e)
+    return { success: false, error: 'Gagal mencatat penarikan saldo.' }
+  }
+}
+
+export async function getWithdrawalHistory(creator_id: string, user_id?: string) {
+  return await prisma.balanceWithdrawal.findMany({
+    where: {
+      creator_id,
+      ...(user_id ? { user_id } : {}),
+    },
+    include: {
+      user: { select: { id: true, name: true, photo: true } },
+    },
+    orderBy: { created_at: 'desc' },
+  })
+}
+
+export async function deleteWithdrawal(id: string) {
+  try {
+    const me = await getSessionUser()
+    const record = await prisma.balanceWithdrawal.findUnique({ where: { id } })
+    if (!record) return { success: false, error: 'Data tidak ditemukan' }
+    if (!me || me.id !== record.creator_id) {
+      return { success: false, error: 'Unauthorized' }
+    }
+
+    await prisma.balanceWithdrawal.delete({ where: { id } })
+
+    revalidatePath('/balances')
+    revalidatePath('/my-orders')
+    revalidatePath('/reports')
+    return { success: true }
+  } catch (e) {
+    console.error(e)
+    return { success: false, error: 'Gagal menghapus riwayat penarikan.' }
+  }
+}
+
 export async function deleteSubmission(submission_id: string, user_id: string) {
   try {
     const submission = await prisma.submission.findUnique({