233 lines
11 KiB
JavaScript
233 lines
11 KiB
JavaScript
import { useState, useEffect, useMemo } from 'react';
|
|
import {
|
|
Grid, Card, Box, Stack, Typography, Button, Divider, LinearProgress, CircularProgress, Alert,
|
|
Table, TableBody, TableCell, TableHead, TableRow, TableContainer
|
|
} from '@mui/material';
|
|
import RefreshIcon from '@mui/icons-material/Refresh';
|
|
import ApartmentOutlinedIcon from '@mui/icons-material/ApartmentOutlined';
|
|
import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined';
|
|
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
|
|
import HandshakeOutlinedIcon from '@mui/icons-material/HandshakeOutlined';
|
|
import HistoryOutlinedIcon from '@mui/icons-material/HistoryOutlined';
|
|
import DonutLargeOutlinedIcon from '@mui/icons-material/DonutLargeOutlined';
|
|
import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
|
|
import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined';
|
|
|
|
import PageHeader from '@/components/PageHeader';
|
|
import StatCard from '@/components/StatCard';
|
|
import StatusChip from '@/components/StatusChip';
|
|
import DonutChart from '@/components/charts/DonutChart';
|
|
import UserAvatar from '@/components/UserAvatar';
|
|
import EmptyState from '@/components/EmptyState';
|
|
import { fetchClients, fetchUsers } from '@/utils/apiClient';
|
|
import { toClient, toUser } from '@/utils/mappers';
|
|
import { titleCase } from '@/utils/format';
|
|
|
|
const STATUS_COLOR = { newclient: '#00A2AE', contacted: '#FFBF00', onboarded: '#00A854', lost: '#F04134' };
|
|
const statusColor = (s) => STATUS_COLOR[String(s || '').toLowerCase()] || '#8C8C8C';
|
|
const BAR_COLORS = ['#C01227', '#00A2AE', '#00A854', '#FFBF00', '#9E0E20', '#8C8C8C', '#D6515C'];
|
|
|
|
function Panel({ icon: Icon, title, action, color = 'primary', noPadding = false, children }) {
|
|
return (
|
|
<Card sx={{
|
|
height: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
borderRadius: 4,
|
|
boxShadow: '0 10px 30px rgba(0,0,0,0.03)',
|
|
border: '1px solid rgba(0,0,0,0.04)'
|
|
}}>
|
|
<Stack
|
|
direction="row" spacing={1.5} alignItems="center"
|
|
sx={{
|
|
px: 3, py: 2, borderBottom: 1, borderColor: 'divider',
|
|
background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, transparent 100%)`
|
|
}}
|
|
>
|
|
<Box sx={{ width: 40, height: 40, borderRadius: 2, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${color}.lighter`, color: `${color}.main`, boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.05)' }}>
|
|
<Icon fontSize="small" />
|
|
</Box>
|
|
<Typography variant="h6" sx={{ fontWeight: 700, color: 'grey.800', flexGrow: 1, letterSpacing: '-0.3px' }}>{title}</Typography>
|
|
{action}
|
|
</Stack>
|
|
<Box sx={{ p: noPadding ? 0 : 3, flexGrow: 1 }}>{children}</Box>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default function Dashboard() {
|
|
const [clients, setClients] = useState([]);
|
|
const [team, setTeam] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
const load = () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
Promise.all([fetchClients(), fetchUsers()])
|
|
.then(([cs, us]) => {
|
|
setClients((cs || []).map(toClient));
|
|
setTeam((us || []).map(toUser));
|
|
})
|
|
.catch((e) => setError(e.message || 'Failed to load dashboard data'))
|
|
.finally(() => setLoading(false));
|
|
};
|
|
|
|
useEffect(() => { load(); }, []);
|
|
|
|
const stats = useMemo(() => ({
|
|
total: clients.length,
|
|
newCount: clients.filter((c) => c.status === 'newClient').length,
|
|
parcels: clients.reduce((s, c) => s + c.parcelVolume, 0),
|
|
contracts: clients.reduce((s, c) => s + c.activeContracts, 0)
|
|
}), [clients]);
|
|
|
|
const statusData = useMemo(() => {
|
|
const m = {};
|
|
clients.forEach((c) => { m[c.status] = (m[c.status] || 0) + 1; });
|
|
return Object.entries(m).sort((a, b) => b[1] - a[1]).map(([status, value]) => ({ label: titleCase(status), value, color: statusColor(status) }));
|
|
}, [clients]);
|
|
|
|
const byType = useMemo(() => {
|
|
const m = {};
|
|
clients.forEach((c) => { const t = c.businessType || 'other'; m[t] = (m[t] || 0) + 1; });
|
|
return Object.entries(m).sort((a, b) => b[1] - a[1]);
|
|
}, [clients]);
|
|
const maxType = byType[0]?.[1] || 1;
|
|
|
|
const recent = useMemo(
|
|
() => [...clients].sort((a, b) => String(b.lastUpdated).localeCompare(String(a.lastUpdated))).slice(0, 6),
|
|
[clients]
|
|
);
|
|
|
|
const today = new Date().toLocaleDateString('en-IN', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
|
|
|
if (loading) {
|
|
return (
|
|
<>
|
|
<PageHeader title="Dashboard" breadcrumbs={[{ label: 'Dashboard' }]} />
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', py: 12 }}><CircularProgress /></Box>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Dashboard"
|
|
breadcrumbs={[{ label: 'Dashboard' }]}
|
|
action={<Button variant="outlined" startIcon={<RefreshIcon />} onClick={load}>Refresh</Button>}
|
|
/>
|
|
|
|
{error && <Alert severity="error" sx={{ mb: 2.5 }} action={<Button color="inherit" size="small" onClick={load}>Retry</Button>}>{error}</Alert>}
|
|
|
|
|
|
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Clients" value={stats.total} icon={ApartmentOutlinedIcon} color="primary" caption="All registered" /></Grid>
|
|
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="New Clients" value={stats.newCount} icon={FiberNewOutlinedIcon} color="primary" caption="Awaiting onboarding" /></Grid>
|
|
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Parcel Volume" value={stats.parcels.toLocaleString('en-IN')} icon={Inventory2OutlinedIcon} color="primary" caption="Across all clients" /></Grid>
|
|
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Active Contracts" value={stats.contracts} icon={HandshakeOutlinedIcon} color="primary" caption="Currently running" /></Grid>
|
|
|
|
<Grid item xs={12} lg={8}>
|
|
<Panel icon={HistoryOutlinedIcon} title="Recent Clients" color="primary" noPadding>
|
|
{recent.length === 0 ? (
|
|
<EmptyState title="No clients yet" caption="Add a client to see it here." />
|
|
) : (
|
|
<TableContainer>
|
|
<Table sx={{ minWidth: 600 }}>
|
|
<TableHead>
|
|
<TableRow sx={{ '& th': { bgcolor: 'grey.50', fontWeight: 700, color: 'grey.700', textTransform: 'uppercase', fontSize: '0.72rem', letterSpacing: 0.4 } }}>
|
|
<TableCell>Client</TableCell>
|
|
<TableCell>Type</TableCell>
|
|
<TableCell>Location</TableCell>
|
|
<TableCell align="right">Parcels</TableCell>
|
|
<TableCell>Status</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{recent.map((c) => (
|
|
<TableRow key={c.id} hover>
|
|
<TableCell>
|
|
<Stack direction="row" spacing={1.25} alignItems="center">
|
|
<UserAvatar name={c.name} size={32} />
|
|
<Typography variant="body2" sx={{ fontWeight: 600, color: 'grey.800' }}>{c.name}</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell><Typography variant="body2">{titleCase(c.businessType) || '—'}</Typography></TableCell>
|
|
<TableCell><Typography variant="body2">{c.city || '—'}{c.businessState ? `, ${c.businessState}` : ''}</Typography></TableCell>
|
|
<TableCell align="right" sx={{ fontWeight: 600 }}>{c.parcelVolume.toLocaleString('en-IN')}</TableCell>
|
|
<TableCell><StatusChip status={c.status} /></TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</Panel>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} lg={4}>
|
|
<Panel icon={DonutLargeOutlinedIcon} title="Clients by Status" color="primary">
|
|
<Box sx={{ py: 1.5 }}>
|
|
{statusData.length === 0
|
|
? <EmptyState title="No data" />
|
|
: <DonutChart data={statusData} centerValue={stats.total} centerLabel="Clients" />}
|
|
</Box>
|
|
</Panel>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} lg={8}>
|
|
<Panel icon={CategoryOutlinedIcon} title="Clients by Business Type" color="primary">
|
|
{byType.length === 0 ? (
|
|
<EmptyState title="No data" />
|
|
) : (
|
|
<Stack spacing={2.25}>
|
|
{byType.map(([type, count], i) => (
|
|
<Box key={type}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 0.75 }}>
|
|
<Stack direction="row" spacing={1} alignItems="center">
|
|
<Box sx={{ width: 10, height: 10, borderRadius: '3px', bgcolor: BAR_COLORS[i % BAR_COLORS.length] }} />
|
|
<Typography variant="body2" sx={{ fontWeight: 600, color: 'grey.800' }}>{titleCase(type)}</Typography>
|
|
</Stack>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{count} · {Math.round((count / clients.length) * 100)}%
|
|
</Typography>
|
|
</Stack>
|
|
<LinearProgress
|
|
variant="determinate"
|
|
value={(count / maxType) * 100}
|
|
sx={{ height: 8, borderRadius: 4, bgcolor: 'grey.100', '& .MuiLinearProgress-bar': { borderRadius: 4, backgroundColor: BAR_COLORS[i % BAR_COLORS.length] } }}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Panel>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} lg={4}>
|
|
<Panel icon={GroupsOutlinedIcon} title={`App Users · ${team.length}`} color="primary">
|
|
{team.length === 0 ? (
|
|
<EmptyState title="No team users" />
|
|
) : (
|
|
<Stack divider={<Divider />} spacing={0}>
|
|
{team.slice(0, 6).map((u) => (
|
|
<Stack key={u.id} direction="row" spacing={1.5} alignItems="center" sx={{ py: 1.25 }}>
|
|
<UserAvatar name={u.name} size={36} />
|
|
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>{u.name}</Typography>
|
|
<Typography variant="caption" color="text.secondary" noWrap sx={{ display: 'block' }}>{u.email}</Typography>
|
|
</Box>
|
|
<StatusChip status={u.role} />
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Panel>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
);
|
|
}
|