943 lines
36 KiB
JavaScript
943 lines
36 KiB
JavaScript
import { React, useState, useEffect, useRef } from 'react';
|
|
import TitleCard from 'pages/nearle/titleCard';
|
|
import axios from 'axios';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Empty } from 'antd';
|
|
import ClearIcon from '@mui/icons-material/Clear';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { SlLocationPin } from 'react-icons/sl';
|
|
import MapWithRoute from './mapWithRoute';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
|
|
// material-ui
|
|
import {
|
|
Divider,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Grid,
|
|
Dialog,
|
|
DialogTitle,
|
|
Typography,
|
|
DialogContent,
|
|
Stack,
|
|
Button,
|
|
IconButton,
|
|
Tooltip,
|
|
Chip,
|
|
Paper,
|
|
FormControl,
|
|
OutlinedInput,
|
|
InputAdornment,
|
|
Badge,
|
|
Autocomplete,
|
|
TextField
|
|
} from '@mui/material';
|
|
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 { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
|
|
import MainCard from 'components/MainCard';
|
|
import { CSVExport } from 'components/third-party/ReactTable';
|
|
import Loader from 'components/Loader';
|
|
|
|
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);
|
|
}
|
|
const headCells = [
|
|
{
|
|
id: 'sno',
|
|
disablePadding: false,
|
|
label: '#'
|
|
},
|
|
|
|
{
|
|
id: 'tenantname',
|
|
disablePadding: false,
|
|
label: 'Client'
|
|
},
|
|
|
|
{
|
|
id: 'Pickup loco',
|
|
disablePadding: false,
|
|
label: 'Pickup'
|
|
},
|
|
{
|
|
id: 'Delivery loco',
|
|
disablePadding: false,
|
|
label: 'Drop'
|
|
},
|
|
{
|
|
id: 'order status',
|
|
disablePadding: false,
|
|
label: 'status'
|
|
},
|
|
{
|
|
id: 'assigned',
|
|
disablePadding: false,
|
|
label: 'assigned'
|
|
},
|
|
{
|
|
id: 'Accepted',
|
|
disablePadding: false,
|
|
label: 'Accepted'
|
|
},
|
|
{
|
|
id: 'arrived',
|
|
disablePadding: false,
|
|
label: 'arrived'
|
|
},
|
|
{
|
|
id: 'picked',
|
|
disablePadding: false,
|
|
label: 'picked'
|
|
},
|
|
{
|
|
id: 'Delivered',
|
|
disablePadding: false,
|
|
label: 'Delivered'
|
|
},
|
|
{
|
|
id: 'cancelled',
|
|
disablePadding: false,
|
|
label: 'cancelled'
|
|
},
|
|
{
|
|
id: ' notes',
|
|
disablePadding: false,
|
|
label: 'NOTES'
|
|
},
|
|
|
|
{
|
|
id: 'kms',
|
|
disablePadding: false,
|
|
label: 'KMS'
|
|
},
|
|
{
|
|
id: 'charges',
|
|
disablePadding: false,
|
|
label: 'Charges',
|
|
numeric: true
|
|
}
|
|
];
|
|
|
|
// ==============================|| MUI TABLE - ENHANCED ||============================== //
|
|
|
|
export default function OrdersDetails() {
|
|
const textFieldRef = useRef(null);
|
|
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(20);
|
|
const [selectedValue, setSelectedValue] = useState([]);
|
|
const [locaName, setLocoName] = useState('All');
|
|
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
|
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
|
const [open, setOpen] = useState(false);
|
|
const [open1, setOpen1] = useState(false);
|
|
const [dateselect, setDateselect] = useState('select');
|
|
const [tabstatus1, setTabstatus1] = useState('Today');
|
|
const [datestatus, setDatestatus] = useState('Today');
|
|
const [totalCharge, settotalCharge] = useState(0);
|
|
const [totalAmount, settotalAmount] = useState(0);
|
|
const [appId, setAppId] = useState(-1);
|
|
const [value, setValue] = useState(0);
|
|
const [tabvalue, setTabvalue] = useState(0);
|
|
const [deliCount, setDeliCount] = useState(0);
|
|
const [pendCount, setPendCount] = useState(0);
|
|
const [cancelCount, setCancelCount] = useState(0);
|
|
const [searchword, setSearchword] = useState('');
|
|
const [count, setCount] = useState(0);
|
|
const theme = useTheme();
|
|
const [riderCoordinates, setRiderCoordinates] = useState([]);
|
|
const [riderStart, setRiderStart] = useState();
|
|
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 [statusCount, setStatusCount] = useState();
|
|
const [currentStatus, setCurrentStatus] = useState('All');
|
|
|
|
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 }
|
|
];
|
|
|
|
const getdeliverylogs = async (id) => {
|
|
console.log('deliveryid', id);
|
|
try {
|
|
const res = await axios.get(`${process.env.REACT_APP_URL}/deliveries/getdeliverylogs/?deliveryid=${id}`);
|
|
console.log('getdeliverylogs', res.data.details);
|
|
const datas = res.data.details;
|
|
if (datas.length != 0) {
|
|
setRiderStart(datas[0].logdate);
|
|
setRiderEnd(datas[datas.length - 1].logdate);
|
|
const coData = datas.map((data) => ({ lat: data.latitude, lng: data.longitude }));
|
|
console.log('coData', coData);
|
|
setRiderCoordinates(coData);
|
|
setOpen1(true);
|
|
} else {
|
|
opentoast('No Logs Found ', 'error', 2000);
|
|
}
|
|
} catch (error) {
|
|
console.log('getdeliverylogs', error);
|
|
}
|
|
};
|
|
|
|
const opentoast = (message, variant, time) => {
|
|
enqueueSnackbar(message, {
|
|
variant: variant,
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: time ? time : 1500
|
|
});
|
|
};
|
|
|
|
// ==============================|| textFieldRef (cmd+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);
|
|
};
|
|
}, []);
|
|
|
|
// ==============================|| fetchorderdetails (orders)||============================== //
|
|
|
|
const {
|
|
isLoading: isLoadingOrderDetails,
|
|
isError: isErrorOrderDetails, //true or false
|
|
data: rows,
|
|
error: orderDetailsError
|
|
} = useQuery({
|
|
queryKey: [startdate, enddate, currentStatus],
|
|
queryFn: fetchorderdetails
|
|
});
|
|
|
|
// ==============================|| calculate||============================== //
|
|
const calculate = () => {
|
|
let calculatedTotalCharge = 0;
|
|
let calculatedTotalAmount = 0;
|
|
rows &&
|
|
rows.forEach((row) => {
|
|
calculatedTotalCharge += row.deliverycharges;
|
|
});
|
|
settotalCharge(calculatedTotalCharge);
|
|
rows &&
|
|
rows.forEach((row) => {
|
|
calculatedTotalAmount += row.deliveryamt;
|
|
});
|
|
console.log('calculatedTotalAmount', calculatedTotalAmount);
|
|
settotalAmount(calculatedTotalAmount);
|
|
};
|
|
useEffect(() => {
|
|
calculate();
|
|
rows && setRowsPerPage(rows.length + 1);
|
|
rows && setCount(rows.length);
|
|
}, [rows]);
|
|
// ==============================|| fetchOrdersCount (orders)||============================== //
|
|
|
|
const {
|
|
isLoading: isLoadingOrderCount,
|
|
isError: isErrorOrderCount, //true or false
|
|
data: countData,
|
|
error: orderCountError
|
|
} = useQuery({
|
|
queryKey: [startdate, enddate],
|
|
queryFn: fetchCount
|
|
});
|
|
useEffect(() => {
|
|
if (countData) {
|
|
setDeliCount(countData.deliveredCount);
|
|
setPendCount(countData.pendingCount);
|
|
setCancelCount(countData.cancelledCount);
|
|
}
|
|
}, [fetchCount, startdate, enddate]);
|
|
// ==============================|| fetchAppLocations ||============================== //
|
|
|
|
if (isLoadingOrderDetails || isLoadingOrderCount) return <Loader />;
|
|
if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
|
|
if (isErrorOrderCount) return 'An error has occurred:(isErrorOrderCount) ' + orderCountError.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) => ({
|
|
tenantname: order.tenantname,
|
|
tenantcity: order.tenantcity,
|
|
tenantcontactno: order.tenantcontactno,
|
|
rider: order.rider,
|
|
orderid: order.orderid,
|
|
orderdate: order.orderdate,
|
|
deliverydate: order.deliverydate,
|
|
orderstatus: order.orderstatus,
|
|
deliverystatus: order.deliverystatus,
|
|
ordernotes: order.ordernotes,
|
|
kms: order.kms,
|
|
actualkms: order.actualkms,
|
|
assigntime: order.assigntime,
|
|
starttime: order.starttime,
|
|
arrivaltime: order.arrivaltime,
|
|
pickuptime: order.pickuptime,
|
|
deliverytime: order.deliverytime,
|
|
canceltime: order.canceltime,
|
|
deliverycharge: order.deliverycharge,
|
|
deliveryamt: order.deliveryamt,
|
|
pickupcustomer: order.pickupcustomer,
|
|
pickupcontactno: order.pickupcontactno,
|
|
pickupaddress: order.pickupaddress,
|
|
pickupsuburb: order.pickupsuburb,
|
|
pickupcity: order.pickupcity,
|
|
pickuplat: order.pickuplat,
|
|
pickuplong: order.pickuplong,
|
|
deliverycustomer: order.deliverycustomer,
|
|
deliverycontactno: order.deliverycontactno,
|
|
deliveryaddress: order.deliveryaddress,
|
|
deliverysuburb: order.deliverysuburb,
|
|
deliverylat: order.deliverylat,
|
|
deliverylong: order.deliverylong,
|
|
locationname: order.locationname,
|
|
locationsuburb: order.locationsuburb,
|
|
locationcity: order.locationcity,
|
|
locationcontactno: order.locationcontactno
|
|
}));
|
|
|
|
const isSelected = (name) => selected.indexOf(name) !== -1;
|
|
|
|
function formatDate(dateString) {
|
|
const date = dayjs(dateString);
|
|
const formattedDate = date.format('DD/MM/YYYY ');
|
|
return formattedDate;
|
|
}
|
|
function formatTime(dateString) {
|
|
const date = dayjs(dateString);
|
|
const formattedDate = date.format(' hh:mm A');
|
|
return formattedDate;
|
|
}
|
|
return (
|
|
<>
|
|
<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={`${filteredOrders.length}`}
|
|
max={`${count}`}
|
|
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) && (
|
|
<>
|
|
<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 sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 2 }}>
|
|
<Autocomplete
|
|
sx={{ minWidth: 200 }}
|
|
disablePortal
|
|
id="combo-box-demo"
|
|
label={currentStatus}
|
|
options={status}
|
|
getOptionLabel={(option) => `${option.status}`}
|
|
onChange={(event, value, reason) => {
|
|
if (reason === 'clear') {
|
|
setCurrentStatus('All');
|
|
setStatusCount(status[0].count);
|
|
} else {
|
|
console.log('status', value);
|
|
setCurrentStatus(value.statusLow);
|
|
setStatusCount(value.count);
|
|
}
|
|
}}
|
|
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>
|
|
|
|
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
|
</Stack>
|
|
</Stack>
|
|
</Paper>
|
|
|
|
<MainCard content={false}>
|
|
<TableContainer
|
|
sx={{
|
|
minHeight: 'auto',
|
|
maxHeight: '67vh',
|
|
overflow: 'auto',
|
|
'&::-webkit-scrollbar': {
|
|
width: '12px', // Width of vertical scrollbar
|
|
height: '14px', // Height of horizontal scrollbar,
|
|
borderRadius: 10
|
|
},
|
|
'&::-webkit-scrollbar-thumb': {
|
|
backgroundColor: '#65387A' // Color of the scrollbar thumb
|
|
}
|
|
}}
|
|
>
|
|
<Table stickyHeader aria-label="sticky table">
|
|
<TableHead
|
|
sx={{
|
|
'& th': {
|
|
borderTop: `1px solid ${theme.palette.divider}`,
|
|
borderBottom: `2px solid ${theme.palette.divider} !important`
|
|
}
|
|
}}
|
|
>
|
|
<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' }}>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' }}> 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' }}> Kms </TableCell>
|
|
<TableCell sx={{ position: 'sticky !important' }}> Charges </TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filteredOrders.length == 0 && (
|
|
<>
|
|
<TableCell colSpan={15}>
|
|
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
|
<Empty />
|
|
</Stack>
|
|
</TableCell>
|
|
</>
|
|
)}
|
|
{stableSort(filteredOrders, getComparator(order, orderBy))
|
|
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
|
|
.map((row, index) => {
|
|
if (typeof row === 'number') return null;
|
|
const isItemSelected = isSelected(row.name);
|
|
return (
|
|
filteredOrders.length !== 0 && (
|
|
<TableRow hover role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={row.name} selected={isItemSelected}>
|
|
<TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
|
|
{/* <TableCell
|
|
sx={{ width: '10px', cursor: 'pointer' }}
|
|
onClick={() => {
|
|
console.log('row', row);
|
|
setMapTenant(row);
|
|
setMapOpen(true);
|
|
getdeliverylogs(row.deliveryid);
|
|
}}
|
|
>
|
|
{<SlLocationPin />}
|
|
</TableCell> */}
|
|
<TableCell
|
|
sx={{
|
|
textAlign: 'start'
|
|
}}
|
|
>
|
|
{row.tenantname}
|
|
<Typography variant="body2" noWrap>
|
|
{row.orderid}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{dayjs(row.orderdate).utc().format('DD/MM/YYYY')}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{dayjs(row.orderdate).utc().format('hh:mm A')}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction={'row'} spacing={1}>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{row.pickupcustomer}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{row.pickupcontactno}
|
|
</Typography>
|
|
<Tooltip title={row.Pickupaddress}>
|
|
<Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
|
|
{row.pickupsuburb || row.pickuplocation || row.Pickupaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction={'row'} spacing={1}>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{row.deliverycustomer}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{row.deliverycontactno}
|
|
</Typography>
|
|
<Tooltip title={row.deliveryaddress}>
|
|
<Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
|
|
{/* {row.Pickupaddress.slice(0, 20)} */}
|
|
{row.deliverysuburb || row.deliverylocation || row.deliveryaddress.slice(0, 20)}
|
|
</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction="row">
|
|
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" sx={{ minWidth: 80 }} />}
|
|
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" sx={{ minWidth: 80 }} />}
|
|
{row.orderstatus === 'accepted' && (
|
|
<Chip
|
|
label="Accepted"
|
|
size="small"
|
|
sx={{ bgcolor: theme.palette.chip.accept, color: 'white', minWidth: 80 }}
|
|
/>
|
|
)}
|
|
{row.orderstatus === 'arrived' && (
|
|
<Chip
|
|
label="Arrived"
|
|
size="small"
|
|
sx={{ bgcolor: theme.palette.chip.arrive, color: 'white', minWidth: 80 }}
|
|
/>
|
|
)}
|
|
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" sx={{ minWidth: 80 }} />}
|
|
{row.orderstatus === 'active' && <Chip label="Active" color="info" size="small" sx={{ minWidth: 80 }} />}
|
|
{row.orderstatus === 'delivered' && (
|
|
<Chip label="Delivered" color="success" size="small" sx={{ minWidth: 80 }} />
|
|
)}
|
|
|
|
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" sx={{ minWidth: 80 }} />}
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Typography variant="h5" sx={{ fontSize: '11px' }} display="block">
|
|
{row.ridername}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{/* {dayjs(row.pending).format('DD/MM/YYYY')} */}
|
|
{row.assigntime === '' ? '' : formatDate(row.assigntime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.assigntime === '' ? '' : formatTime(row.assigntime)}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{' '}
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.starttime === '' ? '' : formatDate(row.starttime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{row.starttime === '' ? '' : formatTime(row.starttime)}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{' '}
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.arrivaltime === '' ? '' : formatDate(row.arrivaltime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{row.arrivaltime === '' ? '' : formatTime(row.arrivaltime)}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{' '}
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.pickuptime === '' ? '' : formatDate(row.pickuptime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{row.pickuptime === '' ? '' : formatTime(row.pickuptime)}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{' '}
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.deliverytime === '' ? '' : formatDate(row.deliverytime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{row.deliverytime === '' ? '' : formatTime(row.deliverytime)}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{' '}
|
|
<Typography noWrap sx={{ fontSize: '11px' }}>
|
|
{row.canceltime === '' ? '' : formatDate(row.canceltime)}
|
|
</Typography>
|
|
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
|
{row.canceltime === '' ? '' : formatTime(row.canceltime)}
|
|
</Typography>
|
|
</TableCell>
|
|
|
|
<TableCell align="left">
|
|
<Typography variant="caption">{row.ordernotes}</Typography>
|
|
</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.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
|
|
? '0.0'
|
|
: // : parseFloat(row.actualkms).toFixed(2)
|
|
row.actualkms
|
|
}
|
|
size="small"
|
|
color="success"
|
|
variant="light"
|
|
/>
|
|
</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.deliveryamt == '' ? `₹ ${0}.00` : `₹ ${row.deliveryamt}.00`}
|
|
size="small"
|
|
color="success"
|
|
variant="light"
|
|
/>
|
|
</Tooltip>
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Divider />
|
|
</MainCard>
|
|
{/* ========================================= || bottom row || ========================================= */}
|
|
|
|
<Stack
|
|
direction={'row'}
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'end',
|
|
bgcolor: '#eeeeee'
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'end',
|
|
margin: '10px '
|
|
}}
|
|
>
|
|
<Typography variant="h5">Total Charges :</Typography>
|
|
<Tooltip title="Total Charges">
|
|
<Chip label={formatNumberToRupees(totalCharge)} size="medium" color="error" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'end',
|
|
margin: '10px '
|
|
}}
|
|
>
|
|
<Typography variant="h5">Total Amount :</Typography>
|
|
<Tooltip title="Total Charge">
|
|
<Chip label={formatNumberToRupees(totalAmount)} size="medium" color="success" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
|
|
</Tooltip>
|
|
</div>
|
|
</Stack>
|
|
{/* ========================================= || Date 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') {
|
|
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>
|
|
{/* ========================================= || MapWithRoute || ========================================= */}
|
|
<Dialog
|
|
open={mapOpen}
|
|
onClose={() => {
|
|
setMapOpen(false);
|
|
}}
|
|
maxWidth={'lg'}
|
|
fullWidth
|
|
>
|
|
{riderCoordinates && (
|
|
<div>
|
|
<MapWithRoute
|
|
coordinates={riderCoordinates}
|
|
additionalProps={{ riderStart, riderEnd }}
|
|
order={mapTenant}
|
|
setMapOpen={setMapOpen}
|
|
/>
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</>
|
|
);
|
|
}
|