orders pagination
This commit is contained in:
joshikannan
@@ -80,6 +80,235 @@ const Orders = () => {
|
||||
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 = [
|
||||
{
|
||||
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 isAsc = orderBy === property && order === 'asc';
|
||||
setOrder(isAsc ? 'desc' : 'asc');
|
||||
@@ -341,14 +542,7 @@ const Orders = () => {
|
||||
|
||||
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
|
||||
<Table sx={{ minWidth: 750 }} aria-label="collapsible table" size={'medium'}>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
order={order}
|
||||
orderBy={orderBy}
|
||||
onSelectAllClick={handleSelectAllClick}
|
||||
onRequestSort={handleRequestSort}
|
||||
rowCount={rows.length}
|
||||
/>
|
||||
<EnhancedTableHead />
|
||||
{loading && (
|
||||
<>
|
||||
<TableBody>
|
||||
@@ -386,36 +580,28 @@ const Orders = () => {
|
||||
</>
|
||||
)}
|
||||
<TableBody>
|
||||
{visibleRows.length == 0 && !loading && (
|
||||
{rows.length == 0 && (
|
||||
<>
|
||||
<TableCell colSpan={7}>
|
||||
<Stack width={'100%'} direction={'row'} justifyContent={'center'}>
|
||||
<Empty />
|
||||
</Stack>
|
||||
</TableCell>
|
||||
{/* <div>empty</div> */}
|
||||
</>
|
||||
)}
|
||||
|
||||
{visibleRows.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.sno);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
|
||||
{rows.map((row, index) => {
|
||||
return (
|
||||
<>
|
||||
<TableRow
|
||||
role="checkbox"
|
||||
aria-checked={isItemSelected}
|
||||
tabIndex={-1}
|
||||
key={row.sno}
|
||||
key={index}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
|
||||
backgroundColor: expandopen === row.sno ? '#f5f5f5' : ''
|
||||
}}
|
||||
>
|
||||
<TableCell component="th" id={labelId} scope="row" padding="none">
|
||||
<Typography> {row.sno}</Typography>
|
||||
<TableCell padding="none">
|
||||
<Typography> {page * rowsPerPage + index + 1}</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell align="left">
|
||||
@@ -430,28 +616,6 @@ const Orders = () => {
|
||||
</Typography>
|
||||
</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">
|
||||
<Stack direction={'row'} spacing={1}>
|
||||
<Avatar
|
||||
@@ -540,15 +704,8 @@ const Orders = () => {
|
||||
e.stopPropagation();
|
||||
setOrderheaderid(row.orderheaderid);
|
||||
setOpen(true);
|
||||
// navigate(`/details`, {
|
||||
// state: {
|
||||
// orderheaderid: row.orderheaderid,
|
||||
// tenantid: row.tenantid
|
||||
// }
|
||||
// })
|
||||
}}
|
||||
>
|
||||
{/* <EyeTwoTone twoToneColor={theme.palette.secondary.main} /> */}
|
||||
<CloseOutlined
|
||||
style={{
|
||||
color: theme.palette.error.main
|
||||
@@ -561,361 +718,16 @@ const Orders = () => {
|
||||
)}
|
||||
</TableCell>
|
||||
</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>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[1, 10, 25, 50, 100]}
|
||||
rowsPerPageOptions={[5, 10, 25, 50, 100]}
|
||||
component="div"
|
||||
count={rows.length}
|
||||
count={pageCount}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
onPageChange={handleChangePage}
|
||||
@@ -924,228 +736,6 @@ const Orders = () => {
|
||||
</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 (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user