177 lines
9.2 KiB
TypeScript
177 lines
9.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { getBalancesAsCreator, getBalancesAsSubmittor, getSessionUser } from '@/app/actions'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Wallet, ArrowDownRight, ArrowUpRight, Loader2 } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export default function BalancesPage() {
|
|
const [activeTab, setActiveTab] = useState<'SUBMITTOR' | 'CREATOR'>('SUBMITTOR')
|
|
const [userId, setUserId] = useState<string | null>(null)
|
|
const [submittorBalances, setSubmittorBalances] = useState<any[]>([])
|
|
const [creatorBalances, setCreatorBalances] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
const user = await getSessionUser()
|
|
if (user?.id) {
|
|
setUserId(user.id)
|
|
loadData(user.id)
|
|
}
|
|
}
|
|
init()
|
|
}, [])
|
|
|
|
const loadData = async (id: string) => {
|
|
setLoading(true)
|
|
const [subRes, creRes] = await Promise.all([
|
|
getBalancesAsSubmittor(id),
|
|
getBalancesAsCreator(id)
|
|
])
|
|
setSubmittorBalances(subRes)
|
|
setCreatorBalances(creRes)
|
|
setLoading(false)
|
|
}
|
|
|
|
const formatRupiah = (n: number) =>
|
|
new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in duration-500 pb-12">
|
|
<div>
|
|
<span className="text-xs font-semibold text-slate-400">Keuangan / Saldo</span>
|
|
<h2 className="text-xl font-black text-slate-900 dark:text-white flex items-center gap-2 tracking-tight">
|
|
<Wallet className="w-6 h-6 text-[#1B2CC1]" />
|
|
Buku Saldo
|
|
</h2>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
Pantau riwayat saldo lebih atau kurang dari transaksi pesanan.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex bg-slate-100 dark:bg-slate-900 p-1 rounded-xl w-full max-w-sm border border-slate-200 dark:border-slate-800">
|
|
<button
|
|
onClick={() => setActiveTab('SUBMITTOR')}
|
|
className={cn(
|
|
"flex-1 text-xs font-bold py-2 rounded-lg transition-all",
|
|
activeTab === 'SUBMITTOR'
|
|
? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white"
|
|
: "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
|
|
)}
|
|
>
|
|
Saldo Saya (Penitip)
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('CREATOR')}
|
|
className={cn(
|
|
"flex-1 text-xs font-bold py-2 rounded-lg transition-all",
|
|
activeTab === 'CREATOR'
|
|
? "bg-white dark:bg-slate-800 shadow-sm text-slate-900 dark:text-white"
|
|
: "text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
|
|
)}
|
|
>
|
|
Saldo Orang (Kreator)
|
|
</button>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="flex flex-col items-center justify-center min-h-[30vh] gap-3">
|
|
<Loader2 className="animate-spin text-[#1B2CC1] w-8 h-8" />
|
|
<span className="text-xs text-slate-500 font-semibold">Memuat saldo...</span>
|
|
</div>
|
|
) : activeTab === 'SUBMITTOR' ? (
|
|
<div className="space-y-4">
|
|
<div className="bg-blue-50 dark:bg-blue-950/30 p-4 rounded-xl border border-blue-100 dark:border-blue-900/50 mb-6">
|
|
<h3 className="font-bold text-blue-900 dark:text-blue-100 text-sm mb-1">Saldo Anda di Kreator Lain</h3>
|
|
<p className="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
|
|
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.
|
|
</p>
|
|
</div>
|
|
|
|
{submittorBalances.length === 0 ? (
|
|
<div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
|
|
<p className="text-xs text-slate-500 font-medium">Belum ada catatan saldo.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{submittorBalances.map((b, i) => (
|
|
<Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
|
|
<div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
|
|
{b.creator.photo ? (
|
|
<img src={b.creator.photo} alt={b.creator.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-[#1B2CC1]/10 text-[#1B2CC1] flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
|
|
{b.creator.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-bold text-slate-900 dark:text-white text-sm">{b.creator.name}</p>
|
|
<p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Kreator</p>
|
|
</div>
|
|
</div>
|
|
<CardContent className="p-4 bg-white dark:bg-slate-900">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Total Saldo</span>
|
|
<div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-emerald-600" : "text-rose-600")}>
|
|
{b.amount > 0 ? <ArrowUpRight className="w-5 h-5" /> : <ArrowDownRight className="w-5 h-5" />}
|
|
{formatRupiah(b.amount)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div className="bg-amber-50 dark:bg-amber-950/30 p-4 rounded-xl border border-amber-100 dark:border-amber-900/50 mb-6">
|
|
<h3 className="font-bold text-amber-900 dark:text-amber-100 text-sm mb-1">Saldo Orang Lain di Anda</h3>
|
|
<p className="text-xs text-amber-700 dark:text-amber-300 leading-relaxed">
|
|
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.
|
|
</p>
|
|
</div>
|
|
|
|
{creatorBalances.length === 0 ? (
|
|
<div className="text-center p-12 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow-sm">
|
|
<p className="text-xs text-slate-500 font-medium">Belum ada penitip yang memiliki catatan saldo dengan Anda.</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
|
{creatorBalances.map((b, i) => (
|
|
<Card key={i} className="rounded-2xl border-slate-200/90 dark:border-slate-800 overflow-hidden hover:border-[#1B2CC1]/30 transition-all shadow-sm">
|
|
<div className="p-4 flex items-center gap-3 bg-slate-50/50 dark:bg-slate-800/40 border-b border-slate-100 dark:border-slate-800">
|
|
{b.user.photo ? (
|
|
<img src={b.user.photo} alt={b.user.name} className="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-slate-900 shadow-sm" />
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 flex items-center justify-center font-bold text-sm ring-2 ring-white dark:ring-slate-900 shadow-sm">
|
|
{b.user.name.charAt(0).toUpperCase()}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-bold text-slate-900 dark:text-white text-sm">{b.user.name}</p>
|
|
<p className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">Penitip</p>
|
|
</div>
|
|
</div>
|
|
<CardContent className="p-4 bg-white dark:bg-slate-900">
|
|
<div className="flex flex-col gap-1">
|
|
<span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Saldo Penitip</span>
|
|
{/* From Creator perspective: positive balance of submittor is bad for creator (creator holds their money) */}
|
|
<div className={cn("text-xl font-black flex items-center gap-1.5", b.amount > 0 ? "text-rose-600" : "text-emerald-600")}>
|
|
{b.amount > 0 ? <ArrowDownRight className="w-5 h-5" /> : <ArrowUpRight className="w-5 h-5" />}
|
|
{formatRupiah(b.amount)}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|