orderdetails , orders
This commit is contained in:
joshikannan
@@ -1,11 +1,9 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { React, useState, useEffect, useRef, forwardRef } from 'react';
|
||||
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 { TableVirtuoso } from 'react-virtuoso';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { SlLocationPin } from 'react-icons/sl';
|
||||
import MapWithRoute from './mapWithRoute';
|
||||
@@ -13,16 +11,12 @@ import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
Box,
|
||||
Checkbox,
|
||||
Divider,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TablePagination,
|
||||
TableSortLabel,
|
||||
TableRow,
|
||||
Grid,
|
||||
Dialog,
|
||||
@@ -34,24 +28,18 @@ import {
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Chip,
|
||||
Avatar,
|
||||
Autocomplete,
|
||||
Tab,
|
||||
Tabs,
|
||||
Paper,
|
||||
FormControl,
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
Badge,
|
||||
Autocomplete,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import { SearchOutlined, MoreOutlined } from '@ant-design/icons';
|
||||
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import dayjs from 'dayjs';
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
dayjs.extend(utc);
|
||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||
import { DateRangePicker } from 'mui-daterange-picker';
|
||||
import {
|
||||
addDays,
|
||||
@@ -65,13 +53,12 @@ import {
|
||||
startOfWeek
|
||||
// startOfYear,
|
||||
} from 'date-fns';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import { FilterList } from '@mui/icons-material';
|
||||
|
||||
// project imports
|
||||
import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
|
||||
import MainCard from 'components/MainCard';
|
||||
import { CSVExport, TableRowSelection } from 'components/third-party/ReactTable';
|
||||
import { CSVExport } from 'components/third-party/ReactTable';
|
||||
import Loader from 'components/Loader';
|
||||
|
||||
function descendingComparator(a, b, orderBy) {
|
||||
@@ -110,11 +97,6 @@ const headCells = [
|
||||
disablePadding: false,
|
||||
label: '#'
|
||||
},
|
||||
// {
|
||||
// id: 'map',
|
||||
// disablePadding: false,
|
||||
// label: '^'
|
||||
// },
|
||||
|
||||
{
|
||||
id: 'tenantname',
|
||||
@@ -172,11 +154,7 @@ const headCells = [
|
||||
disablePadding: false,
|
||||
label: 'NOTES'
|
||||
},
|
||||
// {
|
||||
// id: "rider",
|
||||
// disablePadding: false,
|
||||
// label: "rider",
|
||||
// },
|
||||
|
||||
{
|
||||
id: 'kms',
|
||||
disablePadding: false,
|
||||
@@ -191,8 +169,8 @@ const headCells = [
|
||||
];
|
||||
|
||||
// ==============================|| MUI TABLE - ENHANCED ||============================== //
|
||||
const tabContent = ['Delivered', 'Pending', 'Cancelled'];
|
||||
export default function ordersDetails() {
|
||||
|
||||
export default function OrdersDetails() {
|
||||
const textFieldRef = useRef(null);
|
||||
const [order, setOrder] = useState('asc');
|
||||
const [orderBy, setOrderBy] = useState('calories');
|
||||
@@ -206,7 +184,6 @@ export default function ordersDetails() {
|
||||
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');
|
||||
@@ -215,7 +192,6 @@ export default function ordersDetails() {
|
||||
const [appId, setAppId] = useState(-1);
|
||||
const [value, setValue] = useState(0);
|
||||
const [tabvalue, setTabvalue] = useState(0);
|
||||
const [tabstatus, setTabstatus] = useState('Delivered');
|
||||
const [deliCount, setDeliCount] = useState(0);
|
||||
const [pendCount, setPendCount] = useState(0);
|
||||
const [cancelCount, setCancelCount] = useState(0);
|
||||
@@ -225,6 +201,30 @@ export default function ordersDetails() {
|
||||
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);
|
||||
@@ -276,15 +276,6 @@ export default function ordersDetails() {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleChangetab = (e, i) => {
|
||||
setTabvalue(i);
|
||||
if (i === 0) setTabstatus('Delivered');
|
||||
|
||||
if (i === 1) setTabstatus('Pending');
|
||||
if (i === 2) setTabstatus('Cancelled');
|
||||
console.log(i);
|
||||
};
|
||||
|
||||
// ==============================|| fetchorderdetails (orders)||============================== //
|
||||
|
||||
const {
|
||||
@@ -293,7 +284,7 @@ export default function ordersDetails() {
|
||||
data: rows,
|
||||
error: orderDetailsError
|
||||
} = useQuery({
|
||||
queryKey: [tabvalue, appId, startdate, enddate],
|
||||
queryKey: [startdate, enddate, currentStatus],
|
||||
queryFn: fetchorderdetails
|
||||
});
|
||||
|
||||
@@ -338,25 +329,10 @@ export default function ordersDetails() {
|
||||
}, [fetchCount, startdate, enddate]);
|
||||
// ==============================|| fetchAppLocations ||============================== //
|
||||
|
||||
const {
|
||||
isLoading: isLoadingLocations,
|
||||
isError: isErrorLocations, //true or false
|
||||
data: locations,
|
||||
error: locationsError
|
||||
} = useQuery({
|
||||
queryKey: [appId],
|
||||
queryFn: fetchAppLocations
|
||||
});
|
||||
if (isLoadingOrderDetails || isLoadingLocations || isLoadingOrderCount) return <Loader />;
|
||||
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;
|
||||
if (isErrorLocations) return 'An error has occurred:(isErrorlocations) ' + locationsError.message;
|
||||
|
||||
const handleRequestSort = (event, property) => {
|
||||
const isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
setOrderBy(property);
|
||||
};
|
||||
const filteredOrders = rows.filter((row) =>
|
||||
row.orderstatus == ''
|
||||
? row.orderstatus.toLowerCase().includes(searchword.toLowerCase())
|
||||
@@ -413,47 +389,8 @@ export default function ordersDetails() {
|
||||
locationcontactno: order.locationcontactno
|
||||
}));
|
||||
|
||||
const handleSelectAllClick = (event) => {
|
||||
if (event.target.checked) {
|
||||
const newSelectedId = rows.map((n) => n.name);
|
||||
setSelected(newSelectedId);
|
||||
return;
|
||||
}
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
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.toString()));
|
||||
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;
|
||||
|
||||
function formatDate(dateString) {
|
||||
const date = dayjs(dateString);
|
||||
const formattedDate = date.format('DD/MM/YYYY ');
|
||||
@@ -468,199 +405,127 @@ export default function ordersDetails() {
|
||||
<>
|
||||
<TitleCard title="Orders Details" />
|
||||
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
|
||||
<Grid
|
||||
container
|
||||
sx={{ display: 'flex', flexDirection: { md: 'row', xs: 'column' }, alignItems: 'center', justifyContent: 'center', m: 2 }}
|
||||
<Stack
|
||||
display={'flex'}
|
||||
flexDirection={{ xs: 'column', md: 'row' }}
|
||||
alignItems={'center'}
|
||||
justifyContent={'space-between'}
|
||||
sx={{ p: 2 }}
|
||||
spacing={1}
|
||||
>
|
||||
<Grid item xs={4}>
|
||||
<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>
|
||||
</Grid>
|
||||
<Grid item xs={8}>
|
||||
<Stack
|
||||
sx={{
|
||||
display: 'flex',
|
||||
// flexDirection: { md: 'row', xs: 'column' },
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'end',
|
||||
alignItems: 'center',
|
||||
marginRight: '25px'
|
||||
}}
|
||||
>
|
||||
<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('');
|
||||
// setPages(1);
|
||||
// fetchCustomersList(1);
|
||||
}}
|
||||
>
|
||||
<ClearIcon style={{ fontSize: 'medium', color: '#65387A' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
<Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
<Stack direction="column" alignItems="flex-start" spacing={1}>
|
||||
{startdate && enddate && (
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Badge
|
||||
badgeContent={`${filteredOrders.length}`}
|
||||
max={`${count}`}
|
||||
color="primary"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
bgcolor: 'grey.200',
|
||||
mx: 2
|
||||
bgcolor: '#f3e5f5',
|
||||
p: 0.2,
|
||||
borderRadius: '3px',
|
||||
color: '#7b1fa2'
|
||||
}}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
>{`Orders-${datestatus}`}</Badge>
|
||||
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <Box sx={{ bgcolor: "#eeeeee" }}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="end"
|
||||
direction="row"
|
||||
sx={{
|
||||
p: 2,
|
||||
width: "100%",
|
||||
<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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Tabs
|
||||
value={tabvalue}
|
||||
onChange={handleChangetab}
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
>
|
||||
<Tab
|
||||
label="Delivered"
|
||||
icon={
|
||||
<Chip
|
||||
label={countData.deliveredCount}
|
||||
color="success"
|
||||
variant="light"
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
iconPosition="end"
|
||||
/>
|
||||
<Tab
|
||||
label="Pending"
|
||||
icon={
|
||||
<Chip
|
||||
label={countData.pendingCount}
|
||||
color="warning"
|
||||
variant="light"
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
iconPosition="end"
|
||||
/>
|
||||
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>
|
||||
|
||||
<Tab
|
||||
label="Cancelled"
|
||||
icon={
|
||||
<Chip
|
||||
label={countData.cancelledCount}
|
||||
color="error"
|
||||
variant="light"
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
iconPosition="end"
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
<FormControl
|
||||
sx={{ width: 250, display: { xs: "none", md: "flex" } }}
|
||||
<Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
bgcolor: 'grey.200',
|
||||
mx: 2
|
||||
}}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<OutlinedInput
|
||||
sx={{ background: "white" }}
|
||||
size="large"
|
||||
id="header-search"
|
||||
startAdornment={
|
||||
<InputAdornment position="start" sx={{ mr: -0.5 }}>
|
||||
<SearchOutlined />
|
||||
</InputAdornment>
|
||||
}
|
||||
aria-describedby="header-search-text"
|
||||
inputProps={{
|
||||
"aria-label": "weight",
|
||||
}}
|
||||
placeholder="Search"
|
||||
value={searchword}
|
||||
onChange={(e) => {
|
||||
setSearchword(e.target.value);
|
||||
}}
|
||||
autoComplete="off"
|
||||
/>
|
||||
</FormControl>
|
||||
</Stack>
|
||||
</Box> */}
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<CSVExport data={csvData} filename={`Orders_Detail_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
<MainCard content={false}>
|
||||
<TableContainer
|
||||
sx={{
|
||||
@@ -668,8 +533,9 @@ export default function ordersDetails() {
|
||||
maxHeight: '67vh',
|
||||
overflow: 'auto',
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '5px', // Width of vertical scrollbar
|
||||
height: '2px' // Height of horizontal 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
|
||||
@@ -686,17 +552,27 @@ export default function ordersDetails() {
|
||||
}}
|
||||
>
|
||||
<TableRow>
|
||||
{headCells.map((column) => (
|
||||
<TableCell sx={{ position: 'sticky !important' }} key={column.id}>
|
||||
{column.label}
|
||||
</TableCell>
|
||||
))}
|
||||
<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={13}>
|
||||
<TableCell colSpan={15}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</Stack>
|
||||
@@ -708,36 +584,16 @@ export default function ordersDetails() {
|
||||
.map((row, index) => {
|
||||
if (typeof row === 'number') return null;
|
||||
const isItemSelected = isSelected(row.name);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
// console.log('rows.length', rows.length);
|
||||
console.log('filteredOrders', filteredOrders);
|
||||
return (
|
||||
filteredOrders.length !== 0 && (
|
||||
<TableRow
|
||||
hover
|
||||
// onClick={(event) =>
|
||||
// handleClick(event, row.name)
|
||||
// }
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.name}
|
||||
selected={isItemSelected}
|
||||
>
|
||||
{/* <TableCell sx={{ pl: 3 }} padding="checkbox">
|
||||
<Checkbox
|
||||
color="primary"
|
||||
checked={isItemSelected}
|
||||
inputProps={{
|
||||
"aria-labelledby": labelId,
|
||||
}}
|
||||
/>
|
||||
</TableCell> */}
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
@@ -791,51 +647,31 @@ export default function ordersDetails() {
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
{row.orderstatus == '' ? (
|
||||
<Stack direction="row">
|
||||
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
|
||||
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
|
||||
{row.orderstatus === 'accepted' && (
|
||||
<Chip
|
||||
label="Accepted"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: `theme.palette.chip.accept`,
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{row.orderstatus === 'arrived' && (
|
||||
<Chip
|
||||
label="Arrived"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: theme.palette.chip.arrive,
|
||||
color: 'white'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
|
||||
{row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
|
||||
<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" />}
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack direction="row">
|
||||
{row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" />}
|
||||
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
|
||||
{row.orderstatus === 'accepted' && (
|
||||
<Chip label="Accepted" size="small" sx={{ bgcolor: '#01579b', color: 'white' }} />
|
||||
)}
|
||||
{row.orderstatus === 'arrived' && (
|
||||
<Chip label="Arrived" size="small" sx={{ bgcolor: '#009688', color: 'white' }} />
|
||||
)}
|
||||
{row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" />}
|
||||
{row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" />}
|
||||
|
||||
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
|
||||
</Stack>
|
||||
)}
|
||||
{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">
|
||||
@@ -916,12 +752,10 @@ export default function ordersDetails() {
|
||||
<Tooltip title="Actual KMS">
|
||||
<Chip
|
||||
label={
|
||||
row.orderstatus === 'cancelled' ||
|
||||
row.orderstatus === 'cancelled' ||
|
||||
row.actualkms == '' ||
|
||||
row.actualkms == null
|
||||
? parseInt(0).toFixed(1)
|
||||
: row.actualkms
|
||||
row.deliverystatus === 'cancelled' || row.actualkms === '' || row.actualkms === 'null'
|
||||
? '0.0'
|
||||
: // : parseFloat(row.actualkms).toFixed(2)
|
||||
row.actualkms
|
||||
}
|
||||
size="small"
|
||||
color="success"
|
||||
@@ -960,17 +794,9 @@ export default function ordersDetails() {
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Divider />
|
||||
{/* table pagination */}
|
||||
{/* <TablePagination
|
||||
rowsPerPageOptions={[10, 25, 100]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/> */}
|
||||
</MainCard>
|
||||
{/* ========================================= || bottom row || ========================================= */}
|
||||
|
||||
<Stack
|
||||
direction={'row'}
|
||||
sx={{
|
||||
@@ -991,9 +817,6 @@ export default function ordersDetails() {
|
||||
<Tooltip title="Total Charges">
|
||||
<Chip label={formatNumberToRupees(totalCharge)} size="medium" color="error" variant="filled" sx={{ ml: 5, mr: 1.5 }} />
|
||||
</Tooltip>
|
||||
{/* <Typography variant="h5" sx={{ ml: 5, mr: 1.5 }}>
|
||||
{formatNumberToRupees(total)}
|
||||
</Typography> */}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
@@ -1009,6 +832,8 @@ export default function ordersDetails() {
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Stack>
|
||||
{/* ========================================= || Date dialog || ========================================= */}
|
||||
|
||||
<Dialog open={open}>
|
||||
<DialogTitle align="left">
|
||||
<Typography variant="h4">Select Filter Options</Typography>
|
||||
@@ -1093,40 +918,25 @@ export default function ordersDetails() {
|
||||
</Stack>
|
||||
</Dialog>
|
||||
{/* ========================================= || MapWithRoute || ========================================= */}
|
||||
{/* <Dialog
|
||||
open={open1}
|
||||
<Dialog
|
||||
open={mapOpen}
|
||||
onClose={() => {
|
||||
setOpen1(false);
|
||||
setMapOpen(false);
|
||||
}}
|
||||
maxWidth={'lg'}
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
// bgcolor: theme.palette.primary.main,
|
||||
// color: 'white',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Rider Route</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setOpen1(false);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogTitle>
|
||||
{riderCoordinates && (
|
||||
<div>
|
||||
<MapWithRoute coordinates={riderCoordinates} additionalProps={{ riderStart, riderEnd }} />
|
||||
<MapWithRoute
|
||||
coordinates={riderCoordinates}
|
||||
additionalProps={{ riderStart, riderEnd }}
|
||||
order={mapTenant}
|
||||
setMapOpen={setMapOpen}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Dialog> */}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user