import { Head, Link, router, usePage } from '@inertiajs/react'; import { ArrowLeft, MoreHorizontal, Pencil, UserCheck, UserX } from 'lucide-react'; import { useMemo, useState } from 'react'; import { edit as advanceEdit, index as advancesIndex, staff as advancesStaff, updateStatus as advanceUpdateStatus, } from '@/actions/App/Http/Controllers/PermanentEmployeeAdvanceController'; import { ConfirmActionDialog } from '@/components/confirm-action-dialog'; import { PermanentEmployeeAdvanceDetailDialog, SettlementBadge, } from '@/components/employees/permanent-employee-advance-detail-dialog'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { useLanguage } from '@/contexts/language-context'; import { formatEmployeeJoiningDateNumericOrDash, formatMoneyAmountOrDash, } from '@/lib/dates'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; export default function PermanentEmployeeAdvancesStaff({ employee, summary, advances }) { const { t, locale } = useLanguage(); const p = t.permanentEmployeeAdvancesPage; const page = usePage(); const auth = page.props.auth ?? {}; const canUpdate = auth.canUpdatePermanentAdvances === true; const [viewRecord, setViewRecord] = useState(null); const [toToggle, setToToggle] = useState(null); const [toggling, setToggling] = useState(false); const breadcrumbs = useMemo( () => [ { title: t.dashboard.breadcrumb, href: dashboard() }, { title: t.nav.employeeManagement, href: '#' }, { title: p.breadcrumb, href: advancesIndex.url() }, { title: employee.full_name, href: advancesStaff.url(employee.id), }, ], [t.dashboard.breadcrumb, t.nav.employeeManagement, p.breadcrumb, employee], ); const labels = useMemo( () => ({ ...p, cancel: t.appActions.cancel, close: t.appActions.dismiss, }), [p, t.appActions.cancel, t.appActions.dismiss], ); function formatType(type) { return type === 'product' ? p.typeProduct : p.typeCash; } function confirmToggle() { if (!toToggle) { return; } setToggling(true); router.patch( advanceUpdateStatus.url(toToggle.id), { is_active: !toToggle.is_active }, { preserveScroll: true, onFinish: () => { setToggling(false); setToToggle(null); }, }, ); } return (
{employee.full_name} {employee.designation_name ? `${p.staffDetailsSubtitle} · ${employee.designation_name}` : p.staffDetailsSubtitle}

{p.summaryTotalAdvance}

{formatMoneyAmountOrDash(summary.total_advances, locale)}

{p.summaryTotalPaid}

{formatMoneyAmountOrDash(summary.total_paid, locale)}

{p.summaryTotalRemaining}

{formatMoneyAmountOrDash(summary.total_remaining, locale)}

{p.colAdvanceNumber} {p.colAdvanceDate} {p.colAdvanceType} {p.colAdvanceAmount} {p.colPaidAmount} {p.colRemainingBalance} {p.colStatus} {canUpdate ? ( {p.colAction} ) : null} {advances.length === 0 ? ( {p.empty} ) : ( advances.map((row) => ( {row.advance_number} {formatEmployeeJoiningDateNumericOrDash( row.advance_date, locale, )} {formatType(row.type)} {formatMoneyAmountOrDash(row.amount, locale)} {formatMoneyAmountOrDash(row.paid_amount, locale)} {formatMoneyAmountOrDash(row.unpaid_amount, locale)}
{!row.is_active ? (
{p.statusInactive}
) : null}
{canUpdate ? ( setViewRecord(row)} > {p.viewRecordDetails} {p.editAdvance} setToToggle(row)} > {row.is_active ? ( <> {p.deactivateAdvance} ) : ( <> {p.activateAdvance} )} ) : null} )) )}
{ if (!open) { setViewRecord(null); } }} record={viewRecord} labels={labels} locale={locale} /> { if (!open) { setToToggle(null); } }} title={ toToggle?.is_active ? p.confirmDeactivateTitle : p.confirmActivateTitle } description={ toToggle?.is_active ? p.confirmDeactivateBody : p.confirmActivateBody } confirmLabel={ toToggle?.is_active ? p.deactivateAdvance : p.activateAdvance } cancelLabel={t.appActions.cancel} onConfirm={confirmToggle} processing={toggling} /> ); }