From 12df2e9dc457c43e0ee26208ee026e434de82d8e Mon Sep 17 00:00:00 2001 From: joshikannan Date: Fri, 14 Nov 2025 18:42:26 +0530 Subject: [PATCH] reports update --- src/config.js | 2 +- .../MainLayout/Header/HeaderContent/index.js | 14 +- src/menu-items/index.js | 8 +- src/menu-items/nearle.js | 29 +- src/menu-items/other.js | 25 +- src/pages/nearle/api/api.js | 27 +- src/pages/nearle/dashboard.js | 10 - src/pages/nearle/login.js | 4 +- src/pages/nearle/orders/multipleOrders.js | 2 +- src/pages/nearle/orders/orders.js | 764 ++++++++--------- src/pages/nearle/reports/orderSummary.js | 778 ++++++++++++++++++ src/pages/nearle/reports/ordersDetails.js | 333 ++++---- src/pages/nearle/reports/riderLogs.js | 7 + src/pages/nearle/reports/ridersummary.js | 679 +++++++++++++++ src/routes/MainRoutes.js | 110 ++- 15 files changed, 2159 insertions(+), 633 deletions(-) delete mode 100644 src/pages/nearle/dashboard.js create mode 100644 src/pages/nearle/reports/orderSummary.js create mode 100644 src/pages/nearle/reports/riderLogs.js create mode 100644 src/pages/nearle/reports/ridersummary.js diff --git a/src/config.js b/src/config.js index fbfd0eb..63af026 100644 --- a/src/config.js +++ b/src/config.js @@ -5,7 +5,7 @@ export const facebookColor = '#3b5998'; export const linkedInColor = '#0e76a8'; // export const APP_DEFAULT_PATH = '/sample-page'; -export const APP_DEFAULT_PATH = '/orders'; +export const APP_DEFAULT_PATH = '/nearle/orders'; export const HORIZONTAL_MAX_ITEM = 6; export const DRAWER_WIDTH = 260; diff --git a/src/layout/MainLayout/Header/HeaderContent/index.js b/src/layout/MainLayout/Header/HeaderContent/index.js index bb01e91..7919477 100644 --- a/src/layout/MainLayout/Header/HeaderContent/index.js +++ b/src/layout/MainLayout/Header/HeaderContent/index.js @@ -156,10 +156,10 @@ const HeaderContent = () => { }} > { // console.log(const location = useLocation();) - navigate('/orders/create'); + navigate('nearle/orders/create'); handleClickAway(); }} > @@ -175,10 +175,10 @@ const HeaderContent = () => { /> { // console.log(const location = useLocation();) - navigate('/orders/createorders'); + navigate('nearle/orders/createorders'); handleClickAway(); }} > @@ -201,7 +201,7 @@ const HeaderContent = () => { }} >   + @@ -212,9 +212,9 @@ const HeaderContent = () => { /> */} { - navigate('/customers/create'); + navigate('nearle/customers/create'); handleClickAway(); }} > diff --git a/src/menu-items/index.js b/src/menu-items/index.js index c9f5f93..870fbd4 100644 --- a/src/menu-items/index.js +++ b/src/menu-items/index.js @@ -1,13 +1,13 @@ // project import -// import nearle from './nearle'; -import other from './other'; +import nearle from './nearle'; +// import other from './other'; // ==============================|| MENU ITEMS ||============================== // const menuItems = { items: [ - other - // nearle + // other, + nearle ] }; diff --git a/src/menu-items/nearle.js b/src/menu-items/nearle.js index b892a02..396b10e 100644 --- a/src/menu-items/nearle.js +++ b/src/menu-items/nearle.js @@ -4,6 +4,7 @@ import { AiOutlineBarChart } from 'react-icons/ai'; import { AiOutlineDashboard } from 'react-icons/ai'; import { TbListDetails } from 'react-icons/tb'; import { LiaFileInvoiceSolid } from 'react-icons/lia'; +import DirectionsBikeOutlinedIcon from '@mui/icons-material/DirectionsBikeOutlined'; // assets import { @@ -21,6 +22,7 @@ import { UserOutlined, SettingOutlined } from '@ant-design/icons'; +import { Path } from 'leaflet'; // icons const icons = { @@ -66,20 +68,41 @@ const nearle = { type: 'collapse', icon: AiOutlineBarChart, children: [ + { + id: 'OrderSummary', + title: , + type: 'item', + url: '/nearle/reports/ordersummary', + icon: TbListDetails + }, { id: 'OrdersDetails', title: , type: 'item', - url: '/nearle/ordersdetails', - icon: TbListDetails + url: '/nearle/reports/ordersdetails', + icon: AiOutlineDashboard + }, + { + id: 'RiderSummary', + title: , + type: 'item', + url: '/nearle/reports/ridersummary', + icon: DirectionsBikeOutlinedIcon } + // { + // id: 'RiderLogs', + // title: , + // type: 'item', + // url: '/nearle/reports/riderlogs', + // icon: DirectionsBikeOutlinedIcon + // } ] }, { id: 'invoice', title: , type: 'item', - url: '/nearle/invoice', + url: 'nearle/invoice', icon: LiaFileInvoiceSolid } ] diff --git a/src/menu-items/other.js b/src/menu-items/other.js index 518a542..bebd5e9 100644 --- a/src/menu-items/other.js +++ b/src/menu-items/other.js @@ -57,14 +57,14 @@ const other = { id: 'orders', title: , type: 'item', - url: '/orders', + url: 'nearle/orders', icon: AiOutlineDashboard }, { id: 'customers', title: , type: 'item', - url: '/customers', + url: 'nearle/customers', icon: icons.UserOutlined }, { @@ -73,12 +73,33 @@ const other = { type: 'collapse', icon: AiOutlineBarChart, children: [ + { + id: 'OrderSummary', + title: , + type: 'item', + url: 'reports/ordersummary', + icon: TbListDetails + }, { id: 'OrdersDetails', title: , type: 'item', url: 'reports/ordersdetails', icon: TbListDetails + }, + { + id: 'RiderSummary', + title: , + type: 'item', + url: 'reports/ridersummary', + icon: TbListDetails + }, + { + id: 'RiderLogs', + title: , + type: 'item', + url: 'reports/riderlogs', + icon: TbListDetails } ] }, diff --git a/src/pages/nearle/api/api.js b/src/pages/nearle/api/api.js index 4fcdc9e..365c5e4 100644 --- a/src/pages/nearle/api/api.js +++ b/src/pages/nearle/api/api.js @@ -76,16 +76,25 @@ export const fetchCustomersListBySearch = async ({ queryKey }) => { // ==============================|| fetchOrdersSummary (orders summary)||============================== // export const fetchOrdersSummary = async ({ queryKey }) => { console.log('queryKey for fetchOrdersSummary', queryKey); - const [id, startdate, enddate] = queryKey; + const [startdate, enddate] = queryKey; const response = await axios.get( - id == -1 - ? `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}` - : `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?partnerid=${id}&fromdate=${startdate}&todate=${enddate}` + `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}` ); console.log('fetchOrdersSummary', response.data.details); return response.data.details; }; +// ==============================|| getreportlocationsummary (orders summary)||============================== // +export const getreportlocationsummary = async ({ queryKey }) => { + console.log('queryKey for getreportlocationsummary', queryKey); + const [startdate, enddate, locationId] = queryKey; + const response = await axios.get( + `${process.env.REACT_APP_URL}/deliveries/getreportlocationsummary/?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}` + ); + console.log('getreportlocationsummary', response.data.details); + + return response.data.details; +}; // ==============================|| fetchLocations (orders summary))||============================== // export const fetchLocations = async () => { @@ -100,9 +109,9 @@ export const fetchLocations = async () => { }; // ==============================|| fetchDeliverySummary (orders summary)||============================== // export const fetchDeliverySummary = async ({ queryKey }) => { - const [, startdate, enddate, currentStatus] = queryKey; + const [, startdate, enddate, currentStatus, locationId] = queryKey; const response = await axios.get( - `${process.env.REACT_APP_URL}/deliveries/deliverysummary?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}` + `${process.env.REACT_APP_URL}/deliveries/deliverysummary?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}` ); console.log('fetchDeliverySummary', response.data.details); return response.data.details; @@ -137,13 +146,15 @@ export const fetchRidersSummary = async ({ queryKey }) => { // ==============================|| fetchorderdetails (orders detail)||============================== // export const fetchorderdetails = async ({ pageParam = 0, queryKey }) => { - const [startdate, enddate, currentStatus] = queryKey; + const [startdate, enddate, currentStatus, locationId] = queryKey; const limit = 10; const pageno = pageParam + 1; // ✅ increment page by 1 each time const response = await axios.get( - `${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}&status=${ + `${ + process.env.REACT_APP_URL + }/deliveries/getdeliveries/?tenantid=${tenid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}&status=${ currentStatus === 'All' ? '' : currentStatus }&pageno=${pageno}&pagesize=${limit}` ); diff --git a/src/pages/nearle/dashboard.js b/src/pages/nearle/dashboard.js deleted file mode 100644 index e336647..0000000 --- a/src/pages/nearle/dashboard.js +++ /dev/null @@ -1,10 +0,0 @@ - - -const Dashboard=()=>{ - - return <> -

Dashboard

- -} - -export default Dashboard; \ No newline at end of file diff --git a/src/pages/nearle/login.js b/src/pages/nearle/login.js index 6ec5534..d913c27 100644 --- a/src/pages/nearle/login.js +++ b/src/pages/nearle/login.js @@ -47,7 +47,7 @@ const Login = () => { localStorage.getItem('authname') // || localStorage.getItem("appuserid") ) { - navigate('/orders'); + navigate('/nearle/orders'); } // console.log(alertmessage) @@ -144,7 +144,7 @@ const Login = () => { localStorage.setItem('moduleid', res.data.details.moduleid); localStorage.setItem('userid', res.data.details.userid); - navigate('/orders'); + navigate('/nearle/orders'); setSubmitting(false); } else { opentoast('Login Error'); diff --git a/src/pages/nearle/orders/multipleOrders.js b/src/pages/nearle/orders/multipleOrders.js index 8b3f17c..fb4b515 100644 --- a/src/pages/nearle/orders/multipleOrders.js +++ b/src/pages/nearle/orders/multipleOrders.js @@ -1,6 +1,6 @@ import React from 'react'; import Loader from 'components/Loader'; -import { useEffect, useState, useRef, Fragment } from 'react'; +import { useEffect, useState, Fragment } from 'react'; import { useTheme } from '@mui/material/styles'; import MainCard from 'components/MainCard'; import axios from 'axios'; diff --git a/src/pages/nearle/orders/orders.js b/src/pages/nearle/orders/orders.js index d2b666a..75007c0 100644 --- a/src/pages/nearle/orders/orders.js +++ b/src/pages/nearle/orders/orders.js @@ -9,6 +9,8 @@ dayjs.extend(utc); import axios from 'axios'; import HoverSocialCard from 'components/cards/statistics/HoverSocialCard'; import { useTheme } from '@mui/material/styles'; +import MyLocationIcon from '@mui/icons-material/MyLocation'; + import { Avatar, Box, @@ -33,8 +35,8 @@ import { OutlinedInput, InputAdornment, Skeleton, - TextField, - Autocomplete + Autocomplete, + TextField } from '@mui/material'; import { SearchOutlined, CloseOutlined } from '@ant-design/icons'; import ClearIcon from '@mui/icons-material/Clear'; @@ -46,12 +48,13 @@ import TableSortLabel from '@mui/material/TableSortLabel'; import { visuallyHidden } from '@mui/utils'; import Loader from 'components/Loader'; import { FilterList } from '@mui/icons-material'; +import { Outlet } from 'react-router'; const Orders = () => { const tid = localStorage.getItem('tenantid'); + const tenId = localStorage.getItem('tenantid'); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(10); - const [pageCountObj, setPageCountObj] = React.useState({}); const [pageCount, setPageCount] = React.useState(); const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD')); const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD')); @@ -59,7 +62,7 @@ const Orders = () => { const [percentage2, setPercentage2] = useState('0'); const [percentage3, setPercentage3] = useState('0'); const [percentage4, setPercentage4] = useState('0'); - let [orderarr, setArr] = useState([]); + const [tenantLocations, setTenantlocations] = useState([]); const [coveredorders, setCoveredorders] = useState(''); const [uncoveredorders, setUncoveredorders] = useState(''); const [cancelled, setCancelled] = useState(''); @@ -70,7 +73,6 @@ const Orders = () => { let [rows, setRows] = useState([]); const [tabvalue, setTabvalue] = useState(0); const [open, setOpen] = useState(false); - const [tabstatus1, setTabstatus1] = useState('Today'); const [datestatus, setDatestatus] = useState('Today'); const [searchword, setSearchword] = useState(''); const [currentStatus, setCurrentStatus] = useState('created'); @@ -78,6 +80,10 @@ const Orders = () => { const [pendingLenght, setPendingLenght] = useState(); const [deliveredlenght, setDeliveredlenght] = useState(); const [cancelledLenght, setCancelledLenght] = useState(); + const [cancelOpen, setCancelOpen] = useState(false); + const [orderheaderid, setOrderheaderid] = useState(''); + const [locationId, setLocationId] = useState(0); + const [locoName, setLocoName] = useState('Select Location'); const handleChangetab = (e, i) => { setTabvalue(i); @@ -85,22 +91,18 @@ const Orders = () => { if (i === 0) { setTabstatus('Created'); setCurrentStatus('created'); - setPageCount(pageCountObj.created); } if (i === 1) { setTabstatus('Pending'); setCurrentStatus('pending'); - setPageCount(pageCountObj.pending); } if (i === 2) { setTabstatus('Delivered'); setCurrentStatus('delivered'); - setPageCount(pageCountObj.delivered); } if (i === 3) { setTabstatus('Cancelled'); setCurrentStatus('cancelled'); - setPageCount(pageCountObj.cancelled); } console.log(i); }; @@ -131,20 +133,39 @@ const Orders = () => { }; }, []); - useEffect(() => { - var day = 60 * 60 * 24 * 1000; - var startDate = new Date(); - if (tabstatus1 === 'Tomorrow') { - setEnddate(new Date(startDate.getTime() + day).toISOString().substring(0, 10)); - setStartdate(new Date(startDate.getTime() + day).toISOString().substring(0, 10)); - } else if (tabstatus1 === 'Today') { - setEnddate(new Date().toISOString().substring(0, 10)); - setStartdate(new Date().toISOString().substring(0, 10)); - } else if (tabstatus1 === 'Week') { - setStartdate(new Date(startDate.getTime() - day * 7).toISOString().substring(0, 10)); - setEnddate(new Date().toISOString().substring(0, 10)); - } - }, [tabstatus1]); + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const cancelorder = async () => { + await axios + .put(`${process.env.REACT_APP_URL}/orders/updateorder`, { + orderheaderid: orderheaderid, + orderstatus: 'cancelled', + cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss') + }) + .then((res) => { + console.log(res); + if (res.data.status) { + enqueueSnackbar('Order Cancelled Successfully', { + variant: 'success', + anchorOrigin: { vertical: 'top', horizontal: 'right' }, + autoHideDuration: 2000 + }); + fetchtablecovered(); + fetchorderscount(); + setCancelOpen(false); + } + }) + .catch((err) => { + console.log(err); + }); + }; const fetchtablecovered = async () => { try { @@ -152,12 +173,11 @@ const Orders = () => { .get( `${ process.env.REACT_APP_URL - }/orders/tenant/getorders/?tenantid=${tid}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${ + }/orders/tenant/getorders/?tenantid=${tid}&locationid=${locationId}&status=${currentStatus}&fromdate=${startdate}&todate=${enddate}&pageno=${ page + 1 }&pagesize=${rowsPerPage}&keyword=${searchword}` ) .then((res) => { - setArr(res.data.details); setRows(res.data.details); }) .catch((err) => { @@ -169,7 +189,7 @@ const Orders = () => { }; useEffect(() => { fetchtablecovered(); - }, [tabstatus, startdate, enddate, page, rowsPerPage, searchword]); + }, [tabstatus, startdate, enddate, page, rowsPerPage, searchword, locationId]); const fetchpercentage = async () => { setLoading(true); @@ -205,7 +225,9 @@ const Orders = () => { setLoading(true); try { await axios - .get(`${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&fromdate=${startdate}&todate=${enddate}`) + .get( + `${process.env.REACT_APP_URL}/orders/getordersummary/?tenantid=${tid}&locationid=${locationId}&fromdate=${startdate}&todate=${enddate}` + ) .then((res) => { console.log('fetchorderscount', res.data.details); @@ -230,379 +252,34 @@ const Orders = () => { }; useEffect(() => { fetchorderscount(); - }, [tabvalue]); - - const headCells = [ - { - id: 'sno', - disablePadding: true, - label: 'S NO' - }, - { - id: 'orderid', - numeric: false, - disablePadding: false, - label: 'ORDER ID' - }, - { - id: 'eventname', - disablePadding: false, - label: 'Pickup' - }, - { - id: 'eventname4', - disablePadding: false, - label: 'Delivery' - }, - - { - id: 'itemcount', - disablePadding: false, - label: 'NOTES' - }, - { - id: 'orderstatus', - disablePadding: false, - label: 'STATUS' - }, - { - id: 'action', - disablePadding: false, - label: 'ACTION' + }, [tabvalue, locationId]); + // ============================================= || gettenantlocations (branches) || ============================================= + const gettenantlocations = async (id) => { + try { + const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`); + console.log('gettenantlocations', res.data.details); + if (res.data.details.length == 1) { + setIsLocation(true); + setTenantlocations(res.data.details); + setPickCust(res.data.details[0]); + } else { + setTenantlocations(res.data.details); + } + } catch (err) { + console.log('gettenantlocations', err); } - ]; - - function EnhancedTableHead(props) { - const { order, orderBy, onRequestSort } = props; - const createSortHandler = (property) => (event) => { - onRequestSort(event, property); - }; - - return ( - - - {headCells.map((headCell) => ( - - - {headCell.label} - {orderBy === headCell.id ? ( - - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - - ) : null} - - - ))} - - - ); - } - - function EnhancedTable() { - const [open, setOpen] = useState(false); - const [orderheaderid, setOrderheaderid] = useState(''); - - const cancelorder = async () => { - await axios - .put(`${process.env.REACT_APP_URL}/orders/updateorder`, { - orderheaderid: orderheaderid, - orderstatus: 'cancelled', - cancelled: dayjs().format('YYYY-MM-DD HH:mm:ss') - }) - .then((res) => { - console.log(res); - if (res.data.status) { - enqueueSnackbar('Order Cancelled Successfully', { - variant: 'success', - anchorOrigin: { vertical: 'top', horizontal: 'right' }, - autoHideDuration: 2000 - }); - handleClose(true); - fetchtablecovered(); - fetchorderscount(); - } - }) - .catch((err) => { - console.log(err); - }); - }; - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - const handleClose = () => { - setOpen(false); - setOrderheaderid(''); - }; - - function AlertCustomerDelete({ - // title, - open, - handleClose - }) { - // const [deletepassword, setDeletepassword] = useState(''); - - return ( - handleClose(false)} maxWidth="xs"> - - - - - - {/* - - */} - - - Are you sure you want to cancel this order? - - - {/* - Please type in the order number to confirm. - */} - - - - - - - - - - ); - } - - return ( - - - - - - - {loading && ( - <> - - {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ))} - - - )} - - {rows?.length == 0 && ( - <> - - - - - - - )} - - {rows?.map((row, index) => { - return ( - <> - - - {page * rowsPerPage + index + 1} - - - - - {row.orderid} - - - {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')} - - - {dayjs(row.deliverydate).utc().format('hh:mm A')} - - - - - - - - {row.pickupcustomer} - - {row.pickupcontactno} - - - - {row.pickupsuburb || row.pickupaddress.slice(0, 20)} - - - - - - - - - - {row.deliverycustomer} - - {row.deliverycontactno} - - - - {/* {row.pickupaddress.slice(0, 20)} */} - {row.deliverysuburb || 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' && } - - - - - {row.orderstatus == 'created' && ( - <> - - { - e.stopPropagation(); - setOrderheaderid(row.orderheaderid); - setOpen(true); - }} - > - - - - - )} - - - - ); - })} - -
- - - - ); - } + }; + useEffect(() => { + gettenantlocations(tenId); + }, []); return ( <> {loading && } - + Orders - { /> - {startdate && enddate && ( @@ -657,20 +333,62 @@ const Orders = () => { /> )} - - - setOpen(true)} - > - - - + + + {tenantLocations.length == 1 ? ( + + + + ) + }} + /> + ) : ( + `${option.locationname} (${option.suburb})` || ''} + renderInput={(params) => } + sx={{ width: '350px' }} + onChange={(event, value, reason) => { + if (value) { + console.log('Business Locations', value); + setLocationId(value.locationid); + setLocoName(value.locationname); + } + if (reason == 'clear') { + setLocationId(0); + setLocoName('Select Location'); + } + }} + /> + )} + + + setOpen(true)} + > + + + + - { /> - + { - + + + + + + S.No + Orders + Pickup + Drop + Notes + Status + Action + + + {loading && ( + <> + + {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + + + )} + + {rows?.length == 0 && ( + <> + + + + + + + )} + + {rows?.map((row, index) => { + return ( + <> + + + {page * rowsPerPage + index + 1} + + + + + {row.orderid} + + + {dayjs(row.deliverydate).utc().format('DD/MM/YYYY')} + + + {dayjs(row.deliverydate).utc().format('hh:mm A')} + + + + + + + + {row.pickupcustomer} + + {row.pickupcontactno} + + + + {row.pickupsuburb || row.pickupaddress.slice(0, 20)} + + + + + + + + + + {row.deliverycustomer} + + {row.deliverycontactno} + + + + {/* {row.pickupaddress.slice(0, 20)} */} + {row.deliverysuburb || 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' && } + + + + + {row.orderstatus == 'created' && ( + <> + + { + e.stopPropagation(); + setOrderheaderid(row.orderheaderid); + setCancelOpen(true); + }} + > + + + + + )} + + + + ); + })} + +
+ + + - + {/* ============================================== || cancel order || ============================================== */} + setCancelOpen(false)} maxWidth="xs"> + + + + + + + + Are you sure you want to cancel this order? + + + + + + + + + + {/* ============================================== || Date filter || ============================================== */} Select Filter Options diff --git a/src/pages/nearle/reports/orderSummary.js b/src/pages/nearle/reports/orderSummary.js new file mode 100644 index 0000000..7e97288 --- /dev/null +++ b/src/pages/nearle/reports/orderSummary.js @@ -0,0 +1,778 @@ +import { React, useState, useEffect, useRef, Fragment } from 'react'; + +import axios from 'axios'; +import { useQuery } from '@tanstack/react-query'; +import { Empty } from 'antd'; +import TaskAltIcon from '@mui/icons-material/TaskAlt'; +import MyLocationIcon from '@mui/icons-material/MyLocation'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; + +// material-ui +import { + Box, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Dialog, + DialogTitle, + Typography, + DialogContent, + Stack, + Button, + IconButton, + Tooltip, + Chip, + Autocomplete, + TextField, + FormControl, + OutlinedInput, + InputAdornment, + Collapse +} from '@mui/material'; +import ClearIcon from '@mui/icons-material/Clear'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import { SearchOutlined } from '@ant-design/icons'; +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'; +import { FilterList } from '@mui/icons-material'; + +// project imports + +import MainCard from 'components/MainCard'; +import Loader from 'components/Loader'; +import { useTheme } from '@mui/material/styles'; +import TitleCard from '../titleCard'; +import { getreportlocationsummary } from '../api/api'; + +function formatNumberToRupees(value) { + return new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: 'INR', + minimumFractionDigits: 2 + }).format(value); +} + +// ==============================|| MUI TABLE - ENHANCED ||============================== // + +export default function OrdersReport() { + // const [rows, setRows] = useState([]); + const theme = useTheme(); + const bgcolor0 = theme.palette.primary.lighter; + const bgcolor1 = '#ffcdd2'; + const bgcolor2 = '#f8bbd0'; + const tenantid = localStorage.getItem('tenantid'); + const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD')); + const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD')); + const [open, setOpen] = useState(false); + const [openRow, setOpenRow] = useState(null); // Initially no row is open + const [datestatus, setDatestatus] = useState('Today'); + const [total, settotal] = useState(0); + const [totalOrders, settotalOrders] = useState(0); + const [totalOrderPend, setTotalOrderPend] = useState(0); + const [totalOrderComplete, setTotalOrderComplete] = useState(0); + const [totalOrderCancel, setTotalOrderCancel] = useState(0); + const [totalDeliPend, setTotalDeliPend] = useState(0); + const [totalDeliComplete, setTotalDeliComplete] = useState(0); + const [totalDeliCancel, setTotalDeliCancel] = useState(0); + const [searchword, setSearchword] = useState(''); + const textFieldRef = useRef(null); + const [ridersdata, setRidersdata] = useState(null); + const [tenantLocations, setTenantlocations] = useState([]); + const [selectedLocation, setSelectedLocation] = useState(null); + const [locationId, setLocationId] = useState(0); + + useEffect(() => { + console.log('openRow', openRow); + }, [openRow]); + + /* ============================================= || handleKeyPress (ctrl+k)| ============================================= */ + + useEffect(() => { + const handleKeyPress = (event) => { + if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + + textFieldRef.current.focus(); + } + if (event.key === 'Escape' && document.activeElement === textFieldRef.current) { + // Remove focus from the TextField + textFieldRef.current.blur(); + } + }; + document.addEventListener('keydown', handleKeyPress); + + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, []); + + // ============================================= || gettenantlocations (branches) || ============================================= + const gettenantlocations = async () => { + try { + const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations?tenantid=${tenantid}`); + console.log('gettenantlocations', res.data.details); + setTenantlocations(res.data.details); + } catch (err) { + console.log('gettenantlocations', err); + } + }; + useEffect(() => { + gettenantlocations(); + }, []); + + // ==============================|| fetchOrdersSummary (orders summary)||============================== // + const { + isLoading: isLoadingReports, + isError: isErrorReports, //true or false + data: rows, + error: reportsError + } = useQuery({ + queryKey: [startdate, enddate, locationId], + queryFn: getreportlocationsummary + }); + // ==============================|| getriderlocationsummary by tenid (orders summary)||============================== // + const getriderlocationsummary = async (id) => { + try { + const riderRes = await axios.get( + `${process.env.REACT_APP_URL}/deliveries/getriderlocationsummary/?&tenantid=${tenantid}&locationid=${id}&fromdate=${startdate}&todate=${enddate}` + ); + console.log('riderRes', riderRes.data.details); + setRidersdata(riderRes.data.details); + } catch (error) { + console.log('riderRes', error); + } + }; + + // ==============================|| calculate||============================== // + const calculate = () => { + let calculatedTotal = 0; + let ordersTotal = 0; + let Orderpending = 0; + let OrderComplete = 0; + let OrderCancel = 0; + let deliverypending = 0; + let deliverycomplete = 0; + let deliverycancel = 0; + rows && + rows.forEach((row) => { + calculatedTotal += row.charges; + ordersTotal += row.totalorders; + Orderpending += row.Orderspending; + OrderComplete += row.orderscompleted; + OrderCancel += row.orderscancelled; + deliverypending += row.deliveriespending; + deliverycomplete += row.deliveriescompleted; + deliverycancel += row.deliveriescancelled; + }); + // Update the state after the calculation is done + settotal(calculatedTotal); + settotalOrders(ordersTotal); + setTotalOrderPend(Orderpending); + setTotalOrderComplete(OrderComplete); + setTotalOrderCancel(OrderCancel); + setTotalDeliPend(deliverypending); + setTotalDeliComplete(deliverycomplete); + setTotalDeliCancel(deliverycancel); + }; + useEffect(() => { + calculate(); + }, [rows]); + + // if (isLoadingReports) return ; + if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message; + + return ( + <> + {isLoadingReports && } + {' '} + + + {startdate && enddate && ( + + + + {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')} + + } + variant="combined" + color="warning" + size="small" + /> + + )} + {(!startdate || !enddate) && ( + <> + + + + + )} + + + + { + setSearchword(e.target.value); + }} + autoComplete="off" + startAdornment={ + + + + } + endAdornment={ + { + setSearchword(''); + }} + > + + + } + /> + + + {tenantLocations.length == 1 ? ( + + + + ) + }} + /> + ) : ( + `${option.locationname} (${option.suburb})` || ''} + sx={{ minWidth: 250 }} + onChange={(event, value, reason) => { + setSelectedLocation(value); + if (value) { + console.log('Business Locations', value); + setLocationId(value.locationid); + } + if (reason == 'clear') { + setLocationId(0); + } + }} + renderInput={(params) => } + /> + )} + + + + setOpen(true)} + > + + + + + + } + > + + + + + # + Location + All + + Orders{' '} + + + Deliveries{' '} + + Kilometer + Charges + Amount + Action + + {/* sx={{ bgcolor: headCell.bgcolor }} */} + + Pending + Completed + Cancelled + Pending + Completed + Cancelled + + + + {rows?.length !== 0 ? ( + rows?.map((row, index) => ( + <> + {/* ============================================ || tablerow 1 || ============================================ */} + + + + {index + 1} + + + + {row.locationname} + + + {row.totalorders} + {row.Orderspending} + {row.orderscompleted} + {row.orderscancelled} + {row.deliveriespending} + {row.deliveriescompleted} + {row.deliveriescancelled} + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + { + getriderlocationsummary(row.locationid); + setOpenRow(openRow === row.locationid ? null : row.locationid); + }} + sx={{ + bgcolor: openRow === row.locationid ? 'primary.main' : null, + color: openRow === row.locationid ? 'white' : null, + '&:hover': { + bgcolor: openRow === row.locationid ? 'primary.main' : '#e1bee7' + } + }} + > + {openRow === row.locationid ? : } + + + + {/* ============================================ || collapsive row || ============================================ */} + {openRow === row.locationid && ( + + + + + + Riders Summary + +
+ + + # + Rider + Deliveries + Assigned + Accepted + Picked + Delivered + kms/Actualkms + POD/PLA + Charges + + + + {ridersdata?.map((rider, index) => ( + + {index + 1} + + + {rider?.firstname} + {rider?.status == 'Active' ? ( + + ) : ( + + )} + + + {rider?.deliveries} + {rider?.Assigened} + {rider?.Accepted} + {rider?.Picked} + {rider?.delivered} + + + + + + + + + + + + + + + + + + + + + + + + ))} + +
+ + + + + )} + + )) + ) : ( + + + + + + + + )} + + {/* ============================================ || total - row || ============================================ */} + + + Total + + + {totalOrders}{' '} + + + {totalOrderPend}{' '} + + + {totalOrderComplete}{' '} + + + {totalOrderCancel} + + + {totalDeliPend}{' '} + + + {totalDeliComplete}{' '} + + + {totalDeliCancel} + + + + + {formatNumberToRupees(total)} + {' '} + + + + + + {/* ============================================ || date filter dialog || ============================================ */} + + + Select Filter Options + + + setOpen(!open)} + id="daterange1" + onChange={(range) => { + if (range.label === 'All') { + setStartdate(''); + setEnddate(''); + + setOpen(false); + } else { + setStartdate(dayjs(range.startDate).format('YYYY-MM-DD')); + setEnddate(dayjs(range.endDate).format('YYYY-MM-DD')); + if (range.label) { + setDatestatus(range.label); + } else { + setDatestatus(''); + } + } + 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) + } + ]} + /> + + + + + + + ); +} diff --git a/src/pages/nearle/reports/ordersDetails.js b/src/pages/nearle/reports/ordersDetails.js index 3855064..24c7931 100644 --- a/src/pages/nearle/reports/ordersDetails.js +++ b/src/pages/nearle/reports/ordersDetails.js @@ -8,6 +8,7 @@ import { useTheme } from '@mui/material/styles'; import { SlLocationPin } from 'react-icons/sl'; import MapWithRoute from './mapWithRoute'; import { enqueueSnackbar } from 'notistack'; +import MyLocationIcon from '@mui/icons-material/MyLocation'; // material-ui import { @@ -27,7 +28,6 @@ import { IconButton, Tooltip, Chip, - Paper, FormControl, OutlinedInput, InputAdornment, @@ -72,6 +72,7 @@ function formatNumberToRupees(value) { // ==============================|| MUI TABLE - ENHANCED ||============================== // export default function OrdersDetails() { + const tenId = localStorage.getItem('tenantid'); const textFieldRef = useRef(null); const loadMoreRef = useRef(); const containerRef = useRef(); @@ -88,29 +89,42 @@ export default function OrdersDetails() { const [riderEnd, setRiderEnd] = useState(); const [mapOpen, setMapOpen] = useState(false); const [mapTenant, setMapTenant] = useState({}); - let [total, settotal] = useState(0); - let [coveredLenght, setCoveredLenght] = useState(0); - let [uncoveredLenght, setUncoveredLenght] = useState(0); - let [cancelLenght, setCancelLenght] = useState(0); - let [assignLenght, setAssignLenght] = useState(0); - let [pickedLenght, setPickedLenght] = useState(0); - let [activeLenght, setActiveLenght] = useState(0); - let [arrivesLenght, setArrivedLenght] = useState(0); const [currentStatus, setCurrentStatus] = useState('All'); - const [statusLabel, setStatuslabel] = useState('All'); const [statusCount, setStatusCount] = useState(0); + const [tenantLocations, setTenantlocations] = useState([]); + const [locationId, setLocationId] = useState(0); + const [locoName, setLocoName] = useState('Select Location'); const status = [ - { id: 0, status: 'All', statusLow: 'All', count: total }, - { id: 1, status: 'Pending', statusLow: 'pending', count: assignLenght }, - { id: 2, status: 'Accepted', statusLow: 'accepted', count: uncoveredLenght }, - { id: 3, status: 'Arrived', statusLow: 'arrived', count: arrivesLenght }, - { id: 4, status: 'Picked', statusLow: 'picked', count: pickedLenght }, - { id: 5, status: 'Active', statusLow: 'active', count: activeLenght }, - { id: 6, status: 'Delivered', statusLow: 'delivered', count: coveredLenght }, - { id: 7, status: 'Cancelled', statusLow: 'cancelled', count: cancelLenght } + { id: 0, status: 'All', statusLow: 'All' }, + { id: 1, status: 'Pending', statusLow: 'pending' }, + { id: 2, status: 'Accepted', statusLow: 'accepted' }, + { id: 3, status: 'Arrived', statusLow: 'arrived' }, + { id: 4, status: 'Picked', statusLow: 'picked' }, + { id: 5, status: 'Active', statusLow: 'active' }, + { id: 6, status: 'Delivered', statusLow: 'delivered' }, + { id: 7, status: 'Cancelled', statusLow: 'cancelled' } ]; + // ============================================= || gettenantlocations (branches) || ============================================= + const gettenantlocations = async (id) => { + try { + const res = await axios.get(`${process.env.REACT_APP_URL}/tenants/gettenantlocations/?tenantid=${id}`); + console.log('gettenantlocations', res.data.details); + if (res.data.details.length == 1) { + setIsLocation(true); + setTenantlocations(res.data.details); + setPickCust(res.data.details[0]); + } else { + setTenantlocations(res.data.details); + } + } catch (err) { + console.log('gettenantlocations', err); + } + }; + useEffect(() => { + gettenantlocations(tenId); + }, []); const getdeliverylogs = async (id) => { console.log('deliveryid', id); try { @@ -162,15 +176,6 @@ export default function OrdersDetails() { // ==============================|| fetchorderdetails (orders)||============================== // - // const { - // isLoading: isLoadingOrderDetails, - // isError: isErrorOrderDetails, //true or false - // data: rows, - // error: orderDetailsError - // } = useQuery({ - // queryKey: [startdate, enddate, currentStatus], - // queryFn: fetchorderdetails - // }); const { data: rowdata, isError: isErrorOrderDetails, @@ -181,7 +186,7 @@ export default function OrdersDetails() { isFetchingNextPage // status: rowdataStatus } = useInfiniteQuery({ - queryKey: [startdate, enddate, currentStatus], + queryKey: [startdate, enddate, currentStatus, locationId], queryFn: fetchorderdetails, getNextPageParam: (lastPage) => lastPage.nextPage }); @@ -212,13 +217,8 @@ export default function OrdersDetails() { // ==================================== || fetchDeliverySummary || ==================================== - const { - data: deliverycount, - isLoading, - isError, - error - } = useQuery({ - queryKey: ['deliverycount', startdate, enddate, currentStatus], + const { data: deliverycount } = useQuery({ + queryKey: ['deliverycount', startdate, enddate, currentStatus, locationId], queryFn: fetchDeliverySummary }); @@ -266,7 +266,6 @@ export default function OrdersDetails() { // ==============================|| fetchAppLocations ||============================== // - if (isLoadingOrderDetails) return ; if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message; const filteredOrders = rows.filter((row) => @@ -345,127 +344,165 @@ export default function OrdersDetails() { }; return ( <> + {isLoadingOrderDetails && } - - - - {startdate && enddate && ( - - {`Orders-${datestatus}`} - - {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')} - - } - variant="combined" - color="warning" - size="small" - /> - - )} - {(!startdate || !enddate) && ( - <> + + + {startdate && enddate && ( - - {/* ALL} variant="combined" color='warning' size='small' /> */} + {`Orders-${datestatus}`} + + + {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')} + + } + variant="combined" + color="warning" + size="small" + /> - - )} - - - `${option.status}`} - onChange={(event, value, reason) => { - if (reason === 'clear') { - setCurrentStatus('All'); - } else { - console.log('status', value); - setCurrentStatus(value.statusLow); - } - }} - renderInput={(params) => } - /> - - + + + {/* ALL} variant="combined" color='warning' size='small' /> */} + + + )} + + + + {tenantLocations.length == 1 ? ( + + + + ) + }} + /> + ) : ( + `${option.locationname} (${option.suburb})` || ''} + renderInput={(params) => } + sx={{ width: '300px' }} + onChange={(event, value, reason) => { + if (value) { + console.log('Business Locations', value); + setLocationId(value.locationid); + setLocoName(value.locationname); + } + if (reason == 'clear') { + setLocationId(0); + setLocoName('Select Location'); + } + }} + /> + )} + + `${option.status}`} + onChange={(event, value, reason) => { + if (reason === 'clear') { + setCurrentStatus('All'); + } else { + console.log('status', value); + setCurrentStatus(value.statusLow); + } }} - sx={{ background: 'white' }} - size="large" - id="header-search" - placeholder="Search (ctrl+k)" - value={searchword} - onChange={(e) => { - setSearchword(e.target.value); - }} - autoComplete="off" - startAdornment={ - - - - } - endAdornment={ - - { - setSearchword(''); - }} - > - - - - } + renderInput={(params) => } /> - + + { + setSearchword(e.target.value); + }} + autoComplete="off" + startAdornment={ + + + + } + endAdornment={ + + { + setSearchword(''); + }} + > + + + + } + /> + - - setOpen(true)} - > - - - + + setOpen(true)} + > + + + - + + - - - - + } + > { + return
riderLogs
; +}; + +export default riderLogs; diff --git a/src/pages/nearle/reports/ridersummary.js b/src/pages/nearle/reports/ridersummary.js new file mode 100644 index 0000000..14ebde0 --- /dev/null +++ b/src/pages/nearle/reports/ridersummary.js @@ -0,0 +1,679 @@ +import { React, useState, useEffect, useRef } from 'react'; +import axios from 'axios'; +import { useQuery } from '@tanstack/react-query'; +import TaskAltIcon from '@mui/icons-material/TaskAlt'; +import HighlightOffIcon from '@mui/icons-material/HighlightOff'; +import { Empty } from 'antd'; +// material-ui +import { + Box, + Divider, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Dialog, + DialogTitle, + Typography, + DialogContent, + Stack, + Button, + IconButton, + Tooltip, + Chip, + Autocomplete, + TextField, + Collapse +} from '@mui/material'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +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'; +import { FilterList } from '@mui/icons-material'; +// project imports +import MainCard from 'components/MainCard'; +import Loader from 'components/Loader'; +import TitleCard from '../titleCard'; +import { fetchRidersSummary } from '../api/api'; + +// table filter +function descendingComparator(a, b, orderBy) { + if (b[orderBy] < a[orderBy]) { + return -1; + } + if (b[orderBy] > a[orderBy]) { + return 1; + } + return 0; +} + +function getComparator(order, orderBy) { + return order === 'desc' ? (a, b) => descendingComparator(a, b, orderBy) : (a, b) => -descendingComparator(a, b, orderBy); +} + +function stableSort(array, comparator) { + const stabilizedThis = array.map((el, index) => [el, index]); + stabilizedThis.sort((a, b) => { + const order = comparator(a[0], b[0]); + if (order !== 0) return order; + return a[1] - b[1]; + }); + return stabilizedThis.map((el) => el[0]); +} +function formatNumberToRupees(value) { + return new Intl.NumberFormat('en-IN', { + style: 'currency', + currency: 'INR', + minimumFractionDigits: 2 + }).format(value); +} + +// ==============================|| MUI TABLE - ENHANCED ||============================== // + +export default function RidersSummary() { + // const [rows, setRows] = useState([]); + const [order, setOrder] = useState('asc'); + const [orderBy, setOrderBy] = useState('calories'); + const [selected, setSelected] = useState([]); + const [page, setPage] = useState(0); + const [dense] = useState(false); + const [rowsPerPage, setRowsPerPage] = useState(10); + const [selectedValue, setSelectedValue] = useState([]); + const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD')); + const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD')); + const [locaName, setLocoName] = useState('All'); + const [open, setOpen] = useState(false); + const [dateselect, setDateselect] = useState('select'); + const [tabstatus1, setTabstatus1] = useState('Today'); + const [datestatus, setDatestatus] = useState('Today'); + const [total, settotal] = useState(0); + const [id, setid] = useState(-1); + + const [tenantData, setTenantData] = useState([]); + const [openRow, setOpenRow] = useState(null); // Initially no row is open + const [searchword, setSearchword] = useState(''); + const textFieldRef = useRef(null); + + const [appId, setAppId] = useState(localStorage.getItem('applocationid')); + const [locations, setLocations] = useState('Select Location'); + const userid = localStorage.getItem('userid'); + + /* ============================================= || handleKeyPress (ctrl+k)| ============================================= */ + useEffect(() => { + const handleKeyPress = (event) => { + if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + + textFieldRef.current.focus(); + } + if (event.key === 'Escape' && document.activeElement === textFieldRef.current) { + // Remove focus from the TextField + textFieldRef.current.blur(); + } + }; + document.addEventListener('keydown', handleKeyPress); + + return () => { + document.removeEventListener('keydown', handleKeyPress); + }; + }, []); + + // ==============================|| fetchRidersSummary (riders summary)||============================== // + const { + isLoading: isLoadingReports, + isError: isErrorReports, //true or false + data: rows, + error: reportsError + } = useQuery({ + queryKey: [appId, startdate, enddate], + queryFn: fetchRidersSummary + }); + // ==============================|| calculate||============================== // + const calculate = async () => { + let calculatedTotal = 0; + rows && + rows.forEach((row, index) => { + console.log(index, row.Deliveryamt); + calculatedTotal += row.Deliveryamt; + }); + // Update the state after the calculation is done + settotal(calculatedTotal); + console.log('calculatedTotal', calculatedTotal); + }; + useEffect(() => { + calculate(); + }, [rows]); + + if (isLoadingReports) return ; + if (isErrorReports) return 'An error has occurred:(isErrorReports) ' + reportsError.message; + + // ==============================|| fetchTenantSummary by rider (rider summary)||============================== // + const fetchTenantSummary = async (riderUserid) => { + try { + const tenantRes = await axios.get( + `${process.env.REACT_APP_URL}/deliveries/getreportsummary/?&fromdate=${startdate}&todate=${enddate}&userid=${riderUserid}` + ); + console.log('tenantRes', tenantRes.data.details); + setTenantData(tenantRes.data.details); + } catch (error) { + console.log('tenantRes', error); + } + }; + + const handleClick = (event, name) => { + const selectedIndex = selected.indexOf(name); + let newSelected = []; + + if (selectedIndex === -1) { + newSelected = newSelected.concat(selected, name); + } else if (selectedIndex === 0) { + newSelected = newSelected.concat(selected.slice(1)); + } else if (selectedIndex === selected.length - 1) { + newSelected = newSelected.concat(selected.slice(0, -1)); + } else if (selectedIndex > 0) { + newSelected = newSelected.concat(selected.slice(0, selectedIndex), selected.slice(selectedIndex + 1)); + } + const selectedRowData = rows.filter((row) => newSelected.includes(row.name)); + setSelectedValue(selectedRowData); + setSelected(newSelected); + }; + + const handleChangePage = (event, newPage) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = (event) => { + setRowsPerPage(parseInt(event?.target.value, 10)); + setPage(0); + }; + + const isSelected = (name) => selected.indexOf(name) !== -1; + + // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + return ( + <> + + + + + {startdate && enddate && ( + + + + {dayjs(startdate).format('DD/MM/YYYY')} - {dayjs(enddate).format('DD/MM/YYYY')} + + } + variant="combined" + color="warning" + size="small" + /> + + )} + {(!startdate || !enddate) && ( + <> + + + {/* ALL} variant="combined" color='warning' size='small' /> */} + + + )} + + + } + > + {/* table */} + + + + + S.No + Rider + Deliveries + Assigned + Accepted + Picked + Delivered + KMS/Actualkms + POD/PLA + Charges + Action + + + {/* ============================================ || TableBody || ============================================ */} + + + {rows.length === 0 && ( + + + + + + + + )} + + {stableSort(rows, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map((row, index) => { + if (typeof row === 'number') return null; + const isItemSelected = isSelected(row.name); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + rows.length !== 0 && ( + <> + {/* // ============================================ || tablerow 1 || ============================================ */} + + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.tenantname} + selected={isItemSelected} + sx={{ + bgcolor: openRow === row.userid ? '#e1bee7' : null, + '&:hover': { + bgcolor: openRow === row.userid ? '#e1bee7!important' : null + }, + cursor: openRow === row.userid ? 'pointer' : null + }} + > + + {index + 1} + + + + {row.firstname} + {row.status == 'Active' ? ( + + ) : ( + + )} + + + {row.deliveries} + {row.Assigened} + {row.Accepted} + {row.Picked} + {row.delivered} + + + + + + + + + + + + + + + + + + + + + + + + + + + { + fetchTenantSummary(row.userid); + setOpenRow(openRow === row.userid ? null : row.userid); + }} + sx={{ + bgcolor: openRow === row.userid ? 'primary.main' : null, + color: openRow === row.userid ? 'white' : null, + '&:hover': { + bgcolor: openRow === row.userid ? 'primary.main' : '#e1bee7' + } + }} + > + {openRow === row.userid ? : } + + + + {/* // ============================================ || collapsive row || ============================================ */} + {openRow === row.userid && ( + + + + + + Tenant Summary + +
+ + + # + Client + All + Pending + Completed + Cancelled + Kms/Actual Kms + POD / PLA + Amount + + + + {tenantData.map((row, index) => ( + handleClick(event, row.name)} + role="checkbox" + aria-checked={isItemSelected} + tabIndex={-1} + key={row.tenantname} + selected={isItemSelected} + > + {/* + + */} + + {index + 1} + + + + {row.tenantname} + + + {row.totalorders} + {row.deliveriespending} + {row.deliveriescompleted} + {row.deliveriescancelled} + + + + + + + {' '} + + + + + + + + ))} + +
+ + + + + )} + + ) + ); + })} + {emptyRows > 0 && ( + + + + )} + + + + + + Total : + + {formatNumberToRupees(total)} + + + {/* table pagination */} + {/* */} + + + + 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(''); + } + } + 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) + } + ]} + /> + + + + + + + ); +} diff --git a/src/routes/MainRoutes.js b/src/routes/MainRoutes.js index d5910d4..5dad05d 100644 --- a/src/routes/MainRoutes.js +++ b/src/routes/MainRoutes.js @@ -4,7 +4,8 @@ import { lazy } from 'react'; import MainLayout from 'layout/MainLayout'; import CommonLayout from 'layout/CommonLayout'; import Loadable from 'components/Loadable'; -// import AuthGuard from 'utils/route-guard/AuthGuard'; +import AuthGuard from 'utils/route-guard/AuthGuard'; +import { element } from 'prop-types'; // pages routing const MaintenanceError = Loadable(lazy(() => import('pages/maintenance/404'))); @@ -15,7 +16,6 @@ const MaintenanceComingSoon = Loadable(lazy(() => import('pages/maintenance/comi // render - sample page const SamplePage = Loadable(lazy(() => import('pages/extra-pages/sample-page'))); const Login = Loadable(lazy(() => import('pages/nearle/login'))); -const Dashboard = Loadable(lazy(() => import('pages/nearle/dashboard'))); const Customers = Loadable(lazy(() => import('pages/nearle/clients/customers'))); @@ -25,12 +25,15 @@ const Details = Loadable(lazy(() => import('pages/nearle/orders/details'))); const Accountsettings = Loadable(lazy(() => import('pages/nearle/accountsettings'))); // const Createorder = Loadable(lazy(() => import('pages/nearle/orders/createorder'))); -const Createclient = Loadable(lazy(() => import('pages/nearle/clients/createCustomer'))); +const CreateCustomer = Loadable(lazy(() => import('pages/nearle/clients/createCustomer'))); const Createorder1 = Loadable(lazy(() => import('pages/nearle/orders/createorder1'))); const MultipleOrders = Loadable(lazy(() => import('pages/nearle/orders/multipleOrders'))); +const OrderSummary = Loadable(lazy(() => import('pages/nearle/reports/orderSummary'))); const OrdersDetails = Loadable(lazy(() => import('pages/nearle/reports/ordersDetails'))); +const RiderSummary = Loadable(lazy(() => import('pages/nearle/reports/ridersummary'))); +const RiderLogs = Loadable(lazy(() => import('pages/nearle/reports/riderLogs'))); const Invoice = Loadable(lazy(() => import('pages/nearle/invoice/invoice'))); const InvoicePreview = Loadable(lazy(() => import('../pages/nearle/invoice/invoicePreview'))); @@ -49,48 +52,81 @@ const MainRoutes = { ), children: [ { - path: 'dashboard', - element: - }, - { - path: 'customers', - element: - }, - { - path: 'orders', - element: + path: 'nearle', + children: [ + { + path: 'orders', + element: , + children: [ + // use Outlet in orders page to render the child, because order render in app, but chidren createorder, multipleorder have nowhere, outlet make parent as to render + { + path: 'create', + element: + }, + { + path: 'createorders', + element: + } + ] + }, + { + path: 'customers', + children: [ + { + path: '', + element: + }, + { + path: 'create', + element: + } + ] + }, + { + path: 'reports', + children: [ + { + path: 'ordersummary', + element: + }, + { + path: 'ordersdetails', + element: + }, + { + path: 'ridersummary', + element: + }, + { + path: 'riderlogs', + element: + } + ] + }, + { + path: 'invoice', + children: [ + { + path: '', + element: + }, + { + path: 'preview', + element: + } + ] + } + ] }, + { path: 'accountsettings', element: }, - { - path: 'orders/create', - element: - }, - { - path: 'orders/createorders', - element: - }, + { path: 'orders/details', element:
- }, - { - path: 'customers/create', - element: - }, - { - path: 'reports/ordersdetails', - element: - }, - { - path: 'invoice', - element: - }, - { - path: 'invoice/preview', - element: } ] },