Nearle_express/dailygrubs_console
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

orders pagination

Browse Source
This commit is contained in:
joshikannan
2025-07-08 16:36:50 +05:30
parent 453bcb2886
commit 36eaf3d845
4 changed files with 244 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nearlexpressbuild

Submodule nearlexpressbuild deleted from 4148053366

1
src/pages/nearle/api/api.js
View File

@@ -23,6 +23,7 @@ export const fetchOrderInsight = async () => {
return response.data.details; return response.data.details;
}; };
// ==============================|| fetchDeliverySummary (delivery)||============================== // // ==============================|| fetchDeliverySummary (delivery)||============================== //
export const fetchDeliverySummary = async () => { export const fetchDeliverySummary = async () => {
const response = await axios.get(`${process.env.REACT_APP_URL}/deliveries/deliverysummary`); const response = await axios.get(`${process.env.REACT_APP_URL}/deliveries/deliverysummary`);

884
src/pages/nearle/orders/orders.js
View File

@@ -80,6 +80,235 @@ const Orders = () => {
return stabilizedThis.map((el) => el[0]); return stabilizedThis.map((el) => el[0]);
} }
const tid = 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'));
const [percentage1, setPercentage1] = useState('0');
const [percentage2, setPercentage2] = useState('0');
const [percentage3, setPercentage3] = useState('0');
const [percentage4, setPercentage4] = useState('0');
let [orderarr, setArr] = useState([]);
let [orderarrcovered, setArrcovered] = useState([]);
const [allorders, setAllorders] = useState('');
const [activeorders, setActiveorders] = useState('');
const [coveredorders, setCoveredorders] = useState('');
const [uncoveredorders, setUncoveredorders] = useState('');
const [cancelled, setCancelled] = useState('');
const [closed, setClosed] = useState('');
const [created, setCreated] = useState('');
const [tabstatus, setTabstatus] = useState('Created');
const [loading, setLoading] = useState(true);
const theme = useTheme();
let [rows, setRows] = useState([]);
const [tabvalue, setTabvalue] = useState(0);
let navigate = useNavigate();
const [open, setOpen] = useState(false);
const [dateselect, setDateselect] = useState('select');
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
const [searchword, setSearchword] = useState('');
const [currentStatus, setCurrentStatus] = useState('created');
const [createdLenght, setCreatedLenght] = useState();
const [pendingLenght, setPendingLenght] = useState();
const [deliveredlenght, setDeliveredlenght] = useState();
const [cancelledLenght, setCancelledLenght] = useState();
const handleChangetab = (e, i) => {
setTabvalue(i);
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);
};
const okclicked = () => {
setOpen(false);
};
const textFieldRef = useRef(null);
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
useEffect(() => {
const handleKeyPress = (event) => {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
textFieldRef.current.focus();
}
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
// Remove focus from the TextField
textFieldRef.current.blur();
}
};
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, []);
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));
setDateselect('select');
} else if (tabstatus1 === 'Today') {
setEnddate(new Date().toISOString().substring(0, 10));
setStartdate(new Date().toISOString().substring(0, 10));
setDateselect('select');
} else if (tabstatus1 === 'Week') {
setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
setEnddate(new Date().toISOString().substring(0, 10));
setDateselect('select');
}
// else if (tabstatus1 === 'All') {
// setEnddate('');
// setStartdate('');
// setDateselect('all');
// }
}, [tabstatus1]);
const choosedate = (date) => {
setStartdate(date.$d.toISOString().substring(0, 10));
setEnddate(date.$d.toISOString().substring(0, 10));
setTabstatus1('');
};
useEffect(() => {
if (searchword) {
let arr = orderarr.filter((val) => {
return (
val.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
val.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcustomer.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcontactno.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupsuburb.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverysuburb.toLowerCase().includes(searchword.toLowerCase()) ||
val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
);
});
console.log(arr);
setRows([...arr]);
} else {
setRows([...orderarr]);
}
}, [searchword]);
const fetchtablecovered = async () => {
try {
await axios
.get(
`${
process.env.REACT_APP_URL
}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
page + 1
}&pagesize=${rowsPerPage}`
)
.then((res) => {
setArr(res.data.details);
setRows(res.data.details);
})
.catch((err) => {
console.log(err);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchtablecovered();
}, [tabstatus, startdate, enddate, page, rowsPerPage]);
const fetchpercentage = async () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}`)
.then((res) => {
console.log(res);
setAllorders(res.data.details.total.toString());
setCoveredorders(res.data.details.delivered.toString());
setCancelled(res.data.details.cancelled.toString());
setUncoveredorders(res.data.details.pending.toString());
setCreated(res.data.details.created.toString());
setClosed(res.data.details.delivered.toString());
setPercentage1((Math.round((res.data.details.created / res.data.details.total) * 100) || 0).toString());
setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString());
setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString());
setPercentage2((Math.round((res.data.details.pending / res.data.details.total) * 100) || 0).toString());
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchpercentage();
}, []);
const fetchorderscount = async () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
.then((res) => {
console.log('fetchorderscount', res.data.details);
setCreatedLenght(res.data.details.created);
setPendingLenght(res.data.details.pending);
setDeliveredlenght(res.data.details.delivered);
setCancelledLenght(res.data.details.cancelled);
tabvalue === 0 && setPageCount(res.data.details.created);
tabvalue === 1 && setPageCount(res.data.details.pending);
tabvalue === 2 && setPageCount(res.data.details.delivered);
tabvalue === 3 && setPageCount(res.data.details.cancelled);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchorderscount();
}, [tabvalue]);
const headCells = [ const headCells = [
{ {
id: 'sno', id: 'sno',
@@ -202,34 +431,6 @@ const Orders = () => {
}); });
}; };
const fetchstafflist = async (odid) => {
setLoading1(true);
try {
await axios
.get(`${process.env.REACT_APP_URL2}/orders/getassignedinfo?orderdetailid=${odid}`)
.then((res) => {
console.log(res);
if (res.data.status) {
setStafflist(res.data.Details);
}
setLoading1(false);
})
.catch((err) => {
console.log(err);
setLoading1(false);
});
} catch (err) {
console.log(err);
setLoading1(false);
}
};
const dialogclose = () => {
setDialogopen(false);
};
const handleRequestSort = (event, property) => { const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === 'asc'; const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc'); setOrder(isAsc ? 'desc' : 'asc');
@@ -341,14 +542,7 @@ const Orders = () => {
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}> <TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}> <Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
<EnhancedTableHead <EnhancedTableHead />
numSelected={selected.length}
order={order}
orderBy={orderBy}
onSelectAllClick={handleSelectAllClick}
onRequestSort={handleRequestSort}
rowCount={rows.length}
/>
{loading && ( {loading && (
<> <>
<TableBody> <TableBody>
@@ -386,36 +580,28 @@ const Orders = () => {
</> </>
)} )}
<TableBody> <TableBody>
{visibleRows.length == 0 && !loading && ( {rows.length == 0 && (
<> <>
<TableCell colSpan={7}> <TableCell colSpan={7}>
<Stack width={'100%'} direction={'row'} justifyContent={'center'}> <Stack width={'100%'} direction={'row'} justifyContent={'center'}>
<Empty /> <Empty />
</Stack> </Stack>
</TableCell> </TableCell>
{/* <div>empty</div> */}
</> </>
)} )}
{visibleRows.map((row, index) => { {rows.map((row, index) => {
const isItemSelected = isSelected(row.sno);
const labelId = `enhanced-table-checkbox-${index}`;
return ( return (
<> <>
<TableRow <TableRow
role="checkbox" key={index}
aria-checked={isItemSelected}
tabIndex={-1}
key={row.sno}
sx={{ sx={{
cursor: 'pointer', cursor: 'pointer',
backgroundColor: expandopen === row.sno ? '#f5f5f5' : '' backgroundColor: expandopen === row.sno ? '#f5f5f5' : ''
}} }}
> >
<TableCell component="th" id={labelId} scope="row" padding="none"> <TableCell padding="none">
<Typography> {row.sno}</Typography> <Typography> {page * rowsPerPage + index + 1}</Typography>
</TableCell> </TableCell>
<TableCell align="left"> <TableCell align="left">
@@ -430,28 +616,6 @@ const Orders = () => {
</Typography> </Typography>
</TableCell> </TableCell>
{/* <TableCell align="left" sx={{ paddingLeft: '12px !important' }}>
<Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
<Avatar
alt=""
size="sm"
sx={{
width: '25px',
height: '25px'
}}
>
</Avatar>
<Stack direction="column">
<Typography variant="caption">{row.customername}</Typography>
<Typography variant="caption" color="textSecondary">
{row.contactno}
</Typography>
</Stack>
</Stack>
</TableCell> */}
<TableCell align="left"> <TableCell align="left">
<Stack direction={'row'} spacing={1}> <Stack direction={'row'} spacing={1}>
<Avatar <Avatar
@@ -540,15 +704,8 @@ const Orders = () => {
e.stopPropagation(); e.stopPropagation();
setOrderheaderid(row.orderheaderid); setOrderheaderid(row.orderheaderid);
setOpen(true); setOpen(true);
// navigate(`/details`, {
// state: {
// orderheaderid: row.orderheaderid,
// tenantid: row.tenantid
// }
// })
}} }}
> >
{/* <EyeTwoTone twoToneColor={theme.palette.secondary.main} /> */}
<CloseOutlined <CloseOutlined
style={{ style={{
color: theme.palette.error.main color: theme.palette.error.main
@@ -561,361 +718,16 @@ const Orders = () => {
)} )}
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow>
<TableCell
style={{ paddingBottom: 0, paddingTop: 0, paddingLeft: 0, paddingRight: 0 }}
colSpan={8}
sx={{ width: '100%' }}
>
<Collapse in={expandopen === row.sno} timeout="auto" unmountOnExit>
{/* <Grid container sx={{ width: '100%' }}>
{(row.ordershifts).map((val5, k) => {
return <>
<Grid item sx={{ width: '100%', m: 1 }}>
<MainCard sx={{
opacity: ((val5.shiftstatus == 1) || (val5.status == 1)) ? '0.6' : ''
}}>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ p: 2 }} alignItems={{ md: 'center' }}>
<Typography>Shift {k + 1}</Typography>
<Typography color="secondary" >
<EnvironmentOutlined /> {''}{val5.locationaddress}
</Typography>
<Grid item>
{((val5.shiftstatus == 1) || (val5.status == 1)) &&
<Chip label="Cancelled" color='secondary' />
}
</Grid>
</Stack>
<TableContainer >
<Table sx={{ width: '100%' }} >
<TableHead >
<TableRow
>
<TableCell></TableCell>
<TableCell>#</TableCell>
<TableCell>Role</TableCell>
<TableCell>Start Date</TableCell>
<TableCell>End Date</TableCell>
<TableCell>Unpaid break</TableCell>
<TableCell align="center">Count</TableCell>
<TableCell align="center">Assigned</TableCell>
<TableCell align="right">Price</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="left">Assigned Roles</TableCell>
</TableRow>
</TableHead>
<TableBody>
{((val5.orderdetails) ? val5.orderdetails : []).map((val, i) => {
return <>
<TableRow key={i}
sx={{
opacity: (val.status == 0) ? '' : '0.6'
}}
>
<TableCell></TableCell>
<TableCell>{i + 1}</TableCell>
<TableCell>
{val.productname}
</TableCell>
<TableCell>
<Stack direction="column">
<Typography variant="body1">
{dayjs(val.starttime).format('MM/DD/YYYY')}
</Typography>
<Typography variant="body2">
{dayjs(val.starttime).format('hh:mm A')}
</Typography>
</Stack>
</TableCell>
<TableCell>
{' '}
<Stack direction="column">
<Typography variant="body1">
{dayjs(val.endtime).format('MM/DD/YYYY')}
</Typography>
<Typography variant="body2">
{dayjs(val.endtime).format('hh:mm A')}
</Typography>
</Stack>
</TableCell>
<TableCell>
{val.unpaidbreak || 0}
</TableCell>
<TableCell align="center">
<Chip label={val.orderqty} color="primary" variant="light" size="small" />
</TableCell>
<TableCell align="center">
<Chip label={val.supplyqty} color={(val.supplyqty > 0) ? "warning" : "error"} variant="light" size="small" />
</TableCell>
<TableCell align="right">${val.price}</TableCell>
<TableCell align="right">${val.landingamount}</TableCell>
<TableCell >
<Tooltip title='Assigned staffs'>
<Button sx={{ minWidth: '10px !important' }}
onClick={(e) => {
e.stopPropagation();
setStafflist([])
fetchstafflist(val.orderdetailid)
setDialogopen(true)
}}
>
<UserOutlined />
</Button>
</Tooltip>
</TableCell>
</TableRow>
</>
})}
</TableBody>
</Table>
</TableContainer >
</MainCard>
</Grid>
<Dialog maxWidth={false} fullWidth={true}
open={dialogopen} onClose={dialogclose}
scroll={'paper'}
TransitionComponent={PopupTransition}>
<DialogTitle>
<Stack direction={'row'} justifyContent={'space-between'}>
<Stack direction={{
xs: 'column'
}} spacing={2} alignItems={'flex-start'}>
<Typography variant='h3'>Assigned Roles</Typography>
{(stafflist[0]) &&
<Chip icon={<EnvironmentOutlined />} label={stafflist[0].locationaddress} variant="light" color="primary" />
}
</Stack>
{(stafflist[0]) &&
<Chip label={stafflist[0].orderid} variant="combined" color='warning' size={'large'} />
}
</Stack>
<Grid container sx={{ p: 1 }} spacing={2}>
<Grid item sm={6} xs={12}>
</Grid>
<Grid item sm={6} xs={12}>
</Grid>
</Grid>
</DialogTitle>
<DialogContent dividers={true}>
{(stafflist.length === 0) ?
<>
{(loading1) ?
<>
<Stack alignItems={'center'}>
<CircularProgress />
</Stack>
</>
:
<Typography>No Staffs has been Assigned</Typography>
}
</>
:
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>#</TableCell>
<TableCell>Staff</TableCell>
<TableCell>Start Time</TableCell>
<TableCell>End Time</TableCell>
<TableCell>Pay Rate</TableCell>
<TableCell align='center'>Clockin</TableCell>
<TableCell align='center'>Clockout</TableCell>
<TableCell>Hours Worked</TableCell>
<TableCell>Status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{stafflist.map((val, i) => {
return <Fragment key={i}>
<TableRow sx={{
}}>
<TableCell component="th"
scope="row" padding="none">
{i + 1}
</TableCell>
<TableCell align="left">
<Stack direction="column">
<Typography variant="caption">
{val.staffname}
</Typography>
<Grid>
<Chip label={val.productname} color="info" variant="light" size="small" />
</Grid>
</Stack>
</TableCell>
<TableCell>
<Stack direction="column">
<Typography variant="body2">{dayjs(val.Starttime).format('MM/DD/YYYY')}</Typography>
<Typography variant="caption">{dayjs(val.Starttime).format('hh:mm A')}</Typography>
</Stack>
</TableCell>
<TableCell>
<Stack direction="column">
<Typography variant="body2">{dayjs(val.Endtime).format('MM/DD/YYYY')}</Typography>
<Typography variant="caption">{dayjs(val.Endtime).format('hh:mm A')}</Typography>
</Stack>
</TableCell>
<TableCell>{val.rolecost}</TableCell>
<TableCell>
<Stack spacing={0.5}
alignItems="center"
>
<Chip label={(val.clockin) ? dayjs(val.clockin).format('MM/DD/YYYY') : ''} color="primary" variant="light" size="small" />
<Chip label={(val.clockin) ? dayjs(val.clockin).format('hh:mm A') : ''} color="info" variant="light" size="small" />
</Stack>
</TableCell>
<TableCell>
<Stack spacing={0.5}
alignItems="center"
>
<Chip label={(val.clockout) ? dayjs(val.clockout).format('MM/DD/YYYY') : ''} color="primary" variant="light" size="small" />
<Chip label={(val.clockout) ? dayjs(val.clockout).format('hh:mm A') : ''} color="info" variant="light" size="small" />
</Stack>
</TableCell>
<TableCell>
{val.hoursworked}
</TableCell>
<TableCell align="left">
<Stack direction="row">
{(val.orderstatus === 'pending') &&
<Chip label="Pending" color="error" size="small" />
}
{(val.orderstatus === 'cancelled') &&
<Chip label="Cancelled" color="secondary" size="small" />
}
{(val.orderstatus === 'completed') &&
<Chip label="Completed" color="primary" size="small" />
}
{(val.orderstatus === 'processing') &&
<Chip label="Processing" color="primary" size="small" />
}
{(val.orderstatus === 'assigned') &&
<Chip label="Assigned" color="warning" size="small" />
}
{(val.orderstatus === 'confirmed') &&
<Chip label="Confirmed" color="success" size="small" />
}
{(val.orderstatus === 'active') &&
<Chip label="Active" color="info" size="small" />
}
{(val.orderstatus === 'closed') &&
<Chip label="Closed" color="info" size="small" />
}
</Stack>
</TableCell>
</TableRow>
</Fragment>
})
}
</TableBody>
</Table>
</TableContainer>
}
</DialogContent>
<DialogActions>
<Stack sx={{ mt: 2 }} direction='row' justifyContent='flex-end' spacing={5}>
<Button sx={{ width: '130px' }} color='error' variant='contained' onClick={() => { dialogclose() }}>Close</Button>
</Stack>
</DialogActions>
</Dialog >
</>
})
}
</Grid> */}
</Collapse>
</TableCell>
</TableRow>
</> </>
); );
})} })}
{emptyRows > 0 && (
<TableRow
style={{
height: 53 * emptyRows
}}
>
<TableCell colSpan={8} />
</TableRow>
)}
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
<TablePagination <TablePagination
rowsPerPageOptions={[1, 10, 25, 50, 100]} rowsPerPageOptions={[5, 10, 25, 50, 100]}
component="div" component="div"
count={rows.length} count={pageCount}
rowsPerPage={rowsPerPage} rowsPerPage={rowsPerPage}
page={page} page={page}
onPageChange={handleChangePage} onPageChange={handleChangePage}
@@ -924,228 +736,6 @@ const Orders = () => {
</Box> </Box>
); );
} }
const tid = localStorage.getItem('tenantid');
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
const [percentage1, setPercentage1] = useState('0');
const [percentage2, setPercentage2] = useState('0');
const [percentage3, setPercentage3] = useState('0');
const [percentage4, setPercentage4] = useState('0');
let [orderarr, setArr] = useState([]);
let [orderarrcovered, setArrcovered] = useState([]);
const [allorders, setAllorders] = useState('');
const [activeorders, setActiveorders] = useState('');
const [coveredorders, setCoveredorders] = useState('');
const [uncoveredorders, setUncoveredorders] = useState('');
const [cancelled, setCancelled] = useState('');
const [closed, setClosed] = useState('');
const [created, setCreated] = useState('');
const [tabstatus, setTabstatus] = useState('Created');
const [loading, setLoading] = useState(true);
const theme = useTheme();
let [rows, setRows] = useState([]);
const [tabvalue, setTabvalue] = useState(0);
let navigate = useNavigate();
const [open, setOpen] = useState(false);
const [dateselect, setDateselect] = useState('select');
const [tabstatus1, setTabstatus1] = useState('Today');
const [datestatus, setDatestatus] = useState('Today');
const [searchword, setSearchword] = useState('');
const [currentStatus, setCurrentStatus] = useState('created');
const [createdLenght, setCreatedLenght] = useState();
const [pendingLenght, setPendingLenght] = useState();
const [deliveredlenght, setDeliveredlenght] = useState();
const [cancelledLenght, setCancelledLenght] = useState();
const handleChangetab = (e, i) => {
setTabvalue(i);
if (i === 0) {
setTabstatus('Created');
setCurrentStatus('created');
}
if (i === 1) {
setTabstatus('Pending');
setCurrentStatus('pending');
}
if (i === 2) {
setTabstatus('Delivered');
setCurrentStatus('delivered');
}
if (i === 3) {
setTabstatus('Cancelled');
setCurrentStatus('cancelled');
}
console.log(i);
};
const okclicked = () => {
setOpen(false);
};
const textFieldRef = useRef(null);
/* ============================================= || handleKeyPress (ctrl+k)| ============================================= */
useEffect(() => {
const handleKeyPress = (event) => {
if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
textFieldRef.current.focus();
}
if (event.key === 'Escape' && document.activeElement === textFieldRef.current) {
// Remove focus from the TextField
textFieldRef.current.blur();
}
};
document.addEventListener('keydown', handleKeyPress);
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, []);
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));
setDateselect('select');
} else if (tabstatus1 === 'Today') {
setEnddate(new Date().toISOString().substring(0, 10));
setStartdate(new Date().toISOString().substring(0, 10));
setDateselect('select');
} else if (tabstatus1 === 'Week') {
setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10));
setEnddate(new Date().toISOString().substring(0, 10));
setDateselect('select');
}
// else if (tabstatus1 === 'All') {
// setEnddate('');
// setStartdate('');
// setDateselect('all');
// }
}, [tabstatus1]);
const choosedate = (date) => {
setStartdate(date.$d.toISOString().substring(0, 10));
setEnddate(date.$d.toISOString().substring(0, 10));
setTabstatus1('');
};
useEffect(() => {
if (searchword) {
let arr = orderarr.filter((val) => {
return (
val.tenantname.toLowerCase().includes(searchword.toLowerCase()) ||
val.orderid.toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcustomer.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupcontactno.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.pickupsuburb.toString().toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycustomer.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverycontactno.toLowerCase().includes(searchword.toLowerCase()) ||
val.deliverysuburb.toLowerCase().includes(searchword.toLowerCase()) ||
val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase())
);
});
console.log(arr);
setRows([...arr]);
} else {
setRows([...orderarr]);
}
}, [searchword]);
const fetchtablecovered = async () => {
try {
await axios
.get(
`${
process.env.REACT_APP_URL
}/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${
page + 1
}&pagesize=${rowsPerPage}`
)
.then((res) => {
let arr = [];
res.data.details.map((val, i) => {
arr = [...arr, { ...val, sno: i + 1 }];
});
console.log(currentStatus, arr);
setArr(arr);
setRows(arr);
})
.catch((err) => {
console.log(err);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchtablecovered();
fetchorderscount();
}, [tabstatus, startdate, enddate]);
const fetchpercentage = async () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}`)
.then((res) => {
console.log(res);
setAllorders(res.data.details.total.toString());
setCoveredorders(res.data.details.delivered.toString());
setCancelled(res.data.details.cancelled.toString());
setUncoveredorders(res.data.details.pending.toString());
setCreated(res.data.details.created.toString());
setClosed(res.data.details.delivered.toString());
setPercentage1((Math.round((res.data.details.created / res.data.details.total) * 100) || 0).toString());
setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString());
setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString());
setPercentage2((Math.round((res.data.details.pending / res.data.details.total) * 100) || 0).toString());
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchpercentage();
}, []);
const fetchorderscount = async () => {
setLoading(true);
try {
await axios
.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`)
.then((res) => {
console.log('fetchorderscount', res.data.details);
setCreatedLenght(res.data.details.created);
setPendingLenght(res.data.details.pending);
setDeliveredlenght(res.data.details.delivered);
setCancelledLenght(res.data.details.cancelled);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
} catch (err) {
console.log(err);
setLoading(false);
}
};
useEffect(() => {
fetchorderscount();
}, []);
return ( return (
<> <>

9
src/pages/nearle/reports/ordersDetails.js
View File

@@ -468,9 +468,11 @@ export default function ordersDetails() {
<> <>
<TitleCard title="Orders Details" /> <TitleCard title="Orders Details" />
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}> <Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
<Grid container sx={{ display: 'flex', alignItems: 'center', m: 2 }}> <Grid
container
sx={{ display: 'flex', flexDirection: { md: 'row', xs: 'column' }, alignItems: 'center', justifyContent: 'center', m: 2 }}
>
<Grid item xs={4}> <Grid item xs={4}>
{' '}
<Stack direction="column" alignItems="flex-start" spacing={1}> <Stack direction="column" alignItems="flex-start" spacing={1}>
{startdate && enddate && ( {startdate && enddate && (
<Stack direction="row" spacing={2}> <Stack direction="row" spacing={2}>
@@ -512,7 +514,8 @@ export default function ordersDetails() {
<Stack <Stack
sx={{ sx={{
display: 'flex', display: 'flex',
flexDirection: { md: 'row', xs: 'column' }, // flexDirection: { md: 'row', xs: 'column' },
flexDirection: 'row',
justifyContent: 'end', justifyContent: 'end',
alignItems: 'center', alignItems: 'center',
marginRight: '25px' marginRight: '25px'