86 lines
3.2 KiB
JavaScript
86 lines
3.2 KiB
JavaScript
import { useState } from 'react';
|
||
import { RotateCcw, Trash2, Loader2 } from 'lucide-react';
|
||
import {
|
||
Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription,
|
||
} from '@/components/ui/dialog';
|
||
import { Button } from '@/components/ui/button';
|
||
import { formatUSD } from '@/lib/money';
|
||
|
||
function daysLeftLabel(days) {
|
||
if (days == null) return null;
|
||
if (days <= 0) return 'purges today';
|
||
if (days === 1) return '1 day left';
|
||
return `${days} days left`;
|
||
}
|
||
|
||
/**
|
||
* Lists bills that were soft-deleted within the 30-day recovery window and lets
|
||
* the user restore them — a durable path beyond the transient "Undo" toast.
|
||
*
|
||
* Presentational: the parent owns the list (`bills`) and the async `onRestore`,
|
||
* so restoring refreshes the page's active bills too.
|
||
*/
|
||
export default function RecentlyDeletedBillsDialog({ open, onOpenChange, bills = [], onRestore }) {
|
||
const [busyId, setBusyId] = useState(null);
|
||
|
||
async function handleRestore(bill) {
|
||
setBusyId(bill.id);
|
||
try {
|
||
await onRestore(bill);
|
||
} finally {
|
||
setBusyId(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-w-lg">
|
||
<DialogHeader>
|
||
<DialogTitle>Recently deleted</DialogTitle>
|
||
<DialogDescription>
|
||
Deleted bills are kept for 30 days before they’re permanently removed. Restore one to bring it back.
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{bills.length === 0 ? (
|
||
<div className="flex flex-col items-center gap-2 py-8 text-center">
|
||
<Trash2 className="h-8 w-8 text-muted-foreground/40" />
|
||
<p className="text-sm text-muted-foreground">Nothing to recover</p>
|
||
<p className="text-xs text-muted-foreground/70">Bills you delete will appear here for 30 days.</p>
|
||
</div>
|
||
) : (
|
||
<ul className="-mx-2 max-h-[55vh] divide-y divide-border/60 overflow-y-auto">
|
||
{bills.map(bill => {
|
||
const left = daysLeftLabel(bill.days_left);
|
||
const busy = busyId === bill.id;
|
||
return (
|
||
<li key={bill.id} className="flex items-center gap-3 px-2 py-2.5">
|
||
<div className="min-w-0 flex-1">
|
||
<p className="truncate text-sm font-medium">{bill.name}</p>
|
||
<p className="truncate text-xs text-muted-foreground">
|
||
{formatUSD(bill.expected_amount)}
|
||
{bill.category_name ? ` · ${bill.category_name}` : ''}
|
||
{left ? <span className="text-muted-foreground/60"> · {left}</span> : null}
|
||
</p>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
size="sm"
|
||
variant="outline"
|
||
className="h-8 shrink-0 gap-1.5"
|
||
disabled={busy}
|
||
onClick={() => handleRestore(bill)}
|
||
>
|
||
{busy ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <RotateCcw className="h-3.5 w-3.5" />}
|
||
Restore
|
||
</Button>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|