52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import { useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
import { api } from '@/api.js';
|
|
import { cn, fmt } from '@/lib/utils';
|
|
import { Button } from '@/components/ui/button';
|
|
import { MONTHS, rowThreshold, paymentSummary } from '@/lib/trackerUtils';
|
|
|
|
export function LowerThisMonthButton({ row, year, month, refresh, compact = false }) {
|
|
const threshold = rowThreshold(row);
|
|
const summary = paymentSummary(row, threshold);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
if (row.is_skipped || !summary.partial) return null;
|
|
|
|
async function handleClick() {
|
|
setSaving(true);
|
|
try {
|
|
await api.saveBillMonthlyState(row.id, {
|
|
year,
|
|
month,
|
|
actual_amount: summary.paid,
|
|
notes: row.monthly_notes || null,
|
|
is_skipped: row.is_skipped,
|
|
});
|
|
toast.success(`${MONTHS[month - 1]} amount set to ${fmt(summary.paid)}`);
|
|
refresh?.();
|
|
} catch (err) {
|
|
toast.error(err.message || 'Failed to update monthly amount');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={saving}
|
|
onClick={handleClick}
|
|
className={cn(
|
|
'h-7 px-2.5 text-xs font-semibold text-amber-600 hover:bg-amber-500/10 hover:text-amber-700',
|
|
'dark:text-amber-400 dark:hover:text-amber-300',
|
|
compact && 'h-8',
|
|
)}
|
|
title={`Set ${MONTHS[month - 1]} amount to ${fmt(summary.paid)} because this bill was lower this month`}
|
|
>
|
|
{saving ? 'Saving...' : 'Bill was lower'}
|
|
</Button>
|
|
);
|
|
}
|