import { Head, Link, router } from '@inertiajs/react'; import { Calendar, CheckCircle2, CircleDollarSign, ClipboardList, Keyboard, TrendingUp, Users, } from 'lucide-react'; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { usePermissions } from '@/hooks/use-permissions'; import AppLayout from '@/layouts/app-layout'; import { formatIDR } from '@/lib/formatters'; import dailyCollectionRoutes from '@/routes/daily-collection'; import type { BreadcrumbItem } from '@/types'; import type { CollectorSummary, DailyCollectionData, } from '@/types/daily-collection'; interface PageProps { collectionData: DailyCollectionData; filters: { date: string; }; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Penagihan Harian', href: dailyCollectionRoutes.index().url, }, ]; export default function Index({ collectionData, filters }: PageProps) { const { summary, collectors } = collectionData; const { hasAnyRole } = usePermissions(); const handleDateChange = (date: string) => { router.get( dailyCollectionRoutes.index().url, { date }, { preserveState: true, preserveScroll: true }, ); }; return (
{/* Header */}

Penagihan Harian

Ringkasan tugas penagihan collector untuk hari ini.
handleDateChange(e.target.value) } className="w-44" />
{/* Jika user role manager,admin atau teller tampilkan ini */} {hasAnyRole('Manager', 'Administrator', 'Teller') && ( Mode Teller )} {/* end of if function */} Laporan Performa
{/* Stats Cards */}
Collector Aktif
{summary.total_collectors}

Memiliki tugas hari ini

Total Tugas
{summary.total_tasks.toLocaleString('id-ID')}

{summary.total_members} anggota

Target Penagihan
{formatIDR(summary.total_expected)}

Yang harus ditagih

Sudah Terkumpul
{formatIDR(summary.total_collected)}

{summary.overall_completion}% tercapai

{/* Collector Table */}
{collectors.map((collector) => ( ))}
Collector Anggota Tugas Target Terkumpul Progress Aksi
); } function CollectorRow({ collector, date, }: { collector: CollectorSummary; date: string; }) { const completionColor = collector.completion_percentage >= 80 ? 'text-emerald-600 dark:text-emerald-400' : collector.completion_percentage >= 50 ? 'text-amber-600 dark:text-amber-400' : 'text-red-600 dark:text-red-400'; const progressBarColor = collector.completion_percentage >= 80 ? 'bg-emerald-500' : collector.completion_percentage >= 50 ? 'bg-amber-500' : 'bg-red-500'; return (
{collector.collector_name.charAt(0).toUpperCase()}
{collector.collector_name}
{collector.member_count}
{collector.task_count} {collector.paid_count > 0 && ( {collector.paid_count} selesai )}
{formatIDR(collector.expected_amount)} {formatIDR(collector.collected_amount)}
{collector.completion_percentage === 100 ? ( Semua Selesai ) : ( {collector.completion_percentage}% )}
{collector.collector_id > 0 ? ( Lihat Tugas ) : ( Belum ditugaskan )} ); }