// ============================================ // admin.jsx — Dashboard (v2 redesign) // ============================================ function AdminPanel({ quotations, invoices, onViewQuotation, onViewInvoice, onNewQuotation, onNewInvoice, onRefresh, companyLogo, }) { const [activeTab, setActiveTab] = useState("quotations") const [refreshing, setRefreshing] = useState(false) const [search, setSearch] = useState("") const [statusFilter, setStatusFilter] = useState("all") const [monthOffset, setMonthOffset] = useState(0) // 0 = bulan semasa const handleRefresh = async () => { setRefreshing(true) await onRefresh() setRefreshing(false) } const handleLogout = () => { sessionStorage.removeItem("cs_authenticated") window.location.reload() } const switchTab = (tab) => { setActiveTab(tab) setStatusFilter("all") } // ---------- Monthly stats ---------- const now = new Date() const viewMonth = new Date(now.getFullYear(), now.getMonth() + monthOffset, 1) const monthNames = [ "Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember", ] const monthLabel = `${monthNames[viewMonth.getMonth()]} ${viewMonth.getFullYear()}` const inMonth = (dateStr, ref) => { if (!dateStr) return false const d = new Date(dateStr) return ( !isNaN(d.getTime()) && d.getMonth() === ref.getMonth() && d.getFullYear() === ref.getFullYear() ) } const sumTotal = (list) => list.reduce((s, x) => s + (x.total || 0), 0) // Duit masuk bulanan: payments + deposit paid + baki invoice paid tanpa rekod const moneyInMonth = (ref) => { let total = 0 let count = 0 invoices.forEach((inv) => { let got = 0 let paymentsSum = 0 ;(inv.payments || []).forEach((p) => { paymentsSum += p.amount || 0 if (inMonth(p.date, ref)) got += p.amount || 0 }) let depositPaid = 0 if (inv.deposit && inv.deposit.status === "paid") { depositPaid = inv.deposit.amount || 0 const dDate = inv.deposit.paidDate || inv.deposit.date if (inMonth(dDate, ref)) got += depositPaid } // Invoice ditanda paid tapi bayaran tak direkod penuh — // baki dianggap masuk pada tarikh invoice if (inv.status === "paid") { const remainder = (inv.total || 0) - paymentsSum - depositPaid if (remainder > 0 && inMonth(inv.date, ref)) got += remainder } if (got > 0) { total += got count++ } }) return { total, count } } const mMoneyIn = moneyInMonth(viewMonth) const mInvoiced = invoices.filter((i) => inMonth(i.date, viewMonth)) const stats = { revenue: mMoneyIn, invoiced: { total: sumTotal(mInvoiced), count: mInvoiced.length }, } // Trend 6 bulan (berakhir pada bulan dipilih) const trend = Array.from({ length: 6 }, (_, idx) => { const ref = new Date( viewMonth.getFullYear(), viewMonth.getMonth() - (5 - idx), 1 ) return { label: monthNames[ref.getMonth()].slice(0, 3), total: moneyInMonth(ref).total, isSelected: idx === 5, } }) const trendMax = Math.max(...trend.map((t) => t.total), 1) // Keseluruhan (caption kecil) const overallOutstanding = invoices.filter( (i) => i.status === "unpaid" || i.status === "overdue" ) const overallPending = quotations.filter((q) => q.status === "sent") const formatRM = (amount) => { if (amount >= 1000) { return `RM ${(amount / 1000).toFixed(amount % 1000 === 0 ? 0 : 1)}k` } return `RM ${amount.toLocaleString()}` } // ---------- Status meta ---------- const statusMeta = { draft: { dot: "#9CA3AF", bg: "#F3F4F6", text: "#6B7280", label: "Draft" }, sent: { dot: "#F59E0B", bg: "#FEF3C7", text: "#B45309", label: "Pending" }, accepted: { dot: "#10B981", bg: "#D1FAE5", text: "#047857", label: "Accepted" }, rejected: { dot: "#EF4444", bg: "#FEE2E2", text: "#B91C1C", label: "Rejected" }, unpaid: { dot: "#F59E0B", bg: "#FEF3C7", text: "#B45309", label: "Unpaid" }, paid: { dot: "#10B981", bg: "#D1FAE5", text: "#047857", label: "Paid" }, overdue: { dot: "#EF4444", bg: "#FEE2E2", text: "#B91C1C", label: "Overdue" }, } const meta = (s) => statusMeta[s] || statusMeta.draft // ---------- Filtering ---------- const matchSearch = (item) => { if (!search.trim()) return true const hay = [item.id, item.client, item.company, item.project] .filter(Boolean) .join(" ") .toLowerCase() return hay.includes(search.trim().toLowerCase()) } const matchStatus = (item) => statusFilter === "all" || item.status === statusFilter const filteredQuotations = quotations.filter( (q) => matchSearch(q) && matchStatus(q) ) const filteredInvoices = invoices.filter( (i) => matchSearch(i) && matchStatus(i) ) const quotationChips = [ { value: "all", label: "Semua" }, { value: "sent", label: "Pending" }, { value: "accepted", label: "Accepted" }, { value: "draft", label: "Draft" }, { value: "rejected", label: "Rejected" }, ] const invoiceChips = [ { value: "all", label: "Semua" }, { value: "unpaid", label: "Unpaid" }, { value: "paid", label: "Paid" }, { value: "overdue", label: "Overdue" }, ] const chips = activeTab === "quotations" ? quotationChips : invoiceChips const chipCount = (value) => { const list = activeTab === "quotations" ? quotations : invoices if (value === "all") return list.filter(matchSearch).length return list.filter((x) => x.status === value && matchSearch(x)).length } // ---------- List row ---------- const ListRow = ({ item, isInvoice, onClick }) => { const m = meta(item.status) return (
{item.id} {isInvoice ? item.due ? `Due ${formatDate(item.due)}` : "" : item.date ? formatDate(item.date) : ""}
{m.label}
{item.client}
{item.project}
RM {(item.total || 0).toLocaleString()}
) } const list = activeTab === "quotations" ? filteredQuotations : filteredInvoices return (
{/* ===== Header (dark hero) ===== */}
{companyInfo.name}
Quotation & Invoice Dashboard
{/* ===== Monthly overview (overlap hero) ===== */}
{/* Month navigator */}
Ringkasan Bulanan
{monthLabel}
{monthOffset !== 0 && ( )}
{/* Monthly stat cards */}
Duit Masuk
{formatRM(stats.revenue.total)}
{stats.revenue.count} invoice terima bayaran
Invoiced
{formatRM(stats.invoiced.total)}
{stats.invoiced.count} invoice dikeluarkan
{/* Revenue trend — 6 bulan */}
Trend Duit Masuk · 6 Bulan
{trend.map((t, i) => { const h = Math.max( Math.round((t.total / trendMax) * 64), t.total > 0 ? 4 : 2 ) return (
{t.total > 0 ? formatRM(t.total).replace( "RM ", "" ) : ""}
{t.label}
) })}
{/* Overall caption */}
Keseluruhan belum bayar:{" "} {formatRM(sumTotal(overallOutstanding))} {" "} ({overallOutstanding.length} invoice) Quotation pending:{" "} {formatRM(sumTotal(overallPending))} {" "} ({overallPending.length})
{/* ===== Tabs ===== */}
{[ { key: "quotations", label: `Quotations (${quotations.length})` }, { key: "invoices", label: `Invoices (${invoices.length})` }, ].map((tab) => ( ))}
{/* ===== Search + filter chips ===== */}
setSearch(e.target.value)} placeholder="Cari client, syarikat, projek atau ID…" style={{ width: "100%", padding: "12px 16px 12px 40px", borderRadius: 12, border: "1px solid #E8EAEE", fontSize: 14, outline: "none", boxSizing: "border-box", backgroundColor: "#FFF", color: "#0F172A", }} />
{chips.map((chip) => { const active = statusFilter === chip.value return ( ) })}
{/* ===== List ===== */}
{list.map((item) => ( activeTab === "invoices" ? onViewInvoice(item) : onViewQuotation(item) } /> ))} {list.length === 0 && (
{search || statusFilter !== "all" ? "Tiada rekod padan dengan carian/filter." : activeTab === "quotations" ? "Belum ada quotation." : "Belum ada invoice."}
)}
) } window.AdminPanel = AdminPanel