/* global React, API, useApp */
const { useState, useEffect, useCallback } = React;
const fmtEur = v => v == null ? '—' : `€${Number(v).toLocaleString('nl-NL',{minimumFractionDigits:2,maximumFractionDigits:2})}`;
const SOURCE_LABELS = { recurring:'Recurring', passthrough:'Passthrough', time:'Time', manual:'Manual' };
const SOURCE_COLORS = { recurring:'var(--teal)', passthrough:'var(--amber)', time:'var(--fg-muted)', manual:'var(--ember)' };
function QueueItem({ item, onApprove, onReject, onDelete }) {
const subtotal = item.quantity * item.unit_price;
const total = subtotal * (1 + item.vat_rate);
return (
{SOURCE_LABELS[item.source_type]||item.source_type}
{item.description}
{item.quantity}×
{fmtEur(item.unit_price)}
{fmtEur(total)}
{item.approved === 1
? ✓ approved
: item.approved === 0
? ✗ rejected
: <>
}
);
}
function AddItemForm({ companyId, companies, onAdded, onCancel }) {
const [f, setF] = useState({ description:'', quantity:1, unit_price:'', vat_rate:0.21, source_type:'manual' });
const [busy, setBusy] = useState(false);
const { toast } = useApp();
const up = k => e => setF(p => ({...p,[k]:e.target.value}));
async function submit() {
if (!f.description || !f.unit_price) { toast('Description and price required','error'); return; }
setBusy(true);
try {
await API.post('/billing-queue', { company_id: companyId, ...f,
quantity: Number(f.quantity), unit_price: Number(f.unit_price), vat_rate: Number(f.vat_rate) });
onAdded();
} catch(e) { toast(e.error||'Error','error'); }
finally { setBusy(false); }
}
return (
);
}
function CustomerQueue({ customer, companies, onInvoiced }) {
const [items, setItems] = useState([]);
const [adding, setAdding] = useState(false);
const [busy, setBusy] = useState(false);
const { toast } = useApp();
const load = useCallback(() => {
API.get(`/billing-queue?company_id=${customer.company_id}`).then(setItems).catch(()=>{});
}, [customer.company_id]);
useEffect(() => { load(); }, [load]);
async function approve(id) { await API.patch(`/billing-queue/${id}`, { approved: 1 }); load(); }
async function reject(id) { await API.patch(`/billing-queue/${id}`, { approved: 0 }); load(); }
async function del(id) { await API.del(`/billing-queue/${id}`).catch(()=>{}); load(); }
async function approveAll() {
const pending = items.filter(i => i.approved === null);
await Promise.all(pending.map(i => API.patch(`/billing-queue/${i.id}`, { approved: 1 })));
load();
}
async function runInvoice() {
setBusy(true);
try {
const result = await API.post('/billing-queue/run', { company_id: customer.company_id });
toast(`Invoice ${result.invoice_number} created (${result.items} lines)`);
load();
onInvoiced();
} catch(e) { toast(e.error||'Error','error'); }
finally { setBusy(false); }
}
const pending = items.filter(i => i.approved === null);
const approved = items.filter(i => i.approved === 1);
const subtotal = approved.reduce((s,i) => s + i.quantity * i.unit_price, 0);
const total = items.reduce((s,i) => s + i.quantity * i.unit_price * (1 + i.vat_rate), 0);
return (
{customer.company_name}
{customer.total_items} item{customer.total_items!==1?'s':''} · {approved.length} approved · {pending.length} pending
{fmtEur(total)}
{pending.length > 0 && }
{approved.length > 0 && }
{['Source','Description','Qty','Price','Total incl.',''].map((h,i) =>
=3&&i<=4?'right':'left'}}>{h}
)}
{items.length === 0 &&
Queue is empty.
}
{items.map(item => (
))}
{adding &&
{load();setAdding(false);}} onCancel={()=>setAdding(false)} />}
);
}
function BillingQueue({ companies }) {
const [summary, setSummary] = useState([]);
const [tick, setTick] = useState(0);
const reload = () => { API.get('/billing-queue').then(setSummary).catch(()=>{}); setTick(t=>t+1); };
useEffect(() => { reload(); }, []);
return (
Billing Queue
Items waiting to be invoiced — approve lines then run the invoice per customer.
{summary.length === 0 && (
No pending items. Passthrough allocations and manually added items will appear here.
)}
{summary.map(c => (
))}
);
}