From 3ce0086e3cb3c9076ef207f9975663eb7bfa0218 Mon Sep 17 00:00:00 2001 From: Malai Raja Date: Sat, 30 Dec 2023 18:29:42 +0530 Subject: [PATCH] 30122023 --- nearlexpressbuild | 2 +- package-lock.json | 15 + package.json | 1 + .../cards/statistics/HoverSocialCard.js | 4 +- .../MainLayout/Header/HeaderContent/index.js | 6 +- src/menu-items/other.js | 4 +- src/pages/nearle/clients/clients1.js | 1844 +++++++++++++++++ src/pages/nearle/clients/createclient.js | 2 +- src/pages/nearle/orders/createorder.js | 563 +++-- src/pages/nearle/orders/orders.js | 8 +- src/routes/MainRoutes.js | 12 +- yarn.lock | 5 + 12 files changed, 2316 insertions(+), 150 deletions(-) create mode 100644 src/pages/nearle/clients/clients1.js diff --git a/nearlexpressbuild b/nearlexpressbuild index c351223..0f12f16 160000 --- a/nearlexpressbuild +++ b/nearlexpressbuild @@ -1 +1 @@ -Subproject commit c351223c495964a124c331453b1b23b096bae217 +Subproject commit 0f12f16e5c3c451d673fe3626d379881c982c402 diff --git a/package-lock.json b/package-lock.json index d616d51..413a7c0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,6 +42,7 @@ "react-dom": "^18.2.0", "react-geocode": "^0.2.3", "react-google-autocomplete": "^2.7.3", + "react-icons": "^4.12.0", "react-intl": "^6.4.1", "react-redux": "^8.0.5", "react-router": "^6.10.0", @@ -16772,6 +16773,14 @@ "react": ">=16.8.0" } }, + "node_modules/react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-intl": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.1.tgz", @@ -32037,6 +32046,12 @@ "prop-types": "^15.5.0" } }, + "react-icons": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", + "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", + "requires": {} + }, "react-intl": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.1.tgz", diff --git a/package.json b/package.json index 181d670..fbec81f 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "react-dom": "^18.2.0", "react-geocode": "^0.2.3", "react-google-autocomplete": "^2.7.3", + "react-icons": "^4.12.0", "react-intl": "^6.4.1", "react-redux": "^8.0.5", "react-router": "^6.10.0", diff --git a/src/components/cards/statistics/HoverSocialCard.js b/src/components/cards/statistics/HoverSocialCard.js index d79b7e8..cca986e 100644 --- a/src/components/cards/statistics/HoverSocialCard.js +++ b/src/components/cards/statistics/HoverSocialCard.js @@ -42,7 +42,9 @@ const HoverSocialCard = ({ primary, secondary, }} > - {percentage.toString()} % + {/* {percentage.toString()} % */} + {(percentage)? `${percentage.toString()} %`:''} + {/* {primaryIcon} */} diff --git a/src/layout/MainLayout/Header/HeaderContent/index.js b/src/layout/MainLayout/Header/HeaderContent/index.js index e5b05c3..3bc5240 100644 --- a/src/layout/MainLayout/Header/HeaderContent/index.js +++ b/src/layout/MainLayout/Header/HeaderContent/index.js @@ -173,9 +173,9 @@ const navigate = useNavigate() /> */} { - navigate('/clients/create') + navigate('/customers/create') handleClickAway() }} > - Create Client + Create Customer } diff --git a/src/menu-items/other.js b/src/menu-items/other.js index 3730b2c..38526bb 100644 --- a/src/menu-items/other.js +++ b/src/menu-items/other.js @@ -58,9 +58,9 @@ const other = { }, { id: 'clients', - title: , + title: , type: 'item', - url: '/clients', + url: '/customers', icon: icons.UserOutlined }, { diff --git a/src/pages/nearle/clients/clients1.js b/src/pages/nearle/clients/clients1.js new file mode 100644 index 0000000..e51ab57 --- /dev/null +++ b/src/pages/nearle/clients/clients1.js @@ -0,0 +1,1844 @@ +import React from "react"; +import { Avatar, Pagination, Tooltip, stepContentClasses } from "@mui/material"; +import { useEffect, useRef, useState, Fragment } from "react"; +// import { useTheme, styled } from "@mui/material/styles"; +import { useTheme } from "@mui/material/styles"; +import Skeleton from "@mui/material/Skeleton"; +import HeartFilled from "@mui/icons-material/Favorite"; +// import dayjs from "dayjs"; +import Loader from "components/Loader"; +import CloseIcon from "@mui/icons-material/Close"; +import { FilterList } from '@mui/icons-material'; + +import { + Box, + Button, + IconButton, + ClickAwayListener, + Collapse, + Dialog, + Grid, + Menu, + MenuItem, + Popper, + Stack, + TextField, + Typography, + useMediaQuery, + Chip, + OutlinedInput, + InputAdornment, + List, + Divider, + ListItemButton, + ListItemAvatar, + ListItemText, + DialogTitle, + DialogContent, + DialogActions, + InputLabel, + Table, + TableContainer, + TableHead, + TableCell, + TableBody, + TableRow +} from "@mui/material"; +import ClearIcon from "@mui/icons-material/Clear"; +import { MdPersonAdd } from "react-icons/md"; +// import { MdAccountCircle } from "react-icons/md"; +import { MdPersonAddDisabled } from "react-icons/md"; +// import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +// import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +// import { DatePicker } from "@mui/x-date-pickers/DatePicker"; +import { ThemeMode } from "config"; +// import { FaUserLarge } from "react-icons/fa6"; +import { + RightOutlined, + LeftOutlined, + AudioMutedOutlined, + CloseOutlined, + DeleteOutlined, + DownloadOutlined, + InfoCircleOutlined, + MenuFoldOutlined, + MenuUnfoldOutlined, + MoreOutlined, + PaperClipOutlined, + PhoneOutlined, + PictureOutlined, + SendOutlined, + SmileOutlined, + SoundOutlined, + VideoCameraOutlined, + SearchOutlined, + BarChartOutlined, + UsergroupAddOutlined, + NotificationOutlined, + PercentageOutlined, + CheckCircleFilled, + ClockCircleFilled, + MinusCircleFilled, +} from "@ant-design/icons"; +// import ChatDrawer from "sections/apps/chat/ChatDrawer"; +// import ChatHistory from "sections/apps/chat/ChatHistory"; +// import UserAvatar from "sections/apps/chat/UserAvatar"; +// import UserDetails from "sections/apps/chat/UserDetails"; +import MainCard from "components/MainCard"; +// import IconButton from "components/@extended/IconButton"; +// import SimpleBar from "components/third-party/SimpleBar"; +import { PopupTransition } from "components/@extended/Transitions"; +import axios from "axios"; +// import HoverSocialCard from "../../pages/reports/HoverSocialCard"; +import HoverSocialCard from 'components/cards/statistics/HoverSocialCard'; + +// import TasksCard from "sections/widget/data/TasksCard"; +// import ApplicationSales from "sections/widget/data/ApplicationSales"; +// import Button from "themes/overrides/Button"; +import { styled } from "@mui/material/styles"; +// import TableRow from "themes/overrides/TableRow"; +import dayjs from 'dayjs'; +var utc = require('dayjs/plugin/utc') +dayjs.extend(utc) +import { DateRangePicker } from "mui-daterange-picker"; + +import { + addDays, + addMonths, + addWeeks, + // addYears, + endOfMonth, + endOfWeek, + // endOfYear, + startOfMonth, + startOfWeek, + // startOfYear, +} from 'date-fns'; +const drawerWidth = 320; +// const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })( +// ({ theme, open }) => ({ +// flexGrow: 1, +// transition: theme.transitions.create("margin", { +// easing: theme.transitions.easing.sharp, +// duration: theme.transitions.duration.shorter, +// }), +// marginLeft: `-${drawerWidth}px`, +// [theme.breakpoints.down("lg")]: { +// paddingLeft: 0, +// marginLeft: 0, +// }, +// ...(open && { +// transition: theme.transitions.create("margin", { +// easing: theme.transitions.easing.easeOut, +// duration: theme.transitions.duration.shorter, +// }), +// marginLeft: 0, +// }), +// }) +// ); + +const BootstrapDialog = styled(Dialog)(({ theme }) => ({ + "& .MuiDialog-paperWidthSm": { + maxWidth: "60%", + width: "100%", + margin: 0, + }, + "& .MuiDialogContent-root": { + padding: theme.spacing(2), + }, + "& .MuiDialogActions-root": { + padding: theme.spacing(1), + }, +})); + +const Clients1 = () => { + const theme = useTheme(); + const [search, setSearch] = useState(""); + const [loading, setLoading] = useState(false); + const [data, setData] = useState([]); + const [users, setUsers] = useState([]); + const [userName, setUserName] = useState(""); + const [usernameload, setUsernameload] = useState(false); + const [customerId, setCustomerId] = useState(""); + const [custVisits, setCustVisits] = useState([]); + const [custService, setCustService] = useState([]); + const [custMembership, setCustMembership] = useState({}); + const [visits, setvisits] = useState(0); + const [billAmount, setBillAmount] = useState(0); + const [promotions, setPromotions] = useState(0); + const [discount, setDiscount] = useState(0); + const [pageno, setPageno] = useState(1); + const [contactno, setContactno] = useState(""); + const ref = useRef(null); + const [open, setOpen] = React.useState(false); + const [packDays, setPackDays] = useState(0); + const [startDate, setStartDate] = useState(""); + const [validDate, setValidDate] = useState(""); + const [orderlist,setOrderlist]=useState([]); + const [allorders, setAllorders] = useState('') + const [coveredorders, setCoveredorders] = useState('') + const [uncoveredorders, setUncoveredorders] = useState(''); + const [cancelled, setCancelled] = useState(''); + + const [percentage1, setPercentage1] = useState('0') + const [percentage2, setPercentage2] = useState('0') + const [percentage3, setPercentage3] = useState('0') + const [percentage4, setPercentage4] = useState('0'); + + const [tempusers,setTempusers]=useState([]); + + const [startdate, setStartdate] = useState( + dayjs().format('YYYY-MM-DD') + ); + const [enddate, setEnddate] = useState( + dayjs().format('YYYY-MM-DD') + ); + + const [datestatus,setDatestatus]=useState('Today'); + const [tenid,setTenid]=useState(''); + const [loading1,setLoading1]=useState(false) + + const handleClickOpen = () => { + setOpen(true); + }; + const handleClose = () => { + setOpen(false); + }; + // const [anchorEl]=useState(null) + // const tenid = window.localStorage.getItem("tenantid"); + useEffect(() => { + // setUsernameload(false); + console.log("username", userName); + }, [userName]); + + const [anchorEl, setAnchorEl] = useState(); + const handleClickRightMenu = (event) => { + setAnchorEl(event?.currentTarget); + }; + + const handleCloseRightMenu = () => { + setAnchorEl(null); + }; + const handleClickSort = (event) => { + setAnchorEl(event?.currentTarget); + }; + + const handleCloseSort = () => { + setAnchorEl(null); + }; + + useEffect(() => { + if (localStorage.getItem('tenantid')) { + fetchtable(localStorage.getItem('tenantid')) + + } +}, []) + +// useEffect(() => { +// if (tenid) { +// fetchData1(); +// } +// }, []); + + useEffect(() => { + if (tenid && !search) { + // fetchData1(); + } + }, [pageno]); + + useEffect(() => { + const fetchsearch = async () => { + setLoading(true); + try { + await axios + .get( + `${process.env.REACT_APP_URL}/customers/search?tenantid=${tenid}&keyword=${search}` + ) + .then((response) => { + if (response.data.status) { + setUsers(response.data.details || []); + setLoading(false); + } + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + } catch (error) { + console.error("Error fetching data:", error); + setLoading(false); + } + }; + if (search.length > 2) { + // fetchsearch(); + } else if (!search) { + // fetchData1(); + setPageno(1); + } + }, [search]); + + useEffect(()=>{ + + if (search) { + let arr = tempusers.filter((val) => { + + return (val.firstname.toLowerCase().includes(search.toLowerCase()) + // || val.deliveryaddress.toLowerCase().includes(searchword.toLowerCase()) + // || val.customername.toLowerCase().includes(searchword.toLowerCase()) + // || val.pickupaddress.toString().toLowerCase().includes(searchword.toLowerCase()) + // || val.ordernotes.toString().toLowerCase().includes(searchword.toLowerCase()) + || val.contactno.toString().toLowerCase().includes(search.toLowerCase()) + + ) + }) + console.log(arr) + setUsers([...arr]) + } else { + setUsers([...tempusers]) + } + + },[search]) + + useEffect(()=>{ +if(tenid){ + fetchData(tenid) +} + },[startdate,enddate]) + + + const fetchpercentage = async (tid) => { + setLoading(true) + try { + // await axios.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`) + await axios.get(`${process.env.REACT_APP_URL}/orders/getordersummary/?customerid=${tid}`) + + .then((res) => { + console.log(res) + // setConfirmed(res.data.details.confirmed.toString()); + // setModified(res.data.details.modified.toString()); + setAllorders(res.data.details.total.toString()) + setCoveredorders(res.data.details.delivered.toString()) + + setCancelled(res.data.details.cancelled.toString()) + setUncoveredorders(res.data.details.pending.toString()) + // setActiveorders(res.data.details.assigned.toString()); + // setAssigned(res.data.details.accepted.toString()); + // setCreated(res.data.details.created.toString()) + // setClosed(res.data.details.delivered.toString()); + // setPicked(res.data.details.picked.toString()) + setPercentage1((Math.round((res.data.details.total / res.data.details.total) * 100) || 0).toString()) + setPercentage3((Math.round((res.data.details.delivered / res.data.details.total) * 100) || 0).toString()) + + setPercentage4((Math.round((res.data.details.cancelled / res.data.details.total) * 100) || 0).toString()) + + setPercentage2((Math.round((res.data.details.pending / res.data.details.total) * 100) || 0).toString()) + + + setLoading(false) + }).catch((err) => { + console.log(err) + setLoading(false) + // enqueueSnackbar(err.message, { + // variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, + // autoHideDuration: 2000 + // }) + }) + + } catch (err) { + console.log(err); + setLoading(false) + } + + } + + const fetchtable = async (tid) => { + setLoading1(true) + try { + + // await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenants/?partnerid=${tid}&status=active`) + await axios.get(`${process.env.REACT_APP_URL}/customers/getbytid/?tenantid=${tid}`) + + + .then((res) => { + if (res.data.message === "Success") { + let arr = [] + res.data.details.map((val, i) => { + arr = [...arr, { ...val, sno: i + 1 }]; + }) + // setArr(arr) + // setRows([...arr]) + // setStafflist([...arr]) + setUsers([...arr]) + setTempusers([...arr]) + // if(arr[0].customerid){ + setTenid(arr[0].customerid) + setUserName(arr[0].firstname || ""); + setContactno(arr[0].contactno || ""); + fetchpercentage(arr[0].customerid); + fetchData(arr[0].customerid) + // } + + console.log(res.data.Details) + console.log(arr) + setLoading1(false) + } + + }).catch((err) => { + console.log(err) + setLoading1(false) + enqueueSnackbar(err.message, { + variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 2000 + }) + }) + + } catch (err) { + console.log(err); + setLoading1(false) + + } +} + + const fetchData1 = async () => { + setLoading(true); + try { + await axios + .get( + `${process.env.REACT_APP_URL}/customers/getbytid?tenantid=${tenid}&pageno=${pageno}&pagesize=20` + ) + .then((response) => { + if (response.data.status) { + setUsers( + response.data.details + // .slice(0, 10) + ); + setUserName(response.data.details[0].firstname || ""); + setContactno(response.data.details[0].contactno || ""); + fetchData(response.data.details[0].customerid); + + // fetchData(user.customerid); + } + setLoading(false); + }) + .catch((err) => { + console.log(err); + setLoading(false); + }); + } catch (error) { + console.error("Error fetching data:", error); + setLoading(false); + } + }; + + // const fetchData = async (customerId) => { + // setUsernameload(true); + + // try { + // const response = await axios.get( + // `${process.env.REACT_APP_URL}/customers/summary?customerid=${customerId}` + // ); + // if (response.data.status) { + // setvisits(response.data.customervisits.visits); + // setBillAmount(response.data.customervisits.billamount); + // setPromotions(response.data.customervisits.promotions); + // setCustVisits(response.data.customervisits); + // setCustService(response.data.customerservices); + // setCustMembership(response.data.customermembership); + // console.log("customervisits", response.data.customervisits); + // console.log("customerservices", response.data.customerservices); + // console.log("customermembership", response.data.customermembership); + // } + // setLoading(false); + // setUsernameload(false); + // } catch (error) { + // console.error("Error fetching data:", error); + // setLoading(false); + // setUsernameload(false); + // } + // }; + + + const fetchData = async (tid) => { + + try { + await axios.get(`${process.env.REACT_APP_URL}/orders/customer/getorders/?customerid=${tid}&status=delivered&fromdate=${startdate}&todate=${enddate}`) + .then((res) => { + if (res.data.message === "Success") { + let arr = [] + res.data.details.map((val, i) => { + arr = [...arr, { ...val, sno: i + 1 }]; + }) + // setArruncovered(arr) + setOrderlist([...arr]) + } + + }).catch((err) => { + console.log(err) + }) + + } catch (err) { + console.log(err); + } + + } + useEffect(() => { + console.log("packDays", packDays); + console.log("startDate", startDate); + const formattedDate = dayjs(startDate, "DD/MM/YYYY") + .add(packDays, "day") + .format("DD/MM/YYYY"); + setValidDate(formattedDate); + }, [packDays, startDate]); + + return ( + <> + {(loading || usernameload) && } + + + + Customers + + + + + + + + {/* + + Customers + + + */} + + setSearch(e.target.value)} + // onChange={handleSearch} + sx={{ + "& .MuiOutlinedInput-input": { + p: "10.5px 0px 12px", + }, + }} + startAdornment={ + + + + } + endAdornment={ + { + setSearch(""); + }} + > + + + } + /> + + + + {/* */} + + {/* */} + {loading1 ? ( + <> + {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((val1) => { + return ( + <> + + + + + + + + + ); + })} + + {/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */} + + ) : ( + + {users.map((user, index) => ( + + { + setTenid(user.customerid) + setUserName(user.firstname); + setContactno(user.contactno); + fetchData(user.customerid); + fetchpercentage(user.customerid) + }} + > + + + + + + {user.firstname} + + + {/* {user.lastMessage} */} + + + } + secondary={ + + + {user.contactno} + + {/* {user.unReadChatCount ? ( + + ) : ( + // chance.bool() - use for last send msg was read or unread + + )} */} + + } + /> + + + + ))} + + )} + + {/* + + + + + { + let val = pageno; + if (val > 1) { + val = val - 1; + setPageno(val); + } + }} + > + + + {pageno} + { + let val = pageno; + if (val > 0 && !search) { + val = val + 1; + setPageno(val); + } + }} + > + + + + + + */} + {/* */} + + + {users.length} Clients + + + + + {/* */} + {/*
*/} + + + + + + + + + + + + {userName ? ( + + + {userName} + + + {contactno} + + + ) : ( + + + + + )} + + + + + {custMembership.membershipid == 0 && + custMembership.startdate == "" ? ( + <>{/*

No Membership Found

*/} + ) : ( + <> + {custMembership.membershipid && ( + <> + + + } + variant="caption" + label={ + custMembership.membershipno || "" + } + style={{ + width: "auto", + height: "auto", + + color: "black", + background: "white", + }} + /> + + + + + + + + {/* + {/* {custMembership.validityperiod || ''} Days */} + {/* {` ${custMembership.string}` || ''} + */} + + + )}{" "} + + )} + + + + + + + + {/* ======================================== || Add Membership dialog|| ======================================== */} + + {/* + + {" "} +
+ + + + {" "} + {`${userName} (${contactno})`} + +
+ + + + + + + + Membership Number + + + + + + Select Package + + { + setPackDays(e.target.value); + console.log(e.target.value); + + }} + > + + Trendy (30 days) + + + {" "} + Premiun (60 days) + + + {" "} + Gold (90 days) + + + {" "} + Platinum (365 days) + + + + + + Start Date + + + ( + + )} + onChange={(e) => { + setStartDate( + e.format("DD/MM/YYYY") + ); + console.log( + e.format("DD/MM/YYYY") + ); + }} + /> + + + + + Validity + + + ( + + )} + /> + + + + + + + + + */} + + + + + {/* + + Delete + */} + + + + + + {/* ======================================== || Cards || ======================================== */} + + {/* */} + + {/* */} + + + + + + : allorders} + // percentage={percentage1.toString()} + color={theme.palette.primary.main} /> + + + + + : uncoveredorders} + // percentage={percentage2.toString()} + color={theme.palette.warning.main} /> + + + + + : coveredorders} + // percentage={percentage3.toString()} + color={theme.palette.success.main} /> + + + + + + : cancelled} + // percentage={percentage4.toString()} + color={theme.palette.secondary[600]} /> + + + {/* */} + + // 'View all' + // {/* */} + // } + secondary={ + + setOpen(true)} > + + + + } + > + + + + + + + {/* # + Sales + Avg. Price + + Total + */} + # + CUSTOMER + ORDER ID + PICKUP + DELIVERY + STATUS + + + + + + {orderlist.map((row, index) => ( + <> + + + {/* + + {row.customername} + + + {row.contactno} + + */} + {/* {row.product} + {row.date} + + {row.badgeText} + */} + +{row.sno} + + + + + + + + {row.customername} + + + {row.contactno} + + + + + +{row.orderid} + + {dayjs(row.deliverytime).utc().format('DD/MM/YYYY')} + + + {dayjs(row.deliverytime).utc().format('hh:mm A')} + + + + + + + {/* {row.pickupaddress.slice(0, 20)} */} + {row.locationsuburb || row.pickupaddress.slice(0, 20)} + + + + + + + + + + {/* {row.deliveryaddress.slice(0, 20)} */} + {row.customersuburb || row.deliveryaddress.slice(0, 20)} + + + + + + +{/* {row.ordernotes} */} + + + + {(row.orderstatus === 'pending') && + + + } + {(row.orderstatus === 'modified') && + + } + {(row.orderstatus === 'cancelled') && + + + + } + {(row.orderstatus === 'delivered') && + + + } + {(row.orderstatus === 'processing') && + + } + {(row.orderstatus === 'ready') && + + } + {(row.orderstatus === 'confirmed') && + + } + + {(row.orderstatus === 'active') && + + } + {(row.orderstatus === 'closed') && + + } + {(row.orderstatus === 'created') && + + } + + + + + + + + + + + + + + + + + + + + ))} + + + +
+ + + + + {/* + + + + # + CUSTOMER + ORDER ID + PICKUP + DELIVERY + STATUS + + + + + + {orderlist.map((row)=>{ + + return <> + + {row.sno} + + + + + + + + {row.customername} + + + {row.contactno} + + + + + + {row.orderid} + + {dayjs(row.deliverytime).utc().format('DD/MM/YYYY')} + + + {dayjs(row.deliverytime).utc().format('hh:mm A')} + + + + + + + {row.pickupaddress.slice(0, 20)} + + + + + + + + + + {row.deliveryaddress.slice(0, 20)} + + + + + + {row.ordernotes} + + + + {(row.orderstatus === 'pending') && + + + } + {(row.orderstatus === 'modified') && + + } + {(row.orderstatus === 'cancelled') && + + + + } + {(row.orderstatus === 'delivered') && + + + } + {(row.orderstatus === 'processing') && + + } + {(row.orderstatus === 'ready') && + + } + {(row.orderstatus === 'confirmed') && + + } + + {(row.orderstatus === 'active') && + + } + {(row.orderstatus === 'closed') && + + } + {(row.orderstatus === 'created') && + + } + + + + + + + + + + }) + + } + + +
+ */} + + {/* + */} + + + {/* */} + + {/* + + */} + + + + + + {/*
*/} + + + + + + + + + + + Select Filter Options + + + setOpen(!open)} + id='daterange1' + onChange={(range) => { + if (range.label === 'All') { + // setDateselect('all'); + setStartdate(''); + setEnddate(''); + + setOpen(false) + } + else { + // setDateselect('select'); + setStartdate(dayjs(range.startDate).format('YYYY-MM-DD')); + setEnddate(dayjs(range.endDate).format('YYYY-MM-DD')); + if (range.label) { + setDatestatus(range.label) + } else { + setDatestatus(`[${dayjs(range.startDate).format('DD-MM-YYYY')} to ${dayjs(range.endDate).format('DD-MM-YYYY')}]`) + } + + + } + console.log(range) + }} + + + definedRanges={[ + { + label: 'Today', + startDate: new Date(), + endDate: new Date() + }, + { + label: 'Yesterday', + startDate: addDays(new Date(), -1), + endDate: addDays(new Date(), -1) + }, + { + label: 'Tomorrow', + startDate: addDays(new Date(), +1), + endDate: addDays(new Date(), +1) + }, + { + label: 'This Week', + startDate: startOfWeek(new Date()), + endDate: endOfWeek(new Date()), + }, + { + label: 'Last Week', + startDate: startOfWeek(addWeeks(new Date(), -1)), + endDate: endOfWeek(addWeeks(new Date(), -1)), + }, + { + label: 'Last 7 Days', + startDate: addWeeks(new Date(), -1), + endDate: new Date(), + }, + { + label: 'This Month', + startDate: startOfMonth(new Date()), + endDate: endOfMonth(new Date()), + }, + { + label: 'Last Month', + startDate: startOfMonth(addMonths(new Date(), -1)), + endDate: endOfMonth(addMonths(new Date(), -1)), + }, + // { + // label: 'All', + // startDate: new Date(), + // endDate: addDays(new Date(), -1), + // }, + + ]} + + + /> + + + + + + + + + + ); +}; + +export default Clients1; diff --git a/src/pages/nearle/clients/createclient.js b/src/pages/nearle/clients/createclient.js index 7c18bfc..9a52327 100644 --- a/src/pages/nearle/clients/createclient.js +++ b/src/pages/nearle/clients/createclient.js @@ -338,7 +338,7 @@ const Createclient = () => { sx={{ mb: 2 }} > - Create Client + Create Customer diff --git a/src/pages/nearle/orders/createorder.js b/src/pages/nearle/orders/createorder.js index 3fac29e..fb72665 100644 --- a/src/pages/nearle/orders/createorder.js +++ b/src/pages/nearle/orders/createorder.js @@ -43,12 +43,13 @@ import { DialogActions, CircularProgress, ButtonGroup, - FormLabel + FormLabel, + IconButton // LinkOutlined } from '@mui/material'; import { useNavigate } from 'react-router'; import CheckCircleIcon from '@mui/icons-material/CheckCircle'; - +import AccessTimeOutlinedIcon from '@mui/icons-material/AccessTimeOutlined'; import { PopupTransition } from 'components/@extended/Transitions'; // var utc = require('dayjs/plugin/utc') @@ -103,7 +104,8 @@ import dayjs from 'dayjs'; import { enqueueSnackbar } from 'notistack'; // import { CheckBox } from '@mui/icons-material'; // dayjs.extend(utc) - +var utc = require('dayjs/plugin/utc') +dayjs.extend(utc) @@ -117,6 +119,8 @@ const Createorder = () => { const [open, setOpen] = useState({}); const [open1, setOpen1] = useState('') const [open2, setOpen2] = useState(false) + const [open3, setOpen3] = useState(false) + const [shift, setShift] = useState(1); const [clientlist, setClientlist] = useState([]) const [clientdetail, setClientdetail] = useState([]); @@ -124,6 +128,11 @@ const Createorder = () => { const [startdate, setStartdate] = useState(dayjs().format('MM-DD-YYYY')); const [enddate, setEnddate] = useState(dayjs().add(1, 'day').format('MM-DD-YYYY')); + const [starttime, setStatrttime] = useState(`${dayjs().format('MM-DD-YYYY')} 08:00:00`); + const [endtime, setEndtime] = useState(`${dayjs().format('MM-DD-YYYY')} 20:00:00`); + + const [timeslotarr, setTimeslotarr] = useState([]); + const [currentsno, setCurrentsno] = useState(''); @@ -156,26 +165,60 @@ const Createorder = () => { const [tenantinfo, setTenantinfo] = useState({}); const [searchword, setSearchword] = useState(''); const [clientdetailarr, setClientdetailarr] = useState([]) - const [admintoken,setAdmintoken]=useState(''); + const [admintoken, setAdmintoken] = useState(''); + const [tenantlocationlist, setTenantlocationlist] = useState([]) + const [tenant, setTenant] = useState({}) useEffect(() => { if (localStorage.getItem('tenantid')) { - setOrderarr([{ - sno: 1, - address: '', - "customerid": '', - "deliverytime": dayjs(), - "deliverylocationid": '', - "clientname": '', - "contactno": '', - "latitude": '', - "longitude": '' - }]) + // setOrderarr([{ + // sno: 1, + // address: '', + // "customerid": '', + // "deliverytime": dayjs(), + // "deliverylocationid": '', + // "clientname": '', + // "contactno": '', + // "latitude": '', + // "longitude": '' + // }]) // console.log(dayjs()) + fetchtenantlocation(localStorage.getItem('tenantid')) } }, []) + useEffect(() => { + if (timeslotarr[0]) { + let arr = []; + timeslotarr.map((val) => { + if ((dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0)) { + arr.push(val) + } + }) + // if(!arr[0]){ + // setStartdate(dayjs().add(1,'day').format('MM/DD/YYYY')) + // }else{ + if (arr[0]) { + setOrderarr([{ + sno: 1, + address: '', + "customerid": '', + "deliverytime": dayjs(arr[0]) || '', + "deliverylocationid": '', + "clientname": '', + "contactno": '', + "latitude": '', + "longitude": '' + }]) + } + + // } + + + } + }, [timeslotarr]) + useEffect(() => { if (searchword) { // setClientdetailarr() @@ -204,8 +247,11 @@ const Createorder = () => { .then((res) => { console.log(res) if (res.data.status) { - setTenantinfo(res.data.details); - fetchadmintoken(res.data.details.partnerid) + // setTenantinfo(res.data.details); + setTenant(res.data.details) + + fetchadmintoken(res.data.details.tenantid, res.data.details.partnerid) + } setLoading(false) }).catch((err) => { @@ -214,15 +260,48 @@ const Createorder = () => { }) } - - const fetchadmintoken = async (tid) => { + const fetchtenantlocation = async (tid) => { setLoading(true) - await axios.get(`${process.env.REACT_APP_URL}/partners/getadmintoken/?partnerid=${tid}`) + await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${tid}`) + + .then((res) => { + console.log(res) + if (res.data.status) { + // setTenantinfo(res.data.details); + let arr = [] + res.data.details.map((val) => { + arr.push({ + ...val, + label: ` ${val.locationname}` + }) + }) + setTenantlocationlist(arr) + } + setLoading(false) + }).catch((err) => { + console.log(err) + setLoading(false) + }) + } + + const fetchadmintoken = async (tid, pid) => { + setLoading(true) + await axios.get(`${process.env.REACT_APP_URL}/partners/getadmintoken/?tenantid=${tid}&partnerid=${pid}`) .then((res) => { console.log(res) if (res.data.status) { // setTenantinfo(res.data.details); setAdmintoken(res.data.details.userfcmtokem) + // setEndtime(res.data.details.closetime) + let arr = []; + for (let i = starttime, j = 0; dayjs(endtime).diff(i, 'm') >= 0; j++, i = dayjs(i).add(30, 'm')) { + console.log(dayjs(endtime).diff(i, 'm')) + console.log(dayjs(i).format('hh:mm A')) + arr.push(i) + } + console.log(arr) + setTimeslotarr(arr) + // console.log(dayjs(starttime)) } setLoading(false) }).catch((err) => { @@ -245,7 +324,10 @@ const Createorder = () => { function closeAddressModal() { setOpen2(false); } - + function closetimemodal() { + setOpen3(false); + setCurrentsno('') + } const createsubmitobj1 = async () => { @@ -292,28 +374,32 @@ const Createorder = () => { "deliverytime": `${dayjs(startdate).format('YYYY-MM-DD')} ${dayjs(val.deliverytime.$d).format('HH:mm:ss')}`, "deliverylocationid": val.deliverylocationid, "deliveryaddress": val.address, - "pickupaddress": tenantinfo.address, - "pickuplat": tenantinfo.latitude, - "pickuplong": tenantinfo.longitude, + "pickupaddress": tenantinfo.locationaddress, + "pickuplat": tenantinfo.locationlatitude, + "pickuplong": tenantinfo.locationlong, "ordernotes": otherinstructions, "remarks": "", "tenantuserid": parseInt(localStorage.getItem('tenantid')), - "categoryid": tenantinfo.categoryid, - "subcategoryid": tenantinfo.subcategoryid, - "partnerid": tenantinfo.partnerid, - "deliverylat":val.latitude, - "deliverylong":val.longitude, - "applocationid":parseInt(localStorage.getItem('applocationid')) + "categoryid": tenant.categoryid, + "subcategoryid": tenant.subcategoryid, + "partnerid": tenant.partnerid, + "deliverylat": val.latitude, + "deliverylong": val.longitude, + "applocationid": parseInt(localStorage.getItem('applocationid')) }) }) + if(!orderarr[0]){ + opentoast('Choose Customer') + }else if (!tenantinfo.tenantid) { + opentoast('Choose Location') - if (timecheck) { - opentoast('Choose Schedule Time') } else if (addresscheck) { - opentoast('Choose Client') + opentoast('Choose Customer') + } else if (timecheck) { + opentoast('Choose Schedule Time') } else { setLoading(true) await axios.post(`${process.env.REACT_APP_URL}/orders/createorders`, arr) @@ -323,11 +409,11 @@ const Createorder = () => { variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' }, autoHideDuration: 2000 }) - if(admintoken){ + if (admintoken) { notifyadmin(admintoken) } - + navigate('/orders') } else { opentoast(res.data.message) @@ -488,38 +574,38 @@ const Createorder = () => { const notifyadmin = async (id1) => { setLoading(true) await axios.post(`${process.env.REACT_APP_URL}/utils/notifyuser`, { - "sender": localStorage.getItem('firstname'), - "accessid": process.env.REACT_APP_RIDER_ACCESS_ID, - "notification": { - "priority": "high", - "to": id1, + "sender": localStorage.getItem('firstname'), + "accessid": process.env.REACT_APP_RIDER_ACCESS_ID, "notification": { - "title": "Nearle Admin", - "body": "Orders has been placed for delivery.Kindly accept and process deliveries", - "sound": "ring" + "priority": "high", + "to": id1, + "notification": { + "title": "Nearle Admin", + "body": "Orders has been placed for delivery.Kindly accept and process deliveries", + "sound": "ring" + } } - } }) - .then((res) => { - console.log(res) - if (res.data.message == 'Success') { - enqueueSnackbar("Notification sent Successfully", { - variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 2000 - }) - } - setLoading(false) - - }).catch((err) => { - console.log(err) - enqueueSnackbar(err.message, { - variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 2000 + .then((res) => { + console.log(res) + if (res.data.message == 'Success') { + enqueueSnackbar("Notification sent Successfully", { + variant: 'success', anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 2000 + }) + } + setLoading(false) + + }).catch((err) => { + console.log(err) + enqueueSnackbar(err.message, { + variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 2000 + }) + setLoading(false) + }) - setLoading(false) - - }) - } + } @@ -557,31 +643,51 @@ const Createorder = () => { @@ -630,18 +736,38 @@ const Createorder = () => { {`${eventname.length}/50`} */} - + Pickup Location - + {/* {' '}{tenantinfo.address || ''} - {/* {'123, Tamil Kudimagan Nagar Rd, Vadakkuppattu, Kulattur, Chennai, Tamil Nadu 600117, India'} */} - + */} + } + onChange={(e, val) => { + if (val) { + + setTenantinfo(val) + } else { + setTenantinfo({}) + } + // if (reason === 'reset'){ + // setTenantinfo({}) + // } + console.log(val) + }} + // value={tenantinfo} + disabled={(tenant.tenantid) ? false : true} + /> - + + Date @@ -657,6 +783,29 @@ const Createorder = () => { setStartdate(e); setEnddate(e); + + let arr = []; + timeslotarr.map((val) => { + if ((dayjs().diff(dayjs(`${dayjs(e).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0)) { + arr.push(val) + } + }) + if (arr[0]) { + setOrderarr([{ + sno: 1, + address: '', + "customerid": '', + "deliverytime": dayjs(arr[0]) || '', + "deliverylocationid": '', + "clientname": '', + "contactno": '', + "latitude": '', + "longitude": '' + }]) + } else { + setOrderarr([]) + } + } else { setAlertmessage('choose Upcoming Date'); opentoast('choose Upcoming Date') @@ -665,7 +814,7 @@ const Createorder = () => { }} value={dayjs(startdate)} - sx={{ width: '100%' }} + sx={{ width: '100%', mt: 2 }} disablePast // minDate={dayjs().add(1, 'day')} @@ -674,6 +823,17 @@ const Createorder = () => { + + {/* */} + + + {' '}{tenantinfo.locationaddress || ''} + + + + {/* */} + + @@ -684,6 +844,8 @@ const Createorder = () => { + + {/* {shiftarr1.map((result) => { return <> */} @@ -805,23 +967,32 @@ const Createorder = () => { */} - - - + } else { + opentoast('Choose Location') + } + } else { + opentoast('We are unable to process the order at this time. Kindly schedule it for an other day') + } + + }} color="success" startIcon={}>ADD Customers + {/* */} @@ -883,12 +1054,21 @@ const Createorder = () => { // onClick={() => handlerAddress(address)} onClick={() => { if (tabstatus == 1) { + + let arr5 = []; + timeslotarr.map((val) => { + if ((dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0)) { + arr5.push(val) + } + }) + + if (orderarr[0].address == '') { setOrderarr([{ sno: 1, address: address.address, "customerid": address.customerid, - "deliverytime": dayjs(), + "deliverytime": dayjs(arr5[0]) || '', "deliverylocationid": address.deliverylocationid, "clientname": address.firstname, "contactno": address.contactno, @@ -899,8 +1079,9 @@ const Createorder = () => { if (orderarr.find((val2) => val2.customerid == address.customerid)) { if (orderarr.length > 1) { let arr = orderarr; - let res = orderarr.find((val2) => val2.customerid == address.customerid) + let res = orderarr.find((val2) => val2.address == address.address) arr.splice(res.sno - 1, 1); + console.log(arr) let arr1 = [] arr.map((val2, k) => { arr1.push({ @@ -921,7 +1102,7 @@ const Createorder = () => { sno: 1, address: '', "customerid": '', - "deliverytime": dayjs(), + "deliverytime": dayjs(arr5[0]) || '', "deliverylocationid": '', "clientname": '', "contactno": '', @@ -936,7 +1117,7 @@ const Createorder = () => { sno: arr.length + 1, 'address': address.address, "customerid": address.customerid, - "deliverytime": dayjs(), + "deliverytime": dayjs(arr5[0]) || '', "deliverylocationid": address.deliverylocationid, "clientname": address.firstname, "contactno": address.contactno, @@ -947,15 +1128,25 @@ const Createorder = () => { } } + console.log(orderarr) } if (tabstatus == 0) { + + let arr = []; + timeslotarr.map((val) => { + if ((dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0)) { + arr.push(val) + } + }) + + setOrderarr([{ sno: 1, address: address.address, "customerid": address.customerid, - "deliverytime": dayjs(), + "deliverytime": dayjs(arr[0]) || '', "deliverylocationid": address.deliverylocationid, "clientname": address.firstname, "contactno": address.contactno, @@ -984,9 +1175,9 @@ const Createorder = () => { '&:hover': { // bgcolor: theme.palette.primary.lighter, // borderColor: theme.palette.primary.lighter - bgcolor: (orderarr.find((val2) => val2.customerid == address.customerid)) ? '#e1bee7' : '' + bgcolor: ((orderarr.find((val2) => val2.address == address.address))) ? '#e1bee7' : '' }, - bgcolor: (orderarr.find((val2) => val2.customerid == address.customerid)) ? '#e1bee7' : '' + bgcolor: ((orderarr.find((val2) => val2.address == address.address))) ? '#e1bee7' : '' }} > @@ -1034,6 +1225,83 @@ const Createorder = () => { + + + + + + + + + + + + + Select Time + + + + + + + {timeslotarr.map((val) => { + if ((dayjs().diff(dayjs(`${dayjs(startdate).format('MM-DD-YYYY')} ${dayjs(val).format('HH:mm:ss')}`), 'm') <= 0) + && currentsno + ) { + + return <> + + + { + let arr = orderarr; + arr[currentsno - 1].deliverytime = val + setOrderarr([...arr]) + console.log(arr) + }} + /> + + {/*

{dayjs().diff(dayjs(val),'m')}

*/} + + } + + }) + + } + + + + + + + + + + + + + + @@ -1091,7 +1359,7 @@ const Createorder = () => { - + {/* { 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} - + disabled /> - + */} + + {dayjs(val.deliverytime).format('hh:mm A')} + { + if (tenantinfo.tenantid && orderarr[0].address) { + setCurrentsno(val.sno) + setOpen3(true) + + } else { + opentoast('Choose Location & Client') + } + + }} + > + + + {val.address} @@ -1165,17 +1432,33 @@ const Createorder = () => {