feat: add saldo balance tracking and item notes support for orders and reports

This commit is contained in:
Firman Ramdhani
2026-09-16 13:13:40 +07:00
parent 44466f1566
commit d5791e759e
16 changed files with 6793 additions and 2538 deletions
File diff suppressed because it is too large Load Diff
+140 -70
View File
@@ -286,7 +286,9 @@ export default function MyPurchasesPage() {
{sub.items.map((item: any) => (
<li key={item.id} className="flex justify-between items-start font-medium gap-2">
<span className="text-slate-700 dark:text-slate-300 mr-1 leading-snug">
{item.name} {item.is_custom && <span className="text-[10px] font-bold text-[#1B2CC1] bg-blue-50 dark:bg-blue-950 px-1 py-0.5 rounded ml-1 whitespace-nowrap">Custom</span>}
{item.name}
{item.note && <span className="text-[10px] text-slate-500 italic ml-1 break-words">({item.note})</span>}
{item.is_custom && <span className="text-[10px] font-bold text-[#1B2CC1] bg-blue-50 dark:bg-blue-950 px-1 py-0.5 rounded ml-1 whitespace-nowrap">Custom</span>}
</span>
<span className="font-black text-slate-900 dark:text-white shrink-0 mt-0.5">{item.qty}x</span>
</li>
@@ -314,6 +316,36 @@ export default function MyPurchasesPage() {
<div className="text-lg font-black text-[#1B2CC1] dark:text-blue-400 leading-none mt-1">
{sub.bill ? formatRupiah(sub.bill) : <span className="text-slate-400 italic text-[13px] font-normal">Belum Dihitung</span>}
</div>
{(() => {
const bill = sub.bill || 0;
const paid = (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? bill : 0)) + (sub.saldo_used || 0);
const unpaid = Math.max(0, bill - paid);
if (bill > 0 && paid > 0) {
return (
<div className="flex flex-col gap-0.5 mt-1.5">
<div className="flex justify-between text-[10px] text-slate-400 font-bold">
<span>Dibayar: </span>
<span>{formatRupiah(paid)}</span>
</div>
{(sub.saldo_used || 0) > 0 && (
<div className="flex justify-between text-[10px] text-emerald-600 font-bold">
<span>Dari saldo: </span>
<span>{formatRupiah(sub.saldo_used)}</span>
</div>
)}
{unpaid > 0 && (
<div className="flex justify-between text-[10px] text-rose-600 font-bold">
<span>Kurang Bayar:</span>
<span>{formatRupiah(unpaid)}</span>
</div>
)}
</div>
)
}
return null;
})()}
</div>
{/* Update Order Action Button */}
@@ -413,8 +445,8 @@ function EditPurchaseModal({
onClose: () => void
onSuccess: () => void
}) {
const [items, setItems] = useState<Record<string, { selected: boolean, qty: number }>>({})
const [customItems, setCustomItems] = useState<Array<{ id: string, name: string, qty: number }>>([])
const [items, setItems] = useState<Record<string, { selected: boolean, qty: number, note?: string }>>({})
const [customItems, setCustomItems] = useState<Array<{ id: string, name: string, qty: number, note?: string }>>([])
const [loading, setLoading] = useState(true)
const [saving, setSaving] = useState(false)
const [error, setError] = useState('')
@@ -426,11 +458,11 @@ function EditPurchaseModal({
const loadExisting = async () => {
setLoading(true)
const sub = await getUserSubmission(order.id, userId)
const initialItems: Record<string, { selected: boolean, qty: number }> = {}
const initialItems: Record<string, { selected: boolean, qty: number, note?: string }> = {}
const initialCustoms: any[] = []
order.available_items?.forEach((ai: any) => {
initialItems[ai.id] = { selected: false, qty: 0 }
initialItems[ai.id] = { selected: false, qty: 0, note: '' }
})
if (sub) {
@@ -438,10 +470,10 @@ function EditPurchaseModal({
if (!item.is_custom) {
const stdItem = order.available_items?.find((ai: any) => ai.name === item.name)
if (stdItem) {
initialItems[stdItem.id] = { selected: true, qty: item.qty }
initialItems[stdItem.id] = { selected: true, qty: item.qty, note: item.note || '' }
}
} else {
initialCustoms.push({ id: Math.random().toString(), name: item.name, qty: item.qty })
initialCustoms.push({ id: Math.random().toString(), name: item.name, qty: item.qty, note: item.note || '' })
}
})
}
@@ -454,7 +486,7 @@ function EditPurchaseModal({
const handleToggle = (itemId: string, checked: boolean) => {
setItems(prev => ({
...prev,
[itemId]: { selected: checked, qty: checked ? 1 : 0 }
[itemId]: { selected: checked, qty: checked ? 1 : 0, note: prev[itemId]?.note || '' }
}))
}
@@ -465,15 +497,22 @@ function EditPurchaseModal({
}
setItems(prev => ({
...prev,
[itemId]: { selected: true, qty }
[itemId]: { ...prev[itemId], qty }
}))
}
const handleNote = (itemId: string, note: string) => {
setItems(prev => ({
...prev,
[itemId]: { ...prev[itemId], note }
}))
}
const addCustomItem = () => {
setCustomItems([...customItems, { id: Math.random().toString(), name: '', qty: 1 }])
setCustomItems([...customItems, { id: Math.random().toString(), name: '', qty: 1, note: '' }])
}
const updateCustomItem = (id: string, field: 'name' | 'qty', value: any) => {
const updateCustomItem = (id: string, field: 'name' | 'qty' | 'note', value: any) => {
setCustomItems(customItems.map(c => c.id === id ? { ...c, [field]: value } : c))
}
@@ -491,13 +530,13 @@ function EditPurchaseModal({
order.available_items?.forEach((ai: any) => {
const state = items[ai.id]
if (state?.selected && state.qty > 0) {
payloadItems.push({ name: ai.name, qty: state.qty, is_custom: false })
payloadItems.push({ name: ai.name, qty: state.qty, is_custom: false, note: state.note?.trim() || undefined })
}
})
customItems.forEach(ci => {
if (ci.name.trim() && ci.qty > 0) {
payloadItems.push({ name: ci.name.trim(), qty: ci.qty, is_custom: true })
payloadItems.push({ name: ci.name.trim(), qty: ci.qty, is_custom: true, note: ci.note?.trim() || undefined })
}
})
@@ -556,44 +595,60 @@ function EditPurchaseModal({
<div
key={item.id}
className={cn(
"flex items-center justify-between p-3.5 rounded-xl border transition-all",
"flex flex-col gap-2 p-3.5 rounded-xl border transition-all",
isSelected
? "border-[#1B2CC1] bg-[#1B2CC1]/5 dark:bg-blue-950/20 shadow-sm"
: "border-slate-200/80 dark:border-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800/50"
? "border-[#1B2CC1]/40 bg-blue-50/20 dark:bg-blue-950/10 shadow-sm"
: "border-slate-200/90 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/40"
)}
>
<div className="flex items-center gap-3 flex-1 min-w-0">
<Checkbox
id={`purchase-item-${item.id}`}
checked={isSelected}
onCheckedChange={(c) => handleToggle(item.id, c as boolean)}
className="rounded-lg data-[state=checked]:bg-[#1B2CC1] data-[state=checked]:border-[#1B2CC1]"
/>
<Label htmlFor={`purchase-item-${item.id}`} className="text-sm font-bold text-slate-800 dark:text-slate-200 cursor-pointer truncate">
{item.name}
</Label>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 flex-1 min-w-0">
<Checkbox
id={`purchase-item-${item.id}`}
checked={isSelected}
disabled={saving}
onCheckedChange={(c) => handleToggle(item.id, c as boolean)}
className="rounded-lg data-[state=checked]:bg-[#1B2CC1] data-[state=checked]:border-[#1B2CC1]"
/>
<Label htmlFor={`purchase-item-${item.id}`} className="text-sm font-bold text-slate-800 dark:text-slate-200 cursor-pointer truncate">
{item.name}
</Label>
</div>
{isSelected && (
<div className="flex items-center gap-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-0.5 shadow-sm shrink-0">
<Button
type="button"
variant="ghost"
size="icon"
disabled={saving}
className="h-7 w-7 text-slate-500 hover:text-slate-800"
onClick={() => handleQty(item.id, qty - 1)}
>
<MinusCircle className="h-4 w-4" />
</Button>
<span className="w-7 text-center text-xs font-extrabold text-[#1B2CC1] dark:text-blue-400">{qty}</span>
<Button
type="button"
variant="ghost"
size="icon"
disabled={saving}
className="h-7 w-7 text-slate-500 hover:text-slate-800"
onClick={() => handleQty(item.id, qty + 1)}
>
<PlusCircle className="h-4 w-4" />
</Button>
</div>
)}
</div>
{isSelected && (
<div className="flex items-center gap-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg p-0.5 shadow-sm">
<Button
type="button"
variant="ghost"
size="icon"
className="h-7 w-7 text-slate-500 hover:text-slate-800"
onClick={() => handleQty(item.id, qty - 1)}
>
<MinusCircle className="h-4 w-4" />
</Button>
<span className="w-7 text-center text-xs font-extrabold text-[#1B2CC1] dark:text-blue-400">{qty}</span>
<Button
type="button"
variant="ghost"
size="icon"
className="h-7 w-7 text-slate-500 hover:text-slate-800"
onClick={() => handleQty(item.id, qty + 1)}
>
<PlusCircle className="h-4 w-4" />
</Button>
<div className="pl-7 mt-1">
<Input
placeholder="Catatan (opsional), misal: 1/2 porsi"
className="h-8 text-xs bg-slate-50/50 dark:bg-slate-900/50 border-slate-200/60 dark:border-slate-700/60"
value={items[item.id]?.note || ''}
disabled={saving}
onChange={(e) => handleNote(item.id, e.target.value)}
/>
</div>
)}
</div>
@@ -618,6 +673,7 @@ function EditPurchaseModal({
type="button"
variant="outline"
size="sm"
disabled={saving}
onClick={addCustomItem}
className="h-8 text-xs font-bold rounded-lg border-dashed border-[#1B2CC1]/40 text-[#1B2CC1] hover:bg-[#1B2CC1]/10 gap-1.5"
>
@@ -628,30 +684,44 @@ function EditPurchaseModal({
{customItems.length > 0 ? (
<div className="space-y-2.5">
{customItems.map((ci, idx) => (
<div key={ci.id} className="flex gap-2 items-center p-3 rounded-xl border border-slate-200/90 dark:border-slate-800 bg-slate-50/70 dark:bg-slate-800/40">
<span className="text-xs font-bold text-slate-400 w-4">{idx + 1}.</span>
<Input
placeholder="Nama Menu / Catatan Khusus"
value={ci.name}
onChange={(e) => updateCustomItem(ci.id, 'name', e.target.value)}
className="flex-1 h-9 rounded-lg bg-white dark:bg-slate-900 text-xs font-medium"
/>
<Input
type="number"
min="1"
value={ci.qty}
onChange={(e) => updateCustomItem(ci.id, 'qty', parseInt(e.target.value) || 1)}
className="w-16 h-9 rounded-lg bg-white dark:bg-slate-900 text-center font-bold text-xs"
/>
<Button
type="button"
variant="ghost"
size="icon"
onClick={() => removeCustomItem(ci.id)}
className="h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg"
>
<MinusCircle className="h-4 w-4" />
</Button>
<div key={ci.id} className="flex flex-col gap-2 bg-slate-50 dark:bg-slate-800/40 p-3 rounded-xl border border-slate-200/70 dark:border-slate-700">
<div className="flex gap-2 items-center">
<span className="text-xs font-bold text-slate-400 w-4">{idx + 1}.</span>
<Input
placeholder="Nama Menu Kustom"
value={ci.name}
disabled={saving}
onChange={(e) => updateCustomItem(ci.id, 'name', e.target.value)}
className="flex-1 h-9 rounded-lg bg-white dark:bg-slate-900 text-xs font-medium"
/>
<Input
type="number"
min="1"
value={ci.qty}
disabled={saving}
onChange={(e) => updateCustomItem(ci.id, 'qty', parseInt(e.target.value) || 1)}
className="w-16 h-9 rounded-lg bg-white dark:bg-slate-900 text-center font-bold text-xs"
/>
<Button
type="button"
variant="ghost"
size="icon"
disabled={saving}
onClick={() => removeCustomItem(ci.id)}
className="h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg shrink-0"
>
<MinusCircle className="h-4 w-4" />
</Button>
</div>
<div className="pl-6">
<Input
placeholder="Catatan (opsional), misal: 1/2 porsi"
value={ci.note || ''}
disabled={saving}
onChange={(e) => updateCustomItem(ci.id, 'note', e.target.value)}
className="h-8 text-xs bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-700"
/>
</div>
</div>
))}
</div>
+1 -1
View File
@@ -143,7 +143,7 @@ export default async function PublicOrderDetailPage({ params }: { params: Promis
: 'bg-slate-100 text-slate-700 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700'
}`}
>
{item.qty}x {item.name}
{item.qty}x {item.name} {item.note && <span className="italic ml-0.5 opacity-70">({item.note})</span>}
</span>
))}
</div>
+6 -3
View File
@@ -100,15 +100,18 @@ export default function ReportsPage() {
new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)
// ── Summary calcs ──────────────────────────────────────
const totalPengeluaran = submittorData.reduce((acc, s) => acc + (s.payment_status === 'LUNAS' ? Number(s.bill) || 0 : 0), 0)
const totalHutang = submittorData.reduce((acc, s) => acc + (s.payment_status !== 'LUNAS' ? Number(s.bill) || 0 : 0), 0)
const getPaidAmount = (sub: any) => (sub.paid_amount ?? (sub.payment_status === 'LUNAS' ? (Number(sub.bill) || 0) : 0)) + (sub.saldo_used || 0)
const getUnpaidAmount = (sub: any) => Math.max(0, (Number(sub.bill) || 0) - getPaidAmount(sub))
const totalPengeluaran = submittorData.reduce((acc, s) => acc + getPaidAmount(s), 0)
const totalHutang = submittorData.reduce((acc, s) => acc + getUnpaidAmount(s), 0)
let totalOmzet = 0
let totalPiutang = 0
creatorData.forEach(order => {
order.submissions.forEach((sub: any) => {
totalOmzet += Number(sub.bill) || 0
if (sub.payment_status !== 'LUNAS') totalPiutang += Number(sub.bill) || 0
totalPiutang += getUnpaidAmount(sub)
})
})
+58 -21
View File
@@ -306,6 +306,15 @@ export async function updateOrder(order_id: string, data: {
if (order.status === 'CLOSE') {
return { success: false, error: 'Order dengan status CLOSE tidak dapat diedit.' }
}
// Check if order date is today
const orderDate = new Date(order.date)
const today = new Date()
if (orderDate.getDate() !== today.getDate() ||
orderDate.getMonth() !== today.getMonth() ||
orderDate.getFullYear() !== today.getFullYear()) {
return { success: false, error: 'Hanya pesanan hari ini yang dapat diedit.' }
}
// Delete existing available items and insert updated ones
await prisma.availableItem.deleteMany({
@@ -387,11 +396,11 @@ export async function getOrderDetail(order_id: string) {
})
}
export async function updateSubmissionPayment(submission_id: string, bill: number | null, payment_status: string, paid_amount: number | null = null) {
export async function updateSubmissionPayment(submission_id: string, bill: number | null, payment_status: string, paid_amount: number | null = null, saldo_used: number = 0) {
try {
await prisma.submission.update({
where: { id: submission_id },
data: { bill, payment_status, paid_amount }
data: { bill, payment_status, paid_amount, saldo_used }
})
revalidatePath(`/my-orders`)
revalidatePath(`/my-purchases`)
@@ -411,7 +420,8 @@ export async function updateBulkSubmissionPayment(submission_ids: string[], paym
where: { id: sub.id },
data: {
payment_status,
paid_amount: use_balance ? 0 : (sub.paid_amount != null ? sub.paid_amount : sub.bill)
paid_amount: use_balance ? (sub.paid_amount || 0) : (sub.paid_amount != null ? sub.paid_amount : sub.bill),
saldo_used: use_balance ? Math.max(0, (sub.bill || 0) - (sub.paid_amount || 0)) : 0
}
}))
await prisma.$transaction(ops)
@@ -561,13 +571,24 @@ export async function getMyPurchases(user_id: string) {
export async function submitOrder(data: {
order_id: string;
user_id: string;
items: Array<{ name: string; qty: number; is_custom: boolean }>;
items: Array<{ name: string; qty: number; is_custom: boolean; note?: string }>;
}) {
try {
if (data.items.length === 0) {
return { success: false, error: 'Pilih minimal 1 item.' }
}
const order = await prisma.order.findUnique({ where: { id: data.order_id } })
if (!order) return { success: false, error: 'Pesanan tidak ditemukan.' }
if (order.status !== 'OPEN') return { success: false, error: 'Pesanan sudah ditutup atau masih draft.' }
const itemsToCreate = data.items.map(item => ({
name: item.name,
qty: item.qty,
is_custom: item.is_custom,
note: item.note || null
}))
const existing = await prisma.submission.findFirst({
where: { order_id: data.order_id, user_id: data.user_id }
})
@@ -578,7 +599,7 @@ export async function submitOrder(data: {
where: { id: existing.id },
data: {
items: {
create: data.items
create: itemsToCreate
}
}
})
@@ -588,7 +609,7 @@ export async function submitOrder(data: {
order_id: data.order_id,
user_id: data.user_id,
items: {
create: data.items
create: itemsToCreate
}
}
})
@@ -650,8 +671,7 @@ export async function getCreatorReport(creator_id: string, startDate?: Date, end
export async function getBalancesAsCreator(creator_id: string) {
const submissions = await prisma.submission.findMany({
where: {
order: { creator_id },
payment_status: 'LUNAS'
order: { creator_id }
},
include: {
user: { select: { id: true, name: true, photo: true } }
@@ -661,12 +681,21 @@ export async function getBalancesAsCreator(creator_id: string) {
const balanceMap = new Map<string, { user: any, amount: number }>()
submissions.forEach(sub => {
if (sub.paid_amount == null || sub.bill == null) return
const diff = sub.paid_amount - sub.bill
if (!balanceMap.has(sub.user.id)) {
balanceMap.set(sub.user.id, { user: sub.user, amount: diff })
let diff = 0;
if (sub.payment_status === 'LUNAS') {
if (sub.bill != null) {
diff = (sub.paid_amount || 0) - sub.bill;
}
} else {
balanceMap.get(sub.user.id)!.amount += diff
diff = -(sub.saldo_used || 0);
}
if (diff !== 0) {
if (!balanceMap.has(sub.user.id)) {
balanceMap.set(sub.user.id, { user: sub.user, amount: diff })
} else {
balanceMap.get(sub.user.id)!.amount += diff
}
}
})
@@ -676,8 +705,7 @@ export async function getBalancesAsCreator(creator_id: string) {
export async function getBalancesAsSubmittor(user_id: string) {
const submissions = await prisma.submission.findMany({
where: {
user_id,
payment_status: 'LUNAS'
user_id
},
include: {
order: {
@@ -691,13 +719,22 @@ export async function getBalancesAsSubmittor(user_id: string) {
const balanceMap = new Map<string, { creator: any, amount: number }>()
submissions.forEach(sub => {
if (sub.paid_amount == null || sub.bill == null) return
const diff = sub.paid_amount - sub.bill
const creator = sub.order.creator
if (!balanceMap.has(creator.id)) {
balanceMap.set(creator.id, { creator: creator, amount: diff })
let diff = 0;
if (sub.payment_status === 'LUNAS') {
if (sub.bill != null) {
diff = (sub.paid_amount || 0) - sub.bill;
}
} else {
balanceMap.get(creator.id)!.amount += diff
diff = -(sub.saldo_used || 0);
}
if (diff !== 0) {
const creator = sub.order.creator
if (!balanceMap.has(creator.id)) {
balanceMap.set(creator.id, { creator: creator, amount: diff })
} else {
balanceMap.get(creator.id)!.amount += diff
}
}
})