import { Deferred, Head, Link, usePage } from '@inertiajs/react'; import { AlertTriangle, Banknote, CircleDollarSign, FileText, PiggyBank, TrendingUp, Users2, Wallet, } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { usePermissions } from '@/hooks/use-permissions'; import AppLayout from '@/layouts/app-layout'; import { formatIDR } from '@/lib/formatters'; import { dashboard } from '@/routes'; import accounting from '@/routes/accounting'; import dailyCollection from '@/routes/daily-collection'; import financing from '@/routes/financing'; import members from '@/routes/members'; import type { BreadcrumbItem, DashboardPageProps, SharedData } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: dashboard().url, }, ]; // ─── NPF Helpers ───────────────────────────────────────────── function npfColor(ratio: number | undefined): string { if (ratio === undefined) return 'text-muted-foreground'; if (ratio < 5) return 'text-green-600'; if (ratio <= 10) return 'text-yellow-600'; return 'text-red-600'; } function npfBadgeVariant( ratio: number | undefined, ): 'default' | 'secondary' | 'destructive' | 'outline' { if (ratio === undefined) return 'outline'; if (ratio < 5) return 'default'; if (ratio <= 10) return 'secondary'; return 'destructive'; } // ─── Page ──────────────────────────────────────────────────── export default function Dashboard({ stats, overdue_count, today_collections, npf_ratio, recent_activities, pending_approvals, }: DashboardPageProps) { const { auth } = usePage().props; const { can } = usePermissions(); const actions = [ { title: 'Anggota Baru', icon: , href: members.create().url, permission: 'members.create', }, { title: 'Pembiayaan Baru', icon: , href: financing.create().url, permission: 'financing.create', }, { title: 'Jurnal Entry', icon: , href: accounting.journal.create().url, permission: 'accounting.create_journal', }, ].filter((action) => can(action.permission)); return (
{/* Welcome */}

Selamat Datang, {auth.user.name}

Berikut ringkasan koperasi hari ini.
{/* Quick Actions */} {actions.length > 0 && (
{actions.map((action, i) => ( ))}
)}
{/* 2. Total Savings */} Total Simpanan
{formatIDR(stats.savings.total_balance)}
{stats.savings.accounts_count.toLocaleString( 'id-ID', )}{' '} rekening aktif {/* 3. Active Financings */} Pembiayaan Aktif
{stats.financing.active_count.toLocaleString( 'id-ID', )}
Overdue:{' '} {overdue_count} {' '} · Pengajuan:{' '} {stats.financing.proposed_count} Portfolio:{' '} {formatIDR( stats.financing.total_portfolio, )}
{/* ── KPI Cards ─────────────────────────────── */}
{/* 1. Total Members */} Total Anggota
{stats.members.total.toLocaleString('id-ID')}
Terverifikasi:{' '} {stats.members.active} {' '} · Belum:{' '} {stats.members.unverified} {stats.members.new_this_month > 0 && ( +{stats.members.new_this_month} bulan ini )} {/* 4. NPF Ratio */} Rasio NPF } >
{npf_ratio?.toFixed(2) ?? '0.00'}%
Target < 5% {/* 5. Today's Collections */} Tagihan Hari Ini
{formatIDR(today_collections)}
Total pembayaran diterima hari ini
{/* ── Bottom Section ────────────────────────── */}
{/* Portfolio Summary */} Ringkasan Portfolio

Total Anggota

{stats.members.total.toLocaleString( 'id-ID', )}

Total Simpanan

{formatIDR(stats.savings.total_balance)}

Portfolio Pembiayaan

{formatIDR( stats.financing.total_portfolio, )}

Rasio NPF

} >

{npf_ratio?.toFixed(2) ?? '0.00'}%

{/* Overdue Alert */} {can('financing.view') && ( Pembiayaan Bermasalah

Pembiayaan overdue

{overdue_count}

)} {/* Pending Approvals */} Persetujuan Tertunda Pengajuan pembiayaan menunggu review {[...Array(3)].map((_, i) => (
))}
} >
{pending_approvals?.length === 0 ? (

Tidak ada pengajuan tertunda.

) : ( pending_approvals?.map((item) => (
{item.account_number} {formatIDR( item.principal_amount, )}
Tgl:{' '} {item.created_at ? new Date( item.created_at, ).toLocaleDateString( 'id-ID', ) : '-'} Review
)) )}
{/* Recent Activities */} Aktivitas Terakhir Log aktivitas sistem terbaru {[...Array(5)].map((_, i) => (
))}
} >
{recent_activities?.length === 0 ? (

Belum ada aktivitas.

) : ( recent_activities?.map((log) => (
{log.action} {log.created_at ? new Date( log.created_at, ).toLocaleString( 'id-ID', ) : '-'}

{log.entity_type} # {log.entity_id} ·{' '} {log.ip_address}

)) )}
); }