1024 lines
40 KiB
JavaScript
1024 lines
40 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useEffect, useRef, Fragment } from 'react';
|
|
import Geocode from 'react-geocode';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Avatar,
|
|
Paper,
|
|
Stack,
|
|
Typography,
|
|
Table,
|
|
TableCell,
|
|
TableBody,
|
|
TableHead,
|
|
IconButton,
|
|
TableRow,
|
|
Tooltip,
|
|
TableContainer,
|
|
Backdrop,
|
|
Collapse,
|
|
Grid,
|
|
Box,
|
|
Skeleton,
|
|
Divider
|
|
} from '@mui/material';
|
|
var utc = require('dayjs/plugin/utc');
|
|
import dayjs from 'dayjs';
|
|
dayjs.extend(utc);
|
|
import {
|
|
MdDirectionsBike,
|
|
MdMyLocation,
|
|
MdPersonPin,
|
|
MdCheckCircle,
|
|
MdCancel,
|
|
MdGroups,
|
|
MdEdit,
|
|
MdKeyboardArrowDown,
|
|
MdKeyboardArrowUp,
|
|
MdLocationOn,
|
|
MdBatteryStd,
|
|
MdPowerSettingsNew,
|
|
MdSpeed,
|
|
MdGpsFixed,
|
|
MdAccessTime,
|
|
MdInventory2,
|
|
MdTwoWheeler
|
|
} from 'react-icons/md';
|
|
import LocationAutocomplete from 'components/nearle_components/LocationAutocomplete';
|
|
import DebounceSearchBar from 'components/nearle_components/DebounceSearchBar';
|
|
import CircularLoader from 'components/CircularLoader';
|
|
import { fetchAllRiders, getallridersummary, getriderstatus } from 'pages/api/api';
|
|
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
|
|
import LoaderWithImage from 'components/nearle_components/LoaderWithImage';
|
|
import { OrdersTableSkeleton } from '../orders/OrdersTableSkeleton';
|
|
import { OpenToast } from 'components/third-party/OpenToast';
|
|
import axios from 'axios';
|
|
|
|
// ============================================================================
|
|
// Design tokens — shared with the deliveries / tenants / customers pages so
|
|
// every surface (header, KPI tiles, table, badges, dialog) speaks the same
|
|
// visual language. Brand purple `#662582` is the canonical primary; status
|
|
// colours are semantic and distinct from the brand.
|
|
// ============================================================================
|
|
const DT = {
|
|
radiusPill: 999,
|
|
radiusCard: 16,
|
|
shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
|
|
shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
|
|
shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
|
|
textPrimary: '#0f172a',
|
|
textSecondary: '#64748b',
|
|
textMuted: '#94a3b8',
|
|
borderSubtle: '#e2e8f0',
|
|
divider: '#f1f5f9',
|
|
surface: '#ffffff',
|
|
surfaceAlt: '#f8fafc'
|
|
};
|
|
const a = (c, suffix) => `${c}${suffix}`;
|
|
const tint = (c) => a(c, '08');
|
|
const soft = (c) => a(c, '18');
|
|
const ring = (c) => a(c, '26');
|
|
const edge = (c) => a(c, '55');
|
|
|
|
const BRAND = '#662582';
|
|
const BRAND_LIGHT = '#9255AB';
|
|
|
|
const SoftPaper = (props) => (
|
|
<Paper
|
|
{...props}
|
|
sx={{
|
|
mt: 0.75,
|
|
borderRadius: 2,
|
|
boxShadow: DT.shadowPop,
|
|
border: '1px solid',
|
|
borderColor: 'divider',
|
|
overflow: 'hidden'
|
|
}}
|
|
/>
|
|
);
|
|
|
|
const AccentAvatar = ({ color, selected, size = 24, children }) => (
|
|
<Avatar
|
|
sx={{
|
|
width: size,
|
|
height: size,
|
|
bgcolor: selected ? color : soft(color),
|
|
color: selected ? '#fff' : color,
|
|
transition: 'background-color 0.15s, color 0.15s'
|
|
}}
|
|
>
|
|
{children}
|
|
</Avatar>
|
|
);
|
|
|
|
// Status palette — semantic only (do NOT swap for brand purple). Used by the
|
|
// per-row status badges and the lifecycle tabs (ALL, Active).
|
|
const STATUS_META = {
|
|
active: { label: 'Active', color: '#10b981', icon: MdCheckCircle },
|
|
inactive: { label: 'Inactive', color: '#ef4444', icon: MdCancel },
|
|
online: { label: 'Online', color: '#10b981', icon: MdCheckCircle },
|
|
offline: { label: 'Offline', color: '#ef4444', icon: MdCancel },
|
|
idle: { label: 'Idle', color: '#f59e0b', icon: MdAccessTime },
|
|
unknown: { label: 'Unknown', color: '#94a3b8', icon: MdInventory2 }
|
|
};
|
|
|
|
// Pill-tab definitions for the rider listing tabs. Keeps brand purple for the
|
|
// "ALL" view and emerald for "Active" so the colour matches the count's meaning.
|
|
const TAB_META = [
|
|
{ key: 0, label: 'All Riders', color: BRAND, icon: MdGroups, countKey: 'total' },
|
|
{ key: 1, label: 'Active', color: '#10b981', icon: MdCheckCircle, countKey: 'active' }
|
|
];
|
|
|
|
const KPI_META = (summary) => [
|
|
{ key: 'total', label: 'Total Riders', color: BRAND, icon: MdGroups, value: summary?.total ?? 0 },
|
|
{ key: 'active', label: 'Active Riders', color: '#10b981', icon: MdCheckCircle, value: summary?.active ?? 0 },
|
|
{ key: 'inactive', label: 'Inactive Riders', color: '#ef4444', icon: MdCancel, value: summary?.inactive ?? 0 }
|
|
];
|
|
|
|
const Riders = () => {
|
|
const navigate = useNavigate();
|
|
const loadMoreRef = useRef();
|
|
const containerRef = useRef();
|
|
const [searchword, setSearchword] = useState('');
|
|
const [debouncedSearch, setDebouncedSearch] = useState('');
|
|
const [locaName, setLocoName] = useState('All');
|
|
const [appId, setAppId] = useState(0);
|
|
const [tabvalue, setTabvalue] = useState(0);
|
|
const roleid = localStorage.getItem('roleid');
|
|
const [logsRow, setLogsRow] = useState(null);
|
|
const [riderLogsdata, setRiderLogsdata] = useState(null);
|
|
|
|
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
|
|
|
|
const handleChangetab = (i) => {
|
|
setTabvalue(i);
|
|
setLogsRow(null);
|
|
};
|
|
|
|
// ==============================|| getallridersummary||============================== //
|
|
const { data: allRidersSummary, isLoading: riderSummarysLoading } = useQuery({
|
|
queryKey: ['allriders', appId, tabvalue],
|
|
queryFn: getallridersummary
|
|
});
|
|
|
|
// ==============================|| getRiderLogs (riders)||============================== //
|
|
const getRiderLogs = async (userid) => {
|
|
try {
|
|
const res = await axios.get(`${process.env.REACT_APP_URL}/utils/getriderperiodiclogs?userid=${userid}`);
|
|
if (res.data.data.length == 0) {
|
|
setLogsRow(null);
|
|
OpenToast(res.data.message, 'error', 2000);
|
|
} else {
|
|
setRiderLogsdata(res.data.data);
|
|
}
|
|
} catch (err) {
|
|
OpenToast(err.message, 'error', 2000);
|
|
}
|
|
};
|
|
|
|
// ==============================|| getriderstatus||============================== //
|
|
const {
|
|
data: ridersStatus,
|
|
isLoading: riderStatusLoading,
|
|
isError: riderstatusIsError,
|
|
error: riderStatusError
|
|
} = useQuery({
|
|
queryKey: ['ridersStatus'],
|
|
queryFn: getriderstatus
|
|
});
|
|
|
|
// ==============================|| fetchAllRiders||============================== //
|
|
const {
|
|
data: allRidersData,
|
|
isLoading: allRidersLoading,
|
|
isFetchingNextPage,
|
|
fetchNextPage,
|
|
hasNextPage
|
|
} = useInfiniteQuery({
|
|
queryKey: ['allriders', appId, debouncedSearch, tabvalue],
|
|
queryFn: fetchAllRiders,
|
|
getNextPageParam: (lastPage, pages) => (lastPage.details?.length ? pages.length + 1 : undefined)
|
|
});
|
|
|
|
const rows = allRidersData?.pages.flatMap((page) => page.details) || [];
|
|
|
|
useEffect(() => {
|
|
if (!hasNextPage) return;
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
if (entries[0].isIntersecting) {
|
|
fetchNextPage();
|
|
}
|
|
},
|
|
{
|
|
root: document.querySelector('.MuiTableContainer-root'),
|
|
rootMargin: '0px',
|
|
threshold: 1.0
|
|
}
|
|
);
|
|
if (loadMoreRef.current) observer.observe(loadMoreRef.current);
|
|
return () => {
|
|
if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
|
|
};
|
|
}, [hasNextPage, fetchNextPage]);
|
|
|
|
const handleScroll = (event) => {
|
|
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
|
|
if (scrollTop + clientHeight >= scrollHeight - 50) {
|
|
if (hasNextPage && !isFetchingNextPage) {
|
|
fetchNextPage();
|
|
}
|
|
}
|
|
};
|
|
|
|
const errMessage = riderstatusIsError ? riderStatusError : null;
|
|
useEffect(() => {
|
|
if (errMessage) {
|
|
OpenToast(errMessage, 'error', 2000);
|
|
}
|
|
}, [errMessage]);
|
|
|
|
// Per-row status meta — falls back to "unknown" if the rider's state key
|
|
// isn't in the palette (e.g. brand-new status string from the backend).
|
|
const getRowStatusMeta = (row) => {
|
|
if (tabvalue == 0) {
|
|
const key = (row.status || '').toLowerCase() === 'active' ? 'active' : 'inactive';
|
|
return STATUS_META[key];
|
|
}
|
|
const state = ridersStatus?.find((s) => s.userid === row.userid);
|
|
const key = (state?.status || 'unknown').toLowerCase();
|
|
return STATUS_META[key] || STATUS_META.unknown;
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Backdrop
|
|
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
|
open={allRidersLoading || riderSummarysLoading || riderStatusLoading}
|
|
>
|
|
<CircularLoader color="inherit" />
|
|
</Backdrop>
|
|
|
|
{/* ============================================= || Header | ============================================= */}
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
mb: { xs: 1.5, md: 2 },
|
|
p: { xs: 1.5, sm: 2, md: 2.5 },
|
|
borderRadius: DT.radiusCard / 8,
|
|
border: '1px solid',
|
|
borderColor: DT.borderSubtle,
|
|
background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
|
|
boxShadow: DT.shadowMd
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={{ xs: 'column', sm: 'row' }}
|
|
alignItems={{ xs: 'flex-start', sm: 'center' }}
|
|
justifyContent="space-between"
|
|
spacing={{ xs: 1.5, sm: 2 }}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
|
|
<Avatar
|
|
sx={{
|
|
width: { xs: 40, sm: 48 },
|
|
height: { xs: 40, sm: 48 },
|
|
bgcolor: BRAND,
|
|
color: '#fff',
|
|
boxShadow: `0 6px 18px ${ring(BRAND)}`
|
|
}}
|
|
>
|
|
<MdDirectionsBike size={22} />
|
|
</Avatar>
|
|
<Stack>
|
|
<Typography
|
|
variant="h3"
|
|
sx={{
|
|
fontWeight: 800,
|
|
color: DT.textPrimary,
|
|
lineHeight: 1.1,
|
|
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
|
|
}}
|
|
>
|
|
Riders
|
|
</Typography>
|
|
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
|
|
<Box
|
|
sx={{
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: '50%',
|
|
bgcolor: '#10b981',
|
|
boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
|
|
}}
|
|
/>
|
|
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
|
Live · {locaName || 'All Zones'}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
<LocationAutocomplete
|
|
locaName={locaName}
|
|
setAppId={setAppId}
|
|
setLocoName={setLocoName}
|
|
pill
|
|
accentColor={BRAND}
|
|
icon={<MdMyLocation size={14} />}
|
|
placeholder="Select Zone"
|
|
paperComponent={SoftPaper}
|
|
sx={{ width: { xs: '100%', sm: 280 }, zIndex: 100 }}
|
|
/>
|
|
</Stack>
|
|
</Paper>
|
|
|
|
{/* ============================================= || KPI Cards | ============================================= */}
|
|
<Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }} sx={{ mt: '1px' }}>
|
|
{KPI_META(allRidersSummary).map((item) => {
|
|
const Icon = item.icon;
|
|
return (
|
|
<Grid item key={item.key} xs={12} sm={4}>
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
p: { xs: 1.25, sm: 1.75, md: 2.25 },
|
|
borderRadius: DT.radiusCard / 8,
|
|
border: '1px solid',
|
|
borderColor: DT.borderSubtle,
|
|
background: '#fff',
|
|
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
|
|
'&:hover': {
|
|
transform: 'translateY(-3px)',
|
|
boxShadow: DT.shadowMd,
|
|
borderColor: edge(item.color)
|
|
}
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: 3,
|
|
background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
|
|
}}
|
|
/>
|
|
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
|
|
<Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
color: DT.textSecondary,
|
|
fontWeight: 700,
|
|
letterSpacing: 0.4,
|
|
textTransform: 'uppercase',
|
|
fontSize: { xs: 10, sm: 11 },
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis'
|
|
}}
|
|
>
|
|
{item.label}
|
|
</Typography>
|
|
{riderSummarysLoading ? (
|
|
<Skeleton sx={{ width: 70, height: { xs: 28, md: 36 } }} animation="wave" />
|
|
) : (
|
|
<Typography
|
|
sx={{
|
|
fontWeight: 800,
|
|
color: DT.textPrimary,
|
|
lineHeight: 1.1,
|
|
fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' }
|
|
}}
|
|
>
|
|
{item.value}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
<Avatar
|
|
sx={{
|
|
width: { xs: 36, sm: 42, md: 48 },
|
|
height: { xs: 36, sm: 42, md: 48 },
|
|
bgcolor: soft(item.color),
|
|
color: item.color,
|
|
boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
|
|
flexShrink: 0
|
|
}}
|
|
>
|
|
<Icon size={20} />
|
|
</Avatar>
|
|
</Stack>
|
|
</Paper>
|
|
</Grid>
|
|
);
|
|
})}
|
|
</Grid>
|
|
|
|
{/* ============================================= || Status Tabs + Search || ============================================= */}
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
mt: { xs: 1.5, md: 2 },
|
|
p: { xs: 1, md: 1.5 },
|
|
borderTopLeftRadius: DT.radiusCard / 8,
|
|
borderTopRightRadius: DT.radiusCard / 8,
|
|
borderBottomLeftRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
border: '1px solid',
|
|
borderColor: DT.borderSubtle,
|
|
borderBottom: 0,
|
|
background: '#fff'
|
|
}}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
gap={1.5}
|
|
sx={{ flexWrap: 'wrap-reverse' }}
|
|
>
|
|
<Stack
|
|
direction="row"
|
|
spacing={0.75}
|
|
sx={{
|
|
flex: 1,
|
|
overflowX: 'auto',
|
|
py: 0.5,
|
|
px: 0.25,
|
|
'&::-webkit-scrollbar': { height: 6 },
|
|
'&::-webkit-scrollbar-thumb': { backgroundColor: DT.borderSubtle, borderRadius: 4 }
|
|
}}
|
|
>
|
|
{TAB_META.map((t) => {
|
|
const Icon = t.icon;
|
|
const active = tabvalue === t.key;
|
|
const count = allRidersSummary?.[t.countKey] ?? 0;
|
|
return (
|
|
<Box
|
|
key={t.key}
|
|
onClick={() => handleChangetab(t.key)}
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: { xs: 0.625, md: 0.875 },
|
|
pl: 0.5,
|
|
pr: { xs: 1, md: 1.25 },
|
|
py: 0.5,
|
|
flexShrink: 0,
|
|
cursor: 'pointer',
|
|
borderRadius: 999,
|
|
border: `1.5px solid ${active ? t.color : edge(t.color)}`,
|
|
bgcolor: active ? t.color : tint(t.color),
|
|
color: active ? '#fff' : t.color,
|
|
fontWeight: 700,
|
|
boxShadow: active ? `0 6px 18px ${ring(t.color)}` : 'none',
|
|
transition: 'all 0.18s',
|
|
'&:hover': {
|
|
borderColor: t.color,
|
|
boxShadow: active ? `0 6px 18px ${ring(t.color)}` : `0 0 0 3px ${ring(t.color)}`
|
|
}
|
|
}}
|
|
>
|
|
<Avatar
|
|
sx={{
|
|
width: { xs: 22, md: 26 },
|
|
height: { xs: 22, md: 26 },
|
|
bgcolor: active ? 'rgba(255,255,255,0.22)' : soft(t.color),
|
|
color: active ? '#fff' : t.color
|
|
}}
|
|
>
|
|
<Icon size={13} />
|
|
</Avatar>
|
|
<Typography variant="caption" sx={{ fontWeight: 800, fontSize: { xs: 11.5, md: 13 }, lineHeight: 1 }}>
|
|
{t.label}
|
|
</Typography>
|
|
<Box
|
|
sx={{
|
|
minWidth: { xs: 22, md: 26 },
|
|
height: { xs: 18, md: 22 },
|
|
px: 0.625,
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
borderRadius: 999,
|
|
fontSize: { xs: 10, md: 11 },
|
|
fontWeight: 800,
|
|
bgcolor: active ? 'rgba(255,255,255,0.22)' : '#fff',
|
|
color: active ? '#fff' : t.color,
|
|
border: active ? 'none' : `1px solid ${edge(t.color)}`
|
|
}}
|
|
>
|
|
{riderSummarysLoading ? <Skeleton variant="text" width={14} height={10} /> : count}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Stack>
|
|
|
|
<Box sx={{ width: { xs: '100%', sm: 240, lg: 280 }, flex: { xs: '1 1 100%', sm: '0 0 auto' } }}>
|
|
<DebounceSearchBar
|
|
value={searchword}
|
|
onChange={setSearchword}
|
|
onDebouncedChange={setDebouncedSearch}
|
|
placeholder="Search riders (ctrl+k)"
|
|
sx={{
|
|
m: 0,
|
|
width: '100%',
|
|
borderRadius: 999,
|
|
bgcolor: tint(BRAND),
|
|
'& fieldset': { borderColor: edge(BRAND), borderWidth: 1.5 },
|
|
'&:hover fieldset': { borderColor: BRAND },
|
|
'&.Mui-focused fieldset': { borderColor: BRAND, borderWidth: 2 },
|
|
'&.Mui-focused': { boxShadow: `0 0 0 3px ${ring(BRAND)}` }
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
</Paper>
|
|
|
|
{/* ============================================= || Table || ============================================= */}
|
|
<Paper
|
|
elevation={0}
|
|
sx={{
|
|
borderTopLeftRadius: 0,
|
|
borderTopRightRadius: 0,
|
|
borderBottomLeftRadius: DT.radiusCard / 8,
|
|
borderBottomRightRadius: DT.radiusCard / 8,
|
|
border: '1px solid',
|
|
borderColor: DT.borderSubtle,
|
|
overflow: 'hidden',
|
|
background: '#fff'
|
|
}}
|
|
>
|
|
<TableContainer
|
|
ref={containerRef}
|
|
onScroll={handleScroll}
|
|
sx={{
|
|
maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
|
|
'&::-webkit-scrollbar': { width: 10, height: 10 },
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: edge(BRAND),
|
|
borderRadius: 8,
|
|
'&:hover': { backgroundColor: BRAND }
|
|
},
|
|
'&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
|
|
}}
|
|
>
|
|
<Table stickyHeader sx={{ minWidth: { xs: 1100, md: 1300 } }}>
|
|
<TableHead>
|
|
<TableRow
|
|
sx={{
|
|
'& th': {
|
|
backgroundColor: DT.surfaceAlt,
|
|
color: DT.textSecondary,
|
|
fontSize: { xs: 10, md: 11 },
|
|
fontWeight: 800,
|
|
letterSpacing: 0.6,
|
|
textTransform: 'uppercase',
|
|
whiteSpace: 'nowrap',
|
|
borderBottom: `1px solid ${DT.borderSubtle}`,
|
|
py: { xs: 1, md: 1.25 },
|
|
px: { xs: 1, md: 2 }
|
|
}
|
|
}}
|
|
>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>ID</TableCell>
|
|
<TableCell>Rider</TableCell>
|
|
<TableCell>Address</TableCell>
|
|
<TableCell>Vehicle</TableCell>
|
|
<TableCell>Shift</TableCell>
|
|
<TableCell align="center">Time</TableCell>
|
|
<TableCell>Fare</TableCell>
|
|
<TableCell>Fuel</TableCell>
|
|
<TableCell align="center">Status</TableCell>
|
|
{roleid == 1 && <TableCell align="right">Action</TableCell>}
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{allRidersLoading && <OrdersTableSkeleton col={6} />}
|
|
|
|
{rows?.length === 0 && !allRidersLoading && (
|
|
<TableRow>
|
|
<TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ py: 6 }}>
|
|
<Stack alignItems="center" spacing={1.5}>
|
|
<Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
|
|
<MdTwoWheeler size={28} />
|
|
</Avatar>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
|
|
No riders to show
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: DT.textSecondary }}>
|
|
{searchword
|
|
? 'Try a different keyword.'
|
|
: `No ${tabvalue === 0 ? '' : 'active '}riders for this zone.`}
|
|
</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
|
|
{rows?.length !== 0 &&
|
|
rows?.map((row, index) => {
|
|
const statusMeta = getRowStatusMeta(row);
|
|
const StatusIcon = statusMeta.icon;
|
|
const expanded = logsRow === row.userid;
|
|
return (
|
|
<Fragment key={row.userid ?? index}>
|
|
<TableRow
|
|
sx={{
|
|
cursor: 'pointer',
|
|
transition: 'background-color 0.15s',
|
|
'& td': {
|
|
borderBottom: `1px solid ${DT.divider}`,
|
|
py: { xs: 1, md: 1.5 },
|
|
px: { xs: 1, md: 2 }
|
|
},
|
|
'&:hover': { backgroundColor: DT.surfaceAlt },
|
|
...(expanded && { backgroundColor: tint(BRAND) })
|
|
}}
|
|
>
|
|
<TableCell>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: DT.textMuted }}>
|
|
{String(index + 1).padStart(2, '0')}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
px: 1,
|
|
py: 0.375,
|
|
borderRadius: 999,
|
|
bgcolor: tint(BRAND),
|
|
border: `1px solid ${edge(BRAND)}`,
|
|
color: BRAND,
|
|
fontWeight: 800,
|
|
fontSize: 11,
|
|
minWidth: 56
|
|
}}
|
|
>
|
|
#{row?.userid}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<Avatar
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
bgcolor: soft(BRAND),
|
|
color: BRAND,
|
|
fontWeight: 800,
|
|
fontSize: 16,
|
|
border: `1px solid ${edge(BRAND)}`
|
|
}}
|
|
>
|
|
{(row.fullname || row.username || '?').charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
<Stack sx={{ minWidth: 0 }}>
|
|
<Typography
|
|
variant="subtitle2"
|
|
sx={{ fontWeight: 700, color: DT.textPrimary, whiteSpace: 'nowrap' }}
|
|
>
|
|
{row.username || '—'}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: DT.textSecondary }}>
|
|
{row.contactno || '—'}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell sx={{ maxWidth: 220 }}>
|
|
<Tooltip title={row.address || ''} placement="top">
|
|
<Stack>
|
|
<Typography
|
|
variant="caption"
|
|
sx={{ color: DT.textSecondary, fontWeight: 600 }}
|
|
noWrap
|
|
>
|
|
{row.suburb || (row.address ? row.address.slice(0, 20) + '…' : '—')}
|
|
</Typography>
|
|
<Typography variant="caption" sx={{ color: DT.textMuted }} noWrap>
|
|
{row.city || ''}
|
|
</Typography>
|
|
</Stack>
|
|
</Tooltip>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Stack direction="row" alignItems="center" spacing={0.75}>
|
|
<AccentAvatar color="#0ea5e9" size={22}>
|
|
<MdTwoWheeler size={12} />
|
|
</AccentAvatar>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
|
|
{row.vehicleno || '—'}
|
|
</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
|
#{row.shiftid ?? '—'}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
<Stack spacing={0.5} alignItems="center">
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 0.375,
|
|
px: 0.875,
|
|
py: 0.25,
|
|
borderRadius: 999,
|
|
bgcolor: tint('#10b981'),
|
|
border: `1px solid ${edge('#10b981')}`,
|
|
color: '#10b981',
|
|
fontSize: 10.5,
|
|
fontWeight: 800,
|
|
minWidth: 88,
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{row.starttime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.starttime}`).format('hh:mm A') : '—'}
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 0.375,
|
|
px: 0.875,
|
|
py: 0.25,
|
|
borderRadius: 999,
|
|
bgcolor: tint('#ef4444'),
|
|
border: `1px solid ${edge('#ef4444')}`,
|
|
color: '#ef4444',
|
|
fontSize: 10.5,
|
|
fontWeight: 800,
|
|
minWidth: 88,
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
{row.endtime ? dayjs(`${dayjs().format('MM-DD-YYYY')} ${row.endtime}`).format('hh:mm A') : '—'}
|
|
</Box>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
|
|
{row.basefare ?? '—'}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: DT.textPrimary }}>
|
|
{row.fuelcharge ?? '—'}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
spacing={0.5}
|
|
sx={{
|
|
display: 'inline-flex',
|
|
pl: 0.5,
|
|
pr: 1,
|
|
py: 0.25,
|
|
borderRadius: 999,
|
|
bgcolor: tint(statusMeta.color),
|
|
border: `1px solid ${edge(statusMeta.color)}`,
|
|
color: statusMeta.color
|
|
}}
|
|
>
|
|
<AccentAvatar color={statusMeta.color} size={20}>
|
|
<StatusIcon size={12} />
|
|
</AccentAvatar>
|
|
<Typography variant="caption" sx={{ fontWeight: 800, fontSize: 11, lineHeight: 1 }}>
|
|
{statusMeta.label}
|
|
</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
{roleid == 1 && (
|
|
<TableCell align="right">
|
|
<Stack direction="row" spacing={0.75} justifyContent="flex-end">
|
|
<Tooltip title="Edit rider" placement="top">
|
|
<IconButton
|
|
size="small"
|
|
sx={{
|
|
bgcolor: soft(BRAND),
|
|
color: BRAND,
|
|
border: `1px solid ${edge(BRAND)}`,
|
|
'&:hover': { bgcolor: BRAND, color: '#fff' }
|
|
}}
|
|
onClick={() => {
|
|
navigate('/nearle/riders/edit', { state: { riderdata: row } });
|
|
}}
|
|
>
|
|
<MdEdit size={14} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
{tabvalue != 0 && (
|
|
<Tooltip title={expanded ? 'Hide logs' : 'View live logs'} placement="top">
|
|
<IconButton
|
|
size="small"
|
|
sx={{
|
|
bgcolor: expanded ? '#0ea5e9' : soft('#0ea5e9'),
|
|
color: expanded ? '#fff' : '#0ea5e9',
|
|
border: `1px solid ${edge('#0ea5e9')}`,
|
|
'&:hover': { bgcolor: '#0ea5e9', color: '#fff' }
|
|
}}
|
|
onClick={() => {
|
|
if (row.userid == logsRow) {
|
|
setLogsRow(null);
|
|
} else {
|
|
setLogsRow(row.userid);
|
|
getRiderLogs(row.userid);
|
|
}
|
|
}}
|
|
>
|
|
{expanded ? <MdKeyboardArrowUp size={14} /> : <MdKeyboardArrowDown size={14} />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
</Stack>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
|
|
{/* ============ Collapsible row — live rider logs ============ */}
|
|
{expanded && tabvalue !== 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ p: 0, borderBottom: `1px solid ${DT.divider}` }}>
|
|
<Collapse in={expanded} timeout="auto" unmountOnExit>
|
|
<Box
|
|
sx={{
|
|
p: { xs: 1.5, md: 2 },
|
|
bgcolor: tint(BRAND),
|
|
borderTop: `1px solid ${edge(BRAND)}`
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1.25 }}>
|
|
<AccentAvatar color={BRAND} size={26}>
|
|
<MdGpsFixed size={14} />
|
|
</AccentAvatar>
|
|
<Typography
|
|
sx={{
|
|
fontWeight: 800,
|
|
color: DT.textSecondary,
|
|
letterSpacing: 0.6,
|
|
textTransform: 'uppercase',
|
|
fontSize: 11
|
|
}}
|
|
>
|
|
Live telemetry — {row.username || `Rider #${row.userid}`}
|
|
</Typography>
|
|
</Stack>
|
|
<Grid container spacing={1.25}>
|
|
<LogChip
|
|
color="#ef4444"
|
|
icon={MdLocationOn}
|
|
label="Location"
|
|
value={
|
|
riderLogsdata?.latitude
|
|
? `${riderLogsdata.latitude}, ${riderLogsdata.longitude}`
|
|
: '—'
|
|
}
|
|
/>
|
|
<LogChip
|
|
color="#10b981"
|
|
icon={MdBatteryStd}
|
|
label="Battery"
|
|
value={riderLogsdata?.battery ? `${riderLogsdata.battery}%` : 'N/A'}
|
|
/>
|
|
<LogChip
|
|
color={riderLogsdata?.is_charging ? '#10b981' : '#94a3b8'}
|
|
icon={MdPowerSettingsNew}
|
|
label="Charging"
|
|
value={riderLogsdata?.is_charging ? 'Charging' : 'Not Charging'}
|
|
/>
|
|
<LogChip
|
|
color="#0ea5e9"
|
|
icon={MdSpeed}
|
|
label="Speed"
|
|
value={
|
|
riderLogsdata?.speed !== undefined ? `${riderLogsdata.speed} km/h` : '—'
|
|
}
|
|
/>
|
|
<LogChip
|
|
color="#8b5cf6"
|
|
icon={MdGpsFixed}
|
|
label="Accuracy"
|
|
value={
|
|
riderLogsdata?.accuracy !== undefined ? `${riderLogsdata.accuracy} m` : '—'
|
|
}
|
|
/>
|
|
<LogChip
|
|
color="#f59e0b"
|
|
icon={MdAccessTime}
|
|
label="Log time"
|
|
value={riderLogsdata?.logdate || '—'}
|
|
/>
|
|
<LogChip
|
|
color={BRAND}
|
|
icon={MdInventory2}
|
|
label="Active order"
|
|
value={riderLogsdata?.orderid || 'N/A'}
|
|
/>
|
|
<LogChip
|
|
color={
|
|
riderLogsdata?.status === 'idle' ? '#f59e0b' : '#10b981'
|
|
}
|
|
icon={MdCheckCircle}
|
|
label="Status"
|
|
value={riderLogsdata?.status || 'unknown'}
|
|
/>
|
|
</Grid>
|
|
</Box>
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
})}
|
|
|
|
{rows?.length !== 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={roleid == 1 ? 11 : 10} sx={{ borderBottom: 'none' }}>
|
|
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
|
|
{isFetchingNextPage || hasNextPage ? (
|
|
<LoaderWithImage />
|
|
) : (
|
|
<Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 600 }}>
|
|
No more riders
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Paper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
// Inline stat chip used in the rider-logs collapse row. Mirrors the StatChip
|
|
// pattern from the pricing page so the telemetry block reads at a glance.
|
|
const LogChip = ({ color, icon: Icon, label, value }) => (
|
|
<Grid item xs={6} sm={4} md={3}>
|
|
<Stack
|
|
direction="row"
|
|
alignItems="center"
|
|
spacing={1}
|
|
sx={{
|
|
px: 1.125,
|
|
py: 0.75,
|
|
borderRadius: 1.75,
|
|
bgcolor: '#fff',
|
|
border: `1px solid ${edge(color)}`,
|
|
minWidth: 0
|
|
}}
|
|
>
|
|
<AccentAvatar color={color} size={28}>
|
|
<Icon size={14} />
|
|
</AccentAvatar>
|
|
<Stack sx={{ minWidth: 0 }}>
|
|
<Typography
|
|
sx={{
|
|
color: DT.textMuted,
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.4,
|
|
fontSize: 9.5
|
|
}}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography
|
|
sx={{
|
|
color: DT.textPrimary,
|
|
fontWeight: 800,
|
|
fontSize: 13,
|
|
lineHeight: 1.2,
|
|
whiteSpace: 'nowrap',
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
mt: 0.25
|
|
}}
|
|
>
|
|
{value}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
);
|
|
|
|
export default Riders;
|