Nowy plan płatności
Harmonogram rat wygeneruje się automatycznie
({value:c.id,label:c.company}))} />
setTotal(e.target.value)} placeholder="0" />
{interval !== 'once' && (
({value:v,label:v+' raty'}))} />
)}
setFirstDue(e.target.value)} />
);
}
// ── Plan drawer — schedule + mark as paid ──────────────────────────
function PlanDrawer({ plan, onClose, onMarkPaid }) {
useEffect(() => {
const esc = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', esc);
return () => document.removeEventListener('keydown', esc);
}, []);
const { paid, pct } = planProgress(plan);
const st = planStatus(plan);
return (
<>
{plan.company}
{plan.id} · {fmtPLN(plan.total)}
{st.label}
Opłacono {fmtPLN(paid)} z {fmtPLN(plan.total)}
{pct}%
Harmonogram rat
{plan.installments.map(inst => (
{inst.label}
{inst.status === 'paid' ? `Zapłacono: ${fmtDue(inst.paidDate)}` : `Termin: ${fmtDue(inst.due)}`}
{inst.status !== 'paid' && (
)}
))}
);
}
// ── Payments (main export) ────────────────────────────────────────
window.Payments = function Payments({ prefillPlan, onPrefillConsumed }) {
const [plans, setPlans] = useState(() => window.SEED.payments || []);
const [search, setSearch] = useState('');
const [selected, setSelected] = useState(null);
const [showNew, setShowNew] = useState(false);
const [pending, setPending] = useState(null);
useEffect(() => {
if (prefillPlan) {
setPending(prefillPlan);
setShowNew(true);
onPrefillConsumed && onPrefillConsumed();
}
}, [prefillPlan]);
const markPaid = (planId, instId) => {
const today = new Date();
const pad = n => String(n).padStart(2,'0');
const paidDateStr = `${today.getFullYear()}-${pad(today.getMonth()+1)}-${pad(today.getDate())}`;
setPlans(prev => prev.map(p => p.id !== planId ? p : {
...p, installments: p.installments.map(i => i.id === instId ? { ...i, status:'paid', paidDate: paidDateStr } : i),
}));
setSelected(prev => {
if (!prev || prev.id !== planId) return prev;
return { ...prev, installments: prev.installments.map(i => i.id === instId ? { ...i, status:'paid', paidDate: paidDateStr } : i) };
});
};
const filtered = plans.filter(p => p.company.toLowerCase().includes(search.toLowerCase()));
const totalDue = plans.reduce((s,p) => s + p.installments.filter(i=>i.status!=='paid').reduce((a,i)=>a+i.amount,0), 0);
const totalPaid = plans.reduce((s,p) => s + p.installments.filter(i=>i.status==='paid').reduce((a,i)=>a+i.amount,0), 0);
const overdueInsts = plans.flatMap(p=>p.installments).filter(i=>i.status==='overdue');
const overdueSum = overdueInsts.reduce((s,i)=>s+i.amount,0);
const activePlans = plans.filter(p => p.installments.some(i=>i.status!=='paid')).length;
return (
{[
{ label:'Do zapłaty (aktywne raty)', val: fmtVal(totalDue), color:'#4DA3FF' },
{ label:'Opłacone łącznie', val: fmtVal(totalPaid), color:'#22C55E' },
{ label:'Zaległe płatności', val: `${overdueInsts.length} · ${fmtVal(overdueSum)}`, color:'#EF4444' },
{ label:'Aktywne plany płatności', val: String(activePlans), color:'#7C5CFF' },
].map((s,i) => (
))}
setSearch(e.target.value)} placeholder="Szukaj klientów…"
style={{ width:'100%', padding:'9px 12px 9px 34px', borderRadius:10, border:'1px solid var(--bdr)', background:'var(--bg-input)', color:'var(--t1)', fontSize:13, outline:'none' }} />
{filtered.map(plan => {
const { paid, pct } = planProgress(plan);
const st = planStatus(plan);
const next = plan.installments.find(i => i.status !== 'paid');
return (
setSelected(plan)} className="glass-card" style={{ padding:'16px 20px', cursor:'pointer', display:'grid', gridTemplateColumns:'1.6fr 1fr 1fr 0.9fr', gap:16, alignItems:'center' }}>
{plan.company}
{plan.id} · {plan.installments.length} rat
{fmtPLN(paid)} / {fmtPLN(plan.total)}
{pct}%
{next ? (
<>
{next.status==='overdue' && }{fmtPLN(next.amount)}
Termin: {fmtDue(next.due)}
) : (
Rozliczone
)}
{st.label}
);
})}
{filtered.length === 0 && (
Brak planów płatności dla podanego filtra
)}
{selected &&
p.id===selected.id) || selected} onClose={()=>setSelected(null)} onMarkPaid={markPaid} />}
{showNew && { setShowNew(false); setPending(null); }}
onSave={p => setPlans(prev => [p, ...prev])}
prefill={pending}
/>}
);
};
})();