61 lines
1.7 KiB
React
61 lines
1.7 KiB
React
|
import { useState } from 'react';
|
||
|
|
import { toast } from 'sonner';
|
||
|
|
import { api } from '@/api.js';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
// Monthly notes stored in monthly_bill_state — per-month, not per-bill.
|
||
|
|
export function NotesCell({ row, refresh }) {
|
||
|
|
const savedNote = row.monthly_notes || '';
|
||
|
|
const [value, setValue] = useState(savedNote);
|
||
|
|
const [saving, setSaving] = useState(false);
|
||
|
|
|
||
|
|
async function handleBlur() {
|
||
|
|
const trimmed = value.trim();
|
||
|
|
if (trimmed === savedNote) return;
|
||
|
|
|
||
|
|
const year = row.year;
|
||
|
|
const month = row.month;
|
||
|
|
|
||
|
|
if (!year || !month) {
|
||
|
|
toast.error('Cannot save notes without year/month context');
|
||
|
|
setValue(savedNote);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setSaving(true);
|
||
|
|
try {
|
||
|
|
await api.saveBillMonthlyState(row.id, {
|
||
|
|
year,
|
||
|
|
month,
|
||
|
|
notes: trimmed || null,
|
||
|
|
is_skipped: row.is_skipped,
|
||
|
|
actual_amount: row.actual_amount,
|
||
|
|
});
|
||
|
|
refresh();
|
||
|
|
} catch (err) {
|
||
|
|
toast.error(err.message);
|
||
|
|
setValue(savedNote);
|
||
|
|
} finally { setSaving(false); }
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
onChange={e => setValue(e.target.value)}
|
||
|
|
onBlur={handleBlur}
|
||
|
|
onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur(); }}
|
||
|
|
placeholder='Add monthly notes…'
|
||
|
|
disabled={saving}
|
||
|
|
className={cn(
|
||
|
|
'w-full bg-transparent text-sm placeholder:text-muted-foreground/40',
|
||
|
|
'border-0 outline-none ring-0',
|
||
|
|
'text-muted-foreground focus:text-foreground',
|
||
|
|
'transition-colors duration-150',
|
||
|
|
'disabled:cursor-not-allowed disabled:opacity-40',
|
||
|
|
value && 'text-foreground/80',
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|