2282 lines
104 KiB
JavaScript
2282 lines
104 KiB
JavaScript
import {
|
|
useEffect,
|
|
useState,
|
|
Fragment
|
|
// useReducer
|
|
} from 'react';
|
|
import BorderColorIcon from '@mui/icons-material/BorderColor';
|
|
import {
|
|
// Navigate,
|
|
// useSearchParams,
|
|
useLocation,
|
|
useNavigate
|
|
} from 'react-router-dom';
|
|
import axios from 'axios';
|
|
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
|
import {
|
|
// UserOutlined,
|
|
EnvironmentOutlined,
|
|
EditTwoTone
|
|
// DeleteTwoTone
|
|
} from '@ant-design/icons';
|
|
// import WomanIcon from '@mui/icons-material/Woman';
|
|
// import { Link } from 'react-router-dom';
|
|
// import SoupKitchenIcon from '@mui/icons-material/SoupKitchen';
|
|
import DirectionsCarIcon from '@mui/icons-material/DirectionsCar';
|
|
import { KeyboardArrowUp, KeyboardArrowDown } from '@mui/icons-material';
|
|
|
|
// import { PopupTransition } from 'components/@extended/Transitions';
|
|
// import { useDispatch } from 'react-redux';
|
|
// import { openSnackbar } from 'store/reducers/snackbar';
|
|
// assets
|
|
import { DeleteFilled, NotificationOutlined } from '@ant-design/icons';
|
|
var utc = require('dayjs/plugin/utc');
|
|
// import { groupBy } from "core-js/actual/array/group-by";
|
|
// import "lodash.chunk";
|
|
// var chunk = require('lodash.chunk');
|
|
import {
|
|
Grid,
|
|
Typography,
|
|
Stack,
|
|
Button as Button1,
|
|
// Box,
|
|
FormControl,
|
|
Table,
|
|
TableHead,
|
|
TableRow,
|
|
TableCell,
|
|
TableContainer,
|
|
TableBody,
|
|
Chip,
|
|
Divider,
|
|
CardActions,
|
|
IconButton,
|
|
Avatar,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
Checkbox,
|
|
Tooltip,
|
|
Button,
|
|
Tab,
|
|
Tabs,
|
|
Skeleton,
|
|
// DialogContent,
|
|
DialogActions,
|
|
TextField,
|
|
CircularProgress,
|
|
Collapse,
|
|
Alert,
|
|
AlertTitle,
|
|
Link
|
|
// Card,
|
|
// CardHeader
|
|
} from '@mui/material';
|
|
|
|
import { PopupTransition } from 'components/@extended/Transitions';
|
|
|
|
// import ControlPointIcon from '@mui/icons-material/ControlPoint';
|
|
import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
|
|
import MainCard from 'components/MainCard';
|
|
import Loader from 'components/Loader';
|
|
// import AlertCustomerDelete from 'sections/apps/customer/AlertCustomerDelete';
|
|
import dayjs from 'dayjs';
|
|
dayjs.extend(utc);
|
|
// import { Link as RouterLink } from 'react-router-dom';
|
|
// import PlayCircleFilled from '@mui/icons-material/PlayCircleFilled';
|
|
// import SmileFilled from '@mui/icons-material/Mood';
|
|
// 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,
|
|
WarningFilled
|
|
// PlusOutlined,
|
|
// EyeTwoTone,
|
|
// EditTwoTone,
|
|
// DeleteTwoTone
|
|
} from '@ant-design/icons';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
|
|
const Details = () => {
|
|
// const [searchParams] = useSearchParams();
|
|
const [orderarr, setOrderarr] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const location = useLocation();
|
|
const [orderid, setOrderid] = useState('');
|
|
const [eventlocation, setEventlocation] = useState('');
|
|
const [orderdate, setOrderdate] = useState('');
|
|
const [eventname, setEventname] = useState('');
|
|
const [open, setOpen] = useState(false);
|
|
const [clientname, setClientname] = useState('');
|
|
// const [duedate, setDuedate] = useState('');
|
|
const [tenantaddress, setTenantaddress] = useState('');
|
|
const [dialogopen, setDialogopen] = useState(false);
|
|
const [orderstatus, setOrderstatus] = useState('');
|
|
const [currentrole] = useState('');
|
|
const [taxamount, setTaxamount] = useState('');
|
|
const [subtotal, setSubtotal] = useState('');
|
|
const [grandtotal, setGrandtotal] = useState('');
|
|
const [venuetype, setVenuetype] = useState('');
|
|
const [orderaddons, setOrderaddons] = useState([]);
|
|
const [otherinstructions, setOtherinstructions] = useState('');
|
|
const [cancelleddate, setCancelleddate] = useState('');
|
|
const [stafflist, setStafflist] = useState([]);
|
|
const [staffarr, setStaffarr] = useState([]);
|
|
const [orderheaderid, setOrderheaderid] = useState('');
|
|
const [tenantid, setTenantid] = useState('');
|
|
const [starttime] = useState('');
|
|
const [endtime] = useState('');
|
|
// const [orderstatus,setOrderstatus]=useStatus('');
|
|
const [pendingtime, setPendingtime] = useState('');
|
|
// const [processdate,setProcessdate]=useState('');
|
|
const [categoryarr, setcategoryarr] = useState([]);
|
|
const [currentshiftobj, setCurrentshiftobj] = useState({
|
|
shifts: 0,
|
|
assigned: 0,
|
|
remaining: 0,
|
|
shiftid: 0,
|
|
price: 0
|
|
});
|
|
const [tabstatus, setTabstatus] = useState(0);
|
|
const { state } = useLocation();
|
|
const [assignedpendingcount, setAssignedpendingcount] = useState('');
|
|
// const [, forceUpdate] = useReducer(x => x + 1, 0);
|
|
// const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const [expandopen, setExpandopen] = useState(['', '']);
|
|
const [startdate, setStartdate] = useState('');
|
|
const [invoiceeligible, setInvoiceeligible] = useState(false);
|
|
|
|
useEffect(() => {
|
|
console.log('categoryarr');
|
|
|
|
console.log(orderarr, eventlocation, venuetype, starttime, endtime);
|
|
// forceUpdate();
|
|
}, [categoryarr]);
|
|
|
|
// const navigate = useNavigate();
|
|
useEffect(() => {
|
|
if (state) {
|
|
setOrderheaderid(state.orderheaderid);
|
|
setTenantid(state.tenantid);
|
|
}
|
|
console.log(state);
|
|
// fetchroleslist(1)
|
|
console.log(Date.now());
|
|
}, []);
|
|
useEffect(() => {
|
|
if (state) {
|
|
setOrderheaderid(state.orderheaderid);
|
|
setTenantid(state.tenantid);
|
|
}
|
|
console.log(state);
|
|
// fetchroleslist(1)
|
|
console.log(Date.now());
|
|
}, [state.orderheaderid, state.tenantid]);
|
|
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
|
|
// const fetchorderdetails = async () => {
|
|
// setLoading(true);
|
|
// await axios
|
|
// .get(`${process.env.REACT_APP_URL}/orders/orderbyid/?orderheaderid=${orderheaderid}`)
|
|
|
|
// .then((res) => {
|
|
// console.log(res);
|
|
|
|
// setLoading(false);
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err);
|
|
// setLoading(false);
|
|
// });
|
|
|
|
// };
|
|
|
|
const fetchorderaddons = async () => {
|
|
setLoading(true);
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL2}/orders/getordersbystatus?tenantid=${tenantid}`)
|
|
|
|
.then((res) => {
|
|
console.log(res);
|
|
let result = res.data.Details.find((res1) => res1.orderheaderid == orderheaderid);
|
|
// orderheaderid
|
|
console.log('result');
|
|
|
|
console.log(result);
|
|
setOrderaddons(result.orderaddons);
|
|
setVenuetype(result.venuetype);
|
|
setOtherinstructions(result.remarks);
|
|
setStartdate(result.startdate);
|
|
|
|
setClientname(result.tenantname);
|
|
setEventlocation('');
|
|
setTenantaddress(result.tenantaddress);
|
|
setEventname(result.eventname);
|
|
|
|
setOrderdate(dayjs(result.orderdate).format('MM/DD/YYYY') || '');
|
|
setOrderid(result.orderid);
|
|
setOrderstatus(result.orderstatus);
|
|
setTaxamount(result.taxamount);
|
|
setSubtotal(result.orderamount);
|
|
setGrandtotal(result.ordervalue);
|
|
setCancelleddate(dayjs(result.cancelled).format('MM/DD/YYYY') || '');
|
|
|
|
// if (result.orderstatus === 'pending') {
|
|
setPendingtime(result.pending);
|
|
// }
|
|
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
const fetchorderattires = async () => {
|
|
setLoading(true);
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL2}/orders/getorderdetails?orderheaderid=${orderheaderid}`)
|
|
|
|
.then((res) => {
|
|
console.log('res');
|
|
console.log(res);
|
|
setOrderarr(res.data.Details || []);
|
|
// let result = res.data.Details.find((res1) => res1.orderheaderid == searchParams.get('id'))
|
|
// orderheaderid
|
|
// console.log(result)
|
|
// setOrderaddons(result.orderaddons);
|
|
// setVenuetype(result.venuetype)
|
|
// setOtherinstructions(result.remarks)
|
|
// console.log("res");
|
|
// let result = _.chain(res.data.Details)
|
|
|
|
// .groupBy("shiftid")
|
|
|
|
// .map((value, key) => ({shiftid:key, locationaddress: value[0].locationaddress, roles: value }))
|
|
// .value()
|
|
|
|
// setcategoryarr(result);
|
|
console.log('categoryarr');
|
|
setcategoryarr(res.data.Details);
|
|
console.log(res.data.Details);
|
|
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
|
|
|
|
const fetchstafflist = async (odid) => {
|
|
setLoading(true);
|
|
try {
|
|
// await axios.get(`${process.env.REACT_APP_URL}/orders/orderanalytics?orderdate=${chosendate}`)
|
|
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);
|
|
}
|
|
|
|
setLoading(false);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
setLoading(false);
|
|
});
|
|
} catch (err) {
|
|
console.log(err);
|
|
setLoading(false);
|
|
}
|
|
};
|
|
const cancelorder = async () => {
|
|
await axios
|
|
.put(`${process.env.REACT_APP_URL2}/orders/cancel`, {
|
|
// "Orderheaderid": parseInt(orderheaderid),
|
|
// "Tenantid": parseInt(tenantid),
|
|
// "Orderstatus": "cancelled",
|
|
// "Currentdatetime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
// "Cod": false,
|
|
// "Remarks": "",
|
|
orderheaderid: parseInt(orderheaderid),
|
|
// "orderdetailid":78,
|
|
// "shiftid":788,
|
|
orderstatus: 'cancelled',
|
|
cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
unserviceable: invoiceeligible ? 0 : 1
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.status) {
|
|
if (orderheaderid && tenantid) {
|
|
// fetchorderdetails();
|
|
fetchorderaddons();
|
|
fetchorderattires();
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
const unassign = async (val) => {
|
|
let obj = {
|
|
orderheaderid: orderheaderid,
|
|
orderprocessid: val.orderprocessid,
|
|
orderdetailid: val.orderdetailid,
|
|
orderstatus: 'pending',
|
|
pending: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
// processing:0,
|
|
// cancelled:0,
|
|
// completed:0,
|
|
// accepted:0,
|
|
status: 1
|
|
};
|
|
console.log(obj);
|
|
|
|
await axios
|
|
.put(`${process.env.REACT_APP_URL2}/orders/updateprocessstatus`, obj)
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.message === 'Successful') {
|
|
// if (orderheaderid && tenantid) {
|
|
enqueueSnackbar('Role unassigned successfully', {
|
|
variant: 'success',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
if (currentshiftobj.assigned > currentshiftobj.shifts) {
|
|
sendunassignnotification(val);
|
|
}
|
|
|
|
fetchorderaddons();
|
|
fetchorderattires();
|
|
setOpen(false);
|
|
fetchassignedcount();
|
|
dialogclose();
|
|
setTimeout(() => {
|
|
fetchassignedcount();
|
|
}, 2000);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
const sendunassignnotification = (val) => {
|
|
console.log(val);
|
|
let data2;
|
|
let tokenarr = [val.userfcmtoken];
|
|
let arr1 = [
|
|
{
|
|
notificationid: 0,
|
|
notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
Title: 'Staff Un-Asigned',
|
|
message: `${val.firstname} has been Un-assigned to the order ${orderid}`,
|
|
configid: 2,
|
|
tenantid: tenantid,
|
|
orderheaderid: orderheaderid,
|
|
orderprocessid: val.orderprocessid,
|
|
shiftid: val.shiftid,
|
|
userid: val.userid,
|
|
orderid: orderid,
|
|
success: 0,
|
|
orderstatus: 'assigned',
|
|
processing: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
notifytype: 2,
|
|
notifyreason: 'Staff Un-Assigned'
|
|
// "sound": "ring",
|
|
// "click_action": "FLUTTER_NOTIFICATION_CLICK",
|
|
// "firstname": val.firstname
|
|
}
|
|
];
|
|
|
|
data2 = {
|
|
Title: 'Staff Un-Asigned',
|
|
message: `A Staff has been Un-assigned to the order ${orderid}`,
|
|
tenantid: tenantid,
|
|
orderheaderid: orderheaderid,
|
|
orderid: orderid,
|
|
configid: 2
|
|
// "click_action": "FLUTTER_NOTIFICATION_CLICK"
|
|
};
|
|
let fcmmodel = {
|
|
priority: 'high',
|
|
registration_ids: tokenarr,
|
|
data: data2,
|
|
notification: {
|
|
body: `An order has been Un-assigned ${orderid}`,
|
|
title: 'Legendary',
|
|
sound: 'ring',
|
|
content_available: true,
|
|
click_action: 'FLUTTER_NOTIFICATION_CLICK'
|
|
}
|
|
};
|
|
let grpnotifyobj = {
|
|
notifications: arr1,
|
|
fcmmodel: fcmmodel
|
|
};
|
|
console.log('grpnotifyobj unassign');
|
|
console.log(grpnotifyobj);
|
|
sendgroupnotification(grpnotifyobj);
|
|
};
|
|
|
|
useEffect(() => {
|
|
console.log(orderheaderid);
|
|
if (orderheaderid && tenantid) {
|
|
// fetchorderdetails();
|
|
fetchorderaddons();
|
|
fetchorderattires();
|
|
fetchassignedcount();
|
|
// fetchuserdetails();
|
|
console.log(location.state || '');
|
|
// setOrderid(location.state.orderid || '');
|
|
// setEventlocation(location.state.eventlocation || '');
|
|
// setEventlocation(address || []);
|
|
|
|
// setOrderdate(dayjs(location.state.orderdate.substring(0, 10)).format('MM/DD/YYYY') || '');
|
|
// setDuedate(dayjs(location.state.orderdate.substring(0, 10)).format('MM/DD/YYYY') || '')
|
|
// setEventname(location.state.eventname || '');
|
|
// setClientname(location.state.tenantname || '')
|
|
} else {
|
|
setLoading(false);
|
|
}
|
|
// fetchorderdetails();
|
|
console.log(orderheaderid, tenantid);
|
|
}, [orderheaderid, tenantid, assignedpendingcount]);
|
|
|
|
const handleClose = () => {
|
|
setOpen(false);
|
|
};
|
|
const dialogclose = () => {
|
|
setDialogopen(false);
|
|
setStaffarr([]);
|
|
setExpandopen(['', '']);
|
|
};
|
|
useEffect(() => {
|
|
console.log(currentshiftobj);
|
|
});
|
|
|
|
const assignok = async () => {
|
|
let arr = [];
|
|
let arr1 = [];
|
|
staffarr.map((val) => {
|
|
arr.push({
|
|
orderprocessid: 0,
|
|
// "processdate": `${dayjs(new Date()).format('YYYY-MM-DD')} ${dayjs(new Date()).format('HH:mm:ss')}`, //current date
|
|
processdate: dayjs().format('YYYY-MM-DD HH:mm:ss'), //current date
|
|
tenantid: tenantid,
|
|
orderheaderid: orderheaderid,
|
|
orderdetailid: val.orderdetailid, ////
|
|
productid: val.productid, /////
|
|
userid: val.userid,
|
|
orderstatus: 'pending',
|
|
pending: `${dayjs(pendingtime).format('YYYY-MM-DD')} ${dayjs(pendingtime).format('HH:mm:ss')}`, // if pending
|
|
starttime: `${dayjs(starttime).format('YYYY-MM-DD')} ${dayjs(starttime).format('HH:mm:ss')}`,
|
|
endtime: `${dayjs(endtime).format('YYYY-MM-DD')} ${dayjs(endtime).format('HH:mm:ss')}`,
|
|
appuserid: parseInt(localStorage.getItem('appuserid')), //loginuserid
|
|
shiftid: val.shiftid,
|
|
userrate: val.userrate,
|
|
productrate: val.productrate
|
|
});
|
|
|
|
staffarr.map((val) => {
|
|
arr1.push({
|
|
notificationid: 0,
|
|
notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
Title: 'Staff Asigned',
|
|
message: `A Staff has been assigned to the order ${orderid}`,
|
|
configid: 2,
|
|
tenantid: tenantid,
|
|
orderheaderid: orderheaderid,
|
|
orderprocessid: 0,
|
|
shiftid: val.shiftid,
|
|
userid: val.userid,
|
|
orderid: orderid,
|
|
sound: 'ring',
|
|
click_action: 'FLUTTER_NOTIFICATION_CLICK',
|
|
firstname: val.firstname
|
|
});
|
|
});
|
|
});
|
|
console.log('arr');
|
|
console.log(arr);
|
|
|
|
await axios
|
|
.post(`${process.env.REACT_APP_URL2}/orders/createorderprocess`, arr)
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.message === 'Successfully created') {
|
|
// if (orderheaderid && tenantid) {
|
|
// fetchorderdetails();
|
|
// fetchorderaddons();
|
|
// fetchorderattires();
|
|
// }
|
|
|
|
enqueueSnackbar('Roles assigned successfully', {
|
|
variant: 'success',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
// fetchroleslist(productid, '', '', orderheaderid, arr1[0].shiftid);
|
|
// console.log(productid, '', '', orderheaderid, arr1[0].shiftid);
|
|
|
|
// arr1.map((val2) => {
|
|
// notificationpush(val2,val2.Title);
|
|
// })
|
|
setDialogopen(false);
|
|
fetchorderattires();
|
|
fetchassignedcount();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
console.log(arr);
|
|
};
|
|
|
|
const notificationpush = async (val) => {
|
|
let fcmtoken = val.userfcmtoken;
|
|
let obj1 = {
|
|
notificationid: 0,
|
|
notificationdate: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
Title: 'Staff Asigned',
|
|
message: `A Staff has been assigned to the order ${orderid}`,
|
|
configid: 2,
|
|
tenantid: tenantid,
|
|
orderheaderid: orderheaderid,
|
|
orderprocessid: val.orderprocessid,
|
|
shiftid: val.shiftid,
|
|
userid: val.userid,
|
|
orderid: orderid,
|
|
sound: 'ring',
|
|
click_action: 'FLUTTER_NOTIFICATION_CLICK'
|
|
// "firstname": val.firstname
|
|
};
|
|
console.log(obj1, fcmtoken);
|
|
await axios
|
|
.post(
|
|
`${process.env.REACT_APP_URL2}/utils/notification/send`,
|
|
{
|
|
priority: 'high',
|
|
registration_ids: [fcmtoken],
|
|
data: obj1,
|
|
notification: {
|
|
body: `A Staff has been assigned to ${orderid}`,
|
|
title: 'Legendary',
|
|
sound: 'ring',
|
|
content_available: true
|
|
}
|
|
},
|
|
{
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.REACT_APP_STAFF_TOKEN}`
|
|
}
|
|
}
|
|
)
|
|
.then((res) => {
|
|
console.log(res);
|
|
// if(res.data.status){
|
|
enqueueSnackbar('Notification sent successfully', {
|
|
variant: 'success',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
// }
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
|
|
|
|
const sendgroupnotification = async (obj1) => {
|
|
console.log(obj1);
|
|
await axios
|
|
.post(`${process.env.REACT_APP_URL2}/utils/notification/sendall`, obj1, {
|
|
headers: {
|
|
Authorization: `Bearer ${process.env.REACT_APP_STAFF_TOKEN}`
|
|
}
|
|
})
|
|
.then((res) => {
|
|
console.log(res);
|
|
if (res.data.status) {
|
|
// updateorderstatus();
|
|
enqueueSnackbar('Notification sent successfully', {
|
|
variant: 'success',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 2000
|
|
});
|
|
fetchorderaddons();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
// const updateorderstatus = async () => {
|
|
|
|
// await axios.put(`${process.env.REACT_APP_URL2}/orders/updateorderstatus`,{
|
|
// "orderheaderid":orderheaderid,
|
|
// "tenantid":tenantid,
|
|
// "orderstatus":"processing",
|
|
// "pending":"",
|
|
// "processing":dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
// "completed":""
|
|
// })
|
|
// .then((res) => {
|
|
// console.log(res)
|
|
// fetchorderdetails();
|
|
// fetchorderaddons();
|
|
// fetchorderattires();
|
|
|
|
// })
|
|
// .catch((err) => {
|
|
// console.log(err)
|
|
// fetchorderdetails();
|
|
// fetchorderaddons();
|
|
// fetchorderattires();
|
|
// })
|
|
|
|
// }
|
|
|
|
const fetchassignedcount = async () => {
|
|
// console.log(obj1)
|
|
await axios
|
|
.get(`${process.env.REACT_APP_URL2}/orders/getorderstatuscount?orderheaderid=${orderheaderid}`)
|
|
.then((res) => {
|
|
if (res.data.status) {
|
|
// let arr1=[];
|
|
console.log(res);
|
|
setAssignedpendingcount(res.data.pendingcount);
|
|
fetchorderaddons();
|
|
// res.data.details.map((val) => {
|
|
// let val2={
|
|
// "notificationid": 0,
|
|
// "notificationdate": dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
// "Title": "Staff Asigned",
|
|
// "message": `A Staff has been assigned to the order ${orderid}`,
|
|
// "configid": 2,
|
|
// "tenantid": tenantid,
|
|
// "orderheaderid": orderheaderid,
|
|
// "orderprocessid": val.orderprocessid,
|
|
// "shiftid": val.shiftid,
|
|
// "userid": val.userid,
|
|
// "orderid": orderid,
|
|
// "sound": "ring",
|
|
// "click_action": "FLUTTER_NOTIFICATION_CLICK",
|
|
// // "firstname": val.firstname
|
|
|
|
// };
|
|
|
|
// notificationpush(val2,val.userfcmtoken);
|
|
|
|
// })
|
|
} else {
|
|
setAssignedpendingcount(res.data.pendingcount);
|
|
fetchorderaddons();
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
};
|
|
|
|
function AlertCustomerDelete({
|
|
// title,
|
|
open,
|
|
handleClose
|
|
}) {
|
|
const [deletepassword, setDeletepassword] = useState('');
|
|
|
|
return (
|
|
<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' }}>
|
|
<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> */}
|
|
{invoiceeligible && (
|
|
<Alert color="warning" variant="border" icon={<WarningFilled />}>
|
|
<AlertTitle>Order is within 24Hrs time frame. The order will be invoiced with standard pricing as agreed.</AlertTitle>
|
|
{/* <Typography variant="h6"> This is an warning alert.</Typography> */}
|
|
<Link href="https://thelegendarystaff.com/" target="_blank">
|
|
Terms & Condition link
|
|
</Link>
|
|
</Alert>
|
|
)}
|
|
<Typography variant="h4" align="center">
|
|
Please type in the order number to confirm.
|
|
</Typography>
|
|
<TextField
|
|
type="text"
|
|
onChange={(e) => {
|
|
console.log(e.target.value);
|
|
setDeletepassword(e.target.value);
|
|
}}
|
|
error={deletepassword !== orderid.slice(4)}
|
|
// error={true}
|
|
value={deletepassword}
|
|
/>
|
|
</Stack>
|
|
|
|
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
|
|
<Button
|
|
fullWidth
|
|
color="error"
|
|
variant="contained"
|
|
onClick={() => {
|
|
if (deletepassword === orderid.slice(4)) {
|
|
cancelorder();
|
|
handleClose(true);
|
|
}
|
|
}}
|
|
autoFocus
|
|
>
|
|
Yes, Cancel
|
|
</Button>
|
|
<Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
|
|
No
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{loading && <Loader />}
|
|
|
|
<AlertCustomerDelete open={open} handleClose={handleClose} />
|
|
|
|
<Dialog
|
|
maxWidth={false}
|
|
fullWidth={true}
|
|
open={dialogopen}
|
|
onClose={dialogclose}
|
|
scroll={'paper'}
|
|
fullScreen={isMobile}
|
|
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
|
|
TransitionComponent={PopupTransition}
|
|
>
|
|
<DialogTitle>
|
|
<Stack direction={'row'} justifyContent={'space-between'}>
|
|
<Stack direction={{ sm: 'row', xs: 'column' }} spacing={2} alignItems={'center'}>
|
|
<Typography variant="h3">Assign Roles</Typography>
|
|
|
|
<Chip label={clientname} variant="light" color="primary" />
|
|
</Stack>
|
|
<Chip label={orderid} variant="combined" color="warning" size={'large'} />
|
|
</Stack>
|
|
<Grid container sx={{ p: 1 }} spacing={2}>
|
|
<Grid item sm={6} xs={12}>
|
|
{/* <Chip label={currentrole} variant="combined" color="primary" size='normal' /> */}
|
|
<Tabs
|
|
value={tabstatus}
|
|
// onChange={handleChangetab}
|
|
onChange={() => setTabstatus((e) => (e === 0 ? 1 : 0))}
|
|
variant="scrollable"
|
|
scrollButtons="auto"
|
|
>
|
|
{/* <Tab label="All" /> */}
|
|
<Tab label={currentrole} />
|
|
</Tabs>
|
|
</Grid>
|
|
<Grid item sm={6} xs={12}>
|
|
<Stack
|
|
direction={'row'}
|
|
justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}
|
|
// alignItems={{xs:'flex-end',sm:'center'}}
|
|
sx={{ height: '100%' }}
|
|
spacing={2}
|
|
>
|
|
<Chip
|
|
sx={{ width: '130px' }}
|
|
label={`Required:${currentshiftobj.shifts}`}
|
|
variant="combined"
|
|
color="primary"
|
|
size="normal"
|
|
/>
|
|
<Chip
|
|
sx={{ width: '130px' }}
|
|
label={`Assigned: ${currentshiftobj.assigned}`}
|
|
variant="combined"
|
|
color="success"
|
|
size="normal"
|
|
/>
|
|
<Chip
|
|
sx={{ width: '130px' }}
|
|
label={`Remaining: ${currentshiftobj.remaining}`}
|
|
variant="combined"
|
|
color="error"
|
|
size="normal"
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
</Grid>
|
|
</DialogTitle>
|
|
{/* <Typography variant="h1">title</Typography> */}
|
|
<DialogContent dividers={true}>
|
|
{/* <Grid container sx={{ p: 1 }} spacing={2}>
|
|
|
|
<Grid item sm={6} xs={12}>
|
|
|
|
|
|
<Tabs
|
|
value={tabstatus}
|
|
|
|
onChange={() => setTabstatus((e) => (e === 0) ? 1 : 0)}
|
|
variant="scrollable" scrollButtons="auto" >
|
|
<Tab label="All" />
|
|
<Tab label={currentrole} />
|
|
</Tabs>
|
|
</Grid>
|
|
<Grid item sm={6} xs={12}>
|
|
<Stack direction={{ xs: 'column', sm: 'row' }} justifyContent={'flex-end'}
|
|
// alignItems={{xs:'flex-end',sm:'center'}}
|
|
sx={{ height: '100%' }} spacing={2}>
|
|
<Chip sx={{ width: '130px' }} label={`Shifts:${currentshiftobj.shifts}`} variant="combined" color='primary' size='normal' />
|
|
<Chip sx={{ width: '130px' }} label={`Assigned: ${currentshiftobj.assigned}`} variant="combined" color='success' size='normal' />
|
|
<Chip sx={{ width: '130px' }} label={`Remaining: ${currentshiftobj.remaining}`} variant="combined" color='error' size='normal' />
|
|
|
|
</Stack>
|
|
|
|
</Grid>
|
|
</Grid> */}
|
|
|
|
{/* </DialogTitle> */}
|
|
{/* <MainCard> */}
|
|
{stafflist.length === 0 ? (
|
|
<>
|
|
{loading ? (
|
|
<>
|
|
<Stack alignItems={'center'}>
|
|
<CircularProgress />
|
|
</Stack>
|
|
</>
|
|
) : (
|
|
<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>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>Staff</TableCell>
|
|
|
|
<TableCell>Category</TableCell>
|
|
|
|
{/* <TableCell>Gender</TableCell> */}
|
|
|
|
<TableCell>Price</TableCell>
|
|
|
|
<TableCell>Experience</TableCell>
|
|
|
|
<TableCell>Level</TableCell>
|
|
<TableCell>City</TableCell>
|
|
<TableCell>Action</TableCell>
|
|
<TableCell></TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{stafflist.map((val, i) => {
|
|
return (
|
|
<Fragment key={i}>
|
|
<TableRow
|
|
sx={{
|
|
backgroundColor: staffarr.find((res) => res.userid == val.userid) ? '#f5f5f5' : '',
|
|
':hover': {
|
|
backgroundColor: staffarr.find((res) => res.userid == val.userid) ? '#f5f5f5 !important' : ''
|
|
}
|
|
}}
|
|
>
|
|
<TableCell
|
|
component="th"
|
|
// id={labelId}
|
|
scope="row"
|
|
padding="none"
|
|
>
|
|
{i + 1}
|
|
</TableCell>
|
|
<TableCell align="left" sx={{ paddingLeft: '0px !important' }}>
|
|
<Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
|
|
<Avatar
|
|
alt=""
|
|
size="sm"
|
|
src={''}
|
|
sx={{
|
|
width: '25px',
|
|
height: '25px'
|
|
}}
|
|
>
|
|
{/* {row.tenantname.charAt(0)} */}
|
|
</Avatar>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{val.firstname}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{val.contactno}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
{/* <Stack direction="column">
|
|
<Typography variant="caption"> {val.contactno}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
some demo address
|
|
</Typography>
|
|
</Stack> */}
|
|
<Stack direction={'column'} alignItems={'flex-start'}>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{val.cateoryname}
|
|
</Typography>
|
|
<Chip label={val.subcategoryname} color="info" size="small" variant="light" />
|
|
{/* <Typography>{row.category}</Typography> */}
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>{val.rolecost}</TableCell>
|
|
{/* <TableCell align="left"> */}
|
|
{/* {(row.gender === 1) && <WomanIcon fontSize="small" /> } */}
|
|
{/* {row.gender === 0 && <ManIcon fontSize="small"/>} */}
|
|
{/* <WomanIcon fontSize="small" /> */}
|
|
{/* </TableCell> */}
|
|
{/* <TableCell align="left">B+</TableCell> */}
|
|
{/* <TableCell align="left">{row.devicetype}</TableCell> */}
|
|
<TableCell align="left">{val.experience} Years</TableCell>
|
|
<TableCell align="left">
|
|
<Chip label={val.levelofexperience} size="small" color="primary" variant="light" />
|
|
</TableCell>
|
|
<TableCell align="left">{val.city}</TableCell>
|
|
<TableCell align="left">
|
|
{val.orderdetailid !== orderdetailid ? (
|
|
<>
|
|
<Checkbox
|
|
// disabled={(currentshiftobj.remaining == 0)}
|
|
disabled={val.orderdetailid !== 0}
|
|
checked={staffarr.find((res) => res.userid == val.userid) ? true : false}
|
|
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.shifts--;
|
|
// obj.assigned = arr.length;
|
|
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.indexOf(val.userid)
|
|
let index = arr.findIndex((val1) => val1.userid === val.userid);
|
|
arr.splice(index, 1);
|
|
setStaffarr([...arr]);
|
|
let obj = currentshiftobj;
|
|
// obj.shifts++;
|
|
// obj.assigned = arr.length;
|
|
obj.assigned--;
|
|
obj.remaining = obj.shifts - obj.assigned;
|
|
setCurrentshiftobj({ ...obj });
|
|
}
|
|
// forceUpdate();
|
|
console.log(staffarr);
|
|
}
|
|
}}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Chip label="Assigned" color="success" size="small" sx={{ mr: 1 }} />
|
|
|
|
{/* <Checkbox */}
|
|
|
|
{/* // checked
|
|
// /> */}
|
|
<Tooltip title="Unassign">
|
|
<IconButton
|
|
color="error"
|
|
onClick={() => {
|
|
console.log(val);
|
|
unassign(val);
|
|
// sendunassignnotification(val)
|
|
}}
|
|
>
|
|
{/* <UserOutlined /> */}
|
|
<CloseOutlined />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Tooltip title="Send Notification">
|
|
<IconButton
|
|
color="info"
|
|
onClick={() => {
|
|
console.log(val);
|
|
// unassign(val)
|
|
notificationpush(val);
|
|
}}
|
|
>
|
|
{/* <UserOutlined /> */}
|
|
<NotificationOutlined />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{val.orderid && (
|
|
<>
|
|
<Chip
|
|
label={val.orderid}
|
|
color="warning"
|
|
size="small"
|
|
// sx={{ mr: 1 }}
|
|
variant="light"
|
|
/>
|
|
</>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<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: { xs: '100%', sm: '130px' } }} variant="contained" onClick={assignok}>
|
|
OK
|
|
</Button1>
|
|
<Button1
|
|
sx={{ width: { xs: '100%', sm: '130px' } }}
|
|
color="warning"
|
|
variant="contained"
|
|
onClick={() => {
|
|
// dialogclose();
|
|
setStaffarr([]);
|
|
let obj = currentshiftobj;
|
|
// obj.shifts = row.orderqty;
|
|
obj.remaining = obj.shifts;
|
|
obj.assigned = 0;
|
|
|
|
setCurrentshiftobj(obj);
|
|
}}
|
|
>
|
|
clear
|
|
</Button1>
|
|
</>
|
|
)}
|
|
<Button1
|
|
sx={{ width: { xs: '100%', sm: '130px' } }}
|
|
color="error"
|
|
variant="contained"
|
|
onClick={() => {
|
|
dialogclose();
|
|
}}
|
|
>
|
|
Close
|
|
</Button1>
|
|
</Stack>
|
|
</DialogActions>
|
|
{/* </MainCard> */}
|
|
{/* </MainCard> */}
|
|
</Dialog>
|
|
|
|
<Grid container rowSpacing={2} columnSpacing={2.75}>
|
|
{/* <Grid item xs={12}>
|
|
|
|
<Stack direction={{ md: 'row', xs: 'column' }} justifyContent="space-between" alignItems="center" width="100%">
|
|
|
|
|
|
</Stack>
|
|
</Grid> */}
|
|
{/* <Box content={false} sx={{ overflow: 'visible' }} width='100%'> */}
|
|
{/* <Grid item xs={12}>
|
|
<Typography variant="h3">Details</Typography>
|
|
</Grid> */}
|
|
|
|
<CardActions
|
|
sx={{
|
|
position: 'sticky',
|
|
top: '60px',
|
|
// top:0,
|
|
bgcolor: theme.palette.background.default,
|
|
zIndex: 1,
|
|
// borderBottom: `1px solid ${theme.palette.divider}`,
|
|
width: '100%'
|
|
}}
|
|
>
|
|
<Grid item xs={12}>
|
|
<Stack
|
|
direction={{ md: 'row', xs: 'column' }}
|
|
justifyContent="space-between"
|
|
alignItems="flex-end"
|
|
sx={{ width: '100%', p: 1 }}
|
|
>
|
|
<Stack direction="row" spacing={2} alignItems="center" justifyContent="flex-start" sx={{ width: { xs: '100%', md: '0' } }}>
|
|
<IconButton
|
|
onClick={() => history.back()}
|
|
// onClick={()=>}
|
|
>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
{/* <Link to="/dashboard">Test me</Link> */}
|
|
<Stack direction="column" alignItems="flex-start">
|
|
<Typography variant="h3">Details</Typography>
|
|
<Stack direction="row" spacing={1}>
|
|
{/* <Typography noWrap color="secondary"></Typography> */}
|
|
<Chip
|
|
label={orderid === '' ? <Skeleton sx={{ width: '80px', bgcolor: '#fff9c4' }} animation="wave" /> : orderid}
|
|
variant="combined"
|
|
color="warning"
|
|
size="small"
|
|
/>
|
|
{/* <Typography variant="subtitle1">Date</Typography> */}
|
|
{/* <Typography color="secondary">{orderdate}</Typography> */}
|
|
<Chip
|
|
label={orderdate === '' ? <Skeleton sx={{ width: '80px', bgcolor: '#b3e5fc' }} animation="wave" /> : orderdate}
|
|
variant="combined"
|
|
color="primary"
|
|
size="small"
|
|
/>
|
|
|
|
{orderstatus === 'pending' && <Chip label="Pending" color="error" size="small" />}
|
|
{orderstatus === 'cancelled' && <Chip label="Cancelled" color="secondary" size="small" />}
|
|
{orderstatus === 'completed' && <Chip label="Completed" color="primary" size="small" />}
|
|
{orderstatus === 'processing' && <Chip label="Processing" color="primary" size="small" />}
|
|
{orderstatus === 'assigned' && <Chip label="Assigned" color="warning" size="small" />}
|
|
{orderstatus === 'confirmed' && <Chip label="Confirmed" color="success" size="small" />}
|
|
|
|
{orderstatus === 'active' && <Chip label="Active" color="info" size="small" />}
|
|
{orderstatus === 'closed' && <Chip label="Closed" color="info" size="small" />}
|
|
|
|
{orderstatus === 'modified' && <Chip label="Modified" color="secondary" size="small" variant="contained" />}
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<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> */}
|
|
|
|
{(orderstatus === 'pending' || orderstatus === 'assigned' || orderstatus === 'confirmed' || orderstatus === 'modified') && (
|
|
// && (dayjs(startdate).$d > dayjs().$d)
|
|
<Tooltip title="Edit">
|
|
<Button1
|
|
variant="outlined"
|
|
color="info"
|
|
sx={{ borderRadius: '40px', width: { xs: '100%', sm: 'auto' } }}
|
|
startIcon={<BorderColorIcon color="info" />}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
// if (dayjs(startdate).$d > dayjs().$d) {
|
|
if (dayjs(dayjs().format('MM-DD-YYYY')).isBefore(dayjs(dayjs(startdate).format('MM-DD-YYYY')))) {
|
|
navigate(`/editorder`, {
|
|
state: {
|
|
orderheaderid: orderheaderid,
|
|
tenantid: tenantid
|
|
}
|
|
});
|
|
} else {
|
|
enqueueSnackbar(
|
|
'Order cannot be edited.\n Order date is not valid at this time',
|
|
|
|
{
|
|
variant: 'error',
|
|
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
|
autoHideDuration: 4000,
|
|
style: { whiteSpace: 'pre-line' }
|
|
}
|
|
);
|
|
}
|
|
}}
|
|
>
|
|
Edit Order
|
|
</Button1>
|
|
</Tooltip>
|
|
)}
|
|
|
|
{/* {(((orderstatus === 'pending')
|
|
|| (orderstatus === 'modified'))
|
|
&& assignedpendingcount === 0) &&
|
|
<>
|
|
<Button1
|
|
variant="outlined"
|
|
color="primary"
|
|
sx={{ borderRadius: '40px' }}
|
|
startIcon={<SendIcon />}
|
|
onClick={() => {
|
|
fetchassignedstaffs();
|
|
}}
|
|
>
|
|
Notify Staff
|
|
</Button1>
|
|
</>
|
|
} */}
|
|
{orderstatus !== 'cancelled' && orderstatus !== '' && orderstatus !== 'completed' && orderstatus !== 'closed' && (
|
|
<>
|
|
<Button1
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={() => {
|
|
console.log(dayjs(startdate).diff(dayjs(), 'm') / 60);
|
|
if (dayjs(startdate).diff(dayjs(), 'm') / 60 > 24) {
|
|
setInvoiceeligible(false);
|
|
setOpen(true);
|
|
} else {
|
|
setInvoiceeligible(true);
|
|
setOpen(true);
|
|
}
|
|
}}
|
|
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 }, width: { xs: '100%', sm: 'auto' } }}
|
|
startIcon={<CancelOutlinedIcon />}
|
|
>
|
|
Cancel Order
|
|
</Button1>
|
|
</>
|
|
)}
|
|
{orderstatus === 'cancelled' && (
|
|
<>
|
|
<Chip label={`Order Cancelled on ${cancelleddate}`} variant="combined" color="error" />
|
|
</>
|
|
)}
|
|
{/* {(orderstatus === 'completed') &&
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={() => {
|
|
navigate(`/invoice/create`, {
|
|
state: {
|
|
orderheaderid: orderheaderid,
|
|
tenantid: tenantid
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 } }}
|
|
>
|
|
Raise Invoice
|
|
</Button>
|
|
} */}
|
|
</Stack>
|
|
</Stack>
|
|
</Grid>
|
|
</CardActions>
|
|
|
|
{/* Dialog window */}
|
|
|
|
<Grid item xs={12} sx={{ mt: -2 }}>
|
|
<MainCard content={false} width="100%">
|
|
{/* <h1>{(dayjs().isBefore(dayjs(startdate)))?'true':'false'}</h1> */}
|
|
|
|
{/* <Stack spacing={2.5}> */}
|
|
{/* <Box
|
|
sx={{ p: 2.5, pb: 0 }}
|
|
> */}
|
|
{/* <Stack direction={{ xs: 'column', sm: 'row' }} justifyContent="flex-end"> */}
|
|
{/* <Box>
|
|
<Stack direction="column" spacing={1}>
|
|
<Typography variant="h5">BEO</Typography>
|
|
<Chip label="Paid" variant="light" color="success" size="small" />
|
|
|
|
</Stack>
|
|
</Box> */}
|
|
{/* <Box> */}
|
|
|
|
{/* <Stack direction="row" spacing={1} justifyContent="flex-end">
|
|
<Typography sx={{ overflow: 'hidden' }} variant="subtitle1">
|
|
Due Date
|
|
</Typography>
|
|
<Typography color="secondary">{duedate}</Typography>
|
|
</Stack> */}
|
|
{/* </Box>
|
|
</Stack> */}
|
|
{/* </Box> */}
|
|
{/* </Stack> */}
|
|
<Grid container spacing={2.5} sx={{ p: 2.5 }}>
|
|
<Grid item xs={12} sm={6}>
|
|
<MainCard sx={{ height: '100%' }}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h5">Client</Typography>
|
|
<Typography color="secondary">
|
|
{clientname === '' ? <Skeleton sx={{ width: '40%' }} animation="wave" /> : clientname}
|
|
</Typography>
|
|
<FormControl sx={{ width: '100%' }}>
|
|
{/* {eventlocation.map((val, i) => {
|
|
return <Typography color="secondary" key={i} >{val}</Typography>
|
|
})
|
|
|
|
}
|
|
<Typography color="secondary" >{eventlocation}</Typography>
|
|
<Typography color="secondary">fafdf</Typography>
|
|
<Typography color="secondary">dafaf</Typography>
|
|
<Typography color="secondary">afdafafd</Typography> */}
|
|
<Typography color="secondary">
|
|
{tenantaddress === '' ? <Skeleton sx={{ width: '90%' }} animation="wave" /> : tenantaddress}
|
|
</Typography>
|
|
</FormControl>
|
|
</Stack>
|
|
</MainCard>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} sm={6}>
|
|
<MainCard sx={{ height: '100%' }}>
|
|
<Stack spacing={1}>
|
|
<Typography variant="h5">Event</Typography>
|
|
<FormControl sx={{ width: '100%' }}>
|
|
<Typography color="secondary">
|
|
{eventname === '' ? <Skeleton sx={{ width: '40%' }} animation="wave" /> : eventname}
|
|
</Typography>
|
|
{/*
|
|
<Typography color="secondary">{(eventlocation === '') ? <Skeleton sx={{ width: '90%' }} animation="wave" /> : eventlocation}</Typography>
|
|
|
|
<Chip label={(venuetype === '') ? <Skeleton sx={{ width: '80px', bgcolor: '#b3e5fc' }} animation="wave" /> : venuetype} color="primary" variant="light" size="small" sx={{ width: 'max-content' }} />
|
|
*/}
|
|
</FormControl>
|
|
</Stack>
|
|
</MainCard>
|
|
</Grid>
|
|
|
|
{categoryarr.map((val5, j) => {
|
|
return (
|
|
<Fragment key={val5.locationaddress}>
|
|
<Grid item xs={12}>
|
|
<MainCard
|
|
sx={{
|
|
opacity: val5.shiftstatus == 0 ? '' : '0.7'
|
|
}}
|
|
>
|
|
<Stack
|
|
direction={{ xs: 'column', md: 'row' }}
|
|
justifyContent={'space-between'}
|
|
alignItems={{ md: 'center', xs: 'flex-start' }}
|
|
spacing={2}
|
|
sx={{ p: 2 }}
|
|
>
|
|
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} alignItems={{ md: 'center', xs: 'flex-start' }}>
|
|
<Typography variant="h5">Shift {j + 1}</Typography>
|
|
|
|
<Typography color="secondary">
|
|
<EnvironmentOutlined /> {''}
|
|
{val5.locationaddress}
|
|
</Typography>
|
|
{val5.shiftstatus === 1 && <Chip label="Cancelled" color="secondary" />}
|
|
</Stack>
|
|
<Stack direction={'row'} spacing={1}>
|
|
{val5.ordercontacts.map((val11) => {
|
|
return (
|
|
<>
|
|
<Tooltip title={val11.contactname}>
|
|
<Avatar sx={{ bgcolor: '#2196f3', width: 30, height: 30 }} alt="A">
|
|
{val11.contactname.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
</Tooltip>
|
|
</>
|
|
);
|
|
})}
|
|
</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>
|
|
<TableRow>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>Role</TableCell>
|
|
<TableCell>Start Date</TableCell>
|
|
<TableCell>End Date</TableCell>
|
|
<TableCell>Unpaid break</TableCell>
|
|
<TableCell>Count</TableCell>
|
|
<TableCell>Assigned</TableCell>
|
|
<TableCell>Attire</TableCell>
|
|
<TableCell>Price</TableCell>
|
|
{/* <TableCell align="right">Tax</TableCell> */}
|
|
<TableCell>Amount</TableCell>
|
|
<TableCell>Action</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{val5.orderdetails.length === 0 && (
|
|
<>
|
|
<TableRow>
|
|
<TableCell>
|
|
<Skeleton animation="wave" />
|
|
</TableCell>
|
|
<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" />
|
|
{/* <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>
|
|
<TableCell>
|
|
<Skeleton animation="wave" />
|
|
</TableCell>
|
|
{/* <TableCell>
|
|
<Skeleton animation="wave" />
|
|
|
|
</TableCell> */}
|
|
</TableRow>
|
|
{/* </TableBody> */}
|
|
</>
|
|
)}
|
|
|
|
{/* <TableBody> */}
|
|
{val5.orderdetails.map((row, i) => (
|
|
<>
|
|
<TableRow
|
|
key={i + 1}
|
|
sx={{
|
|
'&:last-child td, &:last-child th': { border: 0 },
|
|
opacity: row.status == 0 ? '' : '0.7'
|
|
}}
|
|
>
|
|
<TableCell>{i + 1}</TableCell>
|
|
<TableCell>{row.productname}</TableCell>
|
|
{/* <TableCell>{row.productname}
|
|
</TableCell> */}
|
|
<TableCell>
|
|
<Stack direction="column">
|
|
<Typography variant="body1">{dayjs(row.starttime).format('MM/DD/YYYY')}</Typography>
|
|
<Typography variant="body2">{dayjs(row.starttime).format('hh:mm A')}</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>
|
|
{' '}
|
|
<Stack direction="column">
|
|
<Typography variant="body1">{dayjs(row.endtime).format('MM/DD/YYYY')}</Typography>
|
|
<Typography variant="body2">{dayjs(row.endtime).format('hh:mm A')}</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell>{row.unpaidbreak || 0}</TableCell>
|
|
<TableCell align="center">
|
|
<Chip label={row.orderqty} color="success" variant="light" size="small" />
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
<Chip
|
|
label={row.supplyqty}
|
|
color={row.supplyqty === 0 ? 'error' : 'warning'}
|
|
variant="light"
|
|
size="small"
|
|
/>
|
|
</TableCell>
|
|
<TableCell width={'100px'}>
|
|
{/* < Grid container spacing={1}>
|
|
{(row.orderattires || []).map((val) => {
|
|
return <Fragment key={val.attirename}>
|
|
<Grid item xs={12}>
|
|
<Chip sx={{ fontSize: '11px' }} color="primary" label={val.attirename} size="small" />
|
|
</Grid>
|
|
</Fragment>
|
|
})
|
|
|
|
|
|
}
|
|
</Grid> */}
|
|
</TableCell>
|
|
<TableCell>${row.price}</TableCell>
|
|
{/* <TableCell align="right">{row.taxamount}</TableCell> */}
|
|
<TableCell>${row.landingamount}</TableCell>
|
|
<TableCell>
|
|
<Stack direction={'row'}>
|
|
<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]);
|
|
// expanddatafetch(row.orderheaderid);
|
|
|
|
// fetchroleslist(row.productid, '', '', val5.orderheaderid, row.shiftid);
|
|
fetchstafflist(row.orderdetailid);
|
|
}}
|
|
>
|
|
{expandopen[0] === j && expandopen[1] === i ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
|
|
{/* {(orderstatus !== 'cancelled') &&
|
|
<>
|
|
<Tooltip title='Assign Roles'>
|
|
<Button1 sx={{ minWidth: '10px !important' }} onClick={() => {
|
|
setExpandopen(['', ''])
|
|
setCurrentrole(row.productname);
|
|
setStarttime(row.starttime);
|
|
console.log('row')
|
|
|
|
console.log(row)
|
|
setEndtime(row.endtime);
|
|
setProductid(row.productid);
|
|
setOrderdetailid(row.orderdetailid);
|
|
if ((row.orderqty === row.supplyqty)
|
|
|| (row.status == 1)
|
|
|| (val5.shiftstatus == 1)
|
|
|
|
) {
|
|
fetchroleslist(row.productid, '', '', val5.orderheaderid, row.shiftid);
|
|
|
|
} else {
|
|
fetchroleslist(row.productid, row.starttime, row.endtime, val5.orderheaderid, row.shiftid);
|
|
|
|
}
|
|
|
|
setStaffarr([]);
|
|
|
|
|
|
let obj = currentshiftobj;
|
|
obj.shifts = row.orderqty;
|
|
|
|
obj.shiftid = row.shiftid;
|
|
obj.remaining = row.orderqty - row.supplyqty;
|
|
obj.assigned = row.supplyqty;
|
|
obj.price = row.price;
|
|
|
|
setCurrentshiftobj(obj);
|
|
|
|
setDialogopen(true);
|
|
}} ><EditTwoTone /></Button1>
|
|
</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>
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow sx={{ p: 2 }}>
|
|
<TableCell
|
|
style={{ paddingBottom: 0, paddingTop: 0, paddingLeft: 0, paddingRight: 0 }}
|
|
colSpan={11}
|
|
sx={{ width: '100%' }}
|
|
>
|
|
<Collapse in={expandopen[0] === j && expandopen[1] === i} timeout="auto" unmountOnExit>
|
|
{/* <Grid container sx={{ width: '100%' }}> */}
|
|
|
|
<MainCard sx={{ width: '100%' }}>
|
|
{stafflist.length === 0 ? (
|
|
<>
|
|
{loading ? (
|
|
<>
|
|
<Stack alignItems={'center'}>
|
|
<CircularProgress />
|
|
</Stack>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Stack sx={{ p: 1 }}>
|
|
<Typography>No Staffs has been Assigned</Typography>
|
|
</Stack>
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
<TableContainer>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>#</TableCell>
|
|
<TableCell>Staff</TableCell>
|
|
<TableCell>Start Time</TableCell>
|
|
<TableCell>End Time</TableCell>
|
|
<TableCell>Pay Rate</TableCell>
|
|
|
|
{/* <TableCell>Category</TableCell> */}
|
|
<TableCell align="center">Clockin</TableCell>
|
|
<TableCell align="center">Clockout</TableCell>
|
|
|
|
<TableCell>Hours Worked</TableCell>
|
|
|
|
{/* <TableCell>Experience</TableCell> */}
|
|
|
|
{/* <TableCell>Level</TableCell> */}
|
|
{/* <TableCell>City</TableCell> */}
|
|
<TableCell>Status</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{stafflist.map((val, i) => {
|
|
return (
|
|
<Fragment key={i}>
|
|
<TableRow
|
|
sx={
|
|
{
|
|
// backgroundColor: (staffarr.find((res) => res.userid == val.userid)) ? '#f5f5f5' : '', ':hover': {
|
|
// backgroundColor: (staffarr.find((res) => res.userid == val.userid)) ? '#f5f5f5 !important' : ''
|
|
// }
|
|
}
|
|
}
|
|
>
|
|
<TableCell component="th" scope="row" padding="none">
|
|
{i + 1}
|
|
</TableCell>
|
|
{/*
|
|
<TableCell align="left" sx={{ paddingLeft: '0px !important' }}>
|
|
<Stack direction="row" alignItems="center" spacing={1} justifyContent="flex-start">
|
|
<Avatar
|
|
alt=""
|
|
size="sm"
|
|
src={''}
|
|
sx={{
|
|
width: '25px',
|
|
height: '25px'
|
|
}}
|
|
>
|
|
</Avatar>
|
|
<Stack direction="column">
|
|
<Typography variant="caption">{val.staffname}</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</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 align="left">
|
|
<Stack direction={'column'} alignItems={'flex-start'}>
|
|
<Typography variant="caption" color="textSecondary">{val.cateoryname}</Typography>
|
|
<Chip label={val.productname} color='info' size='small' variant="light" />
|
|
|
|
</Stack>
|
|
</TableCell> */}
|
|
|
|
<TableCell>
|
|
<Stack spacing={0.5} alignItems="center">
|
|
{/* <Typography variant="h5">Clock In:</Typography> */}
|
|
{/* <Typography color="secondary">Age</Typography> */}
|
|
<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">
|
|
{/* <Typography variant="h5">Clock In:</Typography> */}
|
|
{/* <Typography color="secondary">Age</Typography> */}
|
|
<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">
|
|
|
|
|
|
</TableCell>
|
|
<TableCell align="left" sx={{ paddingLeft: '0px !important' }} >
|
|
|
|
|
|
|
|
<Typography variant='caption'>
|
|
{val.tenantname}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell align="left" >
|
|
<Stack direction='column'>
|
|
<Typography variant='caption'>
|
|
{val.orderid}
|
|
</Typography>
|
|
<Typography variant='caption' color="textSecondary">
|
|
{dayjs(val.startdate).utc().format('MM/DD/YYYY')}
|
|
</Typography>
|
|
</Stack>
|
|
</TableCell>
|
|
<TableCell align="left">
|
|
<Stack direction='column'>
|
|
<Typography variant="caption" > {val.eventname}</Typography>
|
|
<Tooltip title={val.locationaddress}>
|
|
<Typography variant="caption" color="textSecondary"
|
|
> {`${val.locationaddress.slice(0, 15)}...`}</Typography>
|
|
</Tooltip>
|
|
</Stack>
|
|
</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>
|
|
)}
|
|
</MainCard>
|
|
</Collapse>
|
|
</TableCell>
|
|
</TableRow>
|
|
</>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
</MainCard>
|
|
</Grid>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
|
|
<Grid item xs={12}>
|
|
<Divider sx={{ borderWidth: 1 }} />
|
|
</Grid>
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
// md={8}
|
|
>
|
|
<MainCard title="Order Addons" sx={{ height: '100%' }}>
|
|
{/* <Stack spacing={1}> */}
|
|
{/* <Typography variant="h5">Order Addons</Typography>
|
|
<Divider /> */}
|
|
<Grid container spacing={2}>
|
|
{(orderaddons || []).map((val) => {
|
|
return (
|
|
<Fragment key={val.addon}>
|
|
<Grid item>
|
|
<Chip icon={<DirectionsCarIcon />} variant="outlined" color="error" label={val.addon} />
|
|
</Grid>
|
|
</Fragment>
|
|
);
|
|
})}
|
|
{/* <Grid item>
|
|
<Chip icon={<DirectionsCarIcon />} variant='outlined' color="error" label="Parking Provided" />
|
|
</Grid>
|
|
<Grid item>
|
|
<Chip icon={<SoupKitchenIcon />} variant='outlined' color="error" label="Meal Provided" />
|
|
</Grid> */}
|
|
{/* <Grid item>
|
|
<Chip icon={<SmileFilled />} color="error" label="Like" />
|
|
</Grid>
|
|
<Grid item>
|
|
<Chip icon={<SmileFilled />} color="error" label="Like" />
|
|
</Grid>
|
|
<Grid item>
|
|
<Chip icon={<SmileFilled />} color="error" label="Like" />
|
|
</Grid> */}
|
|
</Grid>
|
|
{/* </Stack> */}
|
|
</MainCard>
|
|
</Grid>
|
|
{/* <Grid item xs={12} sm={2}></Grid> */}
|
|
<Grid item xs={12} sm={6}>
|
|
{/* <Box sx={{ height: '100%',display:'flex',alignItems:'center' }} > */}
|
|
<MainCard title="Total" sx={{ height: '100%' }}>
|
|
<Stack spacing={2}>
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<Typography color={theme.palette.grey[500]}>Sub Total:</Typography>
|
|
<Typography>${subtotal === '' ? <Skeleton sx={{ width: '30px' }} /> : subtotal}</Typography>
|
|
</Stack>
|
|
{/* <Stack direction="row" justifyContent="space-between">
|
|
<Typography color={theme.palette.grey[500]}>Discount:</Typography>
|
|
<Typography variant="h6" color={theme.palette.success.main}>
|
|
0
|
|
</Typography>
|
|
</Stack> */}
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<Typography color={theme.palette.grey[500]}>Tax:</Typography>
|
|
<Typography>{taxamount === '' ? <Skeleton sx={{ width: '30px' }} /> : taxamount}</Typography>
|
|
</Stack>
|
|
<Stack direction="row" justifyContent="space-between">
|
|
<Typography variant="subtitle1">Grand Total:</Typography>
|
|
<Typography variant="subtitle1">
|
|
{grandtotal === '' ? <Skeleton sx={{ width: '30px' }} /> : `$${grandtotal}`}
|
|
</Typography>
|
|
</Stack>
|
|
</Stack>
|
|
</MainCard>
|
|
{/* </Box> */}
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Stack
|
|
direction="column"
|
|
sx={{ mt: 2 }}
|
|
// spacing={1}
|
|
>
|
|
<Typography color="secondary">Other Instructions:</Typography>
|
|
<Typography sx={{ ml: 3 }}>{otherinstructions}</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
{/* <Grid item xs={12} >
|
|
<Button color='info' variant='contained' endIcon={<SendIcon />}>Send Notifications</Button>
|
|
</Grid> */}
|
|
</Grid>
|
|
</MainCard>
|
|
</Grid>
|
|
{/* </Box> */}
|
|
|
|
{/* <Button onClick={() => { notificationpush() }}>notify</Button> */}
|
|
</Grid>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Details;
|