reports update
This commit is contained in:
joshikannan
@@ -9,6 +9,8 @@ dayjs.extend(utc);
|
||||
import axios from 'axios';
|
||||
import HoverSocialCard from 'components/cards/statistics/HoverSocialCard';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import MyLocationIcon from '@mui/icons-material/MyLocation';
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
@@ -33,8 +35,8 @@ import {
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
Skeleton,
|
||||
TextField,
|
||||
Autocomplete
|
||||
Autocomplete,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import { SearchOutlined, CloseOutlined } from '@ant-design/icons';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
@@ -46,12 +48,13 @@ import TableSortLabel from '@mui/material/TableSortLabel';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
import Loader from 'components/Loader';
|
||||
import { FilterList } from '@mui/icons-material';
|
||||
import { Outlet } from 'react-router';
|
||||
|
||||
const Orders = () => {
|
||||
const tid = localStorage.getItem('tenantid');
|
||||
const tenId = localStorage.getItem('tenantid');
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(10);
|
||||
const [pageCountObj, setPageCountObj] = React.useState({});
|
||||
const [pageCount, setPageCount] = React.useState();
|
||||
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
@@ -59,7 +62,7 @@ const Orders = () => {
|
||||
const [percentage2, setPercentage2] = useState('0');
|
||||
const [percentage3, setPercentage3] = useState('0');
|
||||
const [percentage4, setPercentage4] = useState('0');
|
||||
let [orderarr, setArr] = useState([]);
|
||||
const [tenantLocations, setTenantlocations] = useState([]);
|
||||
const [coveredorders, setCoveredorders] = useState('');
|
||||
const [uncoveredorders, setUncoveredorders] = useState('');
|
||||
const [cancelled, setCancelled] = useState('');
|
||||
@@ -70,7 +73,6 @@ const Orders = () => {
|
||||
let [rows, setRows] = useState([]);
|
||||
const [tabvalue, setTabvalue] = useState(0);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [tabstatus1, setTabstatus1] = useState('Today');
|
||||
const [datestatus, setDatestatus] = useState('Today');
|
||||
const [searchword, setSearchword] = useState('');
|
||||
const [currentStatus, setCurrentStatus] = useState('created');
|
||||
@@ -78,6 +80,10 @@ const Orders = () => {
|
||||
const [pendingLenght, setPendingLenght] = useState();
|
||||
const [deliveredlenght, setDeliveredlenght] = useState();
|
||||
const [cancelledLenght, setCancelledLenght] = useState();
|
||||
const [cancelOpen, setCancelOpen] = useState(false);
|
||||
const [orderheaderid, setOrderheaderid] = useState('');
|
||||
const [locationId, setLocationId] = useState(0);
|
||||
const [locoName, setLocoName] = useState('Select Location');
|
||||
|
||||
const handleChangetab = (e, i) => {
|
||||
setTabvalue(i);
|
||||
@@ -85,22 +91,18 @@ const Orders = () => {
|
||||
if (i === 0) {
|
||||
setTabstatus('Created');
|
||||
setCurrentStatus('created');
|
||||
setPageCount(pageCountObj.created);
|
||||
}
|
||||
if (i === 1) {
|
||||
setTabstatus('Pending');
|
||||
setCurrentStatus('pending');
|
||||
setPageCount(pageCountObj.pending);
|
||||
}
|
||||
if (i === 2) {
|
||||
setTabstatus('Delivered');
|
||||
setCurrentStatus('delivered');
|
||||
setPageCount(pageCountObj.delivered);
|
||||
}
|
||||
if (i === 3) {
|
||||
setTabstatus('Cancelled');
|
||||
setCurrentStatus('cancelled');
|
||||
setPageCount(pageCountObj.cancelled);
|
||||
}
|
||||
console.log(i);
|
||||
};
|
||||
@@ -131,20 +133,39 @@ const Orders = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
var day = 60 * 60 * 24 * 1000;
|
||||
var startDate = new Date();
|
||||
if (tabstatus1 === 'Tomorrow') {
|
||||
setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
|
||||
setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10));
|
||||
} else if (tabstatus1 === 'Today') {
|
||||
setEnddate(new Date().toISOString().substring(0, 10));
|
||||
setStartdate(new Date().toISOString().substring(0, 10));
|
||||
} else if (tabstatus1 === 'Week') {
|
||||
setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
|
||||
setEnddate(new Date().toISOString().substring(0, 10));
|
||||
}
|
||||
}, [tabstatus1]);
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const cancelorder = async () => {
|
||||
await axios
|
||||
.put(`${process.env.REACT_APP_URL}/orders/updateorder`, {
|
||||
orderheaderid: orderheaderid,
|
||||
orderstatus: 'cancelled',
|
||||
cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.status) {
|
||||
enqueueSnackbar('Order Cancelled Successfully', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
||||
autoHideDuration: 2000
|
||||
});
|
||||
fetchtablecovered();
|
||||
fetchorderscount();
|
||||
setCancelOpen(false);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const fetchtablecovered = async () => {
|
||||
try {
|
||||
@@ -152,12 +173,11 @@ const Orders = () => {
|
||||
.get(
|
||||
`${
|
||||
process.env.REACT_APP_URL
|
||||
}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
|
||||
}/orders/tenant/getorders/?tenantid=${tid}&locationid=${locationId}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
|
||||
page + 1
|
||||
}&pagesize=${rowsPerPage}&keyword=${searchword}`
|
||||
)
|
||||
.then((res) => {
|
||||
setArr(res.data.details);
|
||||
setRows(res.data.details);
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -169,7 +189,7 @@ const Orders = () => {
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchtablecovered();
|
||||
}, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]);
|
||||
}, [tabstatus, startdate, enddate, page, rowsPerPage, searchword, locationId]);
|
||||
|
||||
const fetchpercentage = async () => {
|
||||
setLoading(true);
|
||||
@@ -205,7 +225,9 @@ const Orders = () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
await axios
|
||||
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
|
||||
.get(
|
||||
`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}`
|
||||
)
|
||||
.then((res) => {
|
||||
console.log('fetchorderscount', res.data.details);
|
||||
|
||||
@@ -230,379 +252,34 @@ const Orders = () => {
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchorderscount();
|
||||
}, [tabvalue]);
|
||||
|
||||
const headCells = [
|
||||
{
|
||||
id: 'sno',
|
||||
disablePadding: true,
|
||||
label: 'S NO'
|
||||
},
|
||||
{
|
||||
id: 'orderid',
|
||||
numeric: false,
|
||||
disablePadding: false,
|
||||
label: 'ORDER ID'
|
||||
},
|
||||
{
|
||||
id: 'eventname',
|
||||
disablePadding: false,
|
||||
label: 'Pickup'
|
||||
},
|
||||
{
|
||||
id: 'eventname4',
|
||||
disablePadding: false,
|
||||
label: 'Delivery'
|
||||
},
|
||||
|
||||
{
|
||||
id: 'itemcount',
|
||||
disablePadding: false,
|
||||
label: 'NOTES'
|
||||
},
|
||||
{
|
||||
id: 'orderstatus',
|
||||
disablePadding: false,
|
||||
label: 'STATUS'
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
disablePadding: false,
|
||||
label: 'ACTION'
|
||||
}, [tabvalue, locationId]);
|
||||
// ============================================= || 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);
|
||||
}
|
||||
];
|
||||
|
||||
function EnhancedTableHead(props) {
|
||||
const { order, orderBy, onRequestSort } = props;
|
||||
const createSortHandler = (property) => (event) => {
|
||||
onRequestSort(event, property);
|
||||
};
|
||||
|
||||
return (
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{headCells.map((headCell) => (
|
||||
<TableCell
|
||||
key={headCell.id}
|
||||
align={headCell.numeric ? 'right' : 'left'}
|
||||
padding={headCell.disablePadding ? 'none' : 'normal'}
|
||||
sortDirection={orderBy === headCell.id ? order : false}
|
||||
>
|
||||
<TableSortLabel
|
||||
active={orderBy === headCell.id}
|
||||
direction={orderBy === headCell.id ? order : 'asc'}
|
||||
onClick={createSortHandler(headCell.id)}
|
||||
>
|
||||
{headCell.label}
|
||||
{orderBy === headCell.id ? (
|
||||
<Box component="span" sx={visuallyHidden}>
|
||||
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
|
||||
</Box>
|
||||
) : null}
|
||||
</TableSortLabel>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
function EnhancedTable() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [orderheaderid, setOrderheaderid] = useState('');
|
||||
|
||||
const cancelorder = async () => {
|
||||
await axios
|
||||
.put(`${process.env.REACT_APP_URL}/orders/updateorder`, {
|
||||
orderheaderid: orderheaderid,
|
||||
orderstatus: 'cancelled',
|
||||
cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss')
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.status) {
|
||||
enqueueSnackbar('Order Cancelled Successfully', {
|
||||
variant: 'success',
|
||||
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
||||
autoHideDuration: 2000
|
||||
});
|
||||
handleClose(true);
|
||||
fetchtablecovered();
|
||||
fetchorderscount();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const handleChangePage = (event, newPage) => {
|
||||
setPage(newPage);
|
||||
};
|
||||
|
||||
const handleChangeRowsPerPage = (event) => {
|
||||
setRowsPerPage(parseInt(event.target.value, 10));
|
||||
setPage(0);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
setOrderheaderid('');
|
||||
};
|
||||
|
||||
function AlertCustomerDelete({
|
||||
// title,
|
||||
open,
|
||||
handleClose
|
||||
}) {
|
||||
// const [deletepassword, setDeletepassword] = useState('');
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={() => handleClose(false)} maxWidth="xs">
|
||||
<DialogContent sx={{ mt: 2, my: 1 }}>
|
||||
<Stack alignItems="center" spacing={3.5}>
|
||||
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
|
||||
<DeleteFilled />
|
||||
</Avatar>
|
||||
{/* <Grid >
|
||||
<Chip label={orderid.slice(4)} variant="combined" color='warning' size='small' />
|
||||
</Grid> */}
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="h4" align="center">
|
||||
Are you sure you want to cancel this order?
|
||||
</Typography>
|
||||
|
||||
{/* <Typography variant="h4" align="center">
|
||||
Please type in the order number to confirm.
|
||||
</Typography> */}
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
color="error"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
// if (deletepassword === orderid.slice(4)) {
|
||||
cancelorder();
|
||||
// }
|
||||
}}
|
||||
autoFocus
|
||||
>
|
||||
Yes, Cancel
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
handleClose(false);
|
||||
}}
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
No
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<AlertCustomerDelete open={open} handleClose={handleClose} />
|
||||
|
||||
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
|
||||
<EnhancedTableHead />
|
||||
{loading && (
|
||||
<>
|
||||
<TableBody>
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
)}
|
||||
<TableBody>
|
||||
{rows?.length == 0 && (
|
||||
<>
|
||||
<TableCell colSpan={7}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
|
||||
{rows?.map((row, index) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow
|
||||
key={index}
|
||||
sx={{
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<TableCell padding="none">
|
||||
<Typography> {page * rowsPerPage + index + 1}</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
<Typography variant="body2" noWrap>
|
||||
{row.orderid}
|
||||
</Typography>
|
||||
<Typography noWrap sx={{ fontSize: '11px' }}>
|
||||
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
|
||||
</Typography>
|
||||
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
||||
{dayjs(row.deliverydate).utc().format('hh:mm A')}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Avatar
|
||||
alt=""
|
||||
size="sm"
|
||||
sx={{
|
||||
width: '25px',
|
||||
height: '25px'
|
||||
}}
|
||||
></Avatar>
|
||||
<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">
|
||||
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Avatar
|
||||
alt=""
|
||||
size="sm"
|
||||
sx={{
|
||||
width: '25px',
|
||||
height: '25px'
|
||||
}}
|
||||
></Avatar>
|
||||
<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">
|
||||
{/* {row.pickupaddress.slice(0, 20)} */}
|
||||
{row.deliverysuburb || row.deliveryaddress.slice(0, 20)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.ordernotes}</TableCell>
|
||||
{/* <TableCell align="left"><Chip label={row.itemcount} color="primary" variant="light" size="small" /></TableCell> */}
|
||||
<TableCell align="left">
|
||||
<Stack direction="row">
|
||||
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
|
||||
{row.orderstatus === 'modified' && <Chip label="Confirmed" color="success" size="small" />}
|
||||
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
|
||||
{row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
|
||||
{row.orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
|
||||
{row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
|
||||
{row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
|
||||
|
||||
{row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
|
||||
{row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
|
||||
{row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{row.orderstatus == 'created' && (
|
||||
<>
|
||||
<Tooltip title="Cancel">
|
||||
<IconButton
|
||||
// disabled={(row.orderstatus != 'created')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOrderheaderid(row.orderheaderid);
|
||||
setOpen(true);
|
||||
}}
|
||||
>
|
||||
<CloseOutlined
|
||||
style={{
|
||||
color: theme.palette.error.main
|
||||
}}
|
||||
// twoToneColor={theme.palette.primary.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 50, 100]}
|
||||
component="div"
|
||||
count={pageCount || 0}
|
||||
rowsPerPage={rowsPerPage || 0}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
gettenantlocations(tenId);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{loading && <Loader />}
|
||||
|
||||
<Outlet />
|
||||
<Stack direction={{ xs: 'column', md: 'row' }} justifyContent="space-between" alignItems="center" spacing={2}>
|
||||
<Typography variant="h3">Orders</Typography>
|
||||
</Stack>
|
||||
|
||||
<Grid container spacing={3} sx={{ mt: 0.1 }}>
|
||||
<Grid item xs={12} sm={6} md={3}>
|
||||
<HoverSocialCard
|
||||
@@ -639,7 +316,6 @@ const Orders = () => {
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Stack direction={'row'} justifyContent={'space-between'} alignItems={'center'} sx={{ my: 2 }}>
|
||||
{startdate && enddate && (
|
||||
<Stack direction="row" spacing={2}>
|
||||
@@ -657,20 +333,62 @@ const Orders = () => {
|
||||
/>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
sx={{ color: 'text.primary', bgcolor: 'grey.200', display: { xs: 'none', md: 'flex' } }}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Stack display={'flex'} flexDirection={'row'} alignItems={'center'} justifyContent={'space-between'} 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={'Select Location'} value={locoName} color="primary" />}
|
||||
sx={{ width: '350px' }}
|
||||
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>
|
||||
<Tooltip title="Order Filter">
|
||||
<IconButton
|
||||
color="secondary"
|
||||
variant="light"
|
||||
sx={{ color: 'text.primary', bgcolor: 'grey.200' }}
|
||||
aria-haspopup="true"
|
||||
onClick={() => setOpen(true)}
|
||||
>
|
||||
<FilterList />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ overflow: 'auto', border: 1, borderColor: 'grey.200', borderRadius: 2, backgroundColor: '#fff', minHeight: 350 }}>
|
||||
<Stack
|
||||
@@ -697,10 +415,9 @@ const Orders = () => {
|
||||
/>
|
||||
</Tabs>
|
||||
<Stack>
|
||||
<FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
|
||||
<FormControl sx={{ width: 250 }}>
|
||||
<OutlinedInput
|
||||
inputRef={textFieldRef}
|
||||
size="small"
|
||||
id="header-search"
|
||||
aria-describedby="header-search-text"
|
||||
inputProps={{
|
||||
@@ -737,11 +454,238 @@ const Orders = () => {
|
||||
</Stack>
|
||||
|
||||
<Box sx={{ width: '100%', display: 'table', tableLayout: 'fixed' }}>
|
||||
<EnhancedTable />
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell> S.No</TableCell>
|
||||
<TableCell> Orders</TableCell>
|
||||
<TableCell> Pickup</TableCell>
|
||||
<TableCell>Drop </TableCell>
|
||||
<TableCell> Notes</TableCell>
|
||||
<TableCell>Status </TableCell>
|
||||
<TableCell>Action </TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
{loading && (
|
||||
<>
|
||||
<TableBody>
|
||||
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton animation="wave" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</>
|
||||
)}
|
||||
<TableBody>
|
||||
{rows?.length == 0 && (
|
||||
<>
|
||||
<TableCell colSpan={7}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</>
|
||||
)}
|
||||
|
||||
{rows?.map((row, index) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow
|
||||
key={index}
|
||||
sx={{
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
<TableCell padding="none">
|
||||
<Typography> {page * rowsPerPage + index + 1}</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
<Typography variant="body2" noWrap>
|
||||
{row.orderid}
|
||||
</Typography>
|
||||
<Typography noWrap sx={{ fontSize: '11px' }}>
|
||||
{dayjs(row.deliverydate).utc().format('DD/MM/YYYY')}
|
||||
</Typography>
|
||||
<Typography noWrap sx={{ fontSize: '11px' }} variant="h5">
|
||||
{dayjs(row.deliverydate).utc().format('hh:mm A')}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Avatar
|
||||
alt=""
|
||||
size="sm"
|
||||
sx={{
|
||||
width: '25px',
|
||||
height: '25px'
|
||||
}}
|
||||
></Avatar>
|
||||
<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">
|
||||
{row.pickupsuburb || row.pickupaddress.slice(0, 20)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="left">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Avatar
|
||||
alt=""
|
||||
size="sm"
|
||||
sx={{
|
||||
width: '25px',
|
||||
height: '25px'
|
||||
}}
|
||||
></Avatar>
|
||||
<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">
|
||||
{/* {row.pickupaddress.slice(0, 20)} */}
|
||||
{row.deliverysuburb || row.deliveryaddress.slice(0, 20)}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.ordernotes}</TableCell>
|
||||
{/* <TableCell align="left"><Chip label={row.itemcount} color="primary" variant="light" size="small" /></TableCell> */}
|
||||
<TableCell align="left">
|
||||
<Stack direction="row">
|
||||
{row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" />}
|
||||
{row.orderstatus === 'modified' && <Chip label="Confirmed" color="success" size="small" />}
|
||||
{row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" />}
|
||||
{row.orderstatus === 'delivered' && <Chip label="Completed" color="primary" size="small" />}
|
||||
{row.orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
|
||||
{row.orderstatus === 'ready' && <Chip label="Accepted" color="info" size="small" />}
|
||||
{row.orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
|
||||
|
||||
{row.orderstatus === 'active' && <Chip label="Picked" color="info" size="small" />}
|
||||
{row.orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
|
||||
{row.orderstatus === 'created' && <Chip label="Created" color="secondary" size="small" />}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{row.orderstatus == 'created' && (
|
||||
<>
|
||||
<Tooltip title="Cancel">
|
||||
<IconButton
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOrderheaderid(row.orderheaderid);
|
||||
setCancelOpen(true);
|
||||
}}
|
||||
>
|
||||
<CloseOutlined
|
||||
style={{
|
||||
color: theme.palette.error.main
|
||||
}}
|
||||
// twoToneColor={theme.palette.primary.main}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, 50, 100]}
|
||||
component="div"
|
||||
count={pageCount || 0}
|
||||
rowsPerPage={rowsPerPage || 0}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
{/* ============================================== || cancel order || ============================================== */}
|
||||
<Dialog open={cancelOpen} onClose={() => setCancelOpen(false)} maxWidth="xs">
|
||||
<DialogContent sx={{ mt: 2, my: 1 }}>
|
||||
<Stack alignItems="center" spacing={3.5}>
|
||||
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
|
||||
<DeleteFilled />
|
||||
</Avatar>
|
||||
<Stack spacing={2}>
|
||||
<Typography variant="h4" align="center">
|
||||
Are you sure you want to cancel this order?
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
color="error"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
cancelorder();
|
||||
}}
|
||||
autoFocus
|
||||
>
|
||||
Yes, Cancel
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => {
|
||||
setCancelOpen(false);
|
||||
}}
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
No
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
{/* ============================================== || Date filter || ============================================== */}
|
||||
<Dialog open={open}>
|
||||
<DialogTitle align="left">
|
||||
<Typography variant="h4">Select Filter Options</Typography>
|
||||
|
||||
Reference in New Issue
Block a user