updated the ui for the mobile view
This commit is contained in:
@@ -88,6 +88,8 @@ dayjs.extend(utc);
|
||||
// import HeartFilled from '@mui/icons-material/Favorite';
|
||||
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
|
||||
import {
|
||||
CloseOutlined,
|
||||
WarningOutlined,
|
||||
@@ -177,6 +179,7 @@ const Details = () => {
|
||||
}, [state.orderheaderid, state.tenantid]);
|
||||
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
|
||||
// const fetchorderdetails = async () => {
|
||||
// setLoading(true);
|
||||
@@ -704,7 +707,13 @@ const Details = () => {
|
||||
const [deletepassword, setDeletepassword] = useState('');
|
||||
|
||||
return (
|
||||
<Dialog open={open} onClose={() => handleClose(false)} maxWidth="xs">
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => handleClose(false)}
|
||||
maxWidth="xs"
|
||||
fullScreen={isMobile}
|
||||
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
|
||||
>
|
||||
<DialogContent sx={{ mt: 2, my: 1 }}>
|
||||
<Stack alignItems="center" spacing={3.5}>
|
||||
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
|
||||
@@ -778,7 +787,8 @@ const Details = () => {
|
||||
open={dialogopen}
|
||||
onClose={dialogclose}
|
||||
scroll={'paper'}
|
||||
// fullScreen
|
||||
fullScreen={isMobile}
|
||||
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
|
||||
TransitionComponent={PopupTransition}
|
||||
>
|
||||
<DialogTitle>
|
||||
@@ -880,6 +890,115 @@ const Details = () => {
|
||||
<Typography>No Staffs Available</Typography>
|
||||
)}
|
||||
</>
|
||||
) : isMobile ? (
|
||||
<MobileCardList>
|
||||
{stafflist.map((val, i) => {
|
||||
const isSelected = staffarr.find((res) => res.userid == val.userid) ? true : false;
|
||||
return (
|
||||
<MobileCard key={i} accent="#662582" selected={isSelected}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
|
||||
<Stack direction="row" alignItems="center" spacing={1}>
|
||||
<Avatar alt="" src={''} sx={{ width: 32, height: 32 }} />
|
||||
<Stack direction="column">
|
||||
<Typography variant="subtitle2">{val.firstname}</Typography>
|
||||
<Typography variant="caption" color="textSecondary">
|
||||
{val.contactno}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{val.orderdetailid !== orderdetailid ? (
|
||||
<Checkbox
|
||||
disabled={val.orderdetailid !== 0}
|
||||
checked={isSelected}
|
||||
onClick={(e) => {
|
||||
console.log(currentshiftobj);
|
||||
if (currentshiftobj.remaining >= 0) {
|
||||
if (e.target.checked && currentshiftobj.remaining != 0) {
|
||||
let arr = staffarr;
|
||||
arr.push({
|
||||
userid: val.userid,
|
||||
orderdetailid,
|
||||
productid,
|
||||
shiftid: currentshiftobj.shiftid,
|
||||
userrate: currentshiftobj.price,
|
||||
productrate: val.rolecost,
|
||||
firstname: val.firstname
|
||||
});
|
||||
setStaffarr([...arr]);
|
||||
let obj = currentshiftobj;
|
||||
obj.assigned++;
|
||||
obj.remaining = obj.shifts - obj.assigned;
|
||||
setCurrentshiftobj({ ...obj });
|
||||
} else if (
|
||||
currentshiftobj.assigned != currentshiftobj.shifts ||
|
||||
(currentshiftobj.remaining === 0 && !e.target.checked)
|
||||
) {
|
||||
let arr = staffarr;
|
||||
let index = arr.findIndex((val1) => val1.userid === val.userid);
|
||||
arr.splice(index, 1);
|
||||
setStaffarr([...arr]);
|
||||
let obj = currentshiftobj;
|
||||
obj.assigned--;
|
||||
obj.remaining = obj.shifts - obj.assigned;
|
||||
setCurrentshiftobj({ ...obj });
|
||||
}
|
||||
console.log(staffarr);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Stack direction="row" alignItems="center">
|
||||
<Chip label="Assigned" color="success" size="small" sx={{ mr: 1 }} />
|
||||
<Tooltip title="Unassign">
|
||||
<IconButton
|
||||
color="error"
|
||||
onClick={() => {
|
||||
console.log(val);
|
||||
unassign(val);
|
||||
}}
|
||||
>
|
||||
<CloseOutlined />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Send Notification">
|
||||
<IconButton
|
||||
color="info"
|
||||
onClick={() => {
|
||||
console.log(val);
|
||||
notificationpush(val);
|
||||
}}
|
||||
>
|
||||
<NotificationOutlined />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
<MobileFieldGrid>
|
||||
<MobileField label="Category">
|
||||
<Stack direction="column" alignItems="flex-start" spacing={0.25}>
|
||||
<Typography variant="caption" color="textSecondary">
|
||||
{val.cateoryname}
|
||||
</Typography>
|
||||
<Chip label={val.subcategoryname} color="info" size="small" variant="light" />
|
||||
</Stack>
|
||||
</MobileField>
|
||||
<MobileField label="Price" value={val.rolecost} />
|
||||
<MobileField label="Experience" value={`${val.experience} Years`} />
|
||||
<MobileField label="Level">
|
||||
<Chip label={val.levelofexperience} size="small" color="primary" variant="light" />
|
||||
</MobileField>
|
||||
<MobileField label="City" value={val.city} />
|
||||
{val.orderid && (
|
||||
<MobileField label="Order">
|
||||
<Chip label={val.orderid} color="warning" size="small" variant="light" />
|
||||
</MobileField>
|
||||
)}
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
);
|
||||
})}
|
||||
</MobileCardList>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
@@ -1081,14 +1200,19 @@ const Details = () => {
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Stack sx={{ mt: 2 }} direction="row" justifyContent="flex-end" spacing={5}>
|
||||
<Stack
|
||||
sx={{ mt: 2, width: { xs: '100%', sm: 'auto' } }}
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
justifyContent="flex-end"
|
||||
spacing={{ xs: 1.5, sm: 5 }}
|
||||
>
|
||||
{stafflist.length > 0 && (
|
||||
<>
|
||||
<Button1 sx={{ width: '130px' }} variant="contained" onClick={assignok}>
|
||||
<Button1 sx={{ width: { xs: '100%', sm: '130px' } }} variant="contained" onClick={assignok}>
|
||||
OK
|
||||
</Button1>
|
||||
<Button1
|
||||
sx={{ width: '130px' }}
|
||||
sx={{ width: { xs: '100%', sm: '130px' } }}
|
||||
color="warning"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
@@ -1107,7 +1231,7 @@ const Details = () => {
|
||||
</>
|
||||
)}
|
||||
<Button1
|
||||
sx={{ width: '130px' }}
|
||||
sx={{ width: { xs: '100%', sm: '130px' } }}
|
||||
color="error"
|
||||
variant="contained"
|
||||
onClick={() => {
|
||||
@@ -1195,7 +1319,11 @@ const Details = () => {
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<Stack direction="row" spacing={2} sx={{ mt: { md: 0, xs: 2 } }}>
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
spacing={2}
|
||||
sx={{ mt: { md: 0, xs: 2 }, width: { xs: '100%', md: 'auto' } }}
|
||||
>
|
||||
{/* <Typography>{dayjs(startdate).$d.toString()}</Typography> */}
|
||||
{/* <Typography>{startdate}</Typography> */}
|
||||
{/* <Typography> {dayjs().$d.toString()}</Typography> */}
|
||||
@@ -1206,7 +1334,7 @@ const Details = () => {
|
||||
<Button1
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{ borderRadius: '40px' }}
|
||||
sx={{ borderRadius: '40px', width: { xs: '100%', sm: 'auto' } }}
|
||||
startIcon={<BorderColorIcon color="info" />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
@@ -1269,7 +1397,7 @@ const Details = () => {
|
||||
setOpen(true);
|
||||
}
|
||||
}}
|
||||
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 } }}
|
||||
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 }, width: { xs: '100%', sm: 'auto' } }}
|
||||
startIcon={<CancelOutlinedIcon />}
|
||||
>
|
||||
Cancel Order
|
||||
@@ -1418,6 +1546,184 @@ const Details = () => {
|
||||
})}
|
||||
</Stack>
|
||||
</Stack>
|
||||
{isMobile ? (
|
||||
<MobileCardList>
|
||||
{val5.orderdetails.length === 0 && (
|
||||
<MobileCard accent="#662582">
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
<Skeleton animation="wave" />
|
||||
</MobileCard>
|
||||
)}
|
||||
{val5.orderdetails.map((row, i) => (
|
||||
<MobileCard key={i + 1} accent="#662582" sx={{ opacity: row.status == 0 ? '' : '0.7' }}>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" spacing={1}>
|
||||
<Stack direction="column">
|
||||
<Typography sx={{ fontSize: 10, fontWeight: 800, color: '#94a3b8' }}>#{i + 1}</Typography>
|
||||
<Typography variant="subtitle1">{row.productname}</Typography>
|
||||
</Stack>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<Tooltip title="Expand">
|
||||
<IconButton
|
||||
aria-label="expand row"
|
||||
style={{ color: theme.palette.primary.main }}
|
||||
onClick={() => {
|
||||
setStafflist([]);
|
||||
setExpandopen(expandopen[0] === j && expandopen[1] === i ? ['', ''] : [j, i]);
|
||||
fetchstafflist(row.orderdetailid);
|
||||
}}
|
||||
>
|
||||
{expandopen[0] === j && expandopen[1] === i ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
{orderstatus === 'cancelled' && (
|
||||
<IconButton sx={{ minWidth: '10px !important' }} disabled>
|
||||
<EditTwoTone />
|
||||
</IconButton>
|
||||
)}
|
||||
{row.status === 1 && (
|
||||
<Tooltip title="Cancelled">
|
||||
<IconButton sx={{ minWidth: '10px !important' }}>
|
||||
<CancelOutlinedIcon color="error" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
{row.supplyqty > row.orderqty && (
|
||||
<Tooltip title="Assigned count is greater than ordered count">
|
||||
<IconButton color="warning">
|
||||
<WarningOutlined />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<MobileFieldGrid>
|
||||
<MobileField label="Start Date">
|
||||
<Stack direction="column">
|
||||
<Typography variant="body2">{dayjs(row.starttime).format('MM/DD/YYYY')}</Typography>
|
||||
<Typography variant="caption">{dayjs(row.starttime).format('hh:mm A')}</Typography>
|
||||
</Stack>
|
||||
</MobileField>
|
||||
<MobileField label="End Date">
|
||||
<Stack direction="column">
|
||||
<Typography variant="body2">{dayjs(row.endtime).format('MM/DD/YYYY')}</Typography>
|
||||
<Typography variant="caption">{dayjs(row.endtime).format('hh:mm A')}</Typography>
|
||||
</Stack>
|
||||
</MobileField>
|
||||
<MobileField label="Unpaid Break" value={row.unpaidbreak || 0} />
|
||||
<MobileField label="Count">
|
||||
<Chip label={row.orderqty} color="success" variant="light" size="small" />
|
||||
</MobileField>
|
||||
<MobileField label="Assigned">
|
||||
<Chip
|
||||
label={row.supplyqty}
|
||||
color={row.supplyqty === 0 ? 'error' : 'warning'}
|
||||
variant="light"
|
||||
size="small"
|
||||
/>
|
||||
</MobileField>
|
||||
<MobileField label="Price" value={`$${row.price}`} />
|
||||
<MobileField label="Amount" value={`$${row.landingamount}`} />
|
||||
</MobileFieldGrid>
|
||||
<Collapse in={expandopen[0] === j && expandopen[1] === i} timeout="auto" unmountOnExit>
|
||||
<Divider sx={{ my: 1.5 }} />
|
||||
{stafflist.length === 0 ? (
|
||||
loading ? (
|
||||
<Stack alignItems={'center'}>
|
||||
<CircularProgress />
|
||||
</Stack>
|
||||
) : (
|
||||
<Stack sx={{ p: 1 }}>
|
||||
<Typography>No Staffs has been Assigned</Typography>
|
||||
</Stack>
|
||||
)
|
||||
) : (
|
||||
<Stack spacing={1}>
|
||||
{stafflist.map((val, si) => (
|
||||
<MobileCard key={si} accent="#0ea5e9">
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
|
||||
<Stack direction="column">
|
||||
<Typography variant="subtitle2">{val.staffname}</Typography>
|
||||
<Grid>
|
||||
<Chip label={val.productname} color="info" variant="light" size="small" />
|
||||
</Grid>
|
||||
</Stack>
|
||||
<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>
|
||||
</Stack>
|
||||
<MobileFieldGrid>
|
||||
<MobileField label="Start Time">
|
||||
<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>
|
||||
</MobileField>
|
||||
<MobileField label="End Time">
|
||||
<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>
|
||||
</MobileField>
|
||||
<MobileField label="Pay Rate" value={val.rolecost} />
|
||||
<MobileField label="Hours Worked" value={val.hoursworked} />
|
||||
<MobileField label="Clockin">
|
||||
<Stack spacing={0.5} alignItems="flex-start">
|
||||
<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>
|
||||
</MobileField>
|
||||
<MobileField label="Clockout">
|
||||
<Stack spacing={0.5} alignItems="flex-start">
|
||||
<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>
|
||||
</MobileField>
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Collapse>
|
||||
</MobileCard>
|
||||
))}
|
||||
</MobileCardList>
|
||||
) : (
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
@@ -1870,6 +2176,7 @@ const Details = () => {
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)}
|
||||
</MainCard>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
|
||||
Reference in New Issue
Block a user