orderdetails scroll

src/menu-items/index.js

@@ -1,10 +1,14 @@
 // project import
+// import nearle from './nearle';
 import other from './other';
 
 // ==============================|| MENU ITEMS ||============================== //
 
 const menuItems = {
-  items: [other]
+  items: [
+    other
+    // nearle
+  ]
 };
 
 export default menuItems;

src/menu-items/nearle.js

@@ -0,0 +1,88 @@
+// third-party
+import { FormattedMessage } from 'react-intl';
+import { AiOutlineBarChart } from 'react-icons/ai';
+import { AiOutlineDashboard } from 'react-icons/ai';
+import { TbListDetails } from 'react-icons/tb';
+import { LiaFileInvoiceSolid } from 'react-icons/lia';
+
+// assets
+import {
+  BorderOutlined,
+  BoxPlotOutlined,
+  ChromeOutlined,
+  DeploymentUnitOutlined,
+  GatewayOutlined,
+  MenuUnfoldOutlined,
+  QuestionOutlined,
+  SmileOutlined,
+  StopOutlined,
+  DashboardOutlined,
+  ClockCircleOutlined,
+  UserOutlined,
+  SettingOutlined
+} from '@ant-design/icons';
+
+// icons
+const icons = {
+  ChromeOutlined,
+  MenuUnfoldOutlined,
+  BoxPlotOutlined,
+  StopOutlined,
+  BorderOutlined,
+  SmileOutlined,
+  GatewayOutlined,
+  QuestionOutlined,
+  DeploymentUnitOutlined,
+  DashboardOutlined,
+  ClockCircleOutlined,
+  UserOutlined,
+  SettingOutlined
+};
+
+// ==============================|| MENU ITEMS - SUPPORT ||============================== //
+
+const nearle = {
+  id: 'nearle',
+  title: <FormattedMessage id="MENU" />,
+  type: 'group',
+  children: [
+    {
+      id: 'orders',
+      title: <FormattedMessage id="Orders" />,
+      type: 'item',
+      url: '/nearle/orders',
+      icon: AiOutlineDashboard
+    },
+    {
+      id: 'customers',
+      title: <FormattedMessage id="Customers" />,
+      type: 'item',
+      url: '/nearle/customers',
+      icon: icons.UserOutlined
+    },
+    {
+      id: 'reports',
+      title: <FormattedMessage id="Reports" />,
+      type: 'collapse',
+      icon: AiOutlineBarChart,
+      children: [
+        {
+          id: 'OrdersDetails',
+          title: <FormattedMessage id="OrdersDetails" />,
+          type: 'item',
+          url: '/nearle/ordersdetails',
+          icon: TbListDetails
+        }
+      ]
+    },
+    {
+      id: 'invoice',
+      title: <FormattedMessage id="Invoice" />,
+      type: 'item',
+      url: '/nearle/invoice',
+      icon: LiaFileInvoiceSolid
+    }
+  ]
+};
+
+export default nearle;

src/pages/nearle/api/api.js

@@ -24,13 +24,6 @@ export const fetchOrderInsight = async () => {
   return response.data.details;
 };
 
-// ==============================|| fetchDeliverySummary (delivery)||============================== //
-export const fetchDeliverySummary = async () => {
-  const response = await axios.get(`${process.env.REACT_APP_URL}/deliveries/deliverysummary`);
-  console.log('fetchDeliverySummary', response.data.details);
-  return response.data.details;
-};
-
 // ==============================|| fetchDeliveryInsight (delivery)||============================== //
 export const fetchDeliveryInsight = async () => {
   const response = await axios.get(`${process.env.REACT_APP_URL}/deliveries/getdeliveryinsight`);
@@ -49,7 +42,7 @@ export const fetchDeliveryLocationSummary = async () => {
 // ==============================|| fetchAllTenants (clients)||============================== //
 
 export const fetchAllTenants = async ({ queryKey }) => {
-  const [size, status, pageno, search, rough] = queryKey;
+  const [size, pageno, search] = queryKey;
 
   let url = '';
   if (search) {
@@ -95,7 +88,7 @@ export const fetchOrdersSummary = async ({ queryKey }) => {
 };
 // ==============================|| fetchLocations (orders summary))||============================== //
 
-export const fetchLocations = async ({ queryKey }) => {
+export const fetchLocations = async () => {
   const response = await axios.get(`${process.env.REACT_APP_URL}/partners/getpartners`);
   const updatedLocations = [
     ...response.data.details,
@@ -105,9 +98,18 @@ export const fetchLocations = async ({ queryKey }) => {
 
   return updatedLocations;
 };
+// ==============================|| fetchDeliverySummary (orders summary)||============================== //
+export const fetchDeliverySummary = async ({ queryKey }) => {
+  const [, startdate, enddate, currentStatus] = queryKey;
+  const response = await axios.get(
+    `${process.env.REACT_APP_URL}/deliveries/deliverysummary?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}`
+  );
+  console.log('fetchDeliverySummary', response.data.details);
+  return response.data.details;
+};
 // ==============================|| fetchAppLocations (report summary))||============================== //
 
-export const fetchAppLocations = async ({ queryKey }) => {
+export const fetchAppLocations = async () => {
   const response = await axios.get(`${process.env.REACT_APP_URL}/partners/getpartners`);
   const updatedLocations = [
     ...response.data.details,
@@ -134,17 +136,38 @@ export const fetchRidersSummary = async ({ queryKey }) => {
 };
 
 // ==============================|| fetchorderdetails (orders detail)||============================== //
-export const fetchorderdetails = async ({ queryKey }) => {
+export const fetchorderdetails = async ({ pageParam = 0, queryKey }) => {
-  console.log('queryKey of fetchorderdetails', queryKey);
   const [startdate, enddate, currentStatus] = 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=${
-      currentStatus == 'All' ? '' : currentStatus
+      currentStatus === 'All' ? '' : currentStatus
-    }`
+    }&pageno=${pageno}&pagesize=${limit}`
   );
-  console.log('fetchorderdetails', response.data.details);
+
-  return response.data.details;
+  const details = response.data.details || [];
+  const hasMore = details.length === limit; // ✅ only if you got full data
+
+  return {
+    details,
+    nextPage: hasMore ? pageParam + 1 : undefined // nextPage increments correctly
+  };
 };
+
+// export const fetchorderdetails = async ({ queryKey }) => {
+//   console.log('queryKey of fetchorderdetails', queryKey);
+//   const [startdate, enddate, currentStatus] = queryKey;
+//   const response = await axios.get(
+//     `${process.env.REACT_APP_URL}/deliveries/getdeliveries/?tenantid=${tenid}&fromdate=${startdate}&todate=${enddate}&status=${
+//       currentStatus == 'All' ? '' : currentStatus
+//     }`
+//   );
+//   console.log('fetchorderdetails', response.data.details);
+//   return response.data.details;
+// };
 // ==============================|| fetchCount (orders detail)||============================== //
 export const fetchCount = async ({ queryKey }) => {
   console.log('queryKey of fetchCount', queryKey);

src/pages/nearle/reports/ordersDetails.js

@@ -1,7 +1,7 @@
 import { React, useState, useEffect, useRef } from 'react';
 import TitleCard from 'pages/nearle/titleCard';
 import axios from 'axios';
-import { useQuery } from '@tanstack/react-query';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { Empty } from 'antd';
 import ClearIcon from '@mui/icons-material/Clear';
 import { useTheme } from '@mui/material/styles';
@@ -18,7 +18,6 @@ import {
   TableContainer,
   TableHead,
   TableRow,
-  Grid,
   Dialog,
   DialogTitle,
   Typography,
@@ -34,7 +33,8 @@ import {
   InputAdornment,
   Badge,
   Autocomplete,
-  TextField
+  TextField,
+  CircularProgress
 } from '@mui/material';
 import { SearchOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
@@ -56,34 +56,11 @@ import {
 import { FilterList } from '@mui/icons-material';
 
 // project imports
-import { fetchorderdetails, fetchCount, fetchAppLocations } from '../api/api';
+import { fetchDeliverySummary, fetchorderdetails } from '../api/api';
 import MainCard from 'components/MainCard';
 import { CSVExport } from 'components/third-party/ReactTable';
 import Loader from 'components/Loader';
 
-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',
@@ -91,119 +68,26 @@ function formatNumberToRupees(value) {
     minimumFractionDigits: 2
   }).format(value);
 }
-const headCells = [
-  {
-    id: 'sno',
-    disablePadding: false,
-    label: '#'
-  },
-
-  {
-    id: 'tenantname',
-    disablePadding: false,
-    label: 'Client'
-  },
-
-  {
-    id: 'Pickup loco',
-    disablePadding: false,
-    label: 'Pickup'
-  },
-  {
-    id: 'Delivery loco',
-    disablePadding: false,
-    label: 'Drop'
-  },
-  {
-    id: 'order status',
-    disablePadding: false,
-    label: 'status'
-  },
-  {
-    id: 'assigned',
-    disablePadding: false,
-    label: 'assigned'
-  },
-  {
-    id: 'Accepted',
-    disablePadding: false,
-    label: 'Accepted'
-  },
-  {
-    id: 'arrived',
-    disablePadding: false,
-    label: 'arrived'
-  },
-  {
-    id: 'picked',
-    disablePadding: false,
-    label: 'picked'
-  },
-  {
-    id: 'Delivered',
-    disablePadding: false,
-    label: 'Delivered'
-  },
-  {
-    id: 'cancelled',
-    disablePadding: false,
-    label: 'cancelled'
-  },
-  {
-    id: ' notes',
-    disablePadding: false,
-    label: 'NOTES'
-  },
-
-  {
-    id: 'kms',
-    disablePadding: false,
-    label: 'KMS'
-  },
-  {
-    id: 'charges',
-    disablePadding: false,
-    label: 'Charges',
-    numeric: true
-  }
-];
 
 // ==============================|| MUI TABLE - ENHANCED ||============================== //
 
 export default function OrdersDetails() {
   const textFieldRef = useRef(null);
-  const [order, setOrder] = useState('asc');
+  const loadMoreRef = useRef();
-  const [orderBy, setOrderBy] = useState('calories');
+  const containerRef = useRef();
-  const [selected, setSelected] = useState([]);
-  const [page, setPage] = useState(0);
-  const [dense] = useState(false);
-  const [rowsPerPage, setRowsPerPage] = useState(20);
-  const [selectedValue, setSelectedValue] = useState([]);
-  const [locaName, setLocoName] = useState('All');
   const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
   const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
   const [open, setOpen] = useState(false);
-  const [open1, setOpen1] = useState(false);
-  const [dateselect, setDateselect] = useState('select');
-  const [tabstatus1, setTabstatus1] = useState('Today');
   const [datestatus, setDatestatus] = useState('Today');
   const [totalCharge, settotalCharge] = useState(0);
   const [totalAmount, settotalAmount] = useState(0);
-  const [appId, setAppId] = useState(-1);
-  const [value, setValue] = useState(0);
-  const [tabvalue, setTabvalue] = useState(0);
-  const [deliCount, setDeliCount] = useState(0);
-  const [pendCount, setPendCount] = useState(0);
-  const [cancelCount, setCancelCount] = useState(0);
   const [searchword, setSearchword] = useState('');
-  const [count, setCount] = useState(0);
   const theme = useTheme();
   const [riderCoordinates, setRiderCoordinates] = useState([]);
   const [riderStart, setRiderStart] = useState();
   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);
@@ -212,8 +96,9 @@ export default function OrdersDetails() {
   let [pickedLenght, setPickedLenght] = useState(0);
   let [activeLenght, setActiveLenght] = useState(0);
   let [arrivesLenght, setArrivedLenght] = useState(0);
-  const [statusCount, setStatusCount] = useState();
   const [currentStatus, setCurrentStatus] = useState('All');
+  const [statusLabel, setStatuslabel] = useState('All');
+  const [statusCount, setStatusCount] = useState(0);
 
   const status = [
     { id: 0, status: 'All', statusLow: 'All', count: total },
@@ -238,7 +123,6 @@ export default function OrdersDetails() {
         const coData = datas.map((data) => ({ lat: data.latitude, lng: data.longitude }));
         console.log('coData', coData);
         setRiderCoordinates(coData);
-        setOpen1(true);
       } else {
         opentoast('No Logs Found ', 'error', 2000);
       }
@@ -278,15 +162,87 @@ 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,
+    error: orderDetailsError,
+    fetchNextPage,
     isLoading: isLoadingOrderDetails,
-    isError: isErrorOrderDetails, //true or false
+    hasNextPage,
-    data: rows,
+    isFetchingNextPage
-    error: orderDetailsError
+    // status: rowdataStatus
-  } = useQuery({
+  } = useInfiniteQuery({
     queryKey: [startdate, enddate, currentStatus],
-    queryFn: fetchorderdetails
+    queryFn: fetchorderdetails,
+    getNextPageParam: (lastPage) => lastPage.nextPage
   });
+  const rows = rowdata?.pages.flatMap((page) => page.details) || [];
+
+  useEffect(() => {
+    if (!hasNextPage) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          fetchNextPage();
+        }
+      },
+      {
+        root: document.querySelector('.MuiTableContainer-root'), // 👈 or explicitly TableContainer
+        rootMargin: '0px',
+        threshold: 1.0
+      }
+    );
+
+    if (loadMoreRef.current) observer.observe(loadMoreRef.current);
+
+    return () => {
+      if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
+    };
+  }, [hasNextPage, fetchNextPage]);
+
+  // ==================================== || fetchDeliverySummary || ====================================
+
+  const {
+    data: deliverycount,
+    isLoading,
+    isError,
+    error
+  } = useQuery({
+    queryKey: ['deliverycount', startdate, enddate, currentStatus],
+    queryFn: fetchDeliverySummary
+  });
+
+  useEffect(() => {
+    console.log('currentStatus', currentStatus);
+
+    currentStatus == 'All'
+      ? setStatusCount(deliverycount?.total)
+      : currentStatus == 'pending'
+      ? setStatusCount(deliverycount?.pending)
+      : currentStatus == 'accepted'
+      ? setStatusCount(deliverycount?.accepted)
+      : currentStatus == 'arrived'
+      ? setStatusCount(deliverycount?.arrived)
+      : currentStatus == 'picked'
+      ? setStatusCount(deliverycount?.picked)
+      : currentStatus == 'active'
+      ? setStatusCount(deliverycount?.active)
+      : currentStatus == 'delivered'
+      ? setStatusCount(deliverycount?.delivered)
+      : currentStatus == 'cancelled'
+      ? setStatusCount(deliverycount?.cancelled)
+      : setStatusCount(0);
+  }, [currentStatus, deliverycount]);
 
   // ==============================|| calculate||============================== //
   const calculate = () => {
@@ -306,32 +262,12 @@ export default function OrdersDetails() {
   };
   useEffect(() => {
     calculate();
-    rows && setRowsPerPage(rows.length + 1);
-    rows && setCount(rows.length);
   }, [rows]);
-  // ==============================|| fetchOrdersCount (orders)||============================== //
 
-  const {
-    isLoading: isLoadingOrderCount,
-    isError: isErrorOrderCount, //true or false
-    data: countData,
-    error: orderCountError
-  } = useQuery({
-    queryKey: [startdate, enddate],
-    queryFn: fetchCount
-  });
-  useEffect(() => {
-    if (countData) {
-      setDeliCount(countData.deliveredCount);
-      setPendCount(countData.pendingCount);
-      setCancelCount(countData.cancelledCount);
-    }
-  }, [fetchCount, startdate, enddate]);
   // ==============================|| fetchAppLocations ||============================== //
 
-  if (isLoadingOrderDetails || isLoadingOrderCount) return <Loader />;
+  if (isLoadingOrderDetails) return <Loader />;
   if (isErrorOrderDetails) return 'An error has occurred:(isErrorOrderDetails) ' + orderDetailsError.message;
-  if (isErrorOrderCount) return 'An error has occurred:(isErrorOrderCount) ' + orderCountError.message;
 
   const filteredOrders = rows.filter((row) =>
     row.orderstatus == ''
@@ -389,8 +325,6 @@ export default function OrdersDetails() {
     locationcontactno: order.locationcontactno
   }));
 
-  const isSelected = (name) => selected.indexOf(name) !== -1;
-
   function formatDate(dateString) {
     const date = dayjs(dateString);
     const formattedDate = date.format('DD/MM/YYYY ');
@@ -401,6 +335,14 @@ export default function OrdersDetails() {
     const formattedDate = date.format(' hh:mm A');
     return formattedDate;
   }
+  const handleScroll = (event) => {
+    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      if (hasNextPage && !isFetchingNextPage) {
+        fetchNextPage();
+      }
+    }
+  };
   return (
     <>
       <TitleCard title="Orders Details" />
@@ -417,8 +359,8 @@ export default function OrdersDetails() {
             {startdate && enddate && (
               <Stack direction="row" spacing={2}>
                 <Badge
-                  badgeContent={`${filteredOrders.length}`}
+                  badgeContent={`${statusCount}`}
-                  max={`${count}`}
+                  max={99999}
                   color="primary"
                   sx={{
                     bgcolor: '#f3e5f5',
@@ -454,20 +396,17 @@ export default function OrdersDetails() {
               sx={{ minWidth: 200 }}
               disablePortal
               id="combo-box-demo"
-              label={currentStatus}
               options={status}
               getOptionLabel={(option) => `${option.status}`}
               onChange={(event, value, reason) => {
                 if (reason === 'clear') {
                   setCurrentStatus('All');
-                  setStatusCount(status[0].count);
                 } else {
                   console.log('status', value);
                   setCurrentStatus(value.statusLow);
-                  setStatusCount(value.count);
                 }
               }}
-              renderInput={(params) => <TextField {...params} label={'Select Status'} />}
+              renderInput={(params) => <TextField {...params} label={statusLabel || 'Select Status'} />}
             />
             <FormControl sx={{ width: 250 }}>
               <OutlinedInput
@@ -528,9 +467,11 @@ export default function OrdersDetails() {
 
       <MainCard content={false}>
         <TableContainer
+          onScroll={handleScroll}
+          ref={containerRef}
           sx={{
             minHeight: 'auto',
-            maxHeight: '67vh',
+            maxHeight: '65vh',
             overflow: 'auto',
             '&::-webkit-scrollbar': {
               width: '12px', // Width of vertical scrollbar
@@ -553,7 +494,7 @@ export default function OrdersDetails() {
             >
               <TableRow>
                 <TableCell sx={{ position: 'sticky !important' }}># </TableCell>
-                {/* <TableCell sx={{ position: 'sticky !important' }}>Map</TableCell> */}
+                <TableCell sx={{ position: 'sticky !important' }}>Map</TableCell>
                 <TableCell sx={{ whiteSpace: 'nowrap', position: 'sticky !important' }}>Tenant Name </TableCell>
                 <TableCell sx={{ position: 'sticky !important' }}>Pickup </TableCell>
                 <TableCell sx={{ position: 'sticky !important' }}> Drop </TableCell>
@@ -579,16 +520,12 @@ export default function OrdersDetails() {
                   </TableCell>
                 </>
               )}
-              {stableSort(filteredOrders, getComparator(order, orderBy))
+              {filteredOrders.map((row, index) => {
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row, index) => {
-                  if (typeof row === 'number') return null;
-                  const isItemSelected = isSelected(row.name);
                 return (
                   filteredOrders.length !== 0 && (
-                      <TableRow hover role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={row.name} selected={isItemSelected}>
+                    <TableRow>
                       <TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
-                        {/* <TableCell
+                      <TableCell
                         sx={{ width: '10px', cursor: 'pointer' }}
                         onClick={() => {
                           console.log('row', row);
@@ -598,7 +535,7 @@ export default function OrdersDetails() {
                         }}
                       >
                         {<SlLocationPin />}
-                        </TableCell> */}
+                      </TableCell>
                       <TableCell
                         sx={{
                           textAlign: 'start'
@@ -651,24 +588,14 @@ export default function OrdersDetails() {
                           {row.orderstatus === 'created' && <Chip label="Created" color="primary" size="small" sx={{ minWidth: 80 }} />}
                           {row.orderstatus === 'pending' && <Chip label="Pending" color="warning" size="small" sx={{ minWidth: 80 }} />}
                           {row.orderstatus === 'accepted' && (
-                              <Chip
+                            <Chip label="Accepted" size="small" sx={{ bgcolor: theme.palette.chip.accept, color: 'white', minWidth: 80 }} />
-                                label="Accepted"
-                                size="small"
-                                sx={{ bgcolor: theme.palette.chip.accept, color: 'white', minWidth: 80 }}
-                              />
                           )}
                           {row.orderstatus === 'arrived' && (
-                              <Chip
+                            <Chip label="Arrived" size="small" sx={{ bgcolor: theme.palette.chip.arrive, color: 'white', minWidth: 80 }} />
-                                label="Arrived"
-                                size="small"
-                                sx={{ bgcolor: theme.palette.chip.arrive, color: 'white', minWidth: 80 }}
-                              />
                           )}
                           {row.orderstatus === 'picked' && <Chip label="Picked" color="info" size="small" sx={{ minWidth: 80 }} />}
                           {row.orderstatus === 'active' && <Chip label="Active" color="info" size="small" sx={{ minWidth: 80 }} />}
-                            {row.orderstatus === 'delivered' && (
+                          {row.orderstatus === 'delivered' && <Chip label="Delivered" color="success" size="small" sx={{ minWidth: 80 }} />}
-                              <Chip label="Delivered" color="success" size="small" sx={{ minWidth: 80 }} />
-                            )}
 
                           {row.orderstatus === 'cancelled' && <Chip label="Cancelled" color="error" size="small" sx={{ minWidth: 80 }} />}
                         </Stack>
@@ -790,9 +717,17 @@ export default function OrdersDetails() {
                   )
                 );
               })}
+              <TableRow>
+                <TableCell colSpan={15} rowSpan={3}>
+                  <div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
+                    {isFetchingNextPage ? <CircularProgress /> : hasNextPage ? <CircularProgress /> : 'No more results'}
+                  </div>
+                </TableCell>
+              </TableRow>
             </TableBody>
           </Table>
         </TableContainer>
+
         <Divider />
       </MainCard>
       {/* ========================================= || bottom row || ========================================= */}
@@ -845,13 +780,11 @@ export default function OrdersDetails() {
             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) {