Nearle_express/dailygrubs_console
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

overall updates

Browse Source
This commit is contained in:
joshikannan
2025-11-26 18:24:03 +05:30
parent 12df2e9dc4
commit e71e44319c
35 changed files with 3145 additions and 2404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

461
src/pages/nearle/reports/orderSummary.js
View File

@@ -6,6 +6,8 @@ import { Empty } from 'antd';
import TaskAltIcon from '@mui/icons-material/TaskAlt';
import MyLocationIcon from '@mui/icons-material/MyLocation';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import { enqueueSnackbar } from 'notistack';
import { CalendarMonth } from '@mui/icons-material';
// material-ui
import {
@@ -60,7 +62,8 @@ import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import { useTheme } from '@mui/material/styles';
import TitleCard from '../titleCard';
import { getreportlocationsummary } from '../api/api';
import { getreportlocationsummary, gettenantlocations } from '../api/api';
import CircularLoader from 'components/nearle_components/CircularLoader';
function formatNumberToRupees(value) {
return new Intl.NumberFormat('en-IN', {
@@ -70,6 +73,14 @@ function formatNumberToRupees(value) {
}).format(value);
}
const opentoast = (message, variant, time) => {
enqueueSnackbar(message, {
variant: variant,
anchorOrigin: { vertical: 'top', horizontal: 'right' },
autoHideDuration: time ? time : 1500
});
};
// ==============================|| MUI TABLE - ENHANCED ||============================== //
export default function OrdersReport() {
@@ -95,7 +106,6 @@ export default function OrdersReport() {
const [searchword, setSearchword] = useState('');
const textFieldRef = useRef(null);
const [ridersdata, setRidersdata] = useState(null);
const [tenantLocations, setTenantlocations] = useState([]);
const [selectedLocation, setSelectedLocation] = useState(null);
const [locationId, setLocationId] = useState(0);
@@ -125,18 +135,16 @@ export default function OrdersReport() {
}, []);
// ============================================= || gettenantlocations (branches) || =============================================
const gettenantlocations = async () => {
try {
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations?tenantid=${tenantid}`);
console.log('gettenantlocations', res.data.details);
setTenantlocations(res.data.details);
} catch (err) {
console.log('gettenantlocations', err);
}
};
useEffect(() => {
gettenantlocations();
}, []);
const {
data: tenantLocations,
isLoading: tenantLocationsIsLoading,
isError: tenantLocationsIsError,
error: tenantLocationsError
} = useQuery({
queryKey: ['tenantlocations'],
queryFn: gettenantlocations
});
// ==============================|| fetchOrdersSummary (orders summary)||============================== //
const {
@@ -196,139 +204,153 @@ export default function OrdersReport() {
calculate();
}, [rows]);
// if (isLoadingReports) return <Loader />;
if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message;
let errormessage = '';
if (isErrorReports && reportsError?.message) {
errormessage = `An error has occurred: (isErrorReports) ${reportsError.message}`;
} else if (tenantLocationsIsError && tenantLocationsError?.message) {
errormessage = `An error has occurred: (tenantLocationsIsError) ${tenantLocationsError.message}`;
}
useEffect(() => {
if (errormessage) {
console.log('errormessage', errormessage);
opentoast(errormessage, 'warning', 2000);
}
}, [errormessage]);
return (
<>
{isLoadingReports && <Loader />}
<TitleCard title="Orders Summary" />{' '}
{(isLoadingReports || tenantLocationsIsLoading) && <Loader />}
{(isLoadingReports || tenantLocationsIsLoading) && <CircularLoader />}
<TitleCard
title="Orders Summary"
secondary={
<Stack>
{startdate && enddate && (
<Stack direction="row" spacing={2} flexWrap={'wrap'} gap={1}>
<Chip label={`Orders-${datestatus}`} color="primary" variant="light" size="small" />
<Chip
label={
<Typography noWrap color="secondary">
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
</Typography>
}
variant="combined"
color="warning"
size="small"
deleteIcon={<CalendarMonth style={{ fontSize: 18 }} />}
onDelete={() => {
setOpen(true);
}}
onClick={() => setOpen(true)}
sx={{ cursor: 'pointer' }}
/>
</Stack>
)}
{(!startdate || !enddate) && (
<>
<Stack direction="row" spacing={2}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
</Stack>
</>
)}
</Stack>
}
/>{' '}
<MainCard
content={false}
title={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap={'wrap'} gap={1}>
<Stack>
{startdate && enddate && (
<Stack direction="row" spacing={2} flexWrap={'wrap'} gap={1}>
<Chip label={`Orders-${datestatus}`} color="primary" variant="light" size="small" />
<Chip
label={
<Typography noWrap color="secondary">
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
</Typography>
}
variant="combined"
color="warning"
size="small"
/>
</Stack>
)}
{(!startdate || !enddate) && (
<>
<Stack direction="row" spacing={2}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
</Stack>
</>
)}
</Stack>
<Stack
sx={{
display: 'flex',
flexDirection: 'row',
gap: 2,
flexWrap: 'wrap',
flexGrow: 1,
justifyContent: 'right'
}}
>
<FormControl sx={{ width: 250 }}>
<OutlinedInput
inputRef={textFieldRef}
aria-describedby="header-search-text"
inputProps={{
'aria-label': 'weight'
}}
sx={{ background: 'white' }}
size="large"
id="header-search"
placeholder="Search (ctrl+k)"
value={searchword}
onChange={(e) => {
setSearchword(e.target.value);
}}
autoComplete="off"
startAdornment={
<InputAdornment position="start" sx={{ mr: -0.5 }}>
<SearchOutlined />
</InputAdornment>
}
endAdornment={
<IconButton
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
onClick={() => {
setSearchword('');
}}
>
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
<Stack
direction="row"
gap={2}
flexWrap="wrap"
sx={{
alignItems: 'center',
width: '100%',
justifyContent: 'flex-end'
}}
>
{/* Search Input */}
<FormControl sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}>
<OutlinedInput
inputRef={textFieldRef}
id="header-search"
placeholder="Search (Ctrl + K)"
value={searchword}
onChange={(e) => setSearchword(e.target.value)}
autoComplete="off"
size="medium"
sx={{
bgcolor: 'white',
borderRadius: 2
}}
startAdornment={
<InputAdornment position="start">
<SearchOutlined />
</InputAdornment>
}
endAdornment={
<InputAdornment position="end">
<IconButton sx={{ visibility: searchword ? 'visible' : 'hidden' }} onClick={() => setSearchword('')}>
<ClearIcon sx={{ fontSize: 20, color: '#65387A' }} />
</IconButton>
}
/>
</FormControl>
<Stack>
{tenantLocations.length == 1 ? (
</InputAdornment>
}
/>
</FormControl>
{/* Location Input */}
{tenantLocations?.length === 1 ? (
<TextField
variant="outlined"
label="Business Location"
value={tenantLocations[0]?.locationname}
fullWidth
focused
sx={{
minWidth: 250,
maxWidth: 400,
flex: 1,
borderRadius: 2
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<MyLocationIcon color="primary" />
</InputAdornment>
),
sx: { bgcolor: 'white' }
}}
/>
) : (
<Autocomplete
fullWidth
options={tenantLocations || []}
value={selectedLocation}
getOptionLabel={(o) => `${o.locationname} (${o.suburb})`}
onChange={(event, value, reason) => {
setSelectedLocation(value);
setLocationId(value ? value.locationid : 0);
}}
sx={{
minWidth: 250,
maxWidth: 400,
flex: 1
}}
renderInput={(params) => (
<TextField
variant="outlined"
fullWidth
label={'Business Location'}
value={tenantLocations[0].locationname}
focused
sx={{ minWidth: 250 }}
InputProps={{
style: { color: theme.palette.primary.main },
startAdornment: (
<InputAdornment position="start">
<MyLocationIcon color="primary" />
</InputAdornment>
)
{...params}
label="Choose Location"
color="primary"
sx={{
bgcolor: 'white',
borderRadius: 2
}}
/>
) : (
<Autocomplete
fullWidth
id="combo-box-demo"
options={tenantLocations || []}
value={selectedLocation}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
sx={{ minWidth: 250 }}
onChange={(event, value, reason) => {
setSelectedLocation(value);
if (value) {
console.log('Business Locations', value);
setLocationId(value.locationid);
}
if (reason == 'clear') {
setLocationId(0);
}
}}
renderInput={(params) => <TextField {...params} label="Choose Location" color="primary" />}
/>
)}
</Stack>
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: 'grey.200'
}}
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
</Stack>
/>
)}
</Stack>
}
>
@@ -336,8 +358,9 @@ export default function OrdersReport() {
sx={{
overflow: 'auto',
'&::-webkit-scrollbar': {
width: '3px',
height: '3px'
width: '12px', // Width of vertical scrollbar
height: '14px', // Height of horizontal scrollbar,
borderRadius: 10
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: '#65387A' // Color of the scrollbar thumb
@@ -357,7 +380,7 @@ export default function OrdersReport() {
Deliveries{' '}
</TableCell>
<TableCell rowSpan={2}> Kilometer</TableCell>
<TableCell rowSpan={2}>Charges </TableCell>
{/* <TableCell rowSpan={2}>Charges </TableCell> */}
<TableCell rowSpan={2}>Amount </TableCell>
<TableCell rowSpan={2}> Action</TableCell>
</TableRow>
@@ -380,10 +403,6 @@ export default function OrdersReport() {
<TableRow
key={row.locationid}
sx={{
bgcolor: openRow === row.locationid ? '#e1bee7' : null,
'&:hover': {
bgcolor: openRow === row.locationid ? '#e1bee7!important' : null
},
cursor: openRow === row.locationid ? 'pointer' : null
}}
>
@@ -418,7 +437,7 @@ export default function OrdersReport() {
/>
</Tooltip>
<br />
{/* <br />
<Tooltip title="Actual kms" placement="bottom">
<Chip
size="small"
@@ -431,10 +450,10 @@ export default function OrdersReport() {
minWidth: 80
}}
/>
</Tooltip>
</Tooltip> */}
</TableCell>
<TableCell align="left">
<Tooltip title="Pay on Delivery" placement="top">
{/* <TableCell align="left"> */}
{/* <Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
@@ -450,8 +469,8 @@ export default function OrdersReport() {
}}
/>
</Tooltip>
<br />
<Tooltip title="Pay Later" placement="bottom">
<br /> */}
{/* <Tooltip title="Pay Later" placement="bottom">
<Chip
size="small"
label={formatNumberToRupees(row.paylater)}
@@ -465,8 +484,8 @@ export default function OrdersReport() {
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
</Tooltip> */}
{/* </TableCell> */}
<TableCell align="right">
<Tooltip title="Total Charges" placement="top">
<Chip
@@ -506,9 +525,9 @@ export default function OrdersReport() {
{openRow === row.locationid && (
<TableRow
sx={{
bgcolor: openRow === row.locationid ? '#f3e5f5' : null,
bgcolor: 'white',
'&:hover': {
bgcolor: openRow === row.locationid ? '#f3e5f5!important' : null
bgcolor: 'white!important'
},
cursor: openRow === row.locationid ? 'pointer' : null
}}
@@ -516,35 +535,56 @@ export default function OrdersReport() {
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={openRow === row.locationid} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h5" gutterBottom component="div">
Riders Summary
</Typography>
<Table size="small" aria-label="purchases">
<TableHead
sx={{
bgcolor: '#f3e5f5',
bgcolor: 'white',
'&:onhover': {
bgcolor: '#f3e5f5!important'
bgcolor: 'white !important'
}
}}
>
<TableRow>
<TableCell>#</TableCell>
<TableRow
sx={{
bgcolor: openRow === row.locationid ? theme.palette.secondary.lighter : null
}}
>
<TableCell align="center">#</TableCell>
<TableCell>Rider</TableCell>
<TableCell align="left">Deliveries</TableCell>
<TableCell align="left">Assigned</TableCell>
<TableCell align="left">Accepted</TableCell>
<TableCell align="left">Picked</TableCell>
<TableCell align="left">Delivered</TableCell>
<TableCell align="center">kms/Actualkms</TableCell>
<TableCell align="center">POD/PLA</TableCell>
<TableCell align="center">Deliveries</TableCell>
<TableCell align="center">Pending</TableCell>
<TableCell align="center">Assigned</TableCell>
<TableCell align="center">Accepted</TableCell>
<TableCell align="center">Arrived</TableCell>
<TableCell align="center">Picked</TableCell>
<TableCell align="center">Skipped</TableCell>
<TableCell align="center">Delivered</TableCell>
<TableCell align="center">kms</TableCell>
{/* <TableCell align="center">POD/PLA</TableCell> */}
<TableCell align="center">Charges</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableBody
sx={{
bgcolor: 'white',
'&:onhover': {
bgcolor: 'white !important'
}
}}
>
{ridersdata?.map((rider, index) => (
<TableRow key={rider?.tenantname}>
<TableCell padding="none">{index + 1}</TableCell>
<TableRow
key={rider?.tenantname}
// sx={{
// bgcolor: openRow === row.locationid ? '#f3e5f5' : null,
// '&:hover': {
// bgcolor: openRow === row.locationid ? '#f3e5f5!important' : null
// }
// }}
>
<TableCell align="center" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{rider?.firstname}
@@ -555,27 +595,30 @@ export default function OrdersReport() {
)}
</Stack>
</TableCell>
<TableCell align="left">{rider?.deliveries}</TableCell>
<TableCell align="left">{rider?.Assigened}</TableCell>
<TableCell align="left">{rider?.Accepted}</TableCell>
<TableCell align="left">{rider?.Picked}</TableCell>
<TableCell align="left">{rider?.delivered}</TableCell>
<TableCell align="center">{rider?.totalorders}</TableCell>
<TableCell align="center">{rider?.pending}</TableCell>
<TableCell align="center">{rider?.assigned}</TableCell>
<TableCell align="center">{rider?.accepted}</TableCell>
<TableCell align="center">{rider?.picked}</TableCell>
<TableCell align="center">{rider?.arrived}</TableCell>
<TableCell align="center">{rider?.skipped}</TableCell>
<TableCell align="center">{rider?.delivered}</TableCell>
<TableCell align="center">
<Tooltip title="kms" placement="top">
<Chip
size="small"
label={rider?.kms}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
mr: 1,
border: '1px solid #1976d2',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Actual kms" placement="top">
{/* <Tooltip title="kms" placement="top"> */}
<Chip
size="small"
label={rider?.kms}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
mr: 1,
border: '1px solid #1976d2',
cursor: 'pointer',
minWidth: 80
}}
/>
{/* </Tooltip> */}
{/* <Tooltip title="Actual kms" placement="top">
<Chip
size="small"
label={rider?.actualkms}
@@ -587,11 +630,11 @@ export default function OrdersReport() {
minWidth: 80
}}
/>
</Tooltip>
</Tooltip> */}
</TableCell>
<TableCell align="center">
<Tooltip title="Pay on Delivery" placement="top">
{/* <TableCell align="center"> */}
{/* <Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.payondelivery)}
@@ -604,26 +647,26 @@ export default function OrdersReport() {
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Paylater" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</TableCell>
</Tooltip> */}
{/* <Tooltip title="Paylater" placement="top"> */}
{/* <Chip
size="small"
label={formatNumberToRupees(rider?.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/> */}
{/* </Tooltip> */}
{/* </TableCell> */}
<TableCell align="center">
<Tooltip title="Amount" placement="top">
<Chip
size="small"
label={formatNumberToRupees(rider?.Deliveryamt)}
label={formatNumberToRupees(rider?.deliveryamt)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',

418
src/pages/nearle/reports/ordersDetails.js
View File

@@ -53,13 +53,14 @@ import {
startOfWeek
// startOfYear,
} from 'date-fns';
import { FilterList } from '@mui/icons-material';
import { CalendarMonth, FilterList } from '@mui/icons-material';
// project imports
import { fetchDeliverySummary, fetchorderdetails } from '../api/api';
import MainCard from 'components/MainCard';
import { CSVExport } from 'components/third-party/ReactTable';
import Loader from 'components/Loader';
import { useDebounce } from 'components/nearle_components/useDebounce';
function formatNumberToRupees(value) {
return new Intl.NumberFormat('en-IN', {
@@ -95,6 +96,7 @@ export default function OrdersDetails() {
const [locationId, setLocationId] = useState(0);
const [locoName, setLocoName] = useState('Select Location');
const debouncedSearch = useDebounce(searchword, 500);
const status = [
{ id: 0, status: 'All', statusLow: 'All' },
{ id: 1, status: 'Pending', statusLow: 'pending' },
@@ -186,15 +188,15 @@ export default function OrdersDetails() {
isFetchingNextPage
// status: rowdataStatus
} = useInfiniteQuery({
queryKey: [startdate, enddate, currentStatus, locationId],
queryKey: [startdate, enddate, currentStatus, locationId, debouncedSearch],
queryFn: fetchorderdetails,
getNextPageParam: (lastPage) => lastPage.nextPage
});
const rows = rowdata?.pages.flatMap((page) => page.details) || [];
useEffect(() => {
if (!hasNextPage) return;
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting) {
@@ -207,9 +209,7 @@ export default function OrdersDetails() {
threshold: 1.0
}
);
if (loadMoreRef.current) observer.observe(loadMoreRef.current);
return () => {
if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
};
@@ -245,6 +245,7 @@ export default function OrdersDetails() {
}, [currentStatus, deliverycount]);
// ==============================|| calculate||============================== //
const calculate = () => {
let calculatedTotalCharge = 0;
let calculatedTotalAmount = 0;
@@ -268,23 +269,9 @@ export default function OrdersDetails() {
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
const filteredOrders = rows.filter((row) =>
row.orderstatus == ''
? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
: row.orderstatus.toLowerCase().includes(searchword.toLowerCase()) ||
row.ordernotes.toLowerCase().includes(searchword.toLowerCase()) ||
row.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
row.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
row.pickupcustomer.toLowerCase().includes(searchword.toLowerCase()) ||
row.pickupcontactno.toLowerCase().includes(searchword.toLowerCase()) ||
row.pickuplocation.toLowerCase().includes(searchword.toLowerCase()) ||
row.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
row.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
row.deliverylocation.toLowerCase().includes(searchword.toLowerCase()) ||
row.ridername.toLowerCase().includes(searchword.toLowerCase())
);
// to download ex format filtered data
const csvData = filteredOrders.map((order) => ({
const csvData = rows.map((order) => ({
tenantname: order.tenantname,
tenantcity: order.tenantcity,
tenantcontactno: order.tenantcontactno,
@@ -345,161 +332,166 @@ export default function OrdersDetails() {
return (
<>
{isLoadingOrderDetails && <Loader />}
<TitleCard title="Orders Details" />
<TitleCard
title="Orders Details"
secondary={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} gap={2}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Badge
badgeContent={`${statusCount}`}
max={99999}
color="primary"
sx={{
bgcolor: '#f3e5f5',
p: 0.2,
borderRadius: '3px',
color: '#7b1fa2'
}}
>{`Orders-${datestatus}`}</Badge>
<Chip
label={
<Typography noWrap color="secondary">
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
</Typography>
}
variant="combined"
color="warning"
size="small"
deleteIcon={<CalendarMonth style={{ fontSize: 18 }} />}
onDelete={() => {
setOpen(true);
}}
onClick={() => setOpen(true)}
sx={{ cursor: 'pointer' }}
/>
</Stack>
)}
{(!startdate || !enddate) && (
<div>
<Stack direction="row" spacing={2}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
</Stack>
</div>
)}
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
</Stack>
}
/>
<MainCard
content={false}
title={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap="wrap">
<Stack alignItems="flex-start" spacing={1}>
{startdate && enddate && (
<Stack direction="row" spacing={2}>
<Badge
badgeContent={`${statusCount}`}
max={99999}
color="primary"
sx={{
bgcolor: '#f3e5f5',
p: 0.2,
borderRadius: '3px',
color: '#7b1fa2'
}}
>{`Orders-${datestatus}`}</Badge>
<Chip
label={
<Typography noWrap color="secondary">
{dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')}
</Typography>
}
variant="combined"
color="warning"
size="small"
/>
</Stack>
)}
{(!startdate || !enddate) && (
<div>
<Stack direction="row" spacing={2}>
<Chip label="Orders-All" color="primary" variant="light" size="small" />
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
</Stack>
</div>
)}
</Stack>
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
<Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'}>
{tenantLocations.length == 1 ? (
<TextField
// disabled={!isAppLocation || !isClient}
variant="outlined"
fullWidth
label={'Business Location'}
value={tenantLocations[0].locationname}
focused
sx={{ width: '350px' }}
InputProps={{
style: { color: theme.palette.primary.main },
startAdornment: (
<InputAdornment position="start">
<MyLocationIcon color="primary" />
</InputAdornment>
)
}}
/>
) : (
<Autocomplete
fullWidth
// disabled={!isAppLocation || !isClient}
id="combo-box-demo"
options={tenantLocations || []}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
renderInput={(params) => <TextField {...params} label={locoName} color="primary" />}
sx={{ width: '300px' }}
onChange={(event, value, reason) => {
if (value) {
console.log('Business Locations', value);
setLocationId(value.locationid);
setLocoName(value.locationname);
}
if (reason == 'clear') {
setLocationId(0);
setLocoName('Select Location');
}
}}
/>
)}
</Stack>
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
{tenantLocations.length == 1 ? (
<TextField
// disabled={!isAppLocation || !isClient}
variant="outlined"
fullWidth
label={'Business Location'}
value={tenantLocations[0].locationname}
focused
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
InputProps={{
style: { color: theme.palette.primary.main },
startAdornment: (
<InputAdornment position="start">
<MyLocationIcon color="primary" />
</InputAdornment>
)
}}
/>
) : (
<Autocomplete
sx={{ minWidth: 200 }}
disablePortal
fullWidth
// disabled={!isAppLocation || !isClient}
id="combo-box-demo"
options={status}
getOptionLabel={(option) => `${option.status}`}
options={tenantLocations || []}
getOptionLabel={(option) => `${option.locationname} (${option.suburb})` || ''}
renderInput={(params) => <TextField {...params} label={locoName} color="primary" />}
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
onChange={(event, value, reason) => {
if (reason === 'clear') {
setCurrentStatus('All');
} else {
console.log('status', value);
setCurrentStatus(value.statusLow);
if (value) {
console.log('Business Locations', value);
setLocationId(value.locationid);
setLocoName(value.locationname);
}
if (reason == 'clear') {
setLocationId(0);
setLocoName('Select Location');
}
}}
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
/>
<FormControl sx={{ width: 250 }}>
<OutlinedInput
inputRef={textFieldRef}
aria-describedby="header-search-text"
inputProps={{
'aria-label': 'weight'
}}
sx={{ background: 'white' }}
size="large"
id="header-search"
placeholder="Search (ctrl+k)"
value={searchword}
onChange={(e) => {
setSearchword(e.target.value);
}}
autoComplete="off"
startAdornment={
<InputAdornment position="start" sx={{ mr: -0.5 }}>
<SearchOutlined />
</InputAdornment>
}
endAdornment={
<Tooltip title="clear">
<IconButton
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
onClick={() => {
setSearchword('');
}}
>
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
</IconButton>
</Tooltip>
}
/>
</FormControl>
)}
<Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: 'grey.200',
mx: 2
}}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip>
<Autocomplete
sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}
disablePortal
id="combo-box-demo"
options={status}
getOptionLabel={(option) => `${option.status}`}
onChange={(event, value, reason) => {
if (reason === 'clear') {
setCurrentStatus('All');
} else {
console.log('status', value);
setCurrentStatus(value.statusLow);
}
}}
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
/>
<FormControl sx={{ minWidth: 250, maxWidth: 400, flex: 1 }}>
<OutlinedInput
inputRef={textFieldRef}
aria-describedby="header-search-text"
inputProps={{
'aria-label': 'weight'
}}
sx={{ background: 'white' }}
size="large"
id="header-search"
placeholder="Search (ctrl+k)"
value={searchword}
onChange={(e) => {
setSearchword(e.target.value);
}}
autoComplete="off"
startAdornment={
<InputAdornment position="start" sx={{ mr: -0.5 }}>
<SearchOutlined />
</InputAdornment>
}
endAdornment={
<Tooltip title="clear">
<IconButton
sx={{ visibility: searchword ? 'visible' : 'hidden' }}
onClick={() => {
setSearchword('');
}}
>
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
</IconButton>
</Tooltip>
}
/>
</FormControl>
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
</Stack>
{/* <Tooltip title="Order Filter">
<IconButton
color="secondary"
variant="light"
sx={{
color: 'text.primary',
bgcolor: 'grey.200',
mx: 2
}}
aria-haspopup="true"
onClick={() => setOpen(true)}
>
<FilterList />
</IconButton>
</Tooltip> */}
</Stack>
}
>
@@ -531,24 +523,24 @@ export default function OrdersDetails() {
>
<TableRow>
<TableCell sx={{ position: 'sticky !important' }}># </TableCell>
<TableCell sx={{ position: 'sticky !important' }}>Map</TableCell>
<TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Tenant Name </TableCell>
{/* <TableCell sx={{ position: 'sticky !important' }}> {<SlLocationPin style={{ fontWeight: 1000 }} />}</TableCell> */}
<TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Location </TableCell>
<TableCell sx={{ position: 'sticky !important' }}>Pickup </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Drop </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Status </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Assignes </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Assigned </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Accepted </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Arrived </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Picked </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Delivered</TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Cancelled </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Notes </TableCell>
{/* <TableCell sx={{ position: 'sticky !important' }}> Notes </TableCell> */}
<TableCell sx={{ position: 'sticky !important' }}> Kms </TableCell>
<TableCell sx={{ position: 'sticky !important' }}> Charges </TableCell>
</TableRow>
</TableHead>
<TableBody>
{filteredOrders.length == 0 && (
{rows?.length == 0 && (
<>
<TableCell colSpan={15}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
@@ -557,12 +549,12 @@ export default function OrdersDetails() {
</TableCell>
</>
)}
{filteredOrders.map((row, index) => {
{rows?.map((row, index) => {
return (
filteredOrders.length !== 0 && (
rows?.length !== 0 && (
<TableRow>
<TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
<TableCell
{/* <TableCell
sx={{ width: '10px', cursor: 'pointer' }}
onClick={() => {
console.log('row', row);
@@ -572,13 +564,14 @@ export default function OrdersDetails() {
}}
>
{<SlLocationPin />}
</TableCell>
</TableCell> */}
<TableCell
sx={{
textAlign: 'start'
textAlign: 'start',
whiteSpace: 'nowrap'
}}
>
{row.tenantname}
{row.locationname}
<Typography variant="body2" noWrap>
{row.orderid}
</Typography>
@@ -591,7 +584,7 @@ export default function OrdersDetails() {
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Stack direction="column">
<Stack direction="column" sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="caption">{row.pickupcustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.pickupcontactno}
@@ -606,7 +599,7 @@ export default function OrdersDetails() {
</TableCell>
<TableCell align="left">
<Stack direction={'row'} spacing={1}>
<Stack direction="column">
<Stack direction="column" sx={{ whiteSpace: 'nowrap' }}>
<Typography variant="caption">{row.deliverycustomer}</Typography>
<Typography variant="caption" color="textSecondary">
{row.deliverycontactno}
@@ -695,25 +688,24 @@ export default function OrdersDetails() {
</Typography>
</TableCell>
<TableCell align="left">
{/* <TableCell align="left">
<Typography variant="caption">{row.ordernotes}</Typography>
</TableCell>
</TableCell> */}
<TableCell align="left">
<Stack direction={'column'} spacing={1}>
<Tooltip title=" KMS" placement="top">
<Chip
label={
row.orderstatus === 'cancelled' || row.orderstatus === 'cancelled' || row.kms == ''
? parseInt(0).toFixed(1)
: parseInt(row.kms).toFixed(1)
}
size="small"
variant="light"
color="error"
/>
</Tooltip>
<Tooltip title="Actual KMS">
<Chip
label={
row.orderstatus === 'cancelled' || row.orderstatus === 'cancelled' || row.kms == ''
? parseInt(0).toFixed(1)
: parseInt(row.kms).toFixed(1)
}
size="small"
variant="contained"
color="warning"
/>
{/* <Tooltip title="Actual KMS">
<Chip
label={
row.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
@@ -725,42 +717,44 @@ export default function OrdersDetails() {
color="success"
variant="light"
/>
</Tooltip>
</Tooltip> */}
</Stack>
</TableCell>
<TableCell align="right">
<Stack direction={'column'} spacing={1}>
<Tooltip title=" Delivery Charge" placement="top">
<Chip
label={
row.orderstatus === 'cancelled' || row.deliverycharges == '' ? `₹ ${0}.00` : `₹ ${row.deliverycharges}.00`
}
size="small"
variant="light"
color="error"
/>
</Tooltip>
<Tooltip title="Delivery Amount">
<Chip
label={
row.orderstatus === 'cancelled' || row.deliverycharges == '' ? `₹ ${0}.00` : `₹ ${row.deliverycharges}.00`
}
size="small"
variant="contained"
color="primary"
/>
{/* <Tooltip title="Delivery Amount">
<Chip
label={row.deliveryamt == '' ? `₹ ${0}.00` : `₹ ${row.deliveryamt}.00`}
size="small"
color="success"
variant="light"
/>
</Tooltip>
</Tooltip> */}
</Stack>
</TableCell>
</TableRow>
)
);
})}
<TableRow>
<TableCell colSpan={15} rowSpan={3}>
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
{isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No more results'}
</div>
</TableCell>
</TableRow>
{rows?.length != 0 && (
<TableRow>
<TableCell colSpan={15} rowSpan={3}>
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
{isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No More Orders'}
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>

212
src/pages/nearle/reports/riderLogs.js
View File

@@ -1,7 +1,209 @@
import React from 'react';
import * as React from 'react';
import { useState } from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useQuery } from '@tanstack/react-query';
// material-ui
import {
Divider,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
FormControl,
OutlinedInput,
InputAdornment,
Chip,
Stack
} from '@mui/material';
const riderLogs = () => {
return <div>riderLogs</div>;
};
import dayjs from 'dayjs';
var utc = require('dayjs/plugin/utc');
dayjs.extend(utc);
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
import Loader from 'components/Loader';
// project imports
import MainCard from 'components/MainCard';
import { Empty } from 'antd';
import TitleCard from '../titleCard';
import { fetchAppLocations, fetchRidersLogs } from '../api/api';
export default riderLogs;
function formatDate(dateString) {
const date = dayjs(dateString);
const formattedDate = date.format('DD-MM-YYYY ');
return formattedDate;
}
const formatTime = (timeString) =>
new Date('2024-01-01T' + timeString + 'Z').toLocaleTimeString('en-US', {
timeZone: 'UTC',
hour12: true,
hour: '2-digit',
minute: '2-digit'
});
// ==============================|| RidersLogs ||============================== //
export default function RidersLogs() {
const tenantid = localStorage.getItem('tenantid');
const [rowsPerPage, setRowsPerPage] = useState(10);
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [searchword, setSearchword] = useState('');
const [showClose, SetShowClose] = useState(false);
/* ============================================= || fetchRidersLogs| ============================================= */
const {
data: rows = [], // Default to empty array
isLoading: IsRiderLogsLoading,
isError: IsRiderLogsError,
error: RiderLogsError
} = useQuery({
queryKey: [tenantid, startdate], // Meaningful query key
queryFn: fetchRidersLogs,
enabled: !!tenantid && !!startdate, // Fetch only if appId & startdate exist
refetchInterval: 300000 // Auto-fetch every 5 minutes
});
React.useEffect(() => {
setRowsPerPage(rows?.length + 1);
}, [rows]);
{
IsRiderLogsError && console.log('RiderLogsError', RiderLogsError);
}
return (
<>
{IsRiderLogsLoading && <Loader />}
<TitleCard title="Riders Logs" />
<MainCard
content={false}
title={
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap={'wrap'} gap={1}>
<Stack>
<FormControl sx={{ width: 250 }}>
<OutlinedInput
sx={{ background: 'white' }}
size="medium"
id="header-search"
startAdornment={
<InputAdornment position="start" sx={{ mr: -0.5 }}>
<SearchOutlined />
</InputAdornment>
}
endAdornment={
showClose && (
<InputAdornment position="end" sx={{ mr: -0.5 }}>
<CloseOutlined
onClick={() => {
setSearchword('');
SetShowClose(false);
}}
/>
</InputAdornment>
)
}
aria-describedby="header-search-text"
inputProps={{
'aria-label': 'weight'
}}
placeholder="Search"
value={searchword}
onChange={(e) => {
setSearchword(e.target.value);
if (e.target.value == '') {
SetShowClose(false);
} else {
SetShowClose(true);
}
}}
autoComplete="off"
/>
</FormControl>{' '}
</Stack>
<Stack flexDirection="row" alignItems="center" gap={2}>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Choose Date"
value={dayjs(startdate)}
format="DD-MM-YYYY"
onChange={(e) => {
if (e) {
setStartdate(dayjs(e.$d).format('YYYY-MM-DD'));
}
}}
/>
</LocalizationProvider>
</Stack>
</Stack>
}
>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>S.No</TableCell>
<TableCell>ID</TableCell>
<TableCell>Rider</TableCell>
<TableCell>LogDate</TableCell>
<TableCell>Shift(HRS)</TableCell>
<TableCell>Login</TableCell>
<TableCell>Logout</TableCell>
<TableCell>WRK(HRS)</TableCell>
<TableCell>Shift(HRS)</TableCell>
<TableCell>BRK(HRS)</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.length == 0 ? (
<TableRow>
<TableCell colSpan={11}>
<Empty />
</TableCell>
</TableRow>
) : (
rows.map((row, index) => (
<TableRow key={index + 1}>
<TableCell align="left">{index + 1}</TableCell>
<TableCell align="left">{row.userid}</TableCell>
<TableCell align="left">{row.username}</TableCell>
<TableCell align="left">
{' '}
<Chip label={formatDate(row.logdate)} color="warning" variant="outlined" size="small" sx={{ bgcolor: '#fffde7' }} />
</TableCell>
<TableCell align="left">{row.shifthours}</TableCell>
<TableCell align="left">
{row.login != '' && (
<Chip label={formatTime(row.login)} color="info" variant="outlined" size="small" sx={{ bgcolor: '#e0f7fa' }} />
)}
</TableCell>
<TableCell align="left">
{row.logout != '' && (
<Chip label={formatTime(row.logout)} color="info" variant="outlined" size="small" sx={{ bgcolor: '#e0f7fa' }} />
)}
</TableCell>
<TableCell align="left">{row.workhours}</TableCell>
<TableCell align="left">{row.shorthours}</TableCell>
<TableCell align="left">{row.breakhours}</TableCell>
<TableCell align="left">
{row.logstatus == 0 ? (
<Chip label="Active" color="success" variant="outlined" size="small" sx={{ bgcolor: '#e8f5e9' }} />
) : (
<Chip label="Inactive" color="error" variant="outlined" size="small" sx={{ bgcolor: '#fce4ec' }} />
)}
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
</TableContainer>
</MainCard>
</>
);
}

588
src/pages/nearle/reports/ridersummary.js
View File

@@ -23,8 +23,6 @@ import {
IconButton,
Tooltip,
Chip,
Autocomplete,
TextField,
Collapse
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
@@ -45,12 +43,12 @@ import {
startOfWeek
// startOfYear,
} from 'date-fns';
import { FilterList } from '@mui/icons-material';
// project imports
import MainCard from 'components/MainCard';
import Loader from 'components/Loader';
import TitleCard from '../titleCard';
import { fetchRidersSummary } from '../api/api';
import { useTheme } from '@mui/material/styles';
// table filter
function descendingComparator(a, b, orderBy) {
@@ -88,6 +86,8 @@ function formatNumberToRupees(value) {
export default function RidersSummary() {
// const [rows, setRows] = useState([]);
const theme = useTheme();
const tenantid = localStorage.getItem('tenantid');
const [order, setOrder] = useState('asc');
const [orderBy, setOrderBy] = useState('calories');
const [selected, setSelected] = useState([]);
@@ -141,9 +141,12 @@ export default function RidersSummary() {
data: rows,
error: reportsError
} = useQuery({
queryKey: [appId, startdate, enddate],
queryKey: [tenantid, startdate, enddate],
queryFn: fetchRidersSummary
});
useEffect(() => {
rows && console.log('rows', rows);
}, [rows]);
// ==============================|| calculate||============================== //
const calculate = async () => {
let calculatedTotal = 0;
@@ -157,7 +160,7 @@ export default function RidersSummary() {
console.log('calculatedTotal', calculatedTotal);
};
useEffect(() => {
calculate();
rows && calculate();
}, [rows]);
if (isLoadingReports) return <Loader />;
@@ -167,7 +170,8 @@ export default function RidersSummary() {
const fetchTenantSummary = async (riderUserid) => {
try {
const tenantRes = await axios.get(
`${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}`
// `${process.env.REACT_APP_URL}/deliveries/getreportlocationsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}&tenantid=${tenantid}`
`${process.env.REACT_APP_URL}/deliveries/getriderlocationreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}&tenantid=${tenantid}`
);
console.log('tenantRes', tenantRes.data.details);
setTenantData(tenantRes.data.details);
@@ -176,42 +180,9 @@ export default function RidersSummary() {
}
};
const handleClick = (event, name) => {
const selectedIndex = selected.indexOf(name);
let newSelected = [];
if (selectedIndex === -1) {
newSelected = newSelected.concat(selected, name);
} else if (selectedIndex === 0) {
newSelected = newSelected.concat(selected.slice(1));
} else if (selectedIndex === selected.length - 1) {
newSelected = newSelected.concat(selected.slice(0, -1));
} else if (selectedIndex > 0) {
newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1));
}
const selectedRowData = rows.filter((row) => newSelected.includes(row.name));
setSelectedValue(selectedRowData);
setSelected(newSelected);
};
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event?.target.value, 10));
setPage(0);
};
const isSelected = (name) => selected.indexOf(name) !== -1;
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
return (
<>
<TitleCard title="Riders Summary" />
<MainCard
content={false}
title={
@@ -249,15 +220,19 @@ export default function RidersSummary() {
<Table>
<TableHead>
<TableRow>
<TableCell>S.No </TableCell>
<TableCell># </TableCell>
<TableCell> Rider</TableCell>
<TableCell> Deliveries</TableCell>
<TableCell>Total </TableCell>
{/* <TableCell> Pending</TableCell>
<TableCell> Assigned</TableCell>
<TableCell> Accepted</TableCell>
<TableCell>Arrived </TableCell>
<TableCell>Picked </TableCell>
<TableCell>Active </TableCell>
<TableCell>Skipped </TableCell> */}
<TableCell>Delivered </TableCell>
<TableCell>KMS/Actualkms </TableCell>
<TableCell> POD/PLA</TableCell>
<TableCell>kms </TableCell>
<TableCell> COD/PLA</TableCell>
<TableCell> Charges</TableCell>
<TableCell>Action </TableCell>
</TableRow>
@@ -265,7 +240,7 @@ export default function RidersSummary() {
{/* ============================================ || TableBody || ============================================ */}
<TableBody>
{rows.length === 0 && (
{/* {rows?.length === 0 && (
<TableRow>
<TableCell colSpan={11}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
@@ -273,57 +248,59 @@ export default function RidersSummary() {
</Stack>
</TableCell>
</TableRow>
)}
)} */}
{stableSort(rows, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((row, index) => {
if (typeof row === 'number') return null;
const isItemSelected = isSelected(row.name);
const labelId = `enhanced-table-checkbox-${index}`;
{rows?.map((row, index) => (
<>
{/* // ============================================ || tablerow 1 || ============================================ */}
return (
rows.length !== 0 && (
<>
{/* // ============================================ || tablerow 1 || ============================================ */}
<TableRow
sx={{
cursor: openRow === row.userid ? 'pointer' : null
}}
>
<TableCell component="th" scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.firstname}
{row.status == 'Active' ? (
<TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />
) : (
<HighlightOffIcon fontSize="small" color="error" sx={{ ml: 1 }} />
)}
</Stack>
</TableCell>
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.tenantname}
selected={isItemSelected}
sx={{
bgcolor: openRow === row.userid ? '#e1bee7' : null,
'&:hover': {
bgcolor: openRow === row.userid ? '#e1bee7!important' : null
},
cursor: openRow === row.userid ? 'pointer' : null
}}
>
<TableCell component="th" id={labelId} scope="row" padding="none">
{index + 1}
<TableCell align="left">{row.totalorders}</TableCell>
{/* <TableCell align="left">
{row.pending ? <Chip color="primary" variant="light" label={row.pending} /> : row.pending}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.firstname}
{row.status == 'Active' ? (
<TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />
) : (
<HighlightOffIcon fontSize="small" color="error" sx={{ ml: 1 }} />
)}
</Stack>
{row.assigned ? <Chip color="primary" variant="light" label={row.assigned} /> : row.assigned}
</TableCell>
<TableCell align="left">{row.deliveries}</TableCell>
<TableCell align="left">{row.Assigened}</TableCell>
<TableCell align="left">{row.Accepted}</TableCell>
<TableCell align="left">{row.Picked}</TableCell>
<TableCell align="left">{row.delivered}</TableCell>
<TableCell align="left">
<Stack direction={'row'}>
<Tooltip title="kms" placement="top">
{row.accepted ? <Chip color="primary" variant="light" label={row.accepted} /> : row.accepted}
</TableCell>
<TableCell align="left">
{row.arrived ? <Chip color="primary" variant="light" label={row.arrived} /> : row.arrived}
</TableCell>
<TableCell align="left">
{row.picked ? <Chip color="primary" variant="light" label={row.picked} /> : row.picked}
</TableCell>
<TableCell align="left">
{row.active ? <Chip color="primary" variant="light" label={row.active} /> : row.active}
</TableCell>
<TableCell align="left">
{row.skipped ? <Chip color="primary" variant="light" label={row.skipped} /> : row.skipped}
</TableCell> */}
<TableCell align="left">{row.delivered}</TableCell>
<TableCell align="left">
<Stack direction={'row'}>
{/* <Tooltip title="kms" placement="top">
<Chip
size="small"
label={row.kms}
@@ -336,165 +313,149 @@ export default function RidersSummary() {
minWidth: 80
}}
/>
</Tooltip>
<Tooltip title="Actual kms" placement="bottom">
<Chip
size="small"
label={row.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="right">
<Stack direction={'row'}>
<Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
cursor: 'pointer',
minWidth: 80,
mr: 1
}}
/>
</Tooltip>
<Tooltip title="Pay Later" placement="bottom">
<Chip
size="small"
label={formatNumberToRupees(row.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="right">
<Tooltip title="Total Charges" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.Deliveryamt)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
cursor: 'pointer',
minWidth: 100
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<IconButton
aria-label="expand row"
size="small"
onClick={() => {
fetchTenantSummary(row.userid);
setOpenRow(openRow === row.userid ? null : row.userid);
}}
sx={{
bgcolor: openRow === row.userid ? 'primary.main' : null,
color: openRow === row.userid ? 'white' : null,
'&:hover': {
bgcolor: openRow === row.userid ? 'primary.main' : '#e1bee7'
}
}}
>
{openRow === row.userid ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
{/* // ============================================ || collapsive row || ============================================ */}
{openRow === row.userid && (
<TableRow
</Tooltip> */}
<Tooltip title="Actual kms" placement="bottom">
<Chip
size="small"
label={row.actualkms}
sx={{
bgcolor: openRow === row.userid ? '#f3e5f5' : null,
'&:hover': {
bgcolor: openRow === row.userid ? '#f3e5f5!important' : null
},
cursor: openRow === row.userid ? 'pointer' : null
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
cursor: 'pointer',
minWidth: 80
}}
>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse
// in={openRow[row.tenantname]}
in={true}
timeout="auto"
unmountOnExit
>
<Box sx={{ margin: 1 }}>
<Typography variant="h5" gutterBottom component="div">
Tenant Summary
</Typography>
<Table size="small" aria-label="purchases">
<TableHead
sx={{
bgcolor: '#f3e5f5',
'&:onhover': {
bgcolor: '#f3e5f5!important'
}
}}
>
<TableRow>
<TableCell>#</TableCell>
<TableCell>Client</TableCell>
<TableCell align="left">All</TableCell>
<TableCell align="left">Pending</TableCell>
<TableCell align="left">Completed</TableCell>
<TableCell align="left">Cancelled</TableCell>
<TableCell align="center">Kms/Actual Kms</TableCell>
<TableCell align="center">POD / PLA</TableCell>
<TableCell align="center">Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tenantData.map((row, index) => (
<TableRow
hover
onClick={(event) => handleClick(event, row.name)}
role="checkbox"
aria-checked={isItemSelected}
tabIndex={-1}
key={row.tenantname}
selected={isItemSelected}
>
{/* <TableCell sx={{ pl: 3 }} padding="checkbox">
<Checkbox
color="primary"
checked={isItemSelected}
inputProps={{
"aria-labelledby": labelId,
}}
/>
</TableCell> */}
<TableCell component="th" id={labelId} scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.tenantname}
</Stack>
</TableCell>
<TableCell align="left">{row.totalorders}</TableCell>
<TableCell align="left">{row.deliveriespending}</TableCell>
<TableCell align="left">{row.deliveriescompleted}</TableCell>
<TableCell align="left">{row.deliveriescancelled}</TableCell>
<TableCell align="center">
<Chip
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="right">
<Stack direction={'row'}>
<Tooltip title="Pay on Delivery" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
cursor: 'pointer',
minWidth: 80,
mr: 1
}}
/>
</Tooltip>
<Tooltip title="Pay Later" placement="bottom">
<Chip
size="small"
label={formatNumberToRupees(row.Paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
cursor: 'pointer',
minWidth: 80
}}
/>
</Tooltip>
</Stack>
</TableCell>
<TableCell align="left">
<Tooltip title="Total Charges" placement="top">
<Chip
size="small"
label={formatNumberToRupees(row.deliveryamt)}
sx={{
color: '#1976d2',
bgcolor: '#e3f2fd',
border: '1px solid #1976d2',
cursor: 'pointer',
minWidth: 100
}}
/>
</Tooltip>
</TableCell>
<TableCell align="center">
<IconButton
aria-label="expand row"
size="small"
onClick={() => {
fetchTenantSummary(row.userid);
setOpenRow(openRow === row.userid ? null : row.userid);
}}
sx={{
bgcolor: openRow === row.userid ? 'primary.main' : null,
color: openRow === row.userid ? 'white' : null,
'&:hover': {
bgcolor: openRow === row.userid ? 'primary.main' : '#e1bee7'
}
}}
>
{openRow === row.userid ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</TableCell>
</TableRow>
{/* // ============================================ || collapsive row || ============================================ */}
{openRow === row.userid && (
<TableRow
sx={{
bgcolor: openRow === row.userid ? 'white' : null,
'&:hover': {
bgcolor: openRow === row.userid ? 'white!important' : null
},
cursor: openRow === row.userid ? 'pointer' : null
}}
>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={true} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow
sx={{
bgcolor: theme.palette.secondary.lighter,
'&:hover': {
bgcolor: `${theme.palette.secondary.lighter} !important`
}
}}
>
<TableCell>#</TableCell>
<TableCell>Location</TableCell>
<TableCell align="left">All</TableCell>
{/* <TableCell align="left">Pending</TableCell> */}
<TableCell align="left">Completed</TableCell>
{/* <TableCell align="left">Cancelled</TableCell> */}
<TableCell align="left">Actual Kms</TableCell>
<TableCell align="left">COD / PLA</TableCell>
<TableCell align="left">Amount</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tenantData?.map((row, index) => (
<TableRow
sx={{
bgcolor: 'white!important',
'&:onhover': {
bgcolor: 'white!important'
}
}}
key={row.tenantname}
>
<TableCell component="th" scope="row" padding="none">
{index + 1}
</TableCell>
<TableCell align="left">
<Stack direction="row" sx={{ ml: -2 }}>
{row.locationname}
</Stack>
</TableCell>
<TableCell align="left">{row.totalorders}</TableCell>
{/* <TableCell align="left">{row.deliveriespending}</TableCell> */}
<TableCell align="left">{row.deliveriescompleted}</TableCell>
{/* <TableCell align="left">{row.deliveriescancelled}</TableCell> */}
<TableCell align="left">
{/* <Chip
size="small"
label={row.kms}
sx={{
@@ -504,93 +465,77 @@ export default function RidersSummary() {
border: '1px solid #1976d2',
minWidth: 80
}}
/>
<Chip
size="small"
label={row.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
minWidth: 80
}}
/>
</TableCell>
/> */}
<Chip
size="small"
label={row.actualkms}
sx={{
color: '#ff8f00',
bgcolor: '#ffecb3',
border: '1px solid #ff8f00',
minWidth: 80
}}
/>
</TableCell>
<TableCell align="center">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
minWidth: 80
}}
/>{' '}
<Chip
size="small"
label={formatNumberToRupees(row.paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
minWidth: 80
}}
/>
</TableCell>
<TableCell align="left">
<Chip
size="small"
label={formatNumberToRupees(row.payondelivery)}
sx={{
color: '#f44336',
bgcolor: '#ffcdd2',
border: '1px solid #f44336',
minWidth: 80
}}
/>{' '}
<Chip
size="small"
label={formatNumberToRupees(row.paylater)}
sx={{
color: '#43a047',
bgcolor: '#c8e6c9',
border: '1px solid #43a047',
minWidth: 80
}}
/>
</TableCell>
<TableCell align="center">
<Chip
size="small"
label={formatNumberToRupees(row.charges)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
minWidth: 100
}}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
)
);
})}
{emptyRows > 0 && (
<TableRow sx={{ height: (dense ? 33 : 53) * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
<TableCell align="left">
<Chip
size="small"
label={formatNumberToRupees(row.charges)}
sx={{
color: 'primary.main',
bgcolor: '#e1bee7',
border: '1px solid #662582 ',
minWidth: 100
}}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
)}
</>
))}
</TableBody>
</Table>
</TableContainer>
<Divider />
<Stack direction={'row'} sx={{ display: 'flex', justifyContent: 'end', px: 1, py: 2 }}>
{/* <Stack direction={'row'} sx={{ display: 'flex', justifyContent: 'end', px: 1, py: 2 }}>
<Typography variant="h5">Total :</Typography>
<Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
{formatNumberToRupees(total)}
</Typography>
</Stack>
{/* table pagination */}
{/* <TablePagination
rowsPerPageOptions={[10, 25, 50]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
/> */}
</Stack> */}
</MainCard>
{/* ================================================ || Date Filter || ================================================ */}
<Dialog open={open}>
<DialogTitle align="left">
<Typography variant="h4">Select Filter Options</Typography>
@@ -605,7 +550,6 @@ export default function RidersSummary() {
setDateselect('all');
setStartdate('');
setEnddate('');
setOpen(false);
} else {
setDateselect('select');