orderdetails scroll
This commit is contained in:
joshikannan
@@ -1,7 +1,7 @@
|
||||
import { React, useState, useEffect, useRef } from 'react';
|
||||
import TitleCard from 'pages/nearle/titleCard';
|
||||
import axios from 'axios';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
|
||||
import { Empty } from 'antd';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
@@ -18,7 +18,6 @@ import {
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Grid,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
Typography,
|
||||
@@ -34,7 +33,8 @@ import {
|
||||
InputAdornment,
|
||||
Badge,
|
||||
Autocomplete,
|
||||
TextField
|
||||
TextField,
|
||||
CircularProgress
|
||||
} from '@mui/material';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
@@ -56,34 +56,11 @@ import {
|
||||
import { FilterList } from '@mui/icons-material';
|
||||
|
||||
// project imports
|
||||
import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
|
||||
import { fetchDeliverySummary, fetchorderdetails } 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',
|
||||
@@ -91,119 +68,26 @@ function formatNumberToRupees(value) {
|
||||
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 loadMoreRef = useRef();
|
||||
const containerRef = useRef();
|
||||
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);
|
||||
@@ -212,8 +96,9 @@ export default function OrdersDetails() {
|
||||
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 [statusLabel, setStatuslabel] = useState('All');
|
||||
const [statusCount, setStatusCount] = useState(0);
|
||||
|
||||
const status = [
|
||||
{ id: 0, status: 'All', statusLow: 'All', count: total },
|
||||
@@ -238,7 +123,6 @@ export default function OrdersDetails() {
|
||||
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);
|
||||
}
|
||||
@@ -278,15 +162,87 @@ 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,
|
||||
error: orderDetailsError,
|
||||
fetchNextPage,
|
||||
isLoading: isLoadingOrderDetails,
|
||||
isError: isErrorOrderDetails, //true or false
|
||||
data: rows,
|
||||
error: orderDetailsError
|
||||
} = useQuery({
|
||||
hasNextPage,
|
||||
isFetchingNextPage
|
||||
// status: rowdataStatus
|
||||
} = useInfiniteQuery({
|
||||
queryKey: [startdate, enddate, currentStatus],
|
||||
queryFn: fetchorderdetails
|
||||
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) {
|
||||
fetchNextPage();
|
||||
}
|
||||
},
|
||||
{
|
||||
root: document.querySelector('.MuiTableContainer-root'), // 👈 or explicitly TableContainer
|
||||
rootMargin: '0px',
|
||||
threshold: 1.0
|
||||
}
|
||||
);
|
||||
|
||||
if (loadMoreRef.current) observer.observe(loadMoreRef.current);
|
||||
|
||||
return () => {
|
||||
if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
|
||||
};
|
||||
}, [hasNextPage, fetchNextPage]);
|
||||
|
||||
// ==================================== || fetchDeliverySummary || ====================================
|
||||
|
||||
const {
|
||||
data: deliverycount,
|
||||
isLoading,
|
||||
isError,
|
||||
error
|
||||
} = useQuery({
|
||||
queryKey: ['deliverycount', startdate, enddate, currentStatus],
|
||||
queryFn: fetchDeliverySummary
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log('currentStatus', currentStatus);
|
||||
|
||||
currentStatus == 'All'
|
||||
? setStatusCount(deliverycount?.total)
|
||||
: currentStatus == 'pending'
|
||||
? setStatusCount(deliverycount?.pending)
|
||||
: currentStatus == 'accepted'
|
||||
? setStatusCount(deliverycount?.accepted)
|
||||
: currentStatus == 'arrived'
|
||||
? setStatusCount(deliverycount?.arrived)
|
||||
: currentStatus == 'picked'
|
||||
? setStatusCount(deliverycount?.picked)
|
||||
: currentStatus == 'active'
|
||||
? setStatusCount(deliverycount?.active)
|
||||
: currentStatus == 'delivered'
|
||||
? setStatusCount(deliverycount?.delivered)
|
||||
: currentStatus == 'cancelled'
|
||||
? setStatusCount(deliverycount?.cancelled)
|
||||
: setStatusCount(0);
|
||||
}, [currentStatus, deliverycount]);
|
||||
|
||||
// ==============================|| calculate||============================== //
|
||||
const calculate = () => {
|
||||
@@ -306,32 +262,12 @@ export default function OrdersDetails() {
|
||||
};
|
||||
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 (isLoadingOrderDetails) 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 == ''
|
||||
@@ -389,8 +325,6 @@ export default function OrdersDetails() {
|
||||
locationcontactno: order.locationcontactno
|
||||
}));
|
||||
|
||||
const isSelected = (name) => selected.indexOf(name) !== -1;
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = dayjs(dateString);
|
||||
const formattedDate = date.format('DD/MM/YYYY ');
|
||||
@@ -401,6 +335,14 @@ export default function OrdersDetails() {
|
||||
const formattedDate = date.format(' hh:mm A');
|
||||
return formattedDate;
|
||||
}
|
||||
const handleScroll = (event) => {
|
||||
const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
|
||||
if (scrollTop + clientHeight >= scrollHeight - 50) {
|
||||
if (hasNextPage && !isFetchingNextPage) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<TitleCard title="Orders Details" />
|
||||
@@ -417,8 +359,8 @@ export default function OrdersDetails() {
|
||||
{startdate && enddate && (
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Badge
|
||||
badgeContent={`${filteredOrders.length}`}
|
||||
max={`${count}`}
|
||||
badgeContent={`${statusCount}`}
|
||||
max={99999}
|
||||
color="primary"
|
||||
sx={{
|
||||
bgcolor: '#f3e5f5',
|
||||
@@ -454,20 +396,17 @@ export default function OrdersDetails() {
|
||||
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'} />}
|
||||
renderInput={(params) => <TextField {...params} label={statusLabel || 'Select Status'} />}
|
||||
/>
|
||||
<FormControl sx={{ width: 250 }}>
|
||||
<OutlinedInput
|
||||
@@ -528,9 +467,11 @@ export default function OrdersDetails() {
|
||||
|
||||
<MainCard content={false}>
|
||||
<TableContainer
|
||||
onScroll={handleScroll}
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
minHeight: 'auto',
|
||||
maxHeight: '67vh',
|
||||
maxHeight: '65vh',
|
||||
overflow: 'auto',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '12px', // Width of vertical scrollbar
|
||||
@@ -553,7 +494,7 @@ export default function OrdersDetails() {
|
||||
>
|
||||
<TableRow>
|
||||
<TableCell sx={{ position: 'sticky !important' }}># </TableCell>
|
||||
{/* <TableCell sx={{ position: 'sticky !important' }}>Map</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>
|
||||
@@ -579,220 +520,214 @@ export default function OrdersDetails() {
|
||||
</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}
|
||||
{filteredOrders.map((row, index) => {
|
||||
return (
|
||||
filteredOrders.length !== 0 && (
|
||||
<TableRow>
|
||||
<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 title={row.Pickupaddress}>
|
||||
<Typography variant="caption" color="textSecondary" sx={{ cursor: 'pointer' }}>
|
||||
{row.pickupsuburb || row.pickuplocation || row.Pickupaddress.slice(0, 20)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Tooltip>
|
||||
</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}
|
||||
</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 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>
|
||||
</Tooltip>
|
||||
</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 }} />
|
||||
)}
|
||||
</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>
|
||||
{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">
|
||||
<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>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<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>
|
||||
)
|
||||
);
|
||||
})}
|
||||
<TableRow>
|
||||
<TableCell colSpan={15} rowSpan={3}>
|
||||
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
|
||||
{isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No more results'}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
<Divider />
|
||||
</MainCard>
|
||||
{/* ========================================= || bottom row || ========================================= */}
|
||||
@@ -845,13 +780,11 @@ export default function OrdersDetails() {
|
||||
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) {
|
||||
|
||||
Reference in New Issue
Block a user