import { FormControl, InputAdornment, Grid, Typography, Stack, Box, // Autocomplete, Button, // Stepper, // Step, // StepLabel, TextField, Autocomplete, CardActions, // CardActions, Chip, // AvatarGroup, // RadioGroup, // Radio Avatar, // List, // ListItem, // IconButton, // ListItemAvatar, // ListItemText, // Menu, // MenuItem, // ListItemIcon, // Link, Divider, Table, TableContainer, TableRow, TableCell, TableHead, TableBody, // FormLabel, Tooltip, DialogTitle, DialogContent, Checkbox, DialogActions, CircularProgress, ButtonGroup, FormLabel // LinkOutlined } from '@mui/material'; import { useNavigate } from 'react-router'; import { PopupTransition } from 'components/@extended/Transitions'; // var utc = require('dayjs/plugin/utc') import axios from 'axios'; import { useTheme } from '@mui/material/styles'; // import { usePlacesWidget } from "react-google-autocomplete"; import Geocode from "react-geocode"; // import {setApi} from "react-geocode"; import Autocomplete1 from "react-google-autocomplete"; // import logo from 'assets/images/location.png' import { // EditOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons'; import MainCard from 'components/MainCard'; import { EnvironmentOutlined, // LinkOutlined, // MailOutlined, // MoreOutlined, // PhoneOutlined } from '@ant-design/icons'; import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'; // import VisibilityIcon from '@mui/icons-material/Visibility'; // import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; // import EditCalendarIcon from '@mui/icons-material/EditCalendar'; import AccessibilityNewIcon from '@mui/icons-material/AccessibilityNew'; // import { PatternFormat } from 'react-number-format'; import { DatePicker } from '@mui/x-date-pickers/DatePicker'; import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { TimePicker } from '@mui/x-date-pickers/TimePicker'; // import DialogTitle from '@mui/material/DialogTitle'; import Dialog from '@mui/material/Dialog'; import { useEffect, useState, Fragment // useReducer } from 'react'; // import { Label } from '@mui/icons-material'; import dayjs from 'dayjs'; // import { useDispatch } from 'react-redux'; // import { openSnackbar, closeSnackbar } from 'store/reducers/snackbar'; // import {Autocompletemap} from 'pages/autocompletemap' import { enqueueSnackbar } from 'notistack'; // import { CheckBox } from '@mui/icons-material'; // dayjs.extend(utc) const Createorder = () => { Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY) const navigate = useNavigate(); const [open, setOpen] = useState({}); const [open1, setOpen1] = useState('') const [open2, setOpen2] = useState(false) const [shift, setShift] = useState(1); const [clientlist, setClientlist] = useState([]) const [clientdetail, setClientdetail] = useState([]); const [eventname, setEventname] = useState(''); const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY')); const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY')); const [roleoptions, setRoleoptions] = useState([]); const theme = useTheme(); const [otherinstructions, setOtherinstructions] = useState(''); const [attireslist, setAttireslist] = useState([]); const [serviceaddonslist, setServiceaddonslist] = useState([]); const [orderaddonobj, setOrderaddonobj] = useState([]); const [stafflist, setStafflist] = useState([]); const [loading2, setLoading2] = useState(false); const [shiftarr, setShiftarr] = useState([]); const [shiftarr1, setShiftarr1] = useState([]); const [orderarr, setOrderarr] = useState([]); const [alertmessage, setAlertmessage] = useState(''); const [tabstatus, setTabstatus] = useState('') const [tenantinfo, setTenantinfo] = useState({}) useEffect(() => { if (localStorage.getItem('tenantid')) { setOrderarr([{ sno: 1, address: '', "customerid": '', "deliverytime": "", "deliverylocationid": '', }]) console.log(orderarr) } }, [clientdetail]) const fetchtenantinfo = async (tid) => { await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantinfo/?tenantid=${tid}`) .then((res) => { console.log(res) if (res.data.status) { setTenantinfo(res.data.details); } }).catch((err) => { console.log(err) }) } const opentoast = (message) => { enqueueSnackbar(message, { variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, autoHideDuration: 2000 }) console.log(alertmessage) } function closeAddressModal() { setOpen2(false); } const createsubmitobj = () => { let orderdetailtemp = [] let orderdetailtemp1 = [] let orderamount1 = 0; let ordervalue1 = 0; let taxamount1 = 0; let itemcount1 = 0; let shiftcount = 0; let datecheck = false; let shiftcheck = false; let timeupcomingcheck = false; let shiftcontactcheck = false; let loweststarttime = shiftarr1[0].details[0].starttime; let dateres11 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')}`), 'd'); let temp = shiftarr1[shiftarr1.length - 1].details; console.log(temp.length, shiftarr1[shiftarr1.length - 1].orderattires.length) console.log('shiftarr1') console.log(shiftarr1) shiftarr1.map((val3) => { shiftcount = shiftcount + 1; console.log("val3"); console.log(val3) if (val3.clientstaff.length === 0) { shiftcontactcheck = true; } val3.details.map((val1) => { console.log('leasttime', (val1.starttime.$d > val1.endtime.$d)) if (val1.starttime.$d < loweststarttime.$d) { loweststarttime = val1.starttime } let dateres22 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val1.starttime).format('HH:mm:ss')}`), 'm'); if (dateres22 > 0 || isNaN(dateres22)) { timeupcomingcheck = true; } console.log('timeupcomingcheck') console.log(timeupcomingcheck, dateres22) console.log(val1) let dateres = dayjs(`${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val1.endtime).format('HH:mm:ss')}`) .diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val1.starttime).format('HH:mm:ss')}`), 'm'); if (dateres < 240) { datecheck = true; } console.log("val1") console.log(val1) console.log(shiftcheck) if (!val1.role || !val1.starttime || !val1.endtime || !val1.orderqty) { shiftcheck = true } }) let tempobj1 = []; let temptenantstaffobj1 = []; let tempattire1 = []; val3.details.map((val) => { orderamount1 = orderamount1 + parseFloat(val.landingamount); ordervalue1 = ordervalue1 + parseFloat(val.productsumprice); taxamount1 = taxamount1 + val.taxamount; itemcount1 = itemcount1 + val.orderqty; console.log('val.productsumprice') console.log(val.productsumprice) console.log(ordervalue1) let tempobj = { "orderdetailid": val.orderdetailid, "orderheaderid": val.orderheaderid, "tenantid": val.tenantid, "locationid": val.locationid, "shiftid": val3.sno, "locationaddress": val3.address, "locationcity": val3.city, "locationstate": val3.state, "locationlat": val3.latitude.toString(), "locationlong": val3.longitude.toString(), "productid": val.productid, "productname": val.productname, "productdescription": val.productdescription, "starttime": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.starttime).format('HH:mm:ss')}`, "endtime": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val.endtime).format('HH:mm:ss')}`, "unpaidbreak": val.unpaidbreak, "orderqty": val.orderqty, "price": val.price, "unitid": val.unitid, "unitname": val.unitname, "landingamount": parseFloat(parseFloat(val.landingamount.toString()).toFixed(2)), "taxamount": parseFloat(parseFloat(val.taxamount.toString()).toFixed(2)), "productsumprice": parseFloat(parseFloat(val.productsumprice.toString()).toFixed(2)), "workhours": parseFloat(val.workhours), "orderattires": [] } tempobj1.push({ "shiftid": 0, "orderdetailid": val.orderdetailid, "orderheaderid": val.orderheaderid, "tenantid": clientdetail.tenantid, "productid": val.productid, "productname": val.productname, "productdescription": val.productdescription, "starttime": dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.starttime).format('HH:mm:ss')}`) .format('YYYY-MM-DD HH:mm:ss'), "endtime": dayjs(`${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(val.endtime).format('HH:mm:ss')}`) .format('YYYY-MM-DD HH:mm:ss'), "workhours": `${Math.floor(val.workhours)}.${Math.floor((val.workhours * 60) - (Math.floor(val.workhours) * 60))}`, "unpaidbreak": val.unpaidbreak, "price": val.price, "orderqty": val.orderqty, "unitid": val.unitid, "unitname": val.unitname, "taxpercent": 0.00, "landingamount": parseFloat(parseFloat(val.landingamount.toString()).toFixed(2)), "taxamount": parseFloat(parseFloat(val.taxamount.toString()).toFixed(2)), "productsumprice": parseFloat(parseFloat(val.productsumprice.toString()).toFixed(2)), "orderattires": [] }) console.log("val3") console.log(val3) val3.orderattires.map((val2) => { if (val.sno === val2.ordersno) { tempobj.orderattires.push({ "orderattireid": val2.orderattireid, "orderdetailid": val2.orderdetailid, "apptypeid": val2.apptypeid, "attireid": val2.attireid, "attirename": val2.attirename, "Status": val2.Status }) tempattire1.push({ "orderattireid": val2.orderattireid, "orderdetailid": val2.orderdetailid, "apptypeid": val2.apptypeid, "attireid": val2.attireid, "attirename": val2.attirename, "Status": val2.Status }) } }) orderdetailtemp.push(tempobj) }) val3.clientstaff.map((val11) => { temptenantstaffobj1.push({ "ordercontactid": 0, "shiftid": 0, "orderheaderid": 0, "tenantid": clientdetail.tenantid, "userid": val11.userid, "tenantstaffid": 12, "contactname": val11.contactname, "contactno": val11.contactno, "shift": val11.shift }) }) orderdetailtemp1.push({ "shiftid": 0, "orderheaderid": 0, "tenantid": clientdetail.tenantid, "locationid": 0, "locationaddress": val3.address, "locationcity": val3.city, "locationstate": val3.state, "locationlat": val3.latitude.toString(), "locationlong": val3.longitude.toString(), "orderdetails": tempobj1, "ordercontacts": temptenantstaffobj1 }) }) let addonobj = []; orderaddonobj.map((val) => { addonobj.push({ "orderaddonid": val.orderaddonid, "orderheaderid": val.orderheaderid, "tenantid": clientdetail.tenantid, "addonid": val.addonid, "addon": val.addon, "status": val.status }) }) if (!clientdetail.tenantname) { setAlertmessage('choose client name'); opentoast('choose client name'); } else if (!eventname) { setAlertmessage('choose Event name'); opentoast('choose Event name'); } else if (!startdate || !enddate) { setAlertmessage('choose shift Date'); opentoast('choose shift Date'); } else if (datecheck) { setAlertmessage('Shift time should be greater than 4 hours'); opentoast('Shift time should be greater than 4 hours'); } else if (dateres11 > 0 || timeupcomingcheck) { setAlertmessage('choose upcoming date and time'); opentoast('choose upcoming date and time'); } else if (shiftarr1.length <= 0) { setAlertmessage('Add shift'); opentoast('Add shift'); } else if (shiftcheck) { setAlertmessage('choose all shift details'); opentoast('choose all shift details'); } else if (shiftcontactcheck) { opentoast('choose shift contacts'); } else { let obj = { "orderheaderid": 0, "tenantid": clientdetail.tenantid, "locationid": 0, "customerid": 0, "configid": 4, "orderid": "", "orderdate": dayjs() .format('YYYY-MM-DD HH:mm:ss'), "orderstatus": "pending", "pending": dayjs() .format('YYYY-MM-DD HH:mm:ss'), "orderamount": parseFloat(parseFloat(orderamount1).toFixed(2)), "taxpercent": 0.0, "taxamount": parseFloat(parseFloat(taxamount1).toFixed(2)), "ordercharges": 0, "ordervalue": parseFloat(parseFloat(ordervalue1).toFixed(2)), "itemcount": itemcount1, "refundvalue": 0, "unserviceableitems": 0, "paymenttype": 0, "paymentstatus": 0, "startdate": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(startdate).format('HH:mm:ss')}`, "enddate": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(enddate).format('HH:mm:ss')}`, "deliveryaddress": "", "deliverylocationid": 0, "deliverylat": "", "deliverylong": "", "ordernotes": eventname, "remarks": otherinstructions, "primarycontact": '', "primarycontactno": '', "seccontact": '', "seccontactno": '', "tenantuserid": clientdetail.tenantid, "orderdetails": orderdetailtemp, "orderaddons": addonobj } console.log(obj) let obj1 = { "orderheaderid": 0, "tenantid": clientdetail.tenantid, "locationid": 0, "customerid": 0, "configid": 4, "orderid": "", "orderdate": dayjs() .format('YYYY-MM-DD HH:mm:ss'), "orderstatus": "pending", "pending": dayjs() .format('YYYY-MM-DD HH:mm:ss'), "orderamount": parseFloat(parseFloat(orderamount1).toFixed(2)), "taxpercent": 0.0, "taxamount": parseFloat(parseFloat(taxamount1).toFixed(2)), "ordercharges": 0, "ordervalue": parseFloat(parseFloat(ordervalue1).toFixed(2)), "itemcount": shiftcount, "startdate": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(loweststarttime.$d).format('HH:mm:ss')}`, "enddate": `${dayjs(enddate).format('YYYY-MM-DD')} ${dayjs(enddate).format('HH:mm:ss')}`, "ordernotes": eventname, "remarks": otherinstructions, "primarycontact": '', "primarycontactno": '', "seccontact": '', "seccontactno": '', "tenantuserid": 0, "ordershifts": orderdetailtemp1, "orderaddons": addonobj } console.log("obj1,orderdetailtemp1") console.log(obj1, orderdetailtemp1) navigate('/orders/create/review', { state: { obj: obj, client: clientdetail, obj1: obj1 } }) } } const createsubmitobj1 = () => { let arr=[] let timecheck=false; let addresscheck=false; orderarr.map((val)=>{ if(!val.address){ addresscheck=true; } if(!val.deliverytime){ timecheck=true; } arr.push({ "orderheaderid": 0, "tenantid": parseInt(localStorage.getItem('tenantid')), "locationid": 784, "moduleid": 6, "configid": 5, "orderid": "", "customerid": 1332, "orderdate": dayjs().format('YYYY-MM-DD HH:mm:ss'), "orderstatus": "created", "pending": "", "processing": "", "ready": "", "delivered": "", "cancellled": "", "promoid": 0, "promoname": "", "promoterms": "", "promovalue": 0, "promoamount": 0, "orderamount": 48, "taxamount": 0, "ordercharges": 0, "ordervalue": 48, "itemcount": 1, "paymenttype": 64, "paymentstatus": 2, "deliverycharge":34.6, "deliverytime": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.deliverytime).format('HH:mm:ss')}`, "deliverylocationid": 1597, "delivceryaddress": val.address, "pickupaddress": "3rd Cross Rd, Jeeva Nagar, Kuppakonam Pudur, K K Pudur, Coimbatore, Tamil Nadu 641038", "pickuplat": "11.033176", "pickuplong": "76.946232", "ordernotes":otherinstructions, "remarks": "", "tenantuserid": 0 }) }) if(timecheck){ opentoast('Choose Schedule Time') }else if(addresscheck){ opentoast('Choose Client') }else{ opentoast('success') } console.log(arr) } useEffect(() => { if (localStorage.getItem('tenantid')) { // clientdetails(localStorage.getItem('tenantid')); fetchtenantinfo(localStorage.getItem('tenantid')) } // fetchattires(); // fetchserviceaddons(); // let arr = []; // arr.push({ // sno: arr.length + 1, // address: "", // starttime: "", // endtime: "", // latitude: '', // longitude: '', // state: "", // city: "", // orderattires: [], // details: [{ // sno: 1, // role: '', // position: '', // uniform: '', // cost: 0, // "orderdetailid": 0, // "orderheaderid": 0, // "tenantid": '', // "locationid": 0, // "productid": 1, // "productname": "", // "productdescription": "description1", // "starttime": '', // "endtime": '', // "unpaidbreak": 0, // "orderqty": 0, // "price": 0, // "unitid": 1, // "unitname": "", // "landingamount": 0, // "taxamount": 0, // "productsumprice": 0, // "workhours": '' // }], // "clientstaff": [] // }) // setShiftarr1(arr) // setShiftarr([]) }, [clientdetail.tenantname]) useEffect(() => { console.log('shiftarr') console.log(shiftarr) }, [shiftarr]) const clicked1 = (e) => { setShift(e); } const dialogopen = (i, result) => { console.log(i, result) setOpen({ shiftsno: result.sno, sno: i.sno }) } const dialogclose = () => { setOpen('') } const clientdetails = async (tid) => { // setClientdetail([{ // "address": 'ttt uuu vvvv', // "customerid":10, // "deliverylocationid": 20, // "contactno":4444, // "firstname":'test1', // }, // { // "address": '2ttt uuu vvvv', // "customerid":11, // "deliverylocationid": 21, // "contactno":5555, // "firstname":'test2', // }, // { // "address": '3ttt uuu vvvv', // "customerid":12, // "deliverylocationid": 22, // "contactno":6666, // "firstname":'test3', // } // ]) setLoading2(true) try { await axios.get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}`) .then((res) => { if (res.data.status) { setClientdetail(res.data.details) } setLoading2(false) }).catch((err) => { console.log(err) setLoading2(false) opentoast('server error') }) } catch (err) { console.log(err); setLoading2(false) // opentoast('Something went wrong') } } return <> Create Order {/* Event { if (clientdetail.tenantname) { if (e.target.value.length <= 50) { setEventname(e.target.value); } } else { setAlertmessage('choose client'); opentoast('choose client'); } }} sx={{ m: 0 }} /> {`${eventname.length}/50`} */} Pickup Location {' '}{tenantinfo.address1 || ''} {/* {'123, Tamil Kudimagan Nagar Rd, Vadakkuppattu, Kulattur, Chennai, Tamil Nadu 600117, India'} */} Date { let dateres11 = dayjs().diff(dayjs(`${dayjs(e).format('YYYY-MM-DD')}`), 'd'); console.log('dateres11') console.log(dateres11) if (dateres11 <= 0) { setStartdate(e); setEnddate(e); } else { setAlertmessage('choose Upcoming Date'); opentoast('choose Upcoming Date') setStartdate(NaN) } }} value={dayjs(startdate)} sx={{ width: '100%' }} disablePast // minDate={dayjs().add(1, 'day')} /> {/* {shiftarr1.map((result) => { return <> */} {/* Shift {result.sno} */} {/* */} {/* { let city1, state, zipcode1, suburb1; for (let i = 0; i < place.address_components.length; i++) { for (let j = 0; j < place.address_components[i].types.length; j++) { switch (place.address_components[i].types[j]) { case "locality": city1 = place.address_components[i].long_name; break; case "administrative_area_level_1": state = place.address_components[i].long_name; break; case "postal_code": zipcode1 = place.address_components[i].long_name; break; case "sublocality": suburb1 = place.address_components[i].long_name; break; } } } console.log(city1, state, zipcode1, suburb1) let arr = shiftarr1; try { Geocode.fromAddress(place.formatted_address).then( (response) => { const { lat, lng } = response.results[0].geometry.location; arr[result.sno - 1].latitude = lat; arr[result.sno - 1].longitude = lng; console.log(lat, lng); }, (error) => { console.error(error); } ); } catch (err) { console.log(err) } arr[result.sno - 1].city = city1 || ''; arr[result.sno - 1].state = state || ''; arr[result.sno - 1].address = place.formatted_address; setShiftarr1([...arr]); }} options={{ types: ['address' || 'geocode'] }} placeholder='Shift Location' onChange={() => { if (!eventname) { setAlertmessage('Fill Event name'); opentoast('Fill Event name'); } }} /> */} {/* {result.clientstaff.map((val11) => { return <> {val11.firstname.charAt(0).toUpperCase()} }) } */} Select Address {/* */} {(loading2) ? <> : <> {/* ) }} placeholder="Search" fullWidth /> */} {/*
*/} {clientdetail.map((address) => ( handlerAddress(address)} onClick={() => { if (tabstatus == 1) { if (orderarr[0].address == '') { setOrderarr([{ sno: 1, address: address.address, "customerid": '', "deliverytime": "", "deliverylocationid": '', }]) } else { if (orderarr.find((val2) => val2.address == address.address)) { if (orderarr.length > 1) { let arr = orderarr; arr.splice(address.sno - 1, 1); let arr1 = [] arr.map((val2, k) => { arr1.push({ sno: k + 1, 'address': val2.address }) }) setOrderarr([...arr1]) } else { setOrderarr([{ sno: 1, address: '', "customerid": '', "deliverytime": "", "deliverylocationid": '', }]) } } else { console.log(clientdetail) let arr = orderarr; arr.push({ sno: arr.length + 1, 'address': address.address, "customerid": '', "deliverytime": "", "deliverylocationid": '', }) setOrderarr([...arr]) } } } if (tabstatus == 0) { setOrderarr([{ sno: 1, address: address.address, "customerid": '', "deliverytime": "", "deliverylocationid": '', }]) } }} key={address.contactno} sx={{ width: '100%', border: '1px solid', borderColor: 'grey.200', borderRadius: 1, cursor: 'pointer', p: 1.25, '&:hover': { bgcolor: theme.palette.primary.lighter, borderColor: theme.palette.primary.lighter }, bgcolor: (orderarr.find((val2) => val2.address == address.address)) ? theme.palette.primary.lighter : '' }} > {address.firstname} {address.address} {address.contactno} {/* {address.email} */} ))} }
# {/* Role */} {/* Count */} Schedule Time {/* End Time */} {/* Pickup Location */} {/* Break */} Drop Location {/* Value */} Action {orderarr.map((val) => { return <> {val.sno} { console.log(e) let arr=orderarr; arr[val.sno-1].deliverytime=e.$d setOrderarr([...arr]) console.log(arr) // let arr = shiftarr1; // let dateres11 = dayjs().diff(dayjs(`${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(e).format('HH:mm:ss')}`), 'm'); // console.log('dateres11') // console.log(dateres11) // if (dateres11 < 0) { // arr[result.sno - 1].details[val.sno - 1].starttime = dayjs(e.$d); // arr[result.sno - 1].details[val.sno - 1].endtime = dayjs(dayjs(e.$d).add(4, 'hours').$d); // } } } sx={{ width: '150px' }} value={val.deliverytime || null} /> {val.address} {/* {(val.cost) && <> {`${val.cost}/hr`} } */} {/* {(val.role && val.position) && <> {val.landingamount} } {(!val.position || !val.role) && 0 } */} }) }
{/* */} {/* }) */} {/* } */} {/* */} setOtherinstructions(e.target.value)} /> } export default Createorder;