Files
Auditor-Portal-Revamp/src/pages/admin/Allocation.tsx

562 lines
22 KiB
TypeScript

import React, { useEffect, useState, useCallback } from 'react';
import {
Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
Paper, Checkbox, FormControl, InputLabel, Select, MenuItem, ToggleButtonGroup,
ToggleButton, Button, CircularProgress, TablePagination, Typography, Divider,
Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, TextField,
ListItemText, Alert,
} from '@mui/material';
import { adminService } from '../../api/adminService';
import type { AllocationRecord, AdminUser } from '../../api/adminService';
import { accountService } from '../../api/accountService';
import { activityFeedsService } from '../../api/activityFeedsService';
import { useFeedStore } from '../../store/feedStore';
import { useToastStore } from '../../store/toastStore';
interface Organization {
org_id: string;
org_name: string;
db_name: string;
}
interface SiteOption {
site_id: string;
site_name: string;
}
// Mirrors the site-parsing logic in ClientsOverview.tsx/MainLayout.tsx —
// /Master/site's response shape varies (responseData[0].records, nested
// sub_sites, or a plain array).
const parseSites = (sitesRes: any): SiteOption[] => {
let parsedSites: any[] = [];
if (sitesRes?.responseData?.[0]?.records) {
parsedSites = sitesRes.responseData[0].records;
if (parsedSites.length === 1 && Array.isArray(parsedSites[0])) {
parsedSites = parsedSites[0];
} else if (parsedSites.length > 0 && Array.isArray(parsedSites[0])) {
parsedSites = parsedSites.flat();
}
} else if (Array.isArray(sitesRes)) {
parsedSites = sitesRes;
} else if (sitesRes?.data && Array.isArray(sitesRes.data)) {
parsedSites = sitesRes.data;
}
return parsedSites
.map((site) => ({
site_id: site.site_id || (site.sub_sites || []).map((s: any) => s.site_id).filter(Boolean).join(','),
site_name: site.site_name || site.name || site.siteName || site.site_id,
}))
.filter((s) => s.site_id);
};
const PAGE_SIZE = 25;
const BULK_PRESETS = [1000, 2000, 5000, 10000];
// count split equally, remainder to the first users: 100/3 -> 34/33/33
const computeSplit = (count: number, n: number): number[] => {
const base = Math.floor(count / n);
const rem = count % n;
return Array.from({ length: n }, (_, i) => base + (i < rem ? 1 : 0));
};
type ConfirmAction =
| { kind: 'bulk'; count: number }
| { kind: 'unassignAll' }
| { kind: 'moveAll'; toUserId: number }
| { kind: 'unassignSelected' };
export const Allocation: React.FC = () => {
const { assets } = useFeedStore();
const [organizations, setOrganizations] = useState<Organization[]>([]);
const [dbName, setDbName] = useState('');
const [type, setType] = useState<'audits' | 'rectification'>('audits');
const [sort, setSort] = useState<'oldest' | 'newest'>('oldest');
const [dateFrom, setDateFrom] = useState('');
const [dateTo, setDateTo] = useState('');
const [assetId, setAssetId] = useState('');
const [siteId, setSiteId] = useState('');
const [sites, setSites] = useState<SiteOption[]>([]);
const [users, setUsers] = useState<AdminUser[]>([]);
const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
// '' = all, 'null' = unassigned, otherwise a user_id string
const [assignedFilter, setAssignedFilter] = useState('');
const [customCount, setCustomCount] = useState('');
const [moveTargetId, setMoveTargetId] = useState('');
const [records, setRecords] = useState<AllocationRecord[]>([]);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(0);
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
const [loading, setLoading] = useState(false);
const [assigning, setAssigning] = useState(false);
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
useEffect(() => {
(async () => {
try {
const [orgsRes, usersRes] = await Promise.all([
accountService.getOrganizations(),
adminService.getUsers(),
]);
const orgs = (orgsRes as any) || [];
setOrganizations(orgs);
setUsers(usersRes.filter((u) => !u.disabled));
if (orgs.length > 0) setDbName(orgs[0].db_name);
} catch (err) {
useToastStore.getState().showToast('Failed to load organizations/users.', 'error');
}
})();
}, []);
// Sites are org-scoped, and the org being managed here may differ from the
// admin's own logged-in org, so this refetches whenever the selection changes
// rather than reusing the global feedStore (which is scoped to the admin's own org).
useEffect(() => {
const org = organizations.find((o) => o.db_name === dbName);
if (!org) return;
(async () => {
try {
const sitesRes = await activityFeedsService.getOrganizationSites(org.org_id);
setSites(parseSites(sitesRes));
} catch (err) {
useToastStore.getState().showToast('Failed to load sites for this organization.', 'error');
}
})();
setSiteId('');
}, [dbName, organizations]);
// dateTo is a bare date (e.g. "2026-07-09"); video_date is a full timestamp,
// so comparing "<= 2026-07-09" would exclude same-day records after
// midnight - extend it to end-of-day. Also normalize the order: both
// fields are independent and unset by default, so it's easy to end up with
// From after To while filling them in, which would silently match zero
// rows instead of erroring.
const [effectiveDateFrom, effectiveDateTo] = (() => {
if (!dateFrom || !dateTo) return [dateFrom || undefined, dateTo ? `${dateTo}T23:59:59` : undefined];
return dateFrom <= dateTo
? [dateFrom, `${dateTo}T23:59:59`]
: [dateTo, `${dateFrom}T23:59:59`];
})();
const load = useCallback(async () => {
if (!dbName) return;
setLoading(true);
try {
const result = await adminService.getAllocationRecords({
dbName, type, sort, limit: PAGE_SIZE, offset: page * PAGE_SIZE,
dateFrom: effectiveDateFrom,
dateTo: effectiveDateTo,
assetId: assetId || undefined,
siteId: siteId || undefined,
assignedUserId: assignedFilter === '' ? undefined : assignedFilter === 'null' ? 'null' : Number(assignedFilter),
});
setRecords(result.records);
setTotal(result.total);
} catch (err) {
useToastStore.getState().showToast('Failed to load records.', 'error');
} finally {
setLoading(false);
}
}, [dbName, type, sort, page, effectiveDateFrom, effectiveDateTo, assetId, siteId, assignedFilter]);
useEffect(() => {
load();
}, [load]);
useEffect(() => {
setPage(0);
setSelectedIds(new Set());
}, [dbName, type, sort, dateFrom, dateTo, assetId, siteId, assignedFilter]);
const toggleRow = (id: number) => {
setSelectedIds((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
};
const toggleAll = () => {
if (selectedIds.size === records.length) {
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(records.map((r) => r.id)));
}
};
const selectedUsers = users.filter((u) => selectedUserIds.includes(u.user_id));
const selectedOrg = organizations.find((o) => o.db_name === dbName);
const filterUser = users.find((u) => String(u.user_id) === assignedFilter);
const perUserToast = (perUser: { user_id: number; assigned: number }[]) =>
perUser
.map((p) => `${users.find((u) => u.user_id === p.user_id)?.username || `#${p.user_id}`}: ${p.assigned}`)
.join(', ');
const handleAllocateSelected = async () => {
if (selectedIds.size === 0 || selectedUserIds.length === 0) return;
setAssigning(true);
try {
const result = await adminService.assignAllocation({
dbName, type, ids: Array.from(selectedIds), user_ids: selectedUserIds,
});
useToastStore.getState().showToast(
`Allocated ${result.assigned} record(s) — ${perUserToast(result.perUser)}`, 'success');
setSelectedIds(new Set());
load();
} catch (err: any) {
useToastStore.getState().showToast(err?.response?.data?.message || 'Failed to allocate records.', 'error');
} finally {
setAssigning(false);
}
};
const handleBulkAllocate = async (count: number) => {
if (selectedUserIds.length === 0) return;
setConfirmAction(null);
setAssigning(true);
try {
const result = await adminService.assignAllocation({
dbName, type, count, sort, user_ids: selectedUserIds,
dateFrom: effectiveDateFrom,
dateTo: effectiveDateTo,
assetId: assetId || undefined,
siteId: siteId || undefined,
});
useToastStore.getState().showToast(
`Allocated ${result.assigned} record(s) — ${perUserToast(result.perUser)}`, 'success');
setSelectedIds(new Set());
setPage(0);
load();
} catch (err: any) {
useToastStore.getState().showToast(err?.response?.data?.message || 'Failed to bulk-allocate records.', 'error');
} finally {
setAssigning(false);
}
};
const handleReassign = async (params: { fromUserId?: number; toUserId: number | null; ids?: number[] }) => {
setConfirmAction(null);
setAssigning(true);
try {
const result = await adminService.reassignAllocation({ dbName, type, ...params });
const verb = params.toUserId === null ? 'Unassigned' : 'Moved';
useToastStore.getState().showToast(`${verb} ${result.moved} pending record(s).`, 'success');
setSelectedIds(new Set());
setMoveTargetId('');
load();
} catch (err: any) {
useToastStore.getState().showToast(err?.response?.data?.message || 'Failed to update allocation.', 'error');
} finally {
setAssigning(false);
}
};
const customCountNum = parseInt(customCount, 10);
const customCountValid = Number.isInteger(customCountNum) && customCountNum > 0 && customCountNum <= 10000;
const splitPreview = (count: number) => {
if (selectedUsers.length === 0) return '';
const split = computeSplit(count, selectedUsers.length);
return selectedUsers.map((u, i) => `${u.username}: ${split[i]}`).join(' · ');
};
return (
<Box>
<Box sx={{ display: 'flex', gap: 2, mb: 2, flexWrap: 'wrap', alignItems: 'center' }}>
<FormControl size="small" sx={{ minWidth: 180 }}>
<InputLabel>Organization</InputLabel>
<Select label="Organization" value={dbName} onChange={(e) => setDbName(e.target.value)}>
{organizations.map((o) => <MenuItem key={o.org_id} value={o.db_name}>{o.org_name}</MenuItem>)}
</Select>
</FormControl>
<ToggleButtonGroup
value={type}
exclusive
onChange={(_, value) => value && setType(value)}
size="small"
>
<ToggleButton value="audits">Audits</ToggleButton>
<ToggleButton value="rectification">Rectification</ToggleButton>
</ToggleButtonGroup>
<ToggleButtonGroup
value={sort}
exclusive
onChange={(_, value) => value && setSort(value)}
size="small"
>
<ToggleButton value="oldest">Oldest first</ToggleButton>
<ToggleButton value="newest">Newest first</ToggleButton>
</ToggleButtonGroup>
</Box>
<Box sx={{ display: 'flex', gap: 2, mb: 3, flexWrap: 'wrap', alignItems: 'center' }}>
<TextField
label="Video date from"
type="date"
size="small"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
slotProps={{ inputLabel: { shrink: true } }}
/>
<TextField
label="Video date to"
type="date"
size="small"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
slotProps={{ inputLabel: { shrink: true } }}
/>
<FormControl size="small" sx={{ minWidth: 200 }}>
<InputLabel>Asset</InputLabel>
<Select label="Asset" value={assetId} onChange={(e) => setAssetId(e.target.value)}>
<MenuItem value="">All assets</MenuItem>
{assets.map((a: any) => <MenuItem key={a.id} value={a.id}>{a.name}</MenuItem>)}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 200 }}>
<InputLabel>Site</InputLabel>
<Select label="Site" value={siteId} onChange={(e) => setSiteId(e.target.value)}>
<MenuItem value="">All sites</MenuItem>
{sites.map((s) => <MenuItem key={s.site_id} value={s.site_id}>{s.site_name}</MenuItem>)}
</Select>
</FormControl>
<FormControl size="small" sx={{ minWidth: 200 }}>
<InputLabel>Assigned to</InputLabel>
<Select label="Assigned to" value={assignedFilter} onChange={(e) => setAssignedFilter(e.target.value)}>
<MenuItem value="">All records</MenuItem>
<MenuItem value="null">Unassigned only</MenuItem>
{users.map((u) => <MenuItem key={u.user_id} value={String(u.user_id)}>{u.username}</MenuItem>)}
</Select>
</FormControl>
</Box>
{/* Absent-user actions: visible when viewing one user's queue */}
{filterUser && (
<Alert severity="info" sx={{ mb: 2, alignItems: 'center' }}
action={
<Box sx={{ display: 'flex', gap: 1.5, alignItems: 'center' }}>
<Button
size="small"
color="warning"
variant="outlined"
disabled={assigning || total === 0}
onClick={() => setConfirmAction({ kind: 'unassignAll' })}
>
Unassign all pending
</Button>
<FormControl size="small" sx={{ minWidth: 170 }}>
<InputLabel>Move all pending to</InputLabel>
<Select
label="Move all pending to"
value={moveTargetId}
disabled={assigning || total === 0}
onChange={(e) => {
const target = Number(e.target.value);
setMoveTargetId(e.target.value);
setConfirmAction({ kind: 'moveAll', toUserId: target });
}}
>
{users.filter((u) => String(u.user_id) !== assignedFilter).map((u) => (
<MenuItem key={u.user_id} value={String(u.user_id)}>{u.username}</MenuItem>
))}
</Select>
</FormControl>
</Box>
}
>
{total.toLocaleString()} pending record(s) assigned to <strong>{filterUser.username}</strong>
{' '}(matching current filters)
</Alert>
)}
<FormControl size="small" sx={{ minWidth: 280, mb: 2 }}>
<InputLabel>Allocate to (select one or more)</InputLabel>
<Select
multiple
label="Allocate to (select one or more)"
value={selectedUserIds}
onChange={(e) => setSelectedUserIds(typeof e.target.value === 'string' ? [] : (e.target.value as number[]))}
renderValue={(ids) =>
users.filter((u) => (ids as number[]).includes(u.user_id)).map((u) => u.username).join(', ')
}
>
{users.map((u) => (
<MenuItem key={u.user_id} value={u.user_id}>
<Checkbox checked={selectedUserIds.includes(u.user_id)} size="small" />
<ListItemText primary={`${u.username} (${u.role_name})`} />
</MenuItem>
))}
</Select>
</FormControl>
<Box sx={{ display: 'flex', gap: 2, mb: 1, alignItems: 'center', flexWrap: 'wrap' }}>
<Typography variant="body2">{selectedIds.size} selected on this page</Typography>
<Button
variant="contained"
disabled={selectedIds.size === 0 || selectedUserIds.length === 0 || assigning}
onClick={handleAllocateSelected}
>
{selectedUserIds.length > 1 ? 'Split selected equally' : 'Allocate selected'}
</Button>
<Button
variant="outlined"
color="warning"
disabled={selectedIds.size === 0 || assigning}
onClick={() => setConfirmAction({ kind: 'unassignSelected' })}
>
Unassign selected
</Button>
</Box>
<Box sx={{ display: 'flex', gap: 1.5, mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
Bulk assign unassigned records (total, split equally · matches current filters):
</Typography>
{BULK_PRESETS.map((count) => (
<Button
key={count}
variant="outlined"
size="small"
disabled={selectedUserIds.length === 0 || assigning}
onClick={() => setConfirmAction({ kind: 'bulk', count })}
>
{count.toLocaleString()}
</Button>
))}
<TextField
label="Custom count"
size="small"
type="number"
value={customCount}
onChange={(e) => setCustomCount(e.target.value)}
sx={{ width: 130 }}
slotProps={{ htmlInput: { min: 1, max: 10000 } }}
/>
<Button
variant="outlined"
size="small"
disabled={selectedUserIds.length === 0 || !customCountValid || assigning}
onClick={() => setConfirmAction({ kind: 'bulk', count: customCountNum })}
>
Assign
</Button>
</Box>
<Divider sx={{ mb: 2 }} />
{loading ? (
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>
) : (
<TableContainer component={Paper}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={records.length > 0 && selectedIds.size === records.length}
indeterminate={selectedIds.size > 0 && selectedIds.size < records.length}
onChange={toggleAll}
/>
</TableCell>
<TableCell>Anomaly ID</TableCell>
<TableCell>Asset</TableCell>
<TableCell>Plaza</TableCell>
<TableCell>Chainage</TableCell>
<TableCell>Video Date</TableCell>
<TableCell>Assigned To</TableCell>
</TableRow>
</TableHead>
<TableBody>
{records.map((r) => (
<TableRow key={r.id} selected={selectedIds.has(r.id)}>
<TableCell padding="checkbox">
<Checkbox checked={selectedIds.has(r.id)} onChange={() => toggleRow(r.id)} />
</TableCell>
<TableCell>{r.id}</TableCell>
<TableCell>{r.Asset || '—'}</TableCell>
<TableCell>{r.Plaza || '—'}</TableCell>
<TableCell>{r.Chainage || '—'}</TableCell>
<TableCell>{r.video_date ? new Date(r.video_date).toLocaleDateString() : '—'}</TableCell>
<TableCell>{r.assigned_username || '—'}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<TablePagination
component="div"
count={total}
page={page}
onPageChange={(_, newPage) => setPage(newPage)}
rowsPerPage={PAGE_SIZE}
rowsPerPageOptions={[PAGE_SIZE]}
/>
</TableContainer>
)}
<Dialog open={confirmAction !== null} onClose={() => { setConfirmAction(null); setMoveTargetId(''); }}>
<DialogTitle>
{confirmAction?.kind === 'bulk' && 'Confirm bulk allocation'}
{confirmAction?.kind === 'unassignAll' && 'Unassign all pending'}
{confirmAction?.kind === 'moveAll' && 'Move all pending'}
{confirmAction?.kind === 'unassignSelected' && 'Unassign selected'}
</DialogTitle>
<DialogContent>
{confirmAction?.kind === 'bulk' && (
<DialogContentText component="div">
Split the first {confirmAction.count.toLocaleString()} {sort} <strong>unassigned</strong> {type} record(s) in{' '}
{selectedOrg?.org_name || dbName} (matching the current date/asset/site filters) equally:
<Box sx={{ mt: 1.5, fontFamily: 'monospace', fontSize: '0.9rem' }}>
{splitPreview(confirmAction.count)}
</Box>
<Box sx={{ mt: 1.5 }}>
If fewer records are available, users earlier in the list are filled first.
</Box>
</DialogContentText>
)}
{confirmAction?.kind === 'unassignAll' && (
<DialogContentText>
Remove the assignment from all {total.toLocaleString()} pending record(s) currently allocated to{' '}
<strong>{filterUser?.username}</strong> in {selectedOrg?.org_name || dbName}? Records they already
audited keep their name for history/efficiency stats.
</DialogContentText>
)}
{confirmAction?.kind === 'moveAll' && (
<DialogContentText>
Move all {total.toLocaleString()} pending record(s) from <strong>{filterUser?.username}</strong> to{' '}
<strong>{users.find((u) => u.user_id === confirmAction.toUserId)?.username}</strong>? Records already
audited by {filterUser?.username} keep their name for history/efficiency stats.
</DialogContentText>
)}
{confirmAction?.kind === 'unassignSelected' && (
<DialogContentText>
Remove the assignment from the {selectedIds.size} selected pending record(s)?
</DialogContentText>
)}
</DialogContent>
<DialogActions>
<Button onClick={() => { setConfirmAction(null); setMoveTargetId(''); }}>Cancel</Button>
<Button
variant="contained"
onClick={() => {
if (!confirmAction) return;
if (confirmAction.kind === 'bulk') handleBulkAllocate(confirmAction.count);
else if (confirmAction.kind === 'unassignAll') handleReassign({ fromUserId: Number(assignedFilter), toUserId: null });
else if (confirmAction.kind === 'moveAll') handleReassign({ fromUserId: Number(assignedFilter), toUserId: confirmAction.toUserId });
else if (confirmAction.kind === 'unassignSelected') handleReassign({ toUserId: null, ids: Array.from(selectedIds) });
}}
>
Confirm
</Button>
</DialogActions>
</Dialog>
</Box>
);
};