feat: implement client overview dashboard and admin portal structure with API services and page components
This commit is contained in:
352
src/pages/admin/AuditHistory.tsx
Normal file
352
src/pages/admin/AuditHistory.tsx
Normal file
@@ -0,0 +1,352 @@
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import {
|
||||
Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
|
||||
Paper, FormControl, InputLabel, Select, MenuItem, ToggleButtonGroup,
|
||||
ToggleButton, CircularProgress, Typography, TextField, Chip, TablePagination,
|
||||
} from '@mui/material';
|
||||
import { adminService } from '../../api/adminService';
|
||||
import type { AuditHistoryUserCount, AuditHistoryRecord } from '../../api/adminService';
|
||||
import { accountService } from '../../api/accountService';
|
||||
import { useToastStore } from '../../store/toastStore';
|
||||
|
||||
interface Organization {
|
||||
org_id: string;
|
||||
org_name: string;
|
||||
db_name: string;
|
||||
}
|
||||
|
||||
type Preset = 'today' | 'overall' | 'custom_day' | 'custom_range';
|
||||
|
||||
const startOfDay = (dateStr: string) => `${dateStr}T00:00:00`;
|
||||
const endOfDay = (dateStr: string) => `${dateStr}T23:59:59`;
|
||||
const todayStr = () => new Date().toISOString().split('T')[0];
|
||||
const RECORDS_PAGE_SIZE = 25;
|
||||
|
||||
const efficiencyColor = (value: number): 'success' | 'warning' | 'error' => {
|
||||
if (value >= 75) return 'success';
|
||||
if (value >= 40) return 'warning';
|
||||
return 'error';
|
||||
};
|
||||
|
||||
// "Assigned" is video_date-based (work whose video arrived in this window)
|
||||
// and "Completed" is Audited_on-based (work actually finished in this
|
||||
// window) - two independent measures, not two views of the same row set. A
|
||||
// user can complete backlog items today with nothing newly assigned today.
|
||||
|
||||
const SummaryCard: React.FC<{ label: string; value: string; color?: string }> = ({ label, value, color }) => (
|
||||
<Paper sx={{ p: 2, minWidth: 160 }}>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>{label}</Typography>
|
||||
<Typography variant="h5" sx={{ fontWeight: 'bold', color }}>{value}</Typography>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
export const AuditHistory: React.FC = () => {
|
||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
||||
const [dbName, setDbName] = useState('');
|
||||
const [type, setType] = useState<'audits' | 'rectification'>('audits');
|
||||
const [preset, setPreset] = useState<Preset>('today');
|
||||
const [customDay, setCustomDay] = useState(todayStr());
|
||||
const [rangeFrom, setRangeFrom] = useState(todayStr());
|
||||
const [rangeTo, setRangeTo] = useState(todayStr());
|
||||
|
||||
const [total, setTotal] = useState(0);
|
||||
const [audited, setAudited] = useState(0);
|
||||
const [notAudited, setNotAudited] = useState(0);
|
||||
const [byUser, setByUser] = useState<AuditHistoryUserCount[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// Drill-down: which user's individual records are currently shown below.
|
||||
const [drillUser, setDrillUser] = useState<AuditHistoryUserCount | null>(null);
|
||||
const [drillRecords, setDrillRecords] = useState<AuditHistoryRecord[]>([]);
|
||||
const [drillTotal, setDrillTotal] = useState(0);
|
||||
const [drillPage, setDrillPage] = useState(0);
|
||||
const [drillLoading, setDrillLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
const orgsRes = await accountService.getOrganizations();
|
||||
const orgs = (orgsRes as any) || [];
|
||||
setOrganizations(orgs);
|
||||
if (orgs.length > 0) setDbName(orgs[0].db_name);
|
||||
} catch (err) {
|
||||
useToastStore.getState().showToast('Failed to load organizations.', 'error');
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const { from, to } = (() => {
|
||||
switch (preset) {
|
||||
case 'today':
|
||||
return { from: startOfDay(todayStr()), to: endOfDay(todayStr()) };
|
||||
case 'custom_day':
|
||||
return { from: startOfDay(customDay), to: endOfDay(customDay) };
|
||||
case 'custom_range':
|
||||
// Both fields default to today, so it's easy to end up with an
|
||||
// inverted range while adjusting them one at a time (e.g. picking a
|
||||
// past "To" before touching "From") - that would silently match zero
|
||||
// rows instead of erroring, so normalize the order here.
|
||||
return rangeFrom <= rangeTo
|
||||
? { from: startOfDay(rangeFrom), to: endOfDay(rangeTo) }
|
||||
: { from: startOfDay(rangeTo), to: endOfDay(rangeFrom) };
|
||||
case 'overall':
|
||||
default:
|
||||
return { from: undefined, to: undefined };
|
||||
}
|
||||
})();
|
||||
|
||||
const load = useCallback(async () => {
|
||||
if (!dbName) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await adminService.getAuditHistorySummary({ dbName, type, from, to });
|
||||
setTotal(result.total);
|
||||
setAudited(result.audited);
|
||||
setNotAudited(result.notAudited);
|
||||
setByUser(result.byUser);
|
||||
} catch (err) {
|
||||
useToastStore.getState().showToast('Failed to load audit history.', 'error');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dbName, type, from, to]);
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
// Changing org/type/date invalidates whatever drill-down was open.
|
||||
setDrillUser(null);
|
||||
}, [load]);
|
||||
|
||||
const loadDrillRecords = useCallback(async (user: AuditHistoryUserCount, pageIndex: number) => {
|
||||
setDrillLoading(true);
|
||||
try {
|
||||
const result = await adminService.getAuditHistoryUserRecords({
|
||||
dbName, type, userId: user.user_id, from, to,
|
||||
limit: RECORDS_PAGE_SIZE, offset: pageIndex * RECORDS_PAGE_SIZE,
|
||||
});
|
||||
setDrillRecords(result.records);
|
||||
setDrillTotal(result.total);
|
||||
} catch (err) {
|
||||
useToastStore.getState().showToast('Failed to load user records.', 'error');
|
||||
} finally {
|
||||
setDrillLoading(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dbName, type, from, to]);
|
||||
|
||||
const handleRowClick = (user: AuditHistoryUserCount) => {
|
||||
if (drillUser?.user_id === user.user_id) {
|
||||
setDrillUser(null);
|
||||
return;
|
||||
}
|
||||
setDrillUser(user);
|
||||
setDrillPage(0);
|
||||
loadDrillRecords(user, 0);
|
||||
};
|
||||
|
||||
const handleDrillPageChange = (newPage: number) => {
|
||||
setDrillPage(newPage);
|
||||
if (drillUser) loadDrillRecords(drillUser, newPage);
|
||||
};
|
||||
|
||||
const completionRate = total > 0 ? Math.round((audited / total) * 1000) / 10 : 0;
|
||||
|
||||
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={preset}
|
||||
exclusive
|
||||
onChange={(_, value) => value && setPreset(value)}
|
||||
size="small"
|
||||
>
|
||||
<ToggleButton value="today">Today</ToggleButton>
|
||||
<ToggleButton value="overall">Overall</ToggleButton>
|
||||
<ToggleButton value="custom_day">Custom day</ToggleButton>
|
||||
<ToggleButton value="custom_range">Custom range</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, alignItems: 'center' }}>
|
||||
{preset === 'custom_day' && (
|
||||
<TextField
|
||||
label="Day"
|
||||
type="date"
|
||||
size="small"
|
||||
value={customDay}
|
||||
onChange={(e) => setCustomDay(e.target.value)}
|
||||
slotProps={{ inputLabel: { shrink: true } }}
|
||||
/>
|
||||
)}
|
||||
{preset === 'custom_range' && (
|
||||
<>
|
||||
<TextField
|
||||
label="From"
|
||||
type="date"
|
||||
size="small"
|
||||
value={rangeFrom}
|
||||
onChange={(e) => setRangeFrom(e.target.value)}
|
||||
slotProps={{ inputLabel: { shrink: true } }}
|
||||
/>
|
||||
<TextField
|
||||
label="To"
|
||||
type="date"
|
||||
size="small"
|
||||
value={rangeTo}
|
||||
onChange={(e) => setRangeTo(e.target.value)}
|
||||
slotProps={{ inputLabel: { shrink: true } }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{loading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ display: 'flex', gap: 2, mb: 3, flexWrap: 'wrap' }}>
|
||||
<SummaryCard label="Total in range" value={total.toLocaleString()} />
|
||||
<SummaryCard label="Audited" value={audited.toLocaleString()} color="#22c55e" />
|
||||
<SummaryCard label="Not audited" value={notAudited.toLocaleString()} color="#f59e0b" />
|
||||
<SummaryCard label="Completion rate" value={`${completionRate}%`} />
|
||||
</Box>
|
||||
|
||||
<Typography variant="subtitle1" sx={{ mb: 0.5 }}>
|
||||
Per-user activity — click a row for their individual records
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ mb: 1, display: 'block', color: 'text.secondary' }}>
|
||||
Assigned = video arrived in this window · Completed = audited in this window (may include older backlog)
|
||||
</Typography>
|
||||
<TableContainer component={Paper} sx={{ mb: drillUser ? 3 : 0 }}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>User</TableCell>
|
||||
<TableCell align="right">Assigned</TableCell>
|
||||
<TableCell align="right">Completed</TableCell>
|
||||
<TableCell align="right">Efficiency</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{byUser.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} align="center" sx={{ color: 'text.secondary' }}>
|
||||
No activity in this range.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{byUser.map((u) => (
|
||||
<TableRow
|
||||
key={u.user_id}
|
||||
hover
|
||||
selected={drillUser?.user_id === u.user_id}
|
||||
onClick={() => handleRowClick(u)}
|
||||
sx={{ cursor: 'pointer' }}
|
||||
>
|
||||
<TableCell>{u.username}</TableCell>
|
||||
<TableCell align="right">{u.assigned.toLocaleString()}</TableCell>
|
||||
<TableCell align="right">{u.completed.toLocaleString()}</TableCell>
|
||||
<TableCell align="right">
|
||||
{u.efficiency === null ? (
|
||||
<Chip size="small" label="N/A" variant="outlined" />
|
||||
) : (
|
||||
<Chip size="small" label={`${u.efficiency}%`} color={efficiencyColor(u.efficiency)} />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{drillUser && (
|
||||
<>
|
||||
<Typography variant="subtitle1" sx={{ mb: 1 }}>
|
||||
Records assigned to {drillUser.username}
|
||||
</Typography>
|
||||
{drillLoading ? (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress /></Box>
|
||||
) : (
|
||||
<TableContainer component={Paper}>
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Anomaly ID</TableCell>
|
||||
<TableCell>Asset</TableCell>
|
||||
<TableCell>Plaza</TableCell>
|
||||
<TableCell>Chainage</TableCell>
|
||||
<TableCell>Video Date</TableCell>
|
||||
<TableCell>Status</TableCell>
|
||||
<TableCell>Audited On</TableCell>
|
||||
<TableCell>Audited By</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{drillRecords.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} align="center" sx={{ color: 'text.secondary' }}>
|
||||
No records found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
{drillRecords.map((r) => (
|
||||
<TableRow key={r.id}>
|
||||
<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.IsAudited ? (
|
||||
<Chip size="small" label="Audited" color="success" />
|
||||
) : (
|
||||
<Chip size="small" label="Pending" color="default" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{r.Audited_on ? new Date(r.Audited_on).toLocaleString() : '—'}</TableCell>
|
||||
<TableCell>
|
||||
{r.audited_username
|
||||
? r.audited_username === drillUser.username
|
||||
? r.audited_username
|
||||
: `${r.audited_username} (reassigned)`
|
||||
: '—'}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<TablePagination
|
||||
component="div"
|
||||
count={drillTotal}
|
||||
page={drillPage}
|
||||
onPageChange={(_, newPage) => handleDrillPageChange(newPage)}
|
||||
rowsPerPage={RECORDS_PAGE_SIZE}
|
||||
rowsPerPageOptions={[RECORDS_PAGE_SIZE]}
|
||||
/>
|
||||
</TableContainer>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user