2159 lines
85 KiB
JavaScript
2159 lines
85 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 SendIcon from '@mui/icons-material/Send';
|
|
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 {
|
|
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, setCurrentrole] = 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, setStarttime] = useState('');
|
|
const [endtime, setEndtime] = useState('');
|
|
// const [orderstatus,setOrderstatus]=useStatus('');
|
|
const [pendingtime, setPendingtime] = useState('');
|
|
// const [processdate,setProcessdate]=useState('');
|
|
const [orderdetailid, setOrderdetailid] = useState('');
|
|
const [productid, setProductid] = 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 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 fetchroleslist = async (cid, starttime1, endtime1, hid, sid) => {
|
|
let fromdate = dayjs(starttime1).subtract(59, 'minutes')
|
|
.format('YYYY-MM-DD HH:mm:ss');
|
|
// let todate = dayjs(endtime1).utc().format('YYYY-MM-DD HH:mm:ss');
|
|
// let fromdate = dayjs(starttime1).utc().format('YYYY-MM-DD HH:mm:ss');
|
|
let todate = dayjs(endtime1)
|
|
.format('YYYY-MM-DD HH:mm:ss');
|
|
let url1;
|
|
if (starttime1) {
|
|
url1 = `${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&shiftid=${sid}&starttime=${fromdate}&endtime=${todate}`;
|
|
} else {
|
|
url1 = `${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&shiftid=${sid}`
|
|
}
|
|
setLoading(true);
|
|
setStafflist([])
|
|
await axios
|
|
// .get(`${process.env.REACT_APP_URL2}/staffs/pools/getstaffs/?categoryid=${cid}&headerid=${hid}&starttime=${fromdate}&endtime=${todate}`)
|
|
.get(url1)
|
|
.then((res) => {
|
|
console.log('rolelist');
|
|
console.log(res);
|
|
// console.log(fromdate, todate)
|
|
// console.log(dayjs(starttime1).format('YYYY-MM-DD HH:mm:ss'))
|
|
// console.log(dayjs(endtime1).format('HH:mm:ss'))
|
|
|
|
|
|
setStafflist(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)
|
|
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 fetchassignedstaffs = async () => {
|
|
|
|
// console.log(obj1)
|
|
await axios.get(`${process.env.REACT_APP_URL2}/orders/getnotificationusers?orderheaderid=${orderheaderid}`)
|
|
.then((res) => {
|
|
if (res.data.status) {
|
|
let arr1 = [];
|
|
let data2;
|
|
let tokenarr = []
|
|
console.log(res)
|
|
|
|
res.data.details.map((val) => {
|
|
arr1.push({
|
|
"notificationid": 0,
|
|
"notificationdate": dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
"Title": "Staff Asigned",
|
|
"message": `${val.staffname} has been 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": 1,
|
|
"notifyreason": 'Staff Assigned'
|
|
// "sound": "ring",
|
|
// "click_action": "FLUTTER_NOTIFICATION_CLICK",
|
|
// "firstname": val.firstname
|
|
|
|
});
|
|
tokenarr.push(val.userfcmtoken);
|
|
|
|
})
|
|
|
|
|
|
|
|
data2 = {
|
|
"Title": "Staff Asigned",
|
|
"message": `A Staff has been 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 assigned ${orderid}`,
|
|
"title": "Legendary",
|
|
"sound": "ring",
|
|
"content_available": true,
|
|
"click_action": "FLUTTER_NOTIFICATION_CLICK"
|
|
}
|
|
}
|
|
let grpnotifyobj = {
|
|
"notifications": arr1,
|
|
"fcmmodel": fcmmodel
|
|
}
|
|
console.log("grpnotifyobj")
|
|
console.log(grpnotifyobj)
|
|
sendgroupnotification(grpnotifyobj)
|
|
// notificationpush(obj2, val.userfcmtoken);
|
|
// notificationpush(arr1,tokenarr);
|
|
// enqueueSnackbar('Notifications 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"
|
|
|
|
>
|
|
<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
|
|
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>
|
|
|
|
}
|
|
</>
|
|
:
|
|
|
|
<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 }} direction='row' justifyContent='flex-end' spacing={5}>
|
|
{(stafflist.length > 0) &&
|
|
<>
|
|
<Button1 sx={{ width: '130px' }} variant='contained' onClick={assignok}>OK</Button1>
|
|
<Button1 sx={{ width: '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: '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="row" spacing={2}
|
|
sx={{ mt: { md: 0, xs: 2 } }}
|
|
>
|
|
|
|
{/* <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' }}
|
|
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 } }}
|
|
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>
|
|
<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;
|