// screen-payments.jsx — payments dashboard function PaymentsScreen({ orders, currentUser, onOpenOrder }) { const isOwner = currentUser.role === 'owner'; const today = React.useMemo(() => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; }, []); const thisMonthStart = React.useMemo(() => { const d = new Date(today); d.setDate(1); return d; }, [today]); const lastMonthStart = React.useMemo(() => { const d = new Date(thisMonthStart); d.setMonth(d.getMonth() - 1); return d; }, [thisMonthStart]); const monthName = thisMonthStart.toLocaleString('sq-AL', { month: 'long', year: 'numeric' }); // ── Core stats ───────────────────────────────────────────────────────── const stats = React.useMemo(() => { let revenueMonth = 0, revenueLastMonth = 0; let outstanding = 0, unpaidCount = 0, depositCount = 0, paidCount = 0; orders.forEach(o => { const p = o.payment; if (!p || o.status === 'cancelled') return; const total = p.total_price || 0; const deposit = p.deposit_amount || 0; const state = window.paymentState(p); // Revenue: sum by the date the order was fully paid if (state === 'paid' && p.fully_paid_at) { const paidDate = new Date(p.fully_paid_at.slice(0, 10)); if (paidDate >= thisMonthStart) revenueMonth += total; else if (paidDate >= lastMonthStart && paidDate < thisMonthStart) revenueLastMonth += total; } if (state === 'unpaid') { outstanding += total; unpaidCount++; } else if (state === 'deposit') { outstanding += (total - deposit); depositCount++; } else if (state === 'paid') { paidCount++; } }); const trend = revenueLastMonth > 0 ? ((revenueMonth - revenueLastMonth) / revenueLastMonth * 100).toFixed(0) : null; return { revenueMonth, revenueLastMonth, trend, outstanding, unpaidCount, depositCount, paidCount }; }, [orders, thisMonthStart, lastMonthStart]); // ── 30-day sparkline from real order due dates ───────────────────────── const { sparkline, sparkDates } = React.useMemo(() => { const DAYS = 30; const values = new Array(DAYS).fill(0); const dates = []; for (let i = 0; i < DAYS; i++) { const d = new Date(today); d.setDate(d.getDate() - (DAYS - 1 - i)); dates.push(d); } orders.forEach(o => { if (o.status === 'cancelled' || !o.payment?.total_price) return; const due = new Date(o.due_date); due.setHours(0, 0, 0, 0); const idx = Math.round((due - dates[0]) / 86400000); if (idx >= 0 && idx < DAYS) values[idx] += o.payment.total_price; }); return { sparkline: values, sparkDates: dates }; }, [orders, today]); const sparkMax = Math.max(...sparkline, 1); const sparkPath = sparkline.map((v, i) => { const x = (i / (sparkline.length - 1)) * 100; const y = 100 - (v / sparkMax) * 90; // 90% height so line doesn't touch top edge return `${i === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`; }).join(' '); const sparkFillPath = sparkPath + ` L 100 100 L 0 100 Z`; const fmtDate = (d) => d.toLocaleDateString('sq-AL', { day: 'numeric', month: 'short' }); // ── Month at a glance (real data) ────────────────────────────────────── const monthStats = React.useMemo(() => { const thisMonth = orders.filter(o => o.status !== 'cancelled' && new Date(o.due_date) >= thisMonthStart && new Date(o.due_date) < new Date(thisMonthStart.getFullYear(), thisMonthStart.getMonth() + 1, 1) ); const standard = thisMonth.filter(o => o.type === 'standard').length; const custom = thisMonth.filter(o => o.type === 'custom').length; const baklava = thisMonth.filter(o => o.type === 'baklava').length; const withPrice = orders.filter(o => o.status !== 'cancelled' && o.payment?.total_price > 0); const avg = withPrice.length ? withPrice.reduce((s, o) => s + o.payment.total_price, 0) / withPrice.length : 0; const flavourCounts = {}; orders.forEach(o => { if (o.flavour) flavourCounts[o.flavour] = (flavourCounts[o.flavour] || 0) + 1; }); const topFlavour = Object.entries(flavourCounts).sort((a, b) => b[1] - a[1])[0]; return { standard, custom, baklava, avg, topFlavour }; }, [orders, thisMonthStart]); // ── Lists ────────────────────────────────────────────────────────────── const topCustomers = React.useMemo(() => { const map = {}; orders.forEach(o => { const total = o.payment?.total_price || 0; if (!map[o.customer_name]) map[o.customer_name] = { name: o.customer_name, total: 0, count: 0 }; map[o.customer_name].total += total; map[o.customer_name].count++; }); return Object.values(map).sort((a, b) => b.total - a.total).slice(0, 5); }, [orders]); const outstandingOrders = orders.filter(o => { const state = window.paymentState(o.payment); return o.status !== 'cancelled' && (state === 'unpaid' || state === 'deposit'); }).sort((a, b) => new Date(a.due_date) - new Date(b.due_date)); const recentPaid = orders.filter(o => o.payment?.fully_paid_at) .sort((a, b) => new Date(b.payment.fully_paid_at) - new Date(a.payment.fully_paid_at)) .slice(0, 5); // ── Trend label ──────────────────────────────────────────────────────── const trendLabel = stats.trend !== null ? `${stats.trend > 0 ? '+' : ''}${stats.trend}% ndaj muajit të kaluar` : 'Muaji i parë me të dhëna'; return (
{/* Stats row */}
{/* Sparkline + month breakdown */}
0 ? (
Në rritje
) : null } /> {sparkline.every(v => v === 0) ? (

Asnjë porosi me çmim në 30 ditët e fundit

) : ( <>
{sparkline.map((v, i) => { if (v === 0) return null; const x = (i / (sparkline.length - 1)) * 100; const y = 100 - (v / sparkMax) * 90; return ; })}
{fmtDate(sparkDates[0])} {fmtDate(sparkDates[14])} {fmtDate(sparkDates[29])}
)}
{monthStats.topFlavour && ( )}
{/* Outstanding */}
{outstandingOrders.length === 0 ? (

Asnjë bilanc i papaguar.

) : (
{outstandingOrders.map(o => { const owed = (o.payment?.total_price || 0) - (o.payment?.deposit_amount || 0); return (
onOpenOrder(o.id)} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 6px', borderTop: '1px solid var(--line)', cursor: 'pointer', }} onMouseEnter={e => e.currentTarget.style.background = 'var(--cream-2)'} onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{o.customer_name}
#{o.id.slice(-4)} · {window.relativeDay(o.due_date).toLowerCase()} {o.type === 'custom' && !o.payment?.total_price && ' · çmim i pavendosur'}
{o.payment?.total_price ? window.formatEUR(owed) : '—'}
prej {window.formatEUR(o.payment?.total_price)}
); })}
)}
{/* Recent paid + top customers */}
{recentPaid.length === 0 ? (

Asnjë porosi e paguar akoma.

) : recentPaid.map(o => (
onOpenOrder(o.id)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 4px', borderTop: '1px solid var(--line)', cursor: 'pointer', }}>
{o.customer_name}
{window.relativeDay(o.payment.fully_paid_at.slice(0, 10))}
+{window.formatEUR(o.payment.total_price)}
))}
{isOwner && (
{topCustomers.length === 0 ? (

Asnjë porosi akoma.

) : topCustomers.map((c, i) => (
{c.name}
{c.count} {c.count === 1 ? 'porosi' : 'porosi'}
{window.formatEUR(c.total)}
))}
)}
{!isOwner && (
Pamje e kufizuar — historia e plotë e pagesave është vetëm për pronarin. Mund të regjistroni depozita dhe të shënoni porositë si të paguara plotësisht nga faqja e secilës porosi.
)}
); } function StatCard({ label, value, accent, trend, big }) { return (
{label}
{value}
{trend &&
{trend}
}
); } function MonthRow({ label, value, sub }) { return (
{label} {value} {sub}
); } Object.assign(window, { PaymentsScreen });