import { Head, Link, router } from '@inertiajs/react'; import { AlertTriangle, ArrowLeft, Calendar, CheckCircle2, CircleDollarSign, ClipboardList, MapPin, Phone, Search, User, 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, PaginatedData } from '@/types'; import type { TellerTask } from '@/types/daily-collection'; interface PageProps { tasks: PaginatedData; summary: { total_tasks: number; total_outstanding: number; }; filters: { date: string; search: string; }; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Penagihan Harian', href: dailyCollectionRoutes.index().url, }, { title: 'Mode Teller', href: '#', }, ]; export default function TellerInput({ tasks, summary, filters }: PageProps) { const [search, setSearch] = useState(filters.search); const [date, setDate] = useState(filters.date); const debounceRef = useRef | null>(null); const navigate = useCallback((newSearch: string, newDate: string) => { router.get( dailyCollectionRoutes.teller().url, { search: newSearch, date: newDate }, { preserveState: true, preserveScroll: true, replace: true }, ); }, []); // 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 */}
Kembali

Mode Teller — Penagihan Harian

Input pembayaran langsung tanpa batas collector
{/* Search + date */}
setSearch(e.target.value)} placeholder="Cari nama anggota..." className="h-10 w-full rounded-md border bg-background pr-3 pl-9 text-sm focus:ring-2 focus:ring-ring focus:outline-none" />
handleDateChange(e.target.value) } className="w-full sm:w-44" />
{/* ── Summary strip ── */}
Hasil Pencarian
{summary.total_tasks}

Angsuran jatuh tempo

Total Tagihan
{formatIDR(summary.total_outstanding)}

Outstanding hari ini

Tanggal
{formatDateID(date)}

Tanggal penagihan

{/* ── Task grid ── */} {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}" yang memiliki angsuran jatuh tempo hari ini.` : 'Tidak ada angsuran yang perlu ditagih pada tanggal ini.'}

{search && ( )}
)}
); } // ───────────────────────────────────────────── // Task card // ───────────────────────────────────────────── function TellerTaskCard({ task }: { task: TellerTask }) { const [showConfirm, setShowConfirm] = 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'); setShowConfirm(false); }, onError: (errors: Record) => { toastError( Object.values(errors)[0] || 'Gagal memproses pembayaran', ); }, onFinish: () => setIsProcessing(false), }, ); }; return (
{/* Member + status */}

{task.member.name}

{task.financing.account_number}
{/* Collector badge */}
{task.collector_name}
{/* 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)}
{task.days_overdue > 0 && (
Terlambat {task.days_overdue} hari
)}
{/* Pay button */}
); }