feat: add PiutangManager component for handling receivables and bulk payments
This commit is contained in:
Firman Ramdhani
@@ -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,8 +156,36 @@ export default function MyOrdersPage() {
|
||||
|
||||
return (
|
||||
<div className="animate-in fade-in space-y-6 pb-12 duration-500">
|
||||
{/* 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">
|
||||
{/* 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">
|
||||
{/* Segmented Control / Tabs */}
|
||||
<div className="flex w-full items-center overflow-x-auto rounded-xl bg-slate-100 p-1 text-xs font-bold md:w-auto dark:bg-slate-800/80">
|
||||
@@ -618,6 +648,10 @@ export default function MyOrdersPage() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<PiutangManager creatorId={userId!} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
<Lock className="h-3 w-3" />
|
||||
<span className="text-center leading-tight">
|
||||
PO ditutup
|
||||
<br />
|
||||
(pesanan terkunci)
|
||||
</span>
|
||||
</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">
|
||||
// <Lock className="h-3 w-3" />
|
||||
// <span className="text-center leading-tight">
|
||||
// PO ditutup
|
||||
// <br />
|
||||
// (pesanan terkunci)
|
||||
// </span>
|
||||
// </div>
|
||||
<div></div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+92
-30
@@ -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 },
|
||||
})
|
||||
)
|
||||
} 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 },
|
||||
data: { payment_status: 'LUNAS', paid_amount: finalPaid, saldo_used: finalSaldoUsed },
|
||||
})
|
||||
)
|
||||
} else if (totalAvailable > 0) {
|
||||
// Partially covered -> BELUM_BAYAR. Only use cash.
|
||||
let finalPaid = prevPaid + remainingCash
|
||||
remainingCash = 0
|
||||
totalAvailable = remainingBalance // only balance left, which can't be used
|
||||
// Partially covered -> BELUM_BAYAR
|
||||
let balanceToUse = Math.min(remainingBalance, totalAvailable)
|
||||
remainingBalance -= balanceToUse
|
||||
|
||||
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 },
|
||||
})
|
||||
)
|
||||
} 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' },
|
||||
data: { payment_status: 'BELUM_BAYAR', paid_amount: finalPaid, saldo_used: finalSaldoUsed },
|
||||
})
|
||||
)
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user