import { Head, Link, router } from '@inertiajs/react'; import { AlertTriangle, ArrowLeft, Calendar, CheckCircle2, CircleDollarSign, ClipboardList, Clock, MapPin, Phone, Search, Wallet, } from 'lucide-react'; import { useCallback, useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardAction, CardContent, CardHeader, CardTitle, } from '@/components/ui/card'; import { ConfirmDialog } from '@/components/ui/confirm-dialog'; import { Input } from '@/components/ui/input'; import { Pagination } from '@/components/ui/pagination'; import { StatusBadge } from '@/components/ui/status-badge'; import AppLayout from '@/layouts/app-layout'; import { formatDateID, formatIDR } from '@/lib/formatters'; import { toastError, toastLoading, toastSuccess } from '@/lib/toast'; import dailyCollectionRoutes from '@/routes/daily-collection'; import financingRoutes from '@/routes/financing'; import type { BreadcrumbItem } from '@/types'; import type { CollectionTask, CollectorTaskData, } from '@/types/daily-collection'; interface PageProps { taskData: CollectorTaskData; filters: { date: string; search: string; }; } export default function CollectorTasks({ taskData, filters }: PageProps) { const { collector, summary, tasks } = taskData; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Penagihan Harian', href: dailyCollectionRoutes.index().url, }, { title: collector?.name ?? 'Collector', href: '#', }, ]; const [search, setSearch] = useState(filters.search); const [date, setDate] = useState(filters.date); const debounceRef = useRef | null>(null); const navigate = useCallback( (newSearch: string, newDate: string) => { if (collector) { router.get( dailyCollectionRoutes.collectorTasks(collector.id).url, { search: newSearch, date: newDate }, { preserveState: true, preserveScroll: true, replace: true }, ); } }, [collector], ); // Debounce search (300 ms) useEffect(() => { if (debounceRef.current) clearTimeout(debounceRef.current); debounceRef.current = setTimeout(() => { if (search !== filters.search) { navigate(search, date); } }, 300); return () => { if (debounceRef.current) clearTimeout(debounceRef.current); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [search]); const handleDateChange = (newDate: string) => { setDate(newDate); navigate(search, newDate); }; return (
{/* Header */}
{/* Top row: back button + title */}
Kembali

Tugas {collector?.name ?? 'Collector'}

{formatDateID(filters.date)}
{/* Bottom row: search + date — full width on mobile */}
{/* Search */}
setSearch(e.target.value)} placeholder="Cari nama anggota..." className="h-9 w-full rounded-md border bg-background pr-3 pl-9 text-sm focus:ring-1 focus:ring-ring focus:outline-none" />
{/* Date picker */}
handleDateChange(e.target.value) } className="w-full sm:w-40" />
{/* Stats Cards — 2x2 on mobile, 4-col on md+ */}
Tugas Hari Ini
{summary.today_tasks}

Angsuran jatuh tempo

Tunggakan
{summary.overdue_tasks}

Belum dibayar

Target Total Penagihan
{formatIDR(summary.total_expected)}

Total yang harus ditagih

Terkumpul
{formatIDR(summary.collected_today)}

Sisa:{' '} {formatIDR( summary.total_expected - summary.collected_today, )}

{/* Task List */} {tasks.data.length > 0 ? (
{tasks.data.map((task) => ( ))}
{tasks.last_page > 1 && (
)}
) : (
{search ? ( ) : ( )}

{search ? 'Tidak Ditemukan' : 'Tidak Ada Tugas'}

{search ? `Tidak ada anggota dengan nama "${search}".` : 'Tidak ada angsuran yang perlu ditagih pada tanggal ini.'}

{search && ( )}
)}
); } function TaskCard({ task, isOverdue = false, }: { task: CollectionTask; isOverdue?: boolean; }) { const [showConfirmModal, setShowConfirmModal] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const handlePayment = () => { router.post( dailyCollectionRoutes.quickPayment(task.id).url, {}, { preserveScroll: true, onStart: () => { setIsProcessing(true); toastLoading('Memproses pembayaran...'); }, onSuccess: () => { toastSuccess('Pembayaran berhasil dicatat'); setShowConfirmModal(false); }, onError: (errors: Record) => { // console.error('Payment error:', errors); toastError( Object.values(errors)[0] || 'Gagal memproses pembayaran', ); }, onFinish: () => setIsProcessing(false), }, ); }; return (
{/* Overdue indicator */} {isOverdue && task.days_overdue > 0 && (
Terlambat {task.days_overdue} hari
)}
{/* Member Info + Status */}

{task.member.name}

{task.financing.account_number}
{/* Contact & Address */}
{task.member.phone !== '-' && (
{task.member.phone}
)} {task.member.address !== '-' && (
{task.member.address}
)}
{/* Payment Info */}
Angsuran ke-{task.sequence_number} {formatDateID(task.due_date)}
Harus bayar: {formatIDR(task.total_outstanding)}
{/* Quick Pay button */} {task.status !== 'paid' && ( <> )}
); }