firmanr/titipin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

feat: add edit mode for locked 'LUNAS' orders and comment out action columns in ReportByPersonGrid

Browse Source
This commit is contained in:
Firman Ramdhani
2026-09-11 13:21:20 +07:00
parent be343f375a
commit 44466f1566
2 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(app)/my-orders/[id]/page.tsx
+30 -8
View File
@@ -436,12 +436,14 @@ function SubmissionRow({
const [paidAmount, setPaidAmount] = useState(sub.paid_amount ?? '')
const [status, setStatus] = useState(sub.payment_status || 'BELUM_BAYAR')
const [saving, setSaving] = useState(false)
const [isEditingLunas, setIsEditingLunas] = useState(false)
// Sync state when props change after save
useEffect(() => {
setBill(sub.bill ?? '')
setPaidAmount(sub.paid_amount ?? '')
setStatus(sub.payment_status || 'BELUM_BAYAR')
setIsEditingLunas(false) // reset edit mode after save/refresh
}, [sub])
const handleSave = async (overrideStatus?: string, overridePaid?: string | number) => {
@@ -551,7 +553,7 @@ function SubmissionRow({
type="number"
placeholder="Rp"
value={bill}
disabled={sub.payment_status === 'LUNAS'}
disabled={sub.payment_status === 'LUNAS' && !isEditingLunas}
onChange={e => {
const val = e.target.value
setBill(val)
@@ -574,7 +576,7 @@ function SubmissionRow({
type="number"
placeholder="Rp"
value={paidAmount}
disabled={sub.payment_status === 'LUNAS'}
disabled={sub.payment_status === 'LUNAS' && !isEditingLunas}
onChange={e => {
const val = e.target.value
setPaidAmount(val)
@@ -593,7 +595,7 @@ function SubmissionRow({
<label className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
Status
</label>
<Select value={status} onValueChange={setStatus} disabled={sub.payment_status === 'LUNAS'}>
<Select value={status} onValueChange={setStatus} disabled={sub.payment_status === 'LUNAS' && !isEditingLunas}>
<SelectTrigger className="h-8 rounded-md text-xs font-semibold px-2">
<SelectValue />
</SelectTrigger>
@@ -606,7 +608,22 @@ function SubmissionRow({
</div>
<div className="flex gap-2 w-full mt-1">
{sub.payment_status !== 'LUNAS' ? (
{sub.payment_status === 'LUNAS' && !isEditingLunas ? (
// Locked state — show paid badge + edit icon
<div className="flex items-center justify-between w-full">
<div className="flex-1 bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800 rounded-md h-8 flex items-center justify-center text-xs font-bold gap-1.5">
<Check className="w-4 h-4" /> Telah Lunas
</div>
<button
onClick={() => setIsEditingLunas(true)}
title="Edit tagihan"
className="ml-2 h-8 w-8 shrink-0 flex items-center justify-center rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-500 hover:text-[#1B2CC1] hover:border-[#1B2CC1] transition-colors"
>
<Pencil className="w-3.5 h-3.5" />
</button>
</div>
) : (
// Editable state — show save + cancel
<>
<Button
size="sm"
@@ -616,6 +633,15 @@ function SubmissionRow({
>
{saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <><Save className="w-3.5 h-3.5" /> Simpan</>}
</Button>
{sub.payment_status === 'LUNAS' && isEditingLunas && (
<button
onClick={() => setIsEditingLunas(false)}
className="h-8 px-3 shrink-0 flex items-center justify-center rounded-md border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-500 hover:text-rose-600 hover:border-rose-300 text-xs font-semibold transition-colors"
>
Batal
</button>
)}
{currentBalance !== undefined && currentBalance > 0 && status !== 'LUNAS' && (
<Button
@@ -630,10 +656,6 @@ function SubmissionRow({
</Button>
)}
</>
) : (
<div className="w-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 border border-emerald-200 dark:border-emerald-800 rounded-md h-8 flex items-center justify-center text-xs font-bold gap-1.5 cursor-not-allowed opacity-80">
<Check className="w-4 h-4" /> Telah Lunas
</div>
)}
</div>
</>