import { Head, router } from '@inertiajs/react'; import { ArrowDownIcon, ArrowUpIcon, Award, BarChart3, CircleDollarSign, UserPlus, Users, } from 'lucide-react'; import { useMemo, useState } from 'react'; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import AppLayout from '@/layouts/app-layout'; import { formatIDR } from '@/lib/formatters'; import dailyCollectionRoutes from '@/routes/daily-collection'; import type { BreadcrumbItem } from '@/types'; import type { CollectorPerformance, PerformanceData, } from '@/types/daily-collection'; import { Skeleton } from '@/components/ui/skeleton'; interface PageProps { performanceData?: PerformanceData; filters: { year: number; month: number; }; } const MONTH_NAMES = [ 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember', ]; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Penagihan Harian', href: dailyCollectionRoutes.index().url, }, { title: 'Laporan Performa Staff', href: dailyCollectionRoutes.performance().url, }, ]; type SortKey = keyof CollectorPerformance; export default function Performance({ performanceData, filters }: PageProps) { const summary = performanceData?.summary; const collectors = performanceData?.collectors ?? []; const [sortKey, setSortKey] = useState('members_recruited'); const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc'); const handleFilterChange = (year: number, month: number) => { router.get( dailyCollectionRoutes.performance().url, { year, month }, { preserveState: true, preserveScroll: true }, ); }; const currentYear = new Date().getFullYear(); const years = Array.from({ length: 5 }, (_, i) => currentYear - i); const sortedCollectors = useMemo(() => { return [...collectors].sort((a, b) => { const aVal = a[sortKey]; const bVal = b[sortKey]; if (typeof aVal === 'number' && typeof bVal === 'number') { return sortDir === 'desc' ? bVal - aVal : aVal - bVal; } return 0; }); }, [collectors, sortKey, sortDir]); const handleSort = (key: SortKey) => { if (sortKey === key) { setSortDir((prev) => (prev === 'desc' ? 'asc' : 'desc')); } else { setSortKey(key); setSortDir('desc'); } }; return (
{/* Header */}

Laporan Performa Staff

Performa bulanan seluruh staff — rekrutmen anggota baru sebagai KPI utama.
{/* Summary Cards */}
{[ { title: 'Anggota Baru', icon: UserPlus, value: summary?.total_members_recruited, desc: 'Total direkrut bulan ini', primary: true, }, { title: 'Pengajuan Pembiayaan', icon: BarChart3, value: summary?.total_financing_proposals, desc: 'Diajukan bulan ini', }, { title: 'Total Penagihan', icon: CircleDollarSign, value: summary ? formatIDR(summary.total_collected) : undefined, desc: summary ? `Rata-rata sukses: ${summary.average_success_rate}%` : 'Memuat...', }, { title: 'Top Recruiter', icon: Award, value: summary?.top_recruiter, desc: 'Perekrut anggota terbanyak', special: true, }, ].map((card, i) => ( {card.title} {summary ? (
{card.value}
) : ( )}

{card.desc}

))}
{/* Performance Table */} {!performanceData ? (
{[...Array(5)].map((_, i) => ( ))}
) : collectors.length === 0 ? (

Tidak Ada Data

Belum ada data performa collector untuk periode ini.

) : (
{sortedCollectors.map( (collector, index) => ( ), )}
# Collector
)}
); } function SortableHeader({ label, columnKey, sortKey, sortDir, onSort, isPrimary = false, }: { label: string; columnKey: SortKey; sortKey: SortKey; sortDir: 'asc' | 'desc'; onSort: (key: SortKey) => void; isPrimary?: boolean; }) { const isActive = sortKey === columnKey; return ( onSort(columnKey)} > {label}{' '} {isActive && (sortDir === 'desc' ? ( ) : ( ))} ); } function PerformanceRow({ collector, rank, }: { collector: CollectorPerformance; rank: number; }) { const successColor = collector.success_rate >= 80 ? 'text-emerald-600 dark:text-emerald-400' : collector.success_rate >= 50 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400'; const achievementColor = collector.achievement_rate >= 80 ? 'text-emerald-600 dark:text-emerald-400' : collector.achievement_rate >= 50 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400'; return ( {rank <= 3 ? ( {rank} ) : ( {rank} )}
{collector.collector_name.charAt(0).toUpperCase()}
{collector.collector_name}
{collector.members_recruited} {collector.financing_proposals} {collector.tasks_assigned} {collector.tasks_completed} {collector.success_rate}% {formatIDR(collector.amount_collected)} {collector.achievement_rate}% {collector.overdue_count > 0 ? ( {collector.overdue_count} ) : ( 0 )} ); }