{data.map((d, i) => {
const pct = maxVal > 0 ? (d.val / maxVal) * 100 : 0
const isLast = i === data.length - 1
return (
{d.val > 0 ? fmtRingkas(d.val) : ''}
0 ? 4 : 0,
}} />
{d.label}
)
})}
)
}
export default function DashboardManajemen() {
const { invoiceList, btdList, bdnList, gudangList, klienList } = useApp()
const [lastRefresh] = useState(new Date())
const now = new Date()
const stats = useMemo(() => {
// ── Bulan ini & lalu ────────────────────────────────────────────────────
const bulanIni = now.getMonth()
const tahunIni = now.getFullYear()
const bulanLalu = bulanIni === 0 ? 11 : bulanIni - 1
const tahunLalu = bulanIni === 0 ? tahunIni - 1 : tahunIni
const invBulanIni = invoiceList.filter(inv => { const d = new Date(inv.tanggalInvoice); return d.getMonth() === bulanIni && d.getFullYear() === tahunIni })
const invBulanLalu = invoiceList.filter(inv => { const d = new Date(inv.tanggalInvoice); return d.getMonth() === bulanLalu && d.getFullYear() === tahunLalu })
const pendapatanBulanIni = invBulanIni.reduce((s, inv) => s + (inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0), 0)
const pendapatanBulanLalu = invBulanLalu.reduce((s, inv) => s + (inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0), 0)
const pctPendapatan = pendapatanBulanLalu > 0
? ((pendapatanBulanIni - pendapatanBulanLalu) / pendapatanBulanLalu * 100).toFixed(1)
: null
// ── 6 bulan terakhir untuk chart ────────────────────────────────────────
const enamBulan = Array.from({ length: 6 }, (_, i) => {
const d = new Date(tahunIni, bulanIni - (5 - i), 1)
const bln = d.getMonth(), thn = d.getFullYear()
const val = invoiceList
.filter(inv => { const di = new Date(inv.tanggalInvoice); return di.getMonth() === bln && di.getFullYear() === thn })
.reduce((s, inv) => s + (inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0), 0)
return { label: BULAN[bln], val }
})
// ── Top 5 klien ─────────────────────────────────────────────────────────
const klienMap = {}
invoiceList.forEach(inv => {
const nama = inv.consignee || 'Lainnya'
if (!klienMap[nama]) klienMap[nama] = { count: 0, total: 0 }
klienMap[nama].count++
klienMap[nama].total += inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0
})
const topKlien = Object.entries(klienMap)
.sort((a, b) => b[1].total - a[1].total)
.slice(0, 5)
// ── Per jenis layanan bulan ini ─────────────────────────────────────────
const jenisMap = {}
invBulanIni.forEach(inv => {
const j = inv.jenisLayanan || 'Lainnya'
if (!jenisMap[j]) jenisMap[j] = 0
jenisMap[j] += inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0
})
// ── Dokumen pending ──────────────────────────────────────────────────────
const totalPending = [...btdList, ...bdnList, ...gudangList].filter(d => d.status === 'Terbuka').length
const totalDokumen = btdList.length + bdnList.length + gudangList.length
return {
totalInvoice: invoiceList.length,
invBulanIni: invBulanIni.length,
invBulanLalu: invBulanLalu.length,
pendapatanBulanIni, pendapatanBulanLalu,
pctPendapatan,
pendapatanTotal: invoiceList.reduce((s, inv) => s + (inv.detail?.kalkulasi?.grandTotal || inv.detail?.kalkulasi?.grand || inv.grandTotal || 0), 0),
enamBulan,
maxEnamBulan: Math.max(...enamBulan.map(d => d.val), 1),
topKlien,
jenisMap,
totalPending,
totalDokumen,
totalKlien: klienList.length,
}
}, [invoiceList, btdList, bdnList, gudangList, klienList])
const JENIS_COLORS = {
'FCL TPP': '#0ea5e9', 'LCL TPP': '#8b5cf6',
'Gudang Umum FCL': '#10b981', 'Gudang Umum LCL': '#34d399',
'Lainnya': '#94a3b8',
}
const getJenisColor = (jenis) => {
for (const [k, v] of Object.entries(JENIS_COLORS)) if (jenis?.includes(k)) return v
return '#94a3b8'
}
return (
{/* Header */}
Sarana Gemilang
Dashboard Manajemen
Update: {lastRefresh.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })} ·
{now.toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' })}
{/* KPI Cards */}
0 ? 'up' : stats.pctPendapatan < 0 ? 'down' : 'flat'}
trendVal={stats.pctPendapatan != null ? `${Math.abs(stats.pctPendapatan)}%` : null}
color="#10b981" icon={TrendingUp}
/>
stats.invBulanLalu ? 'up' : stats.invBulanIni < stats.invBulanLalu ? 'down' : 'flat'}
trendVal={stats.invBulanLalu > 0 ? `${Math.abs(((stats.invBulanIni - stats.invBulanLalu) / stats.invBulanLalu) * 100).toFixed(0)}%` : null}
color="#0ea5e9" icon={FileText}
/>
5 ? 'down' : 'up'}
trendVal={null}
color={stats.totalPending > 5 ? '#f97316' : '#10b981'} icon={Package}
/>
{/* Chart 6 bulan */}
Pendapatan 6 Bulan Terakhir
{/* Top Klien */}
Top Klien — All Time
{stats.topKlien.length === 0 ? (
Belum ada data
) : (
{stats.topKlien.map(([nama, data], idx) => {
const totalAll = stats.pendapatanTotal || 1
const pct = Math.round(data.total / totalAll * 100)
const rankColor = ['#f59e0b','#94a3b8','#cd7c2f'][idx] || '#e2e8f0'
return (
{idx + 1}
{nama}
{fmtRingkas(data.total)}
{data.count} invoice
)
})}
)}
{/* Breakdown jenis bulan ini */}
{Object.keys(stats.jenisMap).length > 0 && (
Jenis Layanan — {BULAN[now.getMonth()]} {now.getFullYear()}
{Object.entries(stats.jenisMap)
.sort((a, b) => b[1] - a[1])
.map(([jenis, total]) => {
const color = getJenisColor(jenis)
const pct = Math.round(total / (stats.pendapatanBulanIni || 1) * 100)
return (
{jenis}
{fmtRingkas(total)} ({pct}%)
)
})
}
)}
{/* Footer */}
PT. Sarana Gemilang · Belawan, Medan · Read-only view
)
}