hamid
403 lines
15 KiB
TypeScript
403 lines
15 KiB
TypeScript
'use client';
|
||
import { useState } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { useLocale, useTranslations } from 'next-intl';
|
||
import { useSnackbar } from 'notistack';
|
||
import {
|
||
Box,
|
||
Chip,
|
||
Dialog,
|
||
DialogActions,
|
||
DialogContent,
|
||
DialogTitle,
|
||
Divider,
|
||
MenuItem,
|
||
Skeleton,
|
||
Stack,
|
||
TextField,
|
||
Typography,
|
||
} from '@mui/material';
|
||
import { AppButton, JalaliDateField, Money, StatusChip } from '@/components';
|
||
import type { StatusKind } from '@/components';
|
||
import {
|
||
AdminDataTable,
|
||
AdminEmptyState,
|
||
AdminErrorState,
|
||
AdminPageHeader,
|
||
AdminPager,
|
||
ConfirmDialog,
|
||
} from '@/components/admin';
|
||
import type { AdminTableColumn } from '@/components/admin';
|
||
import { useAdminCapabilities } from '@/hooks';
|
||
import { adminPayoutBatchPath } from '@/constants';
|
||
import { formatNumber, formatShamsiDate } from '@/utils';
|
||
import { PAYOUTS_PAGE_SIZE } from '@/services/payouts/constants';
|
||
import { usePayoutBatches, usePreviewPayoutBatch, useRunPayoutBatch } from '@/services/payouts';
|
||
import type { PayoutBatchStatus, PayoutBatchSummary } from '@/services/payouts/types';
|
||
|
||
/** Batch lifecycle → semantic chip color (server truth; the client only renders it). */
|
||
const BATCH_STATUS_KIND: Record<PayoutBatchStatus, StatusKind> = {
|
||
draft: 'neutral',
|
||
processing: 'info',
|
||
partially_failed: 'pending',
|
||
completed: 'verified',
|
||
failed: 'rejected',
|
||
};
|
||
|
||
const BATCH_STATUSES: readonly PayoutBatchStatus[] = [
|
||
'draft',
|
||
'processing',
|
||
'partially_failed',
|
||
'completed',
|
||
'failed',
|
||
];
|
||
|
||
/**
|
||
* ISO date (`YYYY-MM-DD`) — the wire shape for the batch window. Formats using the browser's **local**
|
||
* date fields, never `toISOString()` (which converts to UTC first): near Tehran local midnight that would
|
||
* silently roll the date back/forward a day from the admin's actual wall-clock date.
|
||
*/
|
||
const isoDate = (d: Date): string => {
|
||
const y = d.getFullYear();
|
||
const m = String(d.getMonth() + 1).padStart(2, '0');
|
||
const day = String(d.getDate()).padStart(2, '0');
|
||
return `${y}-${m}-${day}`;
|
||
};
|
||
|
||
/**
|
||
* Admin payout-batch dashboard (f15) — the reconciliation list of weekly `nurse_payout_batches` and the
|
||
* entry point to previewing + running the next batch. Money is IRR digit-strings rendered as display-only
|
||
* Toman; the server owns eligibility and the holiday-shifted processing date — the client never computes
|
||
* them. Running a batch moves money, so it is gated (`canPayout`), idempotency-keyed, and confirmed.
|
||
*/
|
||
export default function AdminPayoutsPage() {
|
||
const t = useTranslations('admin');
|
||
const locale = useLocale();
|
||
const router = useRouter();
|
||
const caps = useAdminCapabilities();
|
||
|
||
const [status, setStatus] = useState<PayoutBatchStatus | ''>('');
|
||
const [page, setPage] = useState(1);
|
||
const [previewOpen, setPreviewOpen] = useState(false);
|
||
|
||
const filters = { status: status || undefined };
|
||
const batches = usePayoutBatches(filters, page);
|
||
|
||
const items = batches.data?.items ?? [];
|
||
const pageCount = Math.max(1, Math.ceil((batches.data?.total ?? 0) / PAYOUTS_PAGE_SIZE));
|
||
|
||
const columns: AdminTableColumn<PayoutBatchSummary>[] = [
|
||
{
|
||
key: 'period',
|
||
header: t('payout_col_period'),
|
||
render: (b) => `${formatShamsiDate(b.periodStart, locale)} – ${formatShamsiDate(b.periodEnd, locale)}`,
|
||
},
|
||
{
|
||
key: 'count',
|
||
header: t('payout_col_count'),
|
||
render: (b) => b.payoutCount,
|
||
},
|
||
{
|
||
key: 'total',
|
||
header: t('payout_col_total'),
|
||
render: (b) => <Money amountIrr={b.totalAmount} size="sm" />,
|
||
},
|
||
{
|
||
key: 'status',
|
||
header: t('payout_col_status'),
|
||
render: (b) => <StatusChip status={BATCH_STATUS_KIND[b.status]} label={t(`batch_status_${b.status}`)} />,
|
||
},
|
||
{
|
||
key: 'processing',
|
||
header: t('payout_col_processing'),
|
||
render: (b) => (
|
||
<Stack direction="row" sx={{ gap: 0.75, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<span>{formatShamsiDate(b.processingDate, locale)}</span>
|
||
{b.holidayShifted ? (
|
||
<Chip
|
||
size="small"
|
||
label={t('payout_holiday_shift')}
|
||
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
|
||
/>
|
||
) : null}
|
||
</Stack>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
|
||
<AdminPageHeader
|
||
title={t('payout_title')}
|
||
subtitle={t('payout_subtitle')}
|
||
actions={
|
||
<Stack direction="row" sx={{ gap: 1, flexWrap: 'wrap', alignItems: 'center' }}>
|
||
<TextField
|
||
select
|
||
size="small"
|
||
label={t('payout_col_status')}
|
||
value={status}
|
||
onChange={(e) => {
|
||
setStatus(e.target.value as PayoutBatchStatus | '');
|
||
setPage(1);
|
||
}}
|
||
sx={{ minWidth: 160 }}
|
||
>
|
||
<MenuItem value="">{t('filter_all')}</MenuItem>
|
||
{BATCH_STATUSES.map((s) => (
|
||
<MenuItem key={s} value={s}>
|
||
{t(`batch_status_${s}`)}
|
||
</MenuItem>
|
||
))}
|
||
</TextField>
|
||
{caps.canPayout ? (
|
||
<AppButton variant="contained" color="primary" onClick={() => setPreviewOpen(true)}>
|
||
{t('payout_preview')}
|
||
</AppButton>
|
||
) : null}
|
||
</Stack>
|
||
}
|
||
/>
|
||
|
||
{batches.isLoading ? (
|
||
<Stack sx={{ gap: 2 }}>{[0, 1, 2].map((k) => <Skeleton key={k} variant="rounded" height={64} />)}</Stack>
|
||
) : batches.isError ? (
|
||
<AdminErrorState message={t('error_generic')} retryLabel={t('retry')} onRetry={() => batches.refetch()} />
|
||
) : items.length === 0 ? (
|
||
<AdminEmptyState icon="wallet" title={t('payout_empty')} />
|
||
) : (
|
||
<AdminDataTable
|
||
columns={columns}
|
||
rows={items}
|
||
getRowKey={(b) => b.id}
|
||
onRowClick={(b) => router.push(`/${locale}${adminPayoutBatchPath(b.id)}`)}
|
||
ariaLabel={t('payout_title')}
|
||
/>
|
||
)}
|
||
|
||
<AdminPager
|
||
page={page}
|
||
pageCount={pageCount}
|
||
onPrev={() => setPage((p) => Math.max(1, p - 1))}
|
||
onNext={() => setPage((p) => Math.min(pageCount, p + 1))}
|
||
prevLabel={t('prev_page')}
|
||
nextLabel={t('next_page')}
|
||
indicator={t('page_indicator', { page, total: pageCount })}
|
||
/>
|
||
|
||
{previewOpen ? <PreviewBatchDialog canPayout={caps.canPayout} onClose={() => setPreviewOpen(false)} /> : null}
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* The eligibility dry-run + run-batch dialog. Preview is a mutation (runs only when the admin asks), and its
|
||
* eligible/skipped breakdown + the server's holiday-shifted processing date are read straight from the
|
||
* mutation's `data`. Running is idempotency-keyed and confirmed; on success it deep-links to the new batch.
|
||
*/
|
||
function PreviewBatchDialog({ canPayout, onClose }: { canPayout: boolean; onClose: () => void }) {
|
||
const t = useTranslations('admin');
|
||
const locale = useLocale();
|
||
const router = useRouter();
|
||
const { enqueueSnackbar } = useSnackbar();
|
||
|
||
// Default the window to the last 7 days (end = today). A lazy initializer runs the `Date` read once.
|
||
const [periodStart, setPeriodStart] = useState(() =>
|
||
isoDate(new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)),
|
||
);
|
||
const [periodEnd, setPeriodEnd] = useState(() => isoDate(new Date()));
|
||
const [runConfirmOpen, setRunConfirmOpen] = useState(false);
|
||
|
||
const preview = usePreviewPayoutBatch();
|
||
const run = useRunPayoutBatch();
|
||
const result = preview.data;
|
||
|
||
const onPreview = () => {
|
||
if (!periodStart || !periodEnd) return;
|
||
preview.mutate({ periodStart, periodEnd });
|
||
};
|
||
|
||
const onRunConfirm = () => {
|
||
const idempotencyKey = crypto?.randomUUID
|
||
? crypto.randomUUID()
|
||
: `batch_${periodStart}_${periodEnd}_${Date.now()}`;
|
||
run.mutate(
|
||
{ periodStart, periodEnd, idempotencyKey },
|
||
{
|
||
onSuccess: (batch) => {
|
||
setRunConfirmOpen(false);
|
||
onClose();
|
||
enqueueSnackbar(t('payout_ran'), { variant: 'success' });
|
||
router.push(`/${locale}${adminPayoutBatchPath(batch.id)}`);
|
||
},
|
||
},
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Dialog open onClose={run.isPending ? undefined : onClose} fullWidth maxWidth="sm">
|
||
<DialogTitle sx={{ fontWeight: 800 }}>{t('payout_preview_title')}</DialogTitle>
|
||
<DialogContent>
|
||
<Stack direction="row" sx={{ gap: 1.5, mt: 1, flexWrap: 'wrap', alignItems: 'center' }}>
|
||
<JalaliDateField
|
||
size="small"
|
||
label={t('payout_period_start')}
|
||
value={periodStart}
|
||
onChange={setPeriodStart}
|
||
/>
|
||
<JalaliDateField size="small" label={t('payout_period_end')} value={periodEnd} onChange={setPeriodEnd} />
|
||
<AppButton
|
||
variant="outlined"
|
||
color="primary"
|
||
onClick={onPreview}
|
||
disabled={!periodStart || !periodEnd || preview.isPending}
|
||
>
|
||
{t('payout_preview')}
|
||
</AppButton>
|
||
</Stack>
|
||
|
||
{result ? (
|
||
<Stack sx={{ gap: 2, mt: 2.5 }}>
|
||
<Stack direction="row" sx={{ gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_col_processing')}
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||
{formatShamsiDate(result.processingDate, locale)}
|
||
</Typography>
|
||
{result.holidayShifted ? (
|
||
<Chip
|
||
size="small"
|
||
label={t('payout_holiday_shift')}
|
||
sx={{ bgcolor: 'var(--bal-warning)', color: 'var(--bal-warning-contrast)', fontWeight: 500 }}
|
||
/>
|
||
) : null}
|
||
</Stack>
|
||
|
||
<Stack sx={{ gap: 1 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
|
||
{t('payout_eligible_nurses')}
|
||
</Typography>
|
||
{result.eligible.length === 0 ? (
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
—
|
||
</Typography>
|
||
) : (
|
||
<Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
|
||
{result.eligible.map((n) => (
|
||
<Stack key={n.nurseId} sx={{ p: 1.5, gap: 0.5 }}>
|
||
<Stack
|
||
direction="row"
|
||
sx={{ justifyContent: 'space-between', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}
|
||
>
|
||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||
{n.nurseName ?? `#${n.nurseId}`}
|
||
</Typography>
|
||
{!n.hasVerifiedPrimaryIban ? (
|
||
<Chip
|
||
size="small"
|
||
label={t('payout_no_iban')}
|
||
sx={{ bgcolor: 'var(--bal-error)', color: 'var(--bal-error-contrast)', fontWeight: 500 }}
|
||
/>
|
||
) : null}
|
||
</Stack>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_col_gross')}: <Money amountIrr={n.grossEarningsIrr} size="sm" hideUnit /> ·{' '}
|
||
{t('payout_col_clawback')}: <Money amountIrr={n.clawbackAppliedIrr} size="sm" hideUnit /> ·{' '}
|
||
{t('payout_col_net')}: <Money amountIrr={n.netAmountIrr} size="sm" />
|
||
</Typography>
|
||
</Stack>
|
||
))}
|
||
</Stack>
|
||
)}
|
||
</Stack>
|
||
|
||
{result.skipped.length > 0 ? (
|
||
<Stack sx={{ gap: 1 }}>
|
||
<Typography variant="subtitle2" sx={{ fontWeight: 800 }}>
|
||
{t('payout_skipped')}
|
||
</Typography>
|
||
<Stack divider={<Divider />} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 'var(--bal-radius-md)' }}>
|
||
{result.skipped.map((n) => (
|
||
<Stack
|
||
key={n.nurseId}
|
||
direction="row"
|
||
sx={{ p: 1.5, justifyContent: 'space-between', gap: 1, flexWrap: 'wrap' }}
|
||
>
|
||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||
{n.nurseName ?? `#${n.nurseId}`}
|
||
</Typography>
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }} dir="ltr">
|
||
{n.reason}
|
||
</Typography>
|
||
</Stack>
|
||
))}
|
||
</Stack>
|
||
</Stack>
|
||
) : null}
|
||
|
||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_eligibility_note')}
|
||
</Typography>
|
||
</Stack>
|
||
) : null}
|
||
</DialogContent>
|
||
<DialogActions sx={{ px: 3, pb: 2 }}>
|
||
<AppButton variant="text" color="inherit" onClick={onClose} disabled={run.isPending}>
|
||
{t('cancel')}
|
||
</AppButton>
|
||
{canPayout ? (
|
||
<AppButton
|
||
variant="contained"
|
||
color="primary"
|
||
onClick={() => setRunConfirmOpen(true)}
|
||
disabled={!result || run.isPending}
|
||
>
|
||
{t('payout_run')}
|
||
</AppButton>
|
||
) : null}
|
||
</DialogActions>
|
||
|
||
<ConfirmDialog
|
||
open={runConfirmOpen}
|
||
title={t('payout_run_confirm_title')}
|
||
body={
|
||
result ? (
|
||
<Stack sx={{ gap: 1.5, mt: 0.5 }}>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_run_summary_intro')}
|
||
</Typography>
|
||
<Money amountIrr={result.totalNetIrr} size="lg" tone="emphasis" />
|
||
<Stack sx={{ gap: 0.5 }}>
|
||
<Stack direction="row" sx={{ justifyContent: 'space-between', gap: 1 }}>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_run_count_label')}
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||
{formatNumber(result.eligible.length, locale)}
|
||
</Typography>
|
||
</Stack>
|
||
<Stack direction="row" sx={{ justifyContent: 'space-between', gap: 1 }}>
|
||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||
{t('payout_col_processing')}
|
||
</Typography>
|
||
<Typography variant="body2" sx={{ fontWeight: 700 }}>
|
||
{formatShamsiDate(result.processingDate, locale)}
|
||
</Typography>
|
||
</Stack>
|
||
</Stack>
|
||
</Stack>
|
||
) : null
|
||
}
|
||
confirmLabel={t('payout_run')}
|
||
cancelLabel={t('cancel')}
|
||
onConfirm={onRunConfirm}
|
||
onClose={() => setRunConfirmOpen(false)}
|
||
loading={run.isPending}
|
||
requireTypedConfirmation={result ? ['تایید', result.totalNetIrr] : []}
|
||
typedConfirmationLabel={t('payout_run_type_to_confirm')}
|
||
/>
|
||
</Dialog>
|
||
);
|
||
}
|