reports update
This commit is contained in:
joshikannan
778
src/pages/nearle/reports/orderSummary.js
Normal file
778
src/pages/nearle/reports/orderSummary.js
Normal file
@@ -0,0 +1,778 @@
|
||||
import { React, useState, useEffect, useRef, Fragment } from 'react';
|
||||
|
||||
import axios from 'axios';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
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';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
Box,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
Typography,
|
||||
DialogContent,
|
||||
Stack,
|
||||
Button,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Chip,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
FormControl,
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
Collapse
|
||||
} from '@mui/material';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
dayjs.extend(utc);
|
||||
import { DateRangePicker } from 'mui-daterange-picker';
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
addWeeks,
|
||||
// addYears,
|
||||
endOfMonth,
|
||||
endOfWeek,
|
||||
// endOfYear,
|
||||
startOfMonth,
|
||||
startOfWeek
|
||||
// startOfYear,
|
||||
} from 'date-fns';
|
||||
import { FilterList } from '@mui/icons-material';
|
||||
|
||||
// project imports
|
||||
|
||||
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';
|
||||
|
||||
function formatNumberToRupees(value) {
|
||||
return new Intl.NumberFormat('en-IN', {
|
||||
style: 'currency',
|
||||
currency: 'INR',
|
||||
minimumFractionDigits: 2
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
// ==============================|| MUI TABLE - ENHANCED ||============================== //
|
||||
|
||||
export default function OrdersReport() {
|
||||
// const [rows, setRows] = useState([]);
|
||||
const theme = useTheme();
|
||||
const bgcolor0 = theme.palette.primary.lighter;
|
||||
const bgcolor1 = '#ffcdd2';
|
||||
const bgcolor2 = '#f8bbd0';
|
||||
const tenantid = localStorage.getItem('tenantid');
|
||||
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [open, setOpen] = useState(false);
|
||||
const [openRow, setOpenRow] = useState(null); // Initially no row is open
|
||||
const [datestatus, setDatestatus] = useState('Today');
|
||||
const [total, settotal] = useState(0);
|
||||
const [totalOrders, settotalOrders] = useState(0);
|
||||
const [totalOrderPend, setTotalOrderPend] = useState(0);
|
||||
const [totalOrderComplete, setTotalOrderComplete] = useState(0);
|
||||
const [totalOrderCancel, setTotalOrderCancel] = useState(0);
|
||||
const [totalDeliPend, setTotalDeliPend] = useState(0);
|
||||
const [totalDeliComplete, setTotalDeliComplete] = useState(0);
|
||||
const [totalDeliCancel, setTotalDeliCancel] = useState(0);
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('openRow', openRow);
|
||||
}, [openRow]);
|
||||
|
||||
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (event) => {
|
||||
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
|
||||
event.preventDefault();
|
||||
|
||||
textFieldRef.current.focus();
|
||||
}
|
||||
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
|
||||
// Remove focus from the TextField
|
||||
textFieldRef.current.blur();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyPress);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyPress);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ============================================= || 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();
|
||||
}, []);
|
||||
|
||||
// ==============================|| fetchOrdersSummary (orders summary)||============================== //
|
||||
const {
|
||||
isLoading: isLoadingReports,
|
||||
isError: isErrorReports, //true or false
|
||||
data: rows,
|
||||
error: reportsError
|
||||
} = useQuery({
|
||||
queryKey: [startdate, enddate, locationId],
|
||||
queryFn: getreportlocationsummary
|
||||
});
|
||||
// ==============================|| getriderlocationsummary by tenid (orders summary)||============================== //
|
||||
const getriderlocationsummary = async (id) => {
|
||||
try {
|
||||
const riderRes = await axios.get(
|
||||
`${process.env.REACT_APP_URL}/deliveries/getriderlocationsummary/?&tenantid=${tenantid}&locationid=${id}&fromdate=${startdate}&todate=${enddate}`
|
||||
);
|
||||
console.log('riderRes', riderRes.data.details);
|
||||
setRidersdata(riderRes.data.details);
|
||||
} catch (error) {
|
||||
console.log('riderRes', error);
|
||||
}
|
||||
};
|
||||
|
||||
// ==============================|| calculate||============================== //
|
||||
const calculate = () => {
|
||||
let calculatedTotal = 0;
|
||||
let ordersTotal = 0;
|
||||
let Orderpending = 0;
|
||||
let OrderComplete = 0;
|
||||
let OrderCancel = 0;
|
||||
let deliverypending = 0;
|
||||
let deliverycomplete = 0;
|
||||
let deliverycancel = 0;
|
||||
rows &&
|
||||
rows.forEach((row) => {
|
||||
calculatedTotal += row.charges;
|
||||
ordersTotal += row.totalorders;
|
||||
Orderpending += row.Orderspending;
|
||||
OrderComplete += row.orderscompleted;
|
||||
OrderCancel += row.orderscancelled;
|
||||
deliverypending += row.deliveriespending;
|
||||
deliverycomplete += row.deliveriescompleted;
|
||||
deliverycancel += row.deliveriescancelled;
|
||||
});
|
||||
// Update the state after the calculation is done
|
||||
settotal(calculatedTotal);
|
||||
settotalOrders(ordersTotal);
|
||||
setTotalOrderPend(Orderpending);
|
||||
setTotalOrderComplete(OrderComplete);
|
||||
setTotalOrderCancel(OrderCancel);
|
||||
setTotalDeliPend(deliverypending);
|
||||
setTotalDeliComplete(deliverycomplete);
|
||||
setTotalDeliCancel(deliverycancel);
|
||||
};
|
||||
useEffect(() => {
|
||||
calculate();
|
||||
}, [rows]);
|
||||
|
||||
// if (isLoadingReports) return <Loader />;
|
||||
if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message;
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoadingReports && <Loader />}
|
||||
<TitleCard title="Orders Summary" />{' '}
|
||||
<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' }} />
|
||||
</IconButton>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
<Stack>
|
||||
{tenantLocations.length == 1 ? (
|
||||
<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>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<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>
|
||||
}
|
||||
>
|
||||
<TableContainer
|
||||
sx={{
|
||||
overflow: 'auto',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '3px',
|
||||
height: '3px'
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
backgroundColor: '#65387A' // Color of the scrollbar thumb
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow sx={{ bgcolor: bgcolor0 }}>
|
||||
<TableCell rowSpan={2}># </TableCell>
|
||||
<TableCell rowSpan={2}> Location</TableCell>
|
||||
<TableCell rowSpan={2}>All </TableCell>
|
||||
<TableCell colSpan={3} sx={{ textAlign: 'center', bgcolor: bgcolor1 }}>
|
||||
Orders{' '}
|
||||
</TableCell>
|
||||
<TableCell colSpan={3} sx={{ textAlign: 'center', bgcolor: bgcolor2 }}>
|
||||
Deliveries{' '}
|
||||
</TableCell>
|
||||
<TableCell rowSpan={2}> Kilometer</TableCell>
|
||||
<TableCell rowSpan={2}>Charges </TableCell>
|
||||
<TableCell rowSpan={2}>Amount </TableCell>
|
||||
<TableCell rowSpan={2}> Action</TableCell>
|
||||
</TableRow>
|
||||
{/* sx={{ bgcolor: headCell.bgcolor }} */}
|
||||
<TableRow>
|
||||
<TableCell sx={{ bgcolor: bgcolor1 }}>Pending</TableCell>
|
||||
<TableCell sx={{ bgcolor: bgcolor1 }}>Completed</TableCell>
|
||||
<TableCell sx={{ bgcolor: bgcolor1 }}>Cancelled</TableCell>
|
||||
<TableCell sx={{ bgcolor: bgcolor2 }}>Pending</TableCell>
|
||||
<TableCell sx={{ bgcolor: bgcolor2 }}>Completed</TableCell>
|
||||
<TableCell sx={{ bgcolor: bgcolor2 }}>Cancelled</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows?.length !== 0 ? (
|
||||
rows?.map((row, index) => (
|
||||
<>
|
||||
{/* ============================================ || tablerow 1 || ============================================ */}
|
||||
|
||||
<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
|
||||
}}
|
||||
>
|
||||
<TableCell scope="row" padding="none">
|
||||
{index + 1}
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction="row" sx={{ ml: -2 }}>
|
||||
{row.locationname}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="center">{row.totalorders}</TableCell>
|
||||
<TableCell align="center">{row.Orderspending}</TableCell>
|
||||
<TableCell align="center">{row.orderscompleted}</TableCell>
|
||||
<TableCell align="center">{row.orderscancelled}</TableCell>
|
||||
<TableCell align="center"> {row.deliveriespending}</TableCell>
|
||||
<TableCell align="center"> {row.deliveriescompleted}</TableCell>
|
||||
<TableCell align="center"> {row.deliveriescancelled}</TableCell>
|
||||
<TableCell align="left">
|
||||
<Tooltip title="kms" placement="top">
|
||||
<Chip
|
||||
size="small"
|
||||
label={parseFloat(row.kms).toFixed(2)}
|
||||
sx={{
|
||||
color: '#f44336',
|
||||
bgcolor: '#ffcdd2',
|
||||
border: '1px solid #f44336',
|
||||
mb: 1,
|
||||
cursor: 'pointer',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<br />
|
||||
<Tooltip title="Actual kms" placement="bottom">
|
||||
<Chip
|
||||
size="small"
|
||||
label={parseFloat(row.actualkms).toFixed(2)}
|
||||
sx={{
|
||||
color: '#43a047',
|
||||
bgcolor: '#c8e6c9',
|
||||
border: '1px solid #43a047',
|
||||
cursor: 'pointer',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Tooltip title="Pay on Delivery" placement="top">
|
||||
<Chip
|
||||
size="small"
|
||||
label={formatNumberToRupees(row.payondelivery)}
|
||||
variant="outlined"
|
||||
color="error"
|
||||
sx={{
|
||||
color: '#f44336',
|
||||
bgcolor: '#ffcdd2',
|
||||
border: '1px solid #f44336',
|
||||
mb: 1,
|
||||
cursor: 'pointer',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
<br />
|
||||
<Tooltip title="Pay Later" placement="bottom">
|
||||
<Chip
|
||||
size="small"
|
||||
label={formatNumberToRupees(row.paylater)}
|
||||
variant="outlined"
|
||||
color="success"
|
||||
sx={{
|
||||
color: '#43a047',
|
||||
bgcolor: '#c8e6c9',
|
||||
border: '1px solid #43a047',
|
||||
cursor: 'pointer',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip title="Total Charges" placement="top">
|
||||
<Chip
|
||||
size="small"
|
||||
label={formatNumberToRupees(row.charges)}
|
||||
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={() => {
|
||||
getriderlocationsummary(row.locationid);
|
||||
setOpenRow(openRow === row.locationid ? null : row.locationid);
|
||||
}}
|
||||
sx={{
|
||||
bgcolor: openRow === row.locationid ? 'primary.main' : null,
|
||||
color: openRow === row.locationid ? 'white' : null,
|
||||
'&:hover': {
|
||||
bgcolor: openRow === row.locationid ? 'primary.main' : '#e1bee7'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{openRow === row.locationid ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/* ============================================ || collapsive row || ============================================ */}
|
||||
{openRow === row.locationid && (
|
||||
<TableRow
|
||||
sx={{
|
||||
bgcolor: openRow === row.locationid ? '#f3e5f5' : null,
|
||||
'&:hover': {
|
||||
bgcolor: openRow === row.locationid ? '#f3e5f5!important' : null
|
||||
},
|
||||
cursor: openRow === row.locationid ? 'pointer' : null
|
||||
}}
|
||||
>
|
||||
<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',
|
||||
'&:onhover': {
|
||||
bgcolor: '#f3e5f5!important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableRow>
|
||||
<TableCell>#</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">Charges</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ridersdata?.map((rider, index) => (
|
||||
<TableRow key={rider?.tenantname}>
|
||||
<TableCell padding="none">{index + 1}</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction="row" sx={{ ml: -2 }}>
|
||||
{rider?.firstname}
|
||||
{rider?.status == 'Active' ? (
|
||||
<TaskAltIcon fontSize="small" color="success" sx={{ ml: 1 }} />
|
||||
) : (
|
||||
<HighlightOffIcon fontSize="small" color="error" sx={{ ml: 1 }} />
|
||||
)}
|
||||
</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">
|
||||
<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}
|
||||
sx={{
|
||||
color: '#ff8f00',
|
||||
bgcolor: '#ffecb3',
|
||||
border: '1px solid #ff8f00',
|
||||
cursor: 'pointer',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="center">
|
||||
<Tooltip title="Pay on Delivery" placement="top">
|
||||
<Chip
|
||||
size="small"
|
||||
label={formatNumberToRupees(rider?.payondelivery)}
|
||||
sx={{
|
||||
color: '#f44336',
|
||||
bgcolor: '#ffcdd2',
|
||||
border: '1px solid #f44336',
|
||||
mr: 1,
|
||||
cursor: 'pointer',
|
||||
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>
|
||||
<TableCell align="center">
|
||||
<Tooltip title="Amount" placement="top">
|
||||
<Chip
|
||||
size="small"
|
||||
label={formatNumberToRupees(rider?.Deliveryamt)}
|
||||
sx={{
|
||||
color: 'primary.main',
|
||||
bgcolor: '#e1bee7',
|
||||
border: '1px solid #662582 ',
|
||||
cursor: 'pointer',
|
||||
minWidth: 100
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Collapse>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={17} rowSpan={40}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
{/* ============================================ || total - row || ============================================ */}
|
||||
<TableRow sx={{ bgcolor: '#e0e0e0' }}>
|
||||
<TableCell colSpan={2}>
|
||||
<Typography variant="h5">Total</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5">{totalOrders}</Typography>{' '}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5">{totalOrderPend}</Typography>{' '}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5">{totalOrderComplete}</Typography>{' '}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5"> {totalOrderCancel}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5">{totalDeliPend}</Typography>{' '}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5">{totalDeliComplete}</Typography>{' '}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Typography variant="h5"> {totalDeliCancel}</Typography>
|
||||
</TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell></TableCell>
|
||||
<TableCell align="right" sx={{ pr: -2 }}>
|
||||
<Typography variant="h5">{formatNumberToRupees(total)}</Typography>
|
||||
</TableCell>{' '}
|
||||
<TableCell></TableCell>
|
||||
</TableRow>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</MainCard>
|
||||
{/* ============================================ || date filter dialog || ============================================ */}
|
||||
<Dialog open={open}>
|
||||
<DialogTitle align="left">
|
||||
<Typography variant="h4">Select Filter Options</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ width: '100%' }} className="datedialog">
|
||||
<DateRangePicker
|
||||
open={open}
|
||||
toggle={() => setOpen(!open)}
|
||||
id="daterange1"
|
||||
onChange={(range) => {
|
||||
if (range.label === 'All') {
|
||||
setStartdate('');
|
||||
setEnddate('');
|
||||
|
||||
setOpen(false);
|
||||
} else {
|
||||
setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
|
||||
setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
|
||||
if (range.label) {
|
||||
setDatestatus(range.label);
|
||||
} else {
|
||||
setDatestatus('');
|
||||
}
|
||||
}
|
||||
console.log(range);
|
||||
}}
|
||||
definedRanges={[
|
||||
{
|
||||
label: 'Today',
|
||||
startDate: new Date(),
|
||||
endDate: new Date()
|
||||
},
|
||||
{
|
||||
label: 'Yesterday',
|
||||
startDate: addDays(new Date(), -1),
|
||||
endDate: addDays(new Date(), -1)
|
||||
},
|
||||
{
|
||||
label: 'Tomorrow',
|
||||
startDate: addDays(new Date(), +1),
|
||||
endDate: addDays(new Date(), +1)
|
||||
},
|
||||
{
|
||||
label: 'This Week',
|
||||
startDate: startOfWeek(new Date()),
|
||||
endDate: endOfWeek(new Date())
|
||||
},
|
||||
{
|
||||
label: 'Last Week',
|
||||
startDate: startOfWeek(addWeeks(new Date(), -1)),
|
||||
endDate: endOfWeek(addWeeks(new Date(), -1))
|
||||
},
|
||||
{
|
||||
label: 'Last 7 Days',
|
||||
startDate: addWeeks(new Date(), -1),
|
||||
endDate: new Date()
|
||||
},
|
||||
{
|
||||
label: 'This Month',
|
||||
startDate: startOfMonth(new Date()),
|
||||
endDate: endOfMonth(new Date())
|
||||
},
|
||||
{
|
||||
label: 'Last Month',
|
||||
startDate: startOfMonth(addMonths(new Date(), -1)),
|
||||
endDate: endOfMonth(addMonths(new Date(), -1))
|
||||
},
|
||||
{
|
||||
label: 'All',
|
||||
startDate: new Date(),
|
||||
endDate: addDays(new Date(), -1)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</DialogContent>
|
||||
<Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
|
||||
<Button variant="contained" size="small" onClick={() => setOpen(false)}>
|
||||
ok
|
||||
</Button>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import { useTheme } from '@mui/material/styles';
|
||||
import { SlLocationPin } from 'react-icons/sl';
|
||||
import MapWithRoute from './mapWithRoute';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import MyLocationIcon from '@mui/icons-material/MyLocation';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
@@ -27,7 +28,6 @@ import {
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Chip,
|
||||
Paper,
|
||||
FormControl,
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
@@ -72,6 +72,7 @@ function formatNumberToRupees(value) {
|
||||
// ==============================|| MUI TABLE - ENHANCED ||============================== //
|
||||
|
||||
export default function OrdersDetails() {
|
||||
const tenId = localStorage.getItem('tenantid');
|
||||
const textFieldRef = useRef(null);
|
||||
const loadMoreRef = useRef();
|
||||
const containerRef = useRef();
|
||||
@@ -88,29 +89,42 @@ export default function OrdersDetails() {
|
||||
const [riderEnd, setRiderEnd] = useState();
|
||||
const [mapOpen, setMapOpen] = useState(false);
|
||||
const [mapTenant, setMapTenant] = useState({});
|
||||
let [total, settotal] = useState(0);
|
||||
let [coveredLenght, setCoveredLenght] = useState(0);
|
||||
let [uncoveredLenght, setUncoveredLenght] = useState(0);
|
||||
let [cancelLenght, setCancelLenght] = useState(0);
|
||||
let [assignLenght, setAssignLenght] = useState(0);
|
||||
let [pickedLenght, setPickedLenght] = useState(0);
|
||||
let [activeLenght, setActiveLenght] = useState(0);
|
||||
let [arrivesLenght, setArrivedLenght] = useState(0);
|
||||
const [currentStatus, setCurrentStatus] = useState('All');
|
||||
const [statusLabel, setStatuslabel] = useState('All');
|
||||
const [statusCount, setStatusCount] = useState(0);
|
||||
const [tenantLocations, setTenantlocations] = useState([]);
|
||||
const [locationId, setLocationId] = useState(0);
|
||||
const [locoName, setLocoName] = useState('Select Location');
|
||||
|
||||
const status = [
|
||||
{ id: 0, status: 'All', statusLow: 'All', count: total },
|
||||
{ id: 1, status: 'Pending', statusLow: 'pending', count: assignLenght },
|
||||
{ id: 2, status: 'Accepted', statusLow: 'accepted', count: uncoveredLenght },
|
||||
{ id: 3, status: 'Arrived', statusLow: 'arrived', count: arrivesLenght },
|
||||
{ id: 4, status: 'Picked', statusLow: 'picked', count: pickedLenght },
|
||||
{ id: 5, status: 'Active', statusLow: 'active', count: activeLenght },
|
||||
{ id: 6, status: 'Delivered', statusLow: 'delivered', count: coveredLenght },
|
||||
{ id: 7, status: 'Cancelled', statusLow: 'cancelled', count: cancelLenght }
|
||||
{ id: 0, status: 'All', statusLow: 'All' },
|
||||
{ id: 1, status: 'Pending', statusLow: 'pending' },
|
||||
{ id: 2, status: 'Accepted', statusLow: 'accepted' },
|
||||
{ id: 3, status: 'Arrived', statusLow: 'arrived' },
|
||||
{ id: 4, status: 'Picked', statusLow: 'picked' },
|
||||
{ id: 5, status: 'Active', statusLow: 'active' },
|
||||
{ id: 6, status: 'Delivered', statusLow: 'delivered' },
|
||||
{ id: 7, status: 'Cancelled', statusLow: 'cancelled' }
|
||||
];
|
||||
|
||||
// ============================================= || gettenantlocations (branches) || =============================================
|
||||
const gettenantlocations = async (id) => {
|
||||
try {
|
||||
const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`);
|
||||
console.log('gettenantlocations', res.data.details);
|
||||
if (res.data.details.length == 1) {
|
||||
setIsLocation(true);
|
||||
setTenantlocations(res.data.details);
|
||||
setPickCust(res.data.details[0]);
|
||||
} else {
|
||||
setTenantlocations(res.data.details);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log('gettenantlocations', err);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
gettenantlocations(tenId);
|
||||
}, []);
|
||||
const getdeliverylogs = async (id) => {
|
||||
console.log('deliveryid', id);
|
||||
try {
|
||||
@@ -162,15 +176,6 @@ export default function OrdersDetails() {
|
||||
|
||||
// ==============================|| fetchorderdetails (orders)||============================== //
|
||||
|
||||
// const {
|
||||
// isLoading: isLoadingOrderDetails,
|
||||
// isError: isErrorOrderDetails, //true or false
|
||||
// data: rows,
|
||||
// error: orderDetailsError
|
||||
// } = useQuery({
|
||||
// queryKey: [startdate, enddate, currentStatus],
|
||||
// queryFn: fetchorderdetails
|
||||
// });
|
||||
const {
|
||||
data: rowdata,
|
||||
isError: isErrorOrderDetails,
|
||||
@@ -181,7 +186,7 @@ export default function OrdersDetails() {
|
||||
isFetchingNextPage
|
||||
// status: rowdataStatus
|
||||
} = useInfiniteQuery({
|
||||
queryKey: [startdate, enddate, currentStatus],
|
||||
queryKey: [startdate, enddate, currentStatus, locationId],
|
||||
queryFn: fetchorderdetails,
|
||||
getNextPageParam: (lastPage) => lastPage.nextPage
|
||||
});
|
||||
@@ -212,13 +217,8 @@ export default function OrdersDetails() {
|
||||
|
||||
// ==================================== || fetchDeliverySummary || ====================================
|
||||
|
||||
const {
|
||||
data: deliverycount,
|
||||
isLoading,
|
||||
isError,
|
||||
error
|
||||
} = useQuery({
|
||||
queryKey: ['deliverycount', startdate, enddate, currentStatus],
|
||||
const { data: deliverycount } = useQuery({
|
||||
queryKey: ['deliverycount', startdate, enddate, currentStatus, locationId],
|
||||
queryFn: fetchDeliverySummary
|
||||
});
|
||||
|
||||
@@ -266,7 +266,6 @@ export default function OrdersDetails() {
|
||||
|
||||
// ==============================|| fetchAppLocations ||============================== //
|
||||
|
||||
if (isLoadingOrderDetails) return <Loader />;
|
||||
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
|
||||
|
||||
const filteredOrders = rows.filter((row) =>
|
||||
@@ -345,127 +344,165 @@ export default function OrdersDetails() {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{isLoadingOrderDetails && <Loader />}
|
||||
<TitleCard title="Orders Details" />
|
||||
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
|
||||
<Stack
|
||||
display={'flex'}
|
||||
flexDirection={{ xs: 'column', md: 'row' }}
|
||||
alignItems={'center'}
|
||||
justifyContent={'space-between'}
|
||||
sx={{ p: 2 }}
|
||||
spacing={1}
|
||||
>
|
||||
<Stack direction="column" 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) && (
|
||||
<>
|
||||
<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}>
|
||||
<Chip label="Orders-All" color="primary" variant="light" size="small" />
|
||||
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
|
||||
<Autocomplete
|
||||
sx={{ minWidth: 200 }}
|
||||
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={statusLabel || 'Select Status'} />}
|
||||
/>
|
||||
<FormControl sx={{ width: 250 }}>
|
||||
<OutlinedInput
|
||||
inputRef={textFieldRef}
|
||||
aria-describedby="header-search-text"
|
||||
inputProps={{
|
||||
'aria-label': 'weight'
|
||||
)}
|
||||
{(!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>
|
||||
<Autocomplete
|
||||
sx={{ minWidth: 200 }}
|
||||
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);
|
||||
}
|
||||
}}
|
||||
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>
|
||||
}
|
||||
renderInput={(params) => <TextField {...params} label={'Select Status'} />}
|
||||
/>
|
||||
</FormControl>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<MainCard content={false}>
|
||||
}
|
||||
>
|
||||
<TableContainer
|
||||
onScroll={handleScroll}
|
||||
ref={containerRef}
|
||||
|
||||
7
src/pages/nearle/reports/riderLogs.js
Normal file
7
src/pages/nearle/reports/riderLogs.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
const riderLogs = () => {
|
||||
return <div>riderLogs</div>;
|
||||
};
|
||||
|
||||
export default riderLogs;
|
||||
679
src/pages/nearle/reports/ridersummary.js
Normal file
679
src/pages/nearle/reports/ridersummary.js
Normal file
@@ -0,0 +1,679 @@
|
||||
import { React, useState, useEffect, useRef } from 'react';
|
||||
import axios from 'axios';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import TaskAltIcon from '@mui/icons-material/TaskAlt';
|
||||
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
|
||||
import { Empty } from 'antd';
|
||||
// material-ui
|
||||
import {
|
||||
Box,
|
||||
Divider,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
Typography,
|
||||
DialogContent,
|
||||
Stack,
|
||||
Button,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Chip,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
Collapse
|
||||
} from '@mui/material';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
|
||||
import dayjs from 'dayjs';
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
dayjs.extend(utc);
|
||||
import { DateRangePicker } from 'mui-daterange-picker';
|
||||
import {
|
||||
addDays,
|
||||
addMonths,
|
||||
addWeeks,
|
||||
// addYears,
|
||||
endOfMonth,
|
||||
endOfWeek,
|
||||
// endOfYear,
|
||||
startOfMonth,
|
||||
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';
|
||||
|
||||
// table filter
|
||||
function descendingComparator(a, b, orderBy) {
|
||||
if (b[orderBy] < a[orderBy]) {
|
||||
return -1;
|
||||
}
|
||||
if (b[orderBy] > a[orderBy]) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
function getComparator(order, orderBy) {
|
||||
return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy);
|
||||
}
|
||||
|
||||
function stableSort(array, comparator) {
|
||||
const stabilizedThis = array.map((el, index) => [el, index]);
|
||||
stabilizedThis.sort((a, b) => {
|
||||
const order = comparator(a[0], b[0]);
|
||||
if (order !== 0) return order;
|
||||
return a[1] - b[1];
|
||||
});
|
||||
return stabilizedThis.map((el) => el[0]);
|
||||
}
|
||||
function formatNumberToRupees(value) {
|
||||
return new Intl.NumberFormat('en-IN', {
|
||||
style: 'currency',
|
||||
currency: 'INR',
|
||||
minimumFractionDigits: 2
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
// ==============================|| MUI TABLE - ENHANCED ||============================== //
|
||||
|
||||
export default function RidersSummary() {
|
||||
// const [rows, setRows] = useState([]);
|
||||
const [order, setOrder] = useState('asc');
|
||||
const [orderBy, setOrderBy] = useState('calories');
|
||||
const [selected, setSelected] = useState([]);
|
||||
const [page, setPage] = useState(0);
|
||||
const [dense] = useState(false);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const [selectedValue, setSelectedValue] = useState([]);
|
||||
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [locaName, setLocoName] = useState('All');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [dateselect, setDateselect] = useState('select');
|
||||
const [tabstatus1, setTabstatus1] = useState('Today');
|
||||
const [datestatus, setDatestatus] = useState('Today');
|
||||
const [total, settotal] = useState(0);
|
||||
const [id, setid] = useState(-1);
|
||||
|
||||
const [tenantData, setTenantData] = useState([]);
|
||||
const [openRow, setOpenRow] = useState(null); // Initially no row is open
|
||||
const [searchword, setSearchword] = useState('');
|
||||
const textFieldRef = useRef(null);
|
||||
|
||||
const [appId, setAppId] = useState(localStorage.getItem('applocationid'));
|
||||
const [locations, setLocations] = useState('Select Location');
|
||||
const userid = localStorage.getItem('userid');
|
||||
|
||||
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
|
||||
useEffect(() => {
|
||||
const handleKeyPress = (event) => {
|
||||
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
|
||||
event.preventDefault();
|
||||
|
||||
textFieldRef.current.focus();
|
||||
}
|
||||
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
|
||||
// Remove focus from the TextField
|
||||
textFieldRef.current.blur();
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyPress);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyPress);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ==============================|| fetchRidersSummary (riders summary)||============================== //
|
||||
const {
|
||||
isLoading: isLoadingReports,
|
||||
isError: isErrorReports, //true or false
|
||||
data: rows,
|
||||
error: reportsError
|
||||
} = useQuery({
|
||||
queryKey: [appId, startdate, enddate],
|
||||
queryFn: fetchRidersSummary
|
||||
});
|
||||
// ==============================|| calculate||============================== //
|
||||
const calculate = async () => {
|
||||
let calculatedTotal = 0;
|
||||
rows &&
|
||||
rows.forEach((row, index) => {
|
||||
console.log(index, row.Deliveryamt);
|
||||
calculatedTotal += row.Deliveryamt;
|
||||
});
|
||||
// Update the state after the calculation is done
|
||||
settotal(calculatedTotal);
|
||||
console.log('calculatedTotal', calculatedTotal);
|
||||
};
|
||||
useEffect(() => {
|
||||
calculate();
|
||||
}, [rows]);
|
||||
|
||||
if (isLoadingReports) return <Loader />;
|
||||
if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message;
|
||||
|
||||
// ==============================|| fetchTenantSummary by rider (rider summary)||============================== //
|
||||
const fetchTenantSummary = async (riderUserid) => {
|
||||
try {
|
||||
const tenantRes = await axios.get(
|
||||
`${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}`
|
||||
);
|
||||
console.log('tenantRes', tenantRes.data.details);
|
||||
setTenantData(tenantRes.data.details);
|
||||
} catch (error) {
|
||||
console.log('tenantRes', error);
|
||||
}
|
||||
};
|
||||
|
||||
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={
|
||||
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} flexWrap={'wrap'} gap={1}>
|
||||
<Stack direction="column" alignItems="flex-start" spacing={1} sx={{}}>
|
||||
{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" />
|
||||
{/* <Chip label={<Typography noWrap color="secondary">ALL</Typography>} variant="combined" color='warning' size='small' /> */}
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
{/* table */}
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>S.No </TableCell>
|
||||
<TableCell> Rider</TableCell>
|
||||
<TableCell> Deliveries</TableCell>
|
||||
<TableCell> Assigned</TableCell>
|
||||
<TableCell> Accepted</TableCell>
|
||||
<TableCell>Picked </TableCell>
|
||||
<TableCell>Delivered </TableCell>
|
||||
<TableCell>KMS/Actualkms </TableCell>
|
||||
<TableCell> POD/PLA</TableCell>
|
||||
<TableCell> Charges</TableCell>
|
||||
<TableCell>Action </TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{/* ============================================ || TableBody || ============================================ */}
|
||||
|
||||
<TableBody>
|
||||
{rows.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={11}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</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}`;
|
||||
|
||||
return (
|
||||
rows.length !== 0 && (
|
||||
<>
|
||||
{/* // ============================================ || tablerow 1 || ============================================ */}
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<Chip
|
||||
size="small"
|
||||
label={row.kms}
|
||||
sx={{
|
||||
color: '#1976d2',
|
||||
bgcolor: '#e3f2fd',
|
||||
mr: 1,
|
||||
border: '1px solid #1976d2',
|
||||
cursor: 'pointer',
|
||||
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
|
||||
sx={{
|
||||
bgcolor: openRow === row.userid ? '#f3e5f5' : null,
|
||||
'&:hover': {
|
||||
bgcolor: openRow === row.userid ? '#f3e5f5!important' : null
|
||||
},
|
||||
cursor: openRow === row.userid ? 'pointer' : null
|
||||
}}
|
||||
>
|
||||
<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
|
||||
size="small"
|
||||
label={row.kms}
|
||||
sx={{
|
||||
color: '#1976d2',
|
||||
bgcolor: '#e3f2fd',
|
||||
mr: 1,
|
||||
border: '1px solid #1976d2',
|
||||
minWidth: 80
|
||||
}}
|
||||
/>
|
||||
<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="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>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Divider />
|
||||
<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}
|
||||
/> */}
|
||||
</MainCard>
|
||||
<Dialog open={open}>
|
||||
<DialogTitle align="left">
|
||||
<Typography variant="h4">Select Filter Options</Typography>
|
||||
</DialogTitle>
|
||||
<DialogContent sx={{ width: '100%' }} className="datedialog">
|
||||
<DateRangePicker
|
||||
open={open}
|
||||
toggle={() => setOpen(!open)}
|
||||
id="daterange1"
|
||||
onChange={(range) => {
|
||||
if (range.label === 'All') {
|
||||
setDateselect('all');
|
||||
setStartdate('');
|
||||
setEnddate('');
|
||||
|
||||
setOpen(false);
|
||||
} else {
|
||||
setDateselect('select');
|
||||
setStartdate(dayjs(range.startDate).format('YYYY-MM-DD'));
|
||||
setEnddate(dayjs(range.endDate).format('YYYY-MM-DD'));
|
||||
if (range.label) {
|
||||
setDatestatus(range.label);
|
||||
} else {
|
||||
setDatestatus('');
|
||||
}
|
||||
}
|
||||
console.log(range);
|
||||
}}
|
||||
definedRanges={[
|
||||
{
|
||||
label: 'Today',
|
||||
startDate: new Date(),
|
||||
endDate: new Date()
|
||||
},
|
||||
{
|
||||
label: 'Yesterday',
|
||||
startDate: addDays(new Date(), -1),
|
||||
endDate: addDays(new Date(), -1)
|
||||
},
|
||||
{
|
||||
label: 'Tomorrow',
|
||||
startDate: addDays(new Date(), +1),
|
||||
endDate: addDays(new Date(), +1)
|
||||
},
|
||||
{
|
||||
label: 'This Week',
|
||||
startDate: startOfWeek(new Date()),
|
||||
endDate: endOfWeek(new Date())
|
||||
},
|
||||
{
|
||||
label: 'Last Week',
|
||||
startDate: startOfWeek(addWeeks(new Date(), -1)),
|
||||
endDate: endOfWeek(addWeeks(new Date(), -1))
|
||||
},
|
||||
{
|
||||
label: 'Last 7 Days',
|
||||
startDate: addWeeks(new Date(), -1),
|
||||
endDate: new Date()
|
||||
},
|
||||
{
|
||||
label: 'This Month',
|
||||
startDate: startOfMonth(new Date()),
|
||||
endDate: endOfMonth(new Date())
|
||||
},
|
||||
{
|
||||
label: 'Last Month',
|
||||
startDate: startOfMonth(addMonths(new Date(), -1)),
|
||||
endDate: endOfMonth(addMonths(new Date(), -1))
|
||||
},
|
||||
{
|
||||
label: 'All',
|
||||
startDate: new Date(),
|
||||
endDate: addDays(new Date(), -1)
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</DialogContent>
|
||||
<Stack direction="row" justifyContent="flex-end" sx={{ width: '100%', p: 2 }}>
|
||||
<Button variant="contained" size="small" onClick={() => setOpen(false)}>
|
||||
ok
|
||||
</Button>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user