feat: add balance withdrawal management with history and deletion support

This commit is contained in:
Firman Ramdhani
2026-09-16 15:02:11 +07:00
parent 1337af0102
commit 7c3c5e2249
4 changed files with 812 additions and 131 deletions
+10
View File
@@ -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 -->
+24 -11
View File
@@ -8,17 +8,19 @@ datasource db {
}
model User {
id String @id @default(uuid())
username String @unique
name String
password String
photo String?
role String @default("user")
is_active Boolean @default(true)
created_at DateTime @default(now())
updated_at DateTime @updatedAt
orders Order[] @relation("CreatedOrders")
purchases Submission[]
id String @id @default(uuid())
username String @unique
name String
password String
photo String?
role String @default("user")
is_active Boolean @default(true)
created_at DateTime @default(now())
updated_at DateTime @updatedAt
orders Order[] @relation("CreatedOrders")
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)
}
+655 -102
View File
@@ -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="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="space-y-5">
<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),
Anda berhutang.
untuk pesanan berikutnya. Jika <strong>negatif</strong> (merah), 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">
<p className="text-xs font-medium text-slate-500">Belum ada catatan saldo.</p>
<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">
<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">
{submittorBalances.map((b, i) => (
<Card
key={i}
className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
>
<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">
{b.creator.photo ? (
<img
src={b.creator.photo}
alt={b.creator.name}
className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
/>
) : (
<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 className="space-y-3">
{submittorBalances.map((b, i) => {
const isPositive = b.amount > 0
return (
<div
key={i}
className={cn(
'overflow-hidden rounded-2xl border bg-white shadow-sm dark:bg-slate-900',
isPositive
? 'border-emerald-100 dark:border-emerald-900/40'
: 'border-rose-100 dark:border-rose-900/40'
)}
<div>
<p className="text-sm font-bold text-slate-900 dark:text-white">
{b.creator.name}
</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="flex items-stretch">
{/* Left accent strip */}
<div
className={cn(
'flex items-center gap-1.5 text-xl font-black',
b.amount > 0 ? 'text-emerald-600' : 'text-rose-600'
'w-1 shrink-0',
isPositive ? 'bg-emerald-400' : 'bg-rose-400'
)}
>
{b.amount > 0 ? (
<ArrowUpRight className="h-5 w-5" />
) : (
<ArrowDownRight className="h-5 w-5" />
)}
{formatRupiah(b.amount)}
/>
<div className="flex flex-1 flex-col gap-0">
{/* Main info row */}
<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.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>
</Card>
))}
</div>
)
})}
</div>
)}
</div>
) : (
<div className="space-y-4">
<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">
/* TAB CREATOR */
<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
lebih milik penitip (Hutang Anda ke mereka). Jika <strong>negatif</strong> (hijau),
mereka berhutang ke Anda.
Saldo <strong>positif</strong> = Anda memegang uang lebih milik penitip. Klik{' '}
<strong>Kembalikan</strong> untuk mencatatnya. Saldo <strong>negatif</strong> =
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">
<p className="text-xs font-medium text-slate-500">
Belum ada penitip yang memiliki catatan saldo dengan Anda.
<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">
<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">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">
{creatorBalances.map((b, i) => (
<Card
key={i}
className="overflow-hidden rounded-2xl border-slate-200/90 shadow-sm transition-all hover:border-[#1B2CC1]/30 dark:border-slate-800"
>
<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">
{b.user.photo ? (
<img
src={b.user.photo}
alt={b.user.name}
className="h-10 w-10 rounded-full object-cover shadow-sm ring-2 ring-white dark:ring-slate-900"
/>
) : (
<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">
{b.user.name.charAt(0).toUpperCase()}
</div>
<div className="space-y-3">
{creatorBalances.map((b, i) => {
const uid = b.user.id
const isExpanded = expandedHistory[uid]
const history = historyMap[uid] || []
const isLoadingHist = loadingHistory[uid]
const isPositive = b.amount > 0
return (
<div
key={i}
className={cn(
'overflow-hidden rounded-2xl border bg-white shadow-sm dark:bg-slate-900',
isPositive
? 'border-rose-100 dark:border-rose-900/40'
: 'border-emerald-100 dark:border-emerald-900/40'
)}
<div>
<p className="text-sm font-bold text-slate-900 dark:text-white">
{b.user.name}
</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="flex items-stretch">
{/* Left accent strip */}
<div
className={cn(
'flex items-center gap-1.5 text-xl font-black',
b.amount > 0 ? 'text-rose-600' : 'text-emerald-600'
'w-1 shrink-0',
isPositive ? 'bg-rose-400' : 'bg-emerald-400'
)}
>
{b.amount > 0 ? (
<ArrowDownRight className="h-5 w-5" />
) : (
<ArrowUpRight className="h-5 w-5" />
/>
<div className="flex flex-1 flex-col">
{/* Main info row */}
<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>
</Card>
))}
</div>
)
})}
</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>
)
}
+123 -18
View File
@@ -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({
where: {
order: { creator_id },
},
include: {
user: { select: { id: true, name: true, photo: true } },
},
})
const [submissions, withdrawals] = await Promise.all([
prisma.submission.findMany({
where: { order: { creator_id } },
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({
where: {
user_id,
},
include: {
order: {
include: {
creator: { select: { id: true, name: true, photo: true } },
const [submissions, withdrawals] = await Promise.all([
prisma.submission.findMany({
where: { user_id },
include: {
order: {
include: {
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({