import React, { useState } from 'react'; import { Head, router } from '@inertiajs/react'; import AdminLayout from '@/Layouts/AdminLayout'; import { toast } from '@/Components/UI/Toast'; import Modal from '@/Components/UI/Modal'; import AdminSettlementDirectoryPanel from './Components/AdminSettlementDirectoryPanel'; import AdminSettlementWorksheetPanel from './Components/AdminSettlementWorksheetPanel'; import AdminSettlementHeroCard from './Components/AdminSettlementHeroCard'; import AdminSettlementRecentFeedCard from './Components/AdminSettlementRecentFeedCard'; import SettlementSlipModal from './Components/SettlementSlipModal'; /** * SettlementsIndex * * Apple HIG-grade dual-workspace for Admin Settlements & Accounts Payable. * - Desktop (md+): Split-screen ergonomics (Left Master Directory, Right Adaptive Worksheet / Overview) * - Mobile ( Directory -> Recent Feed), * with modal popup bottom-sheet for supplier worksheet inspection & payout. */ export default function SettlementsIndex({ suppliers = [], stats = {}, recentSettlements = { data: [] }, activeShift = null, initialSelectedSupplierId = null, }) { const [selectedSupplierId, setSelectedSupplierId] = useState(initialSelectedSupplierId); const [isMobileModalOpen, setIsMobileModalOpen] = useState(Boolean(initialSelectedSupplierId)); const [isSubmitting, setIsSubmitting] = useState(false); const [selectedSlip, setSelectedSlip] = useState(null); const selectedSupplier = suppliers.find((s) => s.id === selectedSupplierId) || null; const formatRp = (num) => new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(num || 0); const handleSelectSupplierDesktop = (id) => { setSelectedSupplierId(id); }; const handleSelectSupplierMobile = (id) => { setSelectedSupplierId(id); setIsMobileModalOpen(true); }; const handleCloseMobileModal = () => { setIsMobileModalOpen(false); setSelectedSupplierId(null); }; const handlePayoutSubmit = (payload) => { if (!selectedSupplier || isSubmitting) return; setIsSubmitting(true); router.post(`/admin/settlements/${selectedSupplier.id}/payout`, payload, { preserveScroll: true, onSuccess: () => { toast.success(`Pencairan dana untuk ${selectedSupplier.name} berhasil dibukukan.`); setIsMobileModalOpen(false); }, onError: (errs) => { const msg = Object.values(errs)[0] || 'Gagal memproses pencairan dana.'; toast.error(msg); }, onFinish: () => { setIsSubmitting(false); }, }); }; return (

{/* ── DESKTOP SPLIT VIEW (md: and up) ── */}

{/* Master Directory: Fixed compact width on desktop */}

{/* Detail Worksheet Desk: Takes all remaining space */}

setSelectedSupplierId(null)} onSelectSupplier={handleSelectSupplierDesktop} onSubmitPayout={handlePayoutSubmit} isSubmitting={isSubmitting} onOpenSlip={setSelectedSlip} />

{/* ── MOBILE VERTICAL STREAM (< md) ── */} {/* Smooth natural single-scroll through each section */}

{/* Section 1: Executive Progress Hero */}

{/* Section 2: Directory Panel */}

{/* Section 3: Recent Settlements Archive */}

{/* ── MOBILE DETAIL WORKSHEET MODAL POPUP ── */} {selectedSupplier && (

)} {/* Official Receipt Slip Modal */} setSelectedSlip(null)} />

); }