@bjsdistribution/dms-client-return 0.1.18-dev → 0.1.20-dev

package/dist/dms-client-return.esm.js

@@ -6,7 +6,7 @@ import { useAtom, atom } from 'jotai';
 import dayjs from 'dayjs';
 import { format, isValid } from 'date-fns';
 import { atomWithReducer } from 'jotai/utils';
-import { useAxios, CountItem, device, ExportButton, Checkbox as Checkbox$1, AntTable, Alert, useApiHook, AntModal, Label as Label$j, Input as Input$1, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, dropdownStyles, SelectDropdown, RadioButtonGroup as RadioButtonGroup$1, Switch, formatUtcToLocal, Button, SectionHeader, CrossIcon, AntSelect, CancelationModal, CancelAndCompleteAction, BackgroundModal as BackgroundModal$1, getBaseEndpoint, FlagAlert, ViewIcon, SearchIcon as SearchIcon$1 } from '@bjsdistribution/dms-component-library';
+import { useAxios, CountItem, device, ExportButton, useApiHook, Checkbox as Checkbox$1, AntTable, Alert, AntModal, Label as Label$j, Input as Input$1, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, dropdownStyles, SelectDropdown, RadioButtonGroup as RadioButtonGroup$1, Switch, formatUtcToLocal, Button, SectionHeader, CrossIcon, AntSelect, CancelationModal, CancelAndCompleteAction, BackgroundModal as BackgroundModal$1, getBaseEndpoint, FlagAlert, ViewIcon, SearchIcon as SearchIcon$1 } from '@bjsdistribution/dms-component-library';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { createPortal } from 'react-dom';
@@ -422,6 +422,10 @@ var selectedCPOrderlList = /*#__PURE__*/atom([]);
 function useSelectedClientPortOrders() {
   return useAtom(selectedCPOrderlList);
 }
+var selectedCPOrderAfterlList = /*#__PURE__*/atom([]);
+function useSelectedClientAfterOrders() {
+  return useAtom(selectedCPOrderAfterlList);
+}
 //start date and end date
 var startCPDate = /*#__PURE__*/atom( /*#__PURE__*/dayjs());
 function useStartDate() {
@@ -446,6 +450,18 @@ var searchAfter = /*#__PURE__*/atom('');
 var useSearchAfterText = function useSearchAfterText() {
   return useAtom(searchAfter);
 };
+var rclientReturnDataAtom = /*#__PURE__*/atom([]);
+function useClientOutstandingReturnData() {
+  return useAtom(rclientReturnDataAtom);
+}
+var returnConfirmedOrderAtom = /*#__PURE__*/atom([]);
+function useReturnConfirmedOrderData() {
+  return useAtom(returnConfirmedOrderAtom);
+}
+var statsCPCount = /*#__PURE__*/atom(null);
+function useStatsCPCount() {
+  return useAtom(statsCPCount);
+}
 function useCustomerData() {
   return useAtom(customerData);
 }
@@ -1551,18 +1567,22 @@ var ReturnStatus = function ReturnStatus() {
     dispatch = _useAtom[1];
   var _useParams = useParams(),
     status = _useParams.status;
-  var _useState = useState(),
-    count = _useState[0],
-    setCount = _useState[1];
+  var _useStatsCPCount = useStatsCPCount(),
+    count = _useStatsCPCount[0],
+    setCount = _useStatsCPCount[1];
   var _useStartDate = useStartDate(),
     startDate = _useStartDate[0];
   var _useEndDate = useEndDate(),
     endDate = _useEndDate[0];
   var _useClientPortal = useClientPortal(),
     clientPortal = _useClientPortal[0];
-  var _useState2 = useState([]),
-    modifiedFilters = _useState2[0],
-    setModifiedFilters = _useState2[1];
+  var _useState = useState([]),
+    modifiedFilters = _useState[0],
+    setModifiedFilters = _useState[1];
+  var _useSearchText = useSearchText(),
+    debouncedSearchText = _useSearchText[0];
+  var _useSearchAfterText = useSearchAfterText(),
+    debouncedSearchAfterText = _useSearchAfterText[0];
   var getDateFilters = function getDateFilters(startDate, endDate) {
     var stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
     var sDate = startDate != null && startDate.isValid != null && startDate.isValid() ? startDate : dayjs(stored == null ? void 0 : stored.startDate);
@@ -1606,6 +1626,24 @@ var ReturnStatus = function ReturnStatus() {
     statsData = _useAxios.data,
     apiLoading = _useAxios.loading,
     fetchData = _useAxios.fetchData;
+  var prevSearchTextRef = useRef('');
+  var prevSearchAfterTextRef = useRef('');
+  useEffect(function () {
+    var prev = prevSearchTextRef.current;
+    if (clientPortal && prev && debouncedSearchText === '') {
+      fetchData();
+    }
+    prevSearchTextRef.current = debouncedSearchText;
+  }, [debouncedSearchText, startDate, endDate]);
+  useEffect(function () {
+    var prev = prevSearchAfterTextRef.current;
+    if (clientPortal && prev && debouncedSearchAfterText === '') {
+      fetchData();
+    }
+    prevSearchAfterTextRef.current = debouncedSearchAfterText;
+  }, [debouncedSearchAfterText, startDate, endDate]);
+  console.log(debouncedSearchText, 'debouncedSearchText');
+  console.log(debouncedSearchAfterText, 'debouncedSearchAfterText');
   useEffect(function () {
     fetchData();
   }, [startDate, endDate]);
@@ -1635,12 +1673,15 @@ var ReturnStatus = function ReturnStatus() {
     label: 'Return Completed'
   }];
   var navigate = useNavigate();
+  var _useSearchAfterText2 = useSearchAfterText(),
+    setDebouncedSearchText = _useSearchAfterText2[1];
   var handleCardClick = function handleCardClick(item) {
     if (activeCardId === (item == null ? void 0 : item.id)) {
       return;
     }
     setActiveCardId(item == null ? void 0 : item.id);
     navigate("/return/" + (item == null ? void 0 : item.status));
+    setDebouncedSearchText('');
     if ((item == null ? void 0 : item.status) == 'scheduled_for_return') {
       dispatch({
         type: 'SET_SCHEDULED_RETURN_FILTER',
@@ -1771,8 +1812,13 @@ var ReturnRTFilters = function ReturnRTFilters() {
     state = _useAtom2[0];
   var _useReturnAfterOrderD = useReturnAfterOrderData(),
     returnAfterOrder = _useReturnAfterOrderD[0];
+  // const [selectedReturnOrder] = useSelectedClientPortOrders();
+  var _useSelectedClientAft = useSelectedClientAfterOrders(),
+    selectedOrderIds = _useSelectedClientAft[0],
+    setSelectedOrderIds = _useSelectedClientAft[1];
   var _useSelectedClientPor = useSelectedClientPortOrders(),
-    selectedReturnOrder = _useSelectedClientPor[0];
+    selectedPendingOrderIds = _useSelectedClientPor[0],
+    setSelectedPendingOrderIds = _useSelectedClientPor[1];
   var _useParams = useParams(),
     status = _useParams.status;
   var pendingFilters = pendingState['x-filters'];
@@ -1799,20 +1845,16 @@ var ReturnRTFilters = function ReturnRTFilters() {
       feature_name: 'return'
     };
   }
-  // console.log(selectedReturnOrder, 'selectedReturnOrder');
   //Export Manifest
-  var onlyIds = selectedReturnOrder == null ? void 0 : selectedReturnOrder.map(function (item) {
-    return item.id;
-  });
-  var isExportEnabled = (onlyIds == null ? void 0 : onlyIds.length) > 0;
+  var isExportEnabled = status === 'outstanding_return' ? (selectedPendingOrderIds == null ? void 0 : selectedPendingOrderIds.length) > 0 : status === 'scheduled_for_return' || status === 'return_completed' ? (selectedOrderIds == null ? void 0 : selectedOrderIds.length) > 0 : false;
   var _useAxios = useAxios({
       endpoint: "/v1/orders/import/manifest/csv/",
       method: 'POST'
     }),
     callExportApi = _useAxios.fetchData;
-  var handleExport = /*#__PURE__*/function () {
+  var handleExportManifest = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var _response$data, response, resourceUrl, downloadResponse, blob, urlObject, link, contentDisposition, filenameMatch, filename;
+      var exportOrderIds, _response$data, response, _response$data2;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -1822,80 +1864,55 @@ var ReturnRTFilters = function ReturnRTFilters() {
             }
             return _context.abrupt("return");
           case 2:
-            _context.prev = 2;
-            _context.next = 5;
+            exportOrderIds = status === 'outstanding_return' ? selectedPendingOrderIds : status === 'scheduled_for_return' || status === 'return_completed' ? selectedOrderIds : [];
+            _context.prev = 3;
+            _context.next = 6;
             return callExportApi({
               payload: {
-                order_ids: onlyIds
+                order_ids: exportOrderIds
               }
             });
-          case 5:
+          case 6:
             response = _context.sent;
-            if (!(response != null && (_response$data = response.data) != null && _response$data.url)) {
-              _context.next = 31;
-              break;
-            }
-            notification.success({
-              message: 'Success',
-              description: (response == null ? void 0 : response.message) || 'Export completed.'
-            });
-            // setSelectedIds([]);
-            resourceUrl = response.data.url;
-            _context.next = 11;
-            return fetch(resourceUrl);
-          case 11:
-            downloadResponse = _context.sent;
-            if (downloadResponse.ok) {
-              _context.next = 14;
-              break;
+            if (response != null && (_response$data = response.data) != null && _response$data.url) {
+              notification.success({
+                message: 'Success',
+                description: (response == null ? void 0 : response.message) || 'Export completed.'
+              });
+              window.open(response == null || (_response$data2 = response.data) == null ? void 0 : _response$data2.url, '_blank');
+              if (status === 'outstanding_return') {
+                setSelectedPendingOrderIds([]);
+              } else if (status === 'scheduled_for_return' || status === 'return_completed') {
+                setSelectedOrderIds([]);
+              }
+            } else {
+              notification.error({
+                message: 'No File URL',
+                description: 'Export succeeded but no download URL was returned.'
+              });
             }
-            throw new Error('Failed to fetch the export file.');
-          case 14:
-            _context.next = 16;
-            return downloadResponse.blob();
-          case 16:
-            blob = _context.sent;
-            urlObject = window.URL.createObjectURL(blob);
-            link = document.createElement('a');
-            link.href = urlObject;
-            // You can customize the filename or extract it from headers
-            contentDisposition = downloadResponse.headers.get('Content-Disposition');
-            filenameMatch = contentDisposition == null ? void 0 : contentDisposition.match(/filename="?(.+)"?/);
-            filename = (filenameMatch == null ? void 0 : filenameMatch[1]) || 'download.csv';
-            link.download = filename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            window.URL.revokeObjectURL(urlObject);
-            notification.success({
-              message: 'Downloaded',
-              description: 'File downloaded successfully.'
-            });
-            _context.next = 32;
+            _context.next = 15;
             break;
-          case 31:
-            notification.error({
-              message: 'No File URL',
-              description: 'Export succeeded but no download URL was returned.'
-            });
-          case 32:
-            _context.next = 38;
-            break;
-          case 34:
-            _context.prev = 34;
-            _context.t0 = _context["catch"](2);
+          case 10:
+            _context.prev = 10;
+            _context.t0 = _context["catch"](3);
             console.error('Error during export or download:', _context.t0);
             notification.error({
               message: 'Export Failed',
               description: 'Something went wrong during export.'
             });
-          case 38:
+            if (status === 'outstanding_return') {
+              setSelectedPendingOrderIds([]);
+            } else if (status === 'scheduled_for_return' || status === 'return_completed') {
+              setSelectedOrderIds([]);
+            }
+          case 15:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[2, 34]]);
+      }, _callee, null, [[3, 10]]);
     }));
-    return function handleExport() {
+    return function handleExportManifest() {
       return _ref.apply(this, arguments);
     };
   }();
@@ -1904,12 +1921,16 @@ var ReturnRTFilters = function ReturnRTFilters() {
   }, React.createElement(ExportButton, {
     moduleInfoModule: moduleInfo
   }), React.createElement(StyledBulkItem, {
-    onClick: handleExport
+    onClick: handleExportManifest,
+    style: {
+      pointerEvents: isExportEnabled ? 'auto' : 'none',
+      opacity: isExportEnabled ? 1 : 0.5
+    }
   }, React.createElement(Text$1, null, "Export Manifest")));
 };
 var Text$1 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  text-align: center;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n"])));
 var StyledBulkFilterCover = /*#__PURE__*/styled.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 100px;\n  border: 1px solid rgba(208, 213, 221, 0.5);\n  background: #fff;\n  display: flex;\n  min-height: 40px;\n  // gap: 8px;\n"])));
-var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  border-right: 1px solid #d0d5dd;\n  gap: 8px;\n  position: relative;\n  a {\n    text-decoration: none;\n  }\n  &.disabled {\n    /* opacity: 0.5; */\n    width: 150px;\n    cursor: default;\n    a {\n      cursor: default;\n\n      label {\n        cursor: default;\n      }\n    }\n  }\n  @media screen and (max-width: 1030px) {\n    padding: 6px 4px;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    box-sizing: border-box;\n    top: 54px;\n  }\n  &:last-child {\n    border-right: none;\n  }\n  &.active svg.arrowDown {\n    transform: rotate(180deg);\n  }\n  label {\n    color: #3a3630;\n    text-align: center;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 18px;\n    cursor: pointer;\n  }\n\n  &.noPadding {\n    padding: 0;\n  }\n"])));
+var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 6px 12px;\n  display: flex;\n  align-items: center;\n  border-right: 1px solid #d0d5dd;\n  gap: 8px;\n  position: relative;\n  a {\n    text-decoration: none;\n  }\n  &.disabled {\n    /* opacity: 0.5; */\n    width: 150px;\n    cursor: default;\n    a {\n      cursor: default;\n\n      label {\n        cursor: default;\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    background: #f0f0f0;\n    cursor: pointer;\n  }\n\n  @media screen and (max-width: 1030px) {\n    padding: 6px 4px;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    box-sizing: border-box;\n    top: 54px;\n  }\n  &:last-child {\n    border-right: none;\n  }\n  &.active svg.arrowDown {\n    transform: rotate(180deg);\n  }\n  label {\n    color: #3a3630;\n    text-align: center;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 18px;\n    cursor: pointer;\n  }\n\n  &.noPadding {\n    padding: 0;\n  }\n"])));
 
 var ReturnFilter = function ReturnFilter() {
   var _useCustomerData = useCustomerData(),
@@ -2227,7 +2248,8 @@ var ClearAll = /*#__PURE__*/styled.div(_templateObject35 || (_templateObject35 =
 var StyledFilterBtnIcon = /*#__PURE__*/styled.div(_templateObject36 || (_templateObject36 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 24px;\n  height: 24px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n  border: 1px solid #e2e0db;\n  background: #b2b3b3;\n  .cross {\n    position: relative;\n    &:after {\n      display: inline-block;\n      content: 'X';\n      font-style: normal;\n      font-size: 14px;\n      color: #000;\n    }\n  }\n"])));
 var StyledFilterBtnLabel = /*#__PURE__*/styled.div(_templateObject37 || (_templateObject37 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  white-space: nowrap;\n"])));
 
-var _templateObject19, _templateObject20, _templateObject21;
+var _templateObject18, _templateObject19, _templateObject20, _templateObject21;
+var EmptyDataContainer$1 = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var StyledTable$1 = /*#__PURE__*/styled.table(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  /* min-width: 1600px; */\n  thead {\n    white-space: nowrap;\n    position: sticky;\n    top: 10px;\n    z-index: 1;\n    background: #fff;\n    box-shadow: 0px 0px 1px #ffffff, 0px -10px 1px #ffffff;\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      position: relative;\n      font-family: 'lato', sans-serif;\n      .emailInvoiceCheckbox {\n        padding-right: 0px;\n        width: 0;\n        > div {\n          width: fit-content;\n        }\n      }\n      .custom-check {\n        position: absloute;\n      }\n      .emailInvoiceNo {\n        padding-left: 0px;\n      }\n      .emailInvoiceShare {\n        width: 100px;\n      }\n      th {\n        color: #3a3630;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: normal;\n        padding: 11px 15px;\n        background: #f0f2f2;\n        border-right: none;\n        border-left: none;\n        text-align: left;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-width: 1px 0;\n        &:first-child {\n          border-radius: 100px 0 0 100px;\n          border-left: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        &:last-child {\n          border-radius: 0px 100px 100px 0;\n          border-right: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        .sortIconClass {\n          cursor: pointer;\n          display: flex;\n        }\n      }\n    }\n  }\n  tbody {\n    max-height: 400px;\n    overflow-y: auto;\n    tr {\n      td {\n        color: #3a3630;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: normal;\n        padding: 12px 15px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-right: none;\n        border-left: none;\n        position: relative;\n        .actionbox {\n          display: flex;\n          gap: 5px;\n        }\n        .shareIconContainer {\n          display: flex;\n          padding: 2px 12px;\n          align-items: center;\n          gap: 8px;\n          border-radius: 20px;\n          border: 1px solid var(--tonal-brown-101, #e2e0db);\n          background: #fff;\n          list-style-type: none;\n          /* padding-left: 0; */\n          /* fontWeight: 600,\n          paddingLeft: 0, */\n          cursor: pointer;\n          position: relative;\n        }\n        .statusCancelled {\n          color: #e95252;\n          /* background: rgba(233, 82, 82, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOnHold {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusSubContracted {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusAwaiting {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusCompleted {\n          color: #1f9254;\n          /* background: rgba(41, 204, 106, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOutstanding {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusUnknown {\n          color: #000;\n          /* background: #fff; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n        .statustext {\n          color: #1f9254;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: normal;\n        }\n        .downloadcontainer {\n          display: flex;\n          padding: 2px 12px;\n          align-items: center;\n\n          width: 28px;\n          height: 28px;\n          flex-direction: column;\n\n          border-radius: 14px;\n          border: 1px solid #e2e0db;\n          background: #fff;\n        }\n        .statuscontainer {\n          display: flex;\n          padding: 5px 30px 5px 30px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          flex: 1 0 0;\n          border-radius: 22px;\n          background: rgba(41, 204, 106, 0.15);\n        }\n        .awaiting {\n          display: flex;\n          min-width: 85px;\n          padding: 6px 10px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          border-radius: 22px;\n          background: rgba(233, 82, 82, 0.15);\n          color: #e95252;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-weight: 600;\n        }\n        ul > li > a {\n          text-decoration: none !important;\n          color: #0099ff;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
 // Styled components
 var StyledTableWrapper$1 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: 60vh;\n  overflow-x: auto;\n  // min-height: 50vh;\n\n  .fortables {\n    max-height: 60vh;\n    overflow-x: auto;\n    min-height: 50vh;\n  }\n  /* height: 600px; */\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
@@ -2270,23 +2292,10 @@ var ReturnOrderTable = function ReturnOrderTable() {
     setPaginationObject = _UsePaginationData[1];
   var _usefetchAgain = usefetchAgain(),
     callForFetch = _usefetchAgain[0];
-  var _useClientPortal = useClientPortal(),
-    clientPortal = _useClientPortal[0];
-  var _useParams = useParams(),
-    status = _useParams.status;
-  var _useSelectedClientPor = useSelectedClientPortOrders(),
-    selectedOrderIds = _useSelectedClientPor[0],
-    setSelectedOrderIds = _useSelectedClientPor[1];
-  var _useState = useState(false),
-    selectClientAll = _useState[0],
-    setSelectClientAll = _useState[1];
-  var _useState2 = useState([]),
-    modifiedFilters = _useState2[0],
-    setModifiedFilters = _useState2[1];
   //sorting
-  var _useState3 = useState(null),
-    sortConfig = _useState3[0],
-    setSortConfig = _useState3[1];
+  var _useState = useState(null),
+    sortConfig = _useState[0],
+    setSortConfig = _useState[1];
   var handleSort = function handleSort(key) {
     setSortConfig(function (prev) {
       if ((prev == null ? void 0 : prev.key) === key && prev.direction === 'asc') {
@@ -2340,56 +2349,17 @@ var ReturnOrderTable = function ReturnOrderTable() {
       setPrintToggle(null);
     }
   };
-  //CP
-  var _useStartDate = useStartDate(),
-    startDate = _useStartDate[0];
-  var _useEndDate = useEndDate(),
-    endDate = _useEndDate[0];
-  useEffect(function () {
-    if (!clientPortal) return;
-    var stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
-    var sDate = startDate != null && startDate.isValid != null && startDate.isValid() ? startDate : dayjs(stored == null ? void 0 : stored.startDate);
-    var eDate = endDate != null && endDate.isValid != null && endDate.isValid() ? endDate : stored != null && stored.endDate ? dayjs(stored == null ? void 0 : stored.endDate) : null;
-    if (!(sDate != null && sDate.isValid != null && sDate.isValid())) return;
-    var dateFilters = [];
-    if (eDate && eDate.isValid()) {
-      dateFilters = [{
-        field: 'created_at',
-        op: '>=',
-        value: sDate.format('YYYY-MM-DD')
-      }, {
-        field: 'created_at',
-        op: '<=',
-        value: eDate.add(1, 'day').format('YYYY-MM-DD')
-      }];
-    } else {
-      dateFilters = [{
-        field: 'created_at',
-        op: '=',
-        value: sDate.format('YYYY-MM-DD')
-      }];
-    }
-    var updatedFilters = status === 'outstanding_return' ? [{
-      field: 'isdeleted',
-      op: '=',
-      value: 0
-    }, {
-      field: 'product_return_action_id',
-      op: '=',
-      value: 'RTS'
-    }].concat(dateFilters) : dateFilters;
-    setModifiedFilters(updatedFilters);
-  }, [startDate, endDate, status]);
-  var _useAxios = useAxios({
+  var _useApiHook = useApiHook({
       endpoint: '/v1/return/product/pending/',
       method: 'GET',
-      filters: clientPortal ? modifiedFilters : filters,
-      pagination: pagination
+      filters: filters,
+      pagination: pagination,
+      performAction: false
     }),
-    fetchedOrderData = _useAxios.data,
-    returnDataLoad = _useAxios.loading,
-    paginationData = _useAxios.paginationData,
-    fetchData = _useAxios.fetchData;
+    fetchedOrderData = _useApiHook.data,
+    returnDataLoad = _useApiHook.loading,
+    paginationData = _useApiHook.paginationData,
+    setShouldPerformAction = _useApiHook.setShouldPerformAction;
   useEffect(function () {
     setLoading(returnDataLoad);
     if (fetchedOrderData && fetchedOrderData != null && fetchedOrderData.data) {
@@ -2415,20 +2385,9 @@ var ReturnOrderTable = function ReturnOrderTable() {
       }
     }
   }, [fetchedOrderData, returnDataLoad]);
-  useEffect(function () {
-    if (!clientPortal) {
-      fetchData();
-    }
-  }, []);
-  var _useSearchText = useSearchText(),
-    debouncedSearchText = _useSearchText[0];
-  useEffect(function () {
-    if (clientPortal && debouncedSearchText == '') {
-      fetchData();
-    }
-  }, [debouncedSearchText]);
   useEffect(function () {
     setLoading(returnDataLoad);
+    setShouldPerformAction(true);
     if (fetchedOrderData && fetchedOrderData != null && fetchedOrderData.data && locationData) {
       var updatedReturnData = fetchedOrderData.data.map(function (returnItem) {
         var matchingLocation = locationData.find(function (location) {
@@ -2449,7 +2408,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
       var filteredData = returnData == null ? void 0 : returnData.filter(function (loc) {
         return (loc == null ? void 0 : loc.product_return_action) === 'RTS';
       });
-      var selectedOrders = filteredData == null ? void 0 : filteredData.map(function (loc) {
+      var selectedOrders = filteredData.map(function (loc) {
         return {
           id: loc.id,
           return_locations: loc == null ? void 0 : loc.return_location_name,
@@ -2547,25 +2506,6 @@ var ReturnOrderTable = function ReturnOrderTable() {
     var mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-  //Client Portal
-  var handleSelectOrderId = function handleSelectOrderId(id) {
-    setSelectedOrderIds(function (prev) {
-      return prev.includes(id) ? prev.filter(function (orderId) {
-        return orderId !== id;
-      }) : [].concat(prev, [id]);
-    });
-  };
-  var handleClientSelectAll = function handleClientSelectAll(e) {
-    var isChecked = e.target.checked;
-    setSelectClientAll(isChecked);
-    if (isChecked) {
-      setSelectedOrderIds((returnData == null ? void 0 : returnData.map(function (item) {
-        return item == null ? void 0 : item.order_id;
-      })) || []);
-    } else {
-      setSelectedOrderIds([]);
-    }
-  };
   return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
     className: "fortables"
   }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, returnData != null && returnData.some(function (item) {
@@ -2575,12 +2515,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
   }, React.createElement(Checkbox$1, {
     checked: selectAll,
     onChange: handleSelectAll
-  })) : clientPortal ? React.createElement("th", {
-    className: "emailInvoiceCheckbox"
-  }, React.createElement(Checkbox$1, {
-    checked: selectClientAll,
-    onChange: handleClientSelectAll
-  })) : React.createElement("th", null), !clientPortal && React.createElement("th", {
+  })) : React.createElement("th", null), React.createElement("th", {
     onClick: function onClick() {
       return handleSort('location');
     }
@@ -2627,20 +2562,15 @@ var ReturnOrderTable = function ReturnOrderTable() {
   }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : sortedData == null ? void 0 : sortedData.map(function (item, index) {
     return React.createElement("tr", {
       key: item.id
-    }, React.createElement("td", null, clientPortal ? React.createElement(Checkbox$1, {
-      checked: selectedOrderIds.includes(item == null ? void 0 : item.order_id),
-      onChange: function onChange() {
-        return handleSelectOrderId(item == null ? void 0 : item.order_id);
-      }
-    }) : React.createElement(React.Fragment, null, (item == null ? void 0 : item.product_return_action) === 'RTS' ? React.createElement(Checkbox$1, {
+    }, React.createElement("td", null, (item == null ? void 0 : item.product_return_action) === 'RTS' ? React.createElement(Checkbox$1, {
       className: "custom-check",
-      checked: selectedReturnOrder == null ? void 0 : selectedReturnOrder.some(function (selectedInvoice) {
+      checked: selectedReturnOrder.some(function (selectedInvoice) {
         return (selectedInvoice == null ? void 0 : selectedInvoice.id) === (item == null ? void 0 : item.id);
       }),
       onChange: function onChange() {
         return handleSelectOrderReturn(item == null ? void 0 : item.id, item == null ? void 0 : item.return_location, item == null ? void 0 : item.return_location_name, item == null ? void 0 : item.product_return_action, item == null ? void 0 : item.legacy_product_id);
       }
-    }) : null)), !clientPortal && React.createElement("td", null, (item == null ? void 0 : item.location) !== null && (item == null ? void 0 : item.location) !== undefined ? item == null ? void 0 : item.location : React.createElement("div", {
+    }) : null), React.createElement("td", null, (item == null ? void 0 : item.location) !== null && (item == null ? void 0 : item.location) !== undefined ? item == null ? void 0 : item.location : React.createElement("div", {
       className: "awaiting"
     }, "Awaiting")), React.createElement("td", null, " ", displayValueOrNA(item == null ? void 0 : item.return_location_name)), React.createElement("td", null, React.createElement("ul", {
       style: {
@@ -3384,8 +3314,6 @@ var OrderTable = function OrderTable() {
     setCallAPi = _useCallApiAgain[1];
   var _useLoading = useLoading(),
     loading = _useLoading[0];
-  var _useClientPortal = useClientPortal(),
-    clientPortal = _useClientPortal[0];
   //sorting
   var _useState2 = useState(null),
     sortConfig = _useState2[0],
@@ -3577,7 +3505,7 @@ var OrderTable = function OrderTable() {
     }
   }, React.createElement("div", {
     className: "sortIconClass"
-  }, "Return Location ", renderSortIcon('return_location_name'))), !clientPortal && React.createElement("th", null, "Pick Up Location"), React.createElement("th", {
+  }, "Return Location ", renderSortIcon('return_location_name'))), React.createElement("th", null, "Pick Up Location"), React.createElement("th", {
     onClick: function onClick() {
       return handleSort('recipient_name');
     }
@@ -3595,7 +3523,7 @@ var OrderTable = function OrderTable() {
     }
   }, React.createElement("div", {
     className: "sortIconClass"
-  }, "Total CBM ", renderSortIcon('cube'))), !clientPortal && React.createElement("th", null, "Assign"), React.createElement("th", null, "Status"), React.createElement("th", {
+  }, "Total CBM ", renderSortIcon('cube'))), React.createElement("th", null, "Assign"), React.createElement("th", null, "Status"), React.createElement("th", {
     className: "emailInvoiceShare"
   }, "Labels"))), React.createElement("tbody", null, loading ? React.createElement("tr", null, React.createElement("td", {
     colSpan: 16
@@ -3622,7 +3550,7 @@ var OrderTable = function OrderTable() {
     var statusClass = getStatusClass(status);
     return React.createElement("tr", {
       key: item.id
-    }, React.createElement("td", null, formatDate(new Date(item == null ? void 0 : item.created_at))), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.return_location_name)), !clientPortal && React.createElement("td", null, item != null && (_item$locations = item.locations) != null && _item$locations.length ? item == null ? void 0 : item.locations.join(', ') : 'N/A'), React.createElement("td", {
+    }, React.createElement("td", null, formatDate(new Date(item == null ? void 0 : item.created_at))), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.return_location_name)), React.createElement("td", null, item != null && (_item$locations = item.locations) != null && _item$locations.length ? item == null ? void 0 : item.locations.join(', ') : 'N/A'), React.createElement("td", {
       onClick: function onClick() {
         return setOrderId(item.id);
       }
@@ -3643,7 +3571,7 @@ var OrderTable = function OrderTable() {
       style: {
         color: '#888075'
       }
-    }, displayValueOrNA(item == null ? void 0 : item.postcode)))), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.customer_name)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.consignment)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.order_number)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.total_products)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.weight), ' ', item != null && item.weight && (item == null ? void 0 : item.weight) > 0 ? 'KG' : ''), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.cube)), !clientPortal && React.createElement("td", {
+    }, displayValueOrNA(item == null ? void 0 : item.postcode)))), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.customer_name)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.consignment)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.order_number)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.total_products)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.weight), ' ', item != null && item.weight && (item == null ? void 0 : item.weight) > 0 ? 'KG' : ''), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.cube)), React.createElement("td", {
       key: item.id
     }, React.createElement(StyledAntSelect$1, {
       options: assignOptions,
@@ -4133,6 +4061,7 @@ var _templateObject$f, _templateObject2$b;
 var _excluded$3 = ["count"];
 var ReturnAfterTable = function ReturnAfterTable() {
   var _useReturnAfterOrderD = useReturnAfterOrderData(),
+    returnAfterOrder = _useReturnAfterOrderD[0],
     setReturnOrderData = _useReturnAfterOrderD[1];
   var _useLoading = useLoading(),
     setLoading = _useLoading[1];
@@ -4153,48 +4082,30 @@ var ReturnAfterTable = function ReturnAfterTable() {
     setPaginationObject = _UsePaginationData[1];
   var page = paginationObj.page,
     total = paginationObj.total;
-  var _useClientPortal = useClientPortal(),
-    clientPortal = _useClientPortal[0];
-  var _useSearchAfterText = useSearchAfterText(),
-    debouncedSearchText = _useSearchAfterText[0];
   var handlePageChange = function handlePageChange(page) {
     setCurrentPage(page);
   };
   var handleItemsPerPageChange = function handleItemsPerPageChange(itemsPerPage) {
     setItemsPerPage(itemsPerPage);
   };
-  var _useParams = useParams(),
-    status = _useParams.status;
-  var _useAxios = useAxios({
+  var _useApiHook = useApiHook({
       endpoint: '/v1/return/orders/',
       method: 'GET',
       filters: filters && (filters == null ? void 0 : filters.length) > 0 ? filters : undefined,
-      pagination: pagination
+      pagination: pagination,
+      performAction: false
     }),
-    fetchedReturnOrderData = _useAxios.data,
-    loading = _useAxios.loading,
-    paginationData = _useAxios.paginationData,
-    fetchData = _useAxios.fetchData;
+    fetchedReturnOrderData = _useApiHook.data,
+    loading = _useApiHook.loading,
+    setShouldPerformAction = _useApiHook.setShouldPerformAction,
+    paginationData = _useApiHook.paginationData;
   useEffect(function () {
-    if (callApi) {
-      fetchData();
-    }
+    callApi ? setShouldPerformAction(true) : setShouldPerformAction(false);
   }, [callApi]);
-  useEffect(function () {
-    if (!clientPortal) {
-      fetchData();
-    }
-  }, []);
-  //CP
-  useEffect(function () {
-    if (clientPortal && debouncedSearchText.trim().length === 0) {
-      fetchData();
-    }
-  }, [debouncedSearchText, clientPortal, status]);
   useEffect(function () {
     setLoading(loading);
-    if (fetchedReturnOrderData != null && fetchedReturnOrderData.data && (!clientPortal || debouncedSearchText.trim().length === 0)) {
-      setReturnOrderData(fetchedReturnOrderData.data);
+    if (fetchedReturnOrderData && fetchedReturnOrderData != null && fetchedReturnOrderData.data) {
+      setReturnOrderData(fetchedReturnOrderData == null ? void 0 : fetchedReturnOrderData.data);
       if (paginationData) {
         try {
           var _JSON$parse = JSON.parse(paginationData),
@@ -4202,17 +4113,23 @@ var ReturnAfterTable = function ReturnAfterTable() {
             rest = _objectWithoutPropertiesLoose(_JSON$parse, _excluded$3);
           setPaginationObject(rest);
         } catch (error) {
+          console.error('Error parsing paginationData:', error);
           notification.error({
             message: 'Error',
             description: 'Failed to parse pagination data'
           });
         }
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null or undefined'
+        });
       }
     }
-  }, [fetchedReturnOrderData, loading]);
+  }, [fetchedReturnOrderData, loading, returnAfterOrder]);
   return React.createElement("div", null, React.createElement(DashBoardWrapper$1, null, React.createElement("div", {
     className: "Tableconatiner"
-  }, React.createElement(Container$4, null, !clientPortal && React.createElement(ReturnOrderFilter, null), React.createElement(OrderTable, null), total > 0 && React.createElement(ReturnPagination, {
+  }, React.createElement(Container$4, null, React.createElement(ReturnOrderFilter, null), React.createElement(OrderTable, null), total > 0 && React.createElement(ReturnPagination, {
     currentPage: page,
     totalItems: total,
     itemsPerPage: itemsPerPage,
@@ -7817,7 +7734,7 @@ var _templateObject$1m, _templateObject2$$, _templateObject3$w;
 // Styled components
 var StyledTableWrapper$2 = /*#__PURE__*/styled.div(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 290px);\n  scrollbar-width: none;\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
 var StyledTable$2 = /*#__PURE__*/styled.table(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  padding: 10px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      th {\n        color: #3a3630;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: normal;\n        padding: 5px 15px;\n        background: #f0f2f2;\n        border-right: none;\n        border-left: none;\n        text-align: left;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-width: 1px 0;\n        text-transform: capitalize;\n        &:first-child {\n          border-radius: 100px 0 0 100px;\n          border-left: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        &:last-child {\n          border-radius: 0px 100px 100px 0;\n          border-right: 1px solid rgba(0, 0, 0, 0.08);\n        }\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        color: #3a3630;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: normal;\n        padding: 12px 15px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-right: none;\n        border-left: none;\n      }\n      .link {\n        color: #09f;\n        font-family: Roboto;\n        font-weight: 400;\n        cursor: pointer;\n      }\n      td {\n        .flex {\n          display: flex;\n          gap: 4px;\n          align-items: center;\n        }\n        .overDue {\n          border-radius: 20px;\n          border: 1px solid #edebe8;\n          background: #fff;\n          padding: 4px 8px;\n          color: #e95252;\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 16px;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .emptyTd {\n        border-radius: 100px !important;\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
-var EmptyDataContainer$1 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var EmptyDataContainer$2 = /*#__PURE__*/styled.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 
 function SplitOrderTable() {
   var _useProductDetails = useProductDetails(),
@@ -7885,7 +7802,7 @@ function SplitOrderTable() {
   })) : (orderProductDetails == null ? void 0 : orderProductDetails.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 7
-  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, {
+  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, {
     description: "No Data Found"
   })))) : (orderProductDetails == null ? void 0 : orderProductDetails.length) > 0 && (orderProductDetails == null ? void 0 : orderProductDetails.map(function (order) {
     var _order$order_product_;
@@ -8460,7 +8377,7 @@ function ChargeLog() {
   })) : (fetchedData == null || (_fetchedData$data = fetchedData.data) == null ? void 0 : _fetchedData$data.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 7
-  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, null)))) : fetchedData == null || (_fetchedData$data2 = fetchedData.data) == null ? void 0 : _fetchedData$data2.map(function (order) {
+  }, React.createElement(EmptyDataContainer$3, null, React.createElement(Empty, null)))) : fetchedData == null || (_fetchedData$data2 = fetchedData.data) == null ? void 0 : _fetchedData$data2.map(function (order) {
     var _order$status, _order$status2;
     var label = order == null || (_order$status = order.status) == null ? void 0 : _order$status.split(':')[0];
     var val = order == null || (_order$status2 = order.status) == null ? void 0 : _order$status2.split(':')[1];
@@ -8476,7 +8393,7 @@ function ChargeLog() {
 // Styled components
 var StyledTableWrapper$3 = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 290px);\n  scrollbar-width: none;\n  width: 100%;\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
 var StyledTable$3 = /*#__PURE__*/styled.table(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  padding: 10px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      th {\n        color: #3a3630;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: normal;\n        padding: 5px 15px;\n        background: #f0f2f2;\n        border-right: none;\n        border-left: none;\n        text-align: left;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-width: 1px 0;\n        text-transform: capitalize;\n        &:first-child {\n          border-radius: 100px 0 0 100px;\n          border-left: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        &:last-child {\n          border-radius: 0px 100px 100px 0;\n          border-right: 1px solid rgba(0, 0, 0, 0.08);\n        }\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        color: #3a3630;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: normal;\n        padding: 12px 15px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-right: none;\n        border-left: none;\n      }\n      .link {\n        color: #09f;\n        font-family: Roboto;\n        font-weight: 400;\n        .linkHover {\n          cursor: pointer;\n        }\n      }\n      td {\n        .flex {\n          display: flex;\n          gap: 4px;\n          align-items: center;\n        }\n        .overDue {\n          border-radius: 20px;\n          border: 1px solid #edebe8;\n          background: #fff;\n          padding: 4px 8px;\n          color: #e95252;\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 16px;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .emptyTd {\n        border-radius: 100px !important;\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
-var EmptyDataContainer$2 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+var EmptyDataContainer$3 = /*#__PURE__*/styled.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 var Value = /*#__PURE__*/styled.span(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #29cc6a;\n"])));
 
 var _templateObject$1w, _templateObject2$16, _templateObject3$D, _templateObject4$i, _templateObject5$d;
@@ -8536,7 +8453,7 @@ var CancelOrderTable = function CancelOrderTable() {
   }))) : (cancelOrderProducts == null ? void 0 : cancelOrderProducts.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 4
-  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, null)))) : cancelOrderProducts == null ? void 0 : cancelOrderProducts.map(function (product) {
+  }, React.createElement(EmptyDataContainer$3, null, React.createElement(Empty, null)))) : cancelOrderProducts == null ? void 0 : cancelOrderProducts.map(function (product) {
     var dropdownOptions = (product == null ? void 0 : product.product_type) === 'deliver' ? deliverTypeOptions : collectTypeOptions;
     var isReturn = (product == null ? void 0 : product.action) === 'return';
     return React.createElement("tr", {
@@ -9285,7 +9202,7 @@ function ProductTable$1() {
   })) : (orderProductDetails == null ? void 0 : orderProductDetails.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 7
-  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, null)))) : orderProductDetails == null ? void 0 : orderProductDetails.map(function (order) {
+  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, null)))) : orderProductDetails == null ? void 0 : orderProductDetails.map(function (order) {
     var _order$order_product_;
     return React.createElement("tr", {
       key: order.id
@@ -9375,7 +9292,7 @@ function NotesTable() {
   })) : (notes == null ? void 0 : notes.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 7
-  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, null)))) : notes == null ? void 0 : notes.map(function (order) {
+  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, null)))) : notes == null ? void 0 : notes.map(function (order) {
     return React.createElement("tr", {
       key: order.id
     }, React.createElement("td", null, React.createElement("div", {
@@ -9806,7 +9723,7 @@ function ConfirmOrder() {
 var Wrapper$h = /*#__PURE__*/styled.div(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
 var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n  scrollbar-width: thin;\n"])));
 
-var _templateObject2$1l, _templateObject3$L, _templateObject5$f, _templateObject6$7, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject18, _templateObject19$1;
+var _templateObject2$1l, _templateObject3$L, _templateObject5$f, _templateObject6$7, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject18$1, _templateObject19$1;
 var StyledInput = /*#__PURE__*/styled(Input$1)(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
 var StyledTextArea$1 = /*#__PURE__*/styled(TextArea)(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  resize: none;\n  min-height: 200px;\n"])));
 var SplitLayout = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
@@ -9816,7 +9733,7 @@ var HoldRow = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7
 var Label$e = /*#__PURE__*/styled.label(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #758588;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
 var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px 12px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n"])));
 var HoldContentContainer = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 20px 20px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n"])));
-var HoldDatePickerWrap = /*#__PURE__*/styled.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 66px;\n  border: 1px solid #e0e2e7;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n\n  input[type='text'] {\n    border-radius: 20px;\n    background: #fff;\n    border: none;\n    color: #6a7378;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 10px 0;\n    padding-left: 33px;\n    min-width: 21.5vw;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .react-datepicker-wrapper {\n    background-color: white;\n    border-radius: 66px;\n  }\n  .ant-picker-outlined {\n    border-style: none;\n    border-radius: 66px;\n    outline: none;\n    width: 346px;\n  }\n"])));
+var HoldDatePickerWrap = /*#__PURE__*/styled.div(_templateObject18$1 || (_templateObject18$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 66px;\n  border: 1px solid #e0e2e7;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n\n  input[type='text'] {\n    border-radius: 20px;\n    background: #fff;\n    border: none;\n    color: #6a7378;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 10px 0;\n    padding-left: 33px;\n    min-width: 21.5vw;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .react-datepicker-wrapper {\n    background-color: white;\n    border-radius: 66px;\n  }\n  .ant-picker-outlined {\n    border-style: none;\n    border-radius: 66px;\n    outline: none;\n    width: 346px;\n  }\n"])));
 var DatePickerWrap = /*#__PURE__*/styled.div(_templateObject19$1 || (_templateObject19$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  border-radius: 66px;\n  border: 1px solid #e0e2e7;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n\n  input[type='text'] {\n    border-radius: 20px;\n    background: #fff;\n    border: none;\n    color: #6a7378;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 10px 0;\n    padding-left: 33px;\n    min-width: 18vw;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .react-datepicker-wrapper {\n    background-color: white;\n    border-radius: 66px;\n  }\n  .ant-picker-outlined {\n    border-style: none;\n    border-radius: 66px;\n    outline: none;\n    width: 100%;\n  }\n"])));
 
 var _templateObject$1M, _templateObject2$1m;
@@ -11704,7 +11621,7 @@ var UnCancelOrderTable = function UnCancelOrderTable() {
   }))) : (cancelOrderProducts == null ? void 0 : cancelOrderProducts.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     className: "emptyTd",
     colSpan: 5
-  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, null)))) : cancelOrderProducts == null ? void 0 : cancelOrderProducts.map(function (product) {
+  }, React.createElement(EmptyDataContainer$2, null, React.createElement(Empty, null)))) : cancelOrderProducts == null ? void 0 : cancelOrderProducts.map(function (product) {
     var dropdownOptions = (product == null ? void 0 : product.product_type) === 'deliver' ? deliverTypeOptions$1 : collectTypeOptions$1;
     var isReturn = (product == null ? void 0 : product.action) === 'return';
     return React.createElement("tr", {
@@ -15225,8 +15142,8 @@ function ReturnSearchBar() {
   var _useState2 = useState([]),
     modifiedFilters = _useState2[0],
     setModifiedFilters = _useState2[1];
-  var _useReturnData = useReturnData(),
-    setReturnData = _useReturnData[1];
+  var _useClientOutstanding = useClientOutstandingReturnData(),
+    setOutstandingData = _useClientOutstanding[1];
   var _useParams = useParams(),
     status = _useParams.status;
   //condition on client view
@@ -15244,6 +15161,11 @@ function ReturnSearchBar() {
     endDate = _useEndDate[0];
   var _useAtom = useAtom(filtersReducerAtom),
     state = _useAtom[0];
+  var _useStatsCPCount = useStatsCPCount(),
+    setCount = _useStatsCPCount[1];
+  var _useState3 = useState([]),
+    modifiedStatsFilters = _useState3[0],
+    setModifiedStatsFilters = _useState3[1];
   var pagination = state['x-pagination'];
   useEffect(function () {
     var isClientOutstanding = clientPortal && status === 'outstanding_return';
@@ -15293,18 +15215,47 @@ function ReturnSearchBar() {
     }].concat(dateFilters) : dateFilters;
     setModifiedFilters(updatedFilters);
   }, [startDate, endDate, status]);
+  //For stats
+  var getDateFilters = function getDateFilters(startDate, endDate) {
+    var stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+    var sDate = startDate != null && startDate.isValid != null && startDate.isValid() ? startDate : dayjs(stored == null ? void 0 : stored.startDate);
+    var eDate = endDate != null && endDate.isValid != null && endDate.isValid() ? endDate : stored != null && stored.endDate ? dayjs(stored == null ? void 0 : stored.endDate) : null;
+    if (!(sDate != null && sDate.isValid != null && sDate.isValid())) return [];
+    var dateFilters = [];
+    if (eDate && eDate.isValid()) {
+      dateFilters = [{
+        field: 'created_at',
+        op: '>=',
+        value: sDate.format('YYYY-MM-DD')
+      }, {
+        field: 'created_at',
+        op: '<=',
+        value: eDate.add(1, 'day').format('YYYY-MM-DD')
+      }];
+    } else {
+      dateFilters = [{
+        field: 'created_at',
+        op: '=',
+        value: sDate.format('YYYY-MM-DD')
+      }];
+    }
+    return dateFilters;
+  };
+  useEffect(function () {
+    if (!clientPortal) return;
+    var dateFilters = getDateFilters(startDate, endDate);
+    setModifiedStatsFilters(dateFilters);
+  }, [startDate, endDate]);
   var _useAxios = useAxios({
       endpoint: '/v1/return/product/pending/',
       method: 'GET',
       filters: modifiedFilters,
       pagination: pagination
     }),
-    loading = _useAxios.loading,
     paginationData = _useAxios.paginationData,
-    getPendingData = _useAxios.fetchData,
-    fetchedReturnOrderData = _useAxios.data;
+    getPendingData = _useAxios.fetchData;
   useEffect(function () {
-    if (debouncedSearchText.length > 1) {
+    if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 1) {
       getPendingData({
         endPointQuery: "?search_term=" + debouncedSearchText
       }).then(function (response) {
@@ -15315,17 +15266,17 @@ function ReturnSearchBar() {
           setPaginationObject(rest);
         }
         if ((response == null || (_response$data = response.data) == null ? void 0 : _response$data.length) > 0) {
-          setReturnData(response == null ? void 0 : response.data);
+          setOutstandingData(response == null ? void 0 : response.data);
         } else {
-          setReturnData([]);
+          setOutstandingData([]);
         }
       });
-    } else if (debouncedSearchText.length > 0 && debouncedSearchText.length <= 2) {
+    } else if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 0 && (debouncedSearchText == null ? void 0 : debouncedSearchText.length) <= 2) {
       notification.warning({
         message: 'Search Phrase cannot be less than 3 characters'
       });
     }
-  }, [debouncedSearchText, fetchedReturnOrderData, loading]);
+  }, [debouncedSearchText]);
   // Debouncing effect
   useEffect(function () {
     var handler = setTimeout(function () {
@@ -15336,29 +15287,72 @@ function ReturnSearchBar() {
     };
   }, [searchText]);
   useEffect(function () {
-    if (debouncedSearchText.length === 0) {
+    if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) === 0) {
       setSearchText('');
     }
   }, [debouncedSearchText]);
-  var handleClear = function handleClear() {
-    setSearchText('');
-    setDebouncedSearchText('');
-  };
-  return React.createElement(Search$1, null, React.createElement(SearchIcon$1, null), React.createElement(SearchInput$1, {
-    type: "text",
-    placeholder: "Search",
-    value: searchText,
-    onChange: handleInputChange
-  }), searchText ? React.createElement(ClearButton$1, {
-    className: "clear",
-    onClick: handleClear
-  }, React.createElement(CrossIcon, null)) : null);
-}
-var ClearButton$1 = /*#__PURE__*/styled.button(_templateObject$2w || (_templateObject$2w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
-var Search$1 = /*#__PURE__*/styled.div(_templateObject2$1V || (_templateObject2$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
-var SearchInput$1 = /*#__PURE__*/styled.input(_templateObject3$14 || (_templateObject3$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
-var ReturnSearchBar$1 = /*#__PURE__*/React.memo(ReturnSearchBar);
-
+  //
+  var _useAxios2 = useAxios({
+      endpoint: "v1/portal/return/stats/",
+      method: 'GET',
+      pagination: {
+        is_pagination: false
+      },
+      filters: modifiedStatsFilters
+    }),
+    fetchStatsData = _useAxios2.fetchData;
+  useEffect(function () {
+    var isClientOutstanding = clientPortal && status === 'outstanding_return';
+    if (!isClientOutstanding || (debouncedSearchText == null ? void 0 : debouncedSearchText.length) < 3) return;
+    var fetchStats = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var response;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchStatsData({
+                endPointQuery: "?search_term=" + debouncedSearchText + "&type=outstanding"
+              });
+            case 2:
+              response = _context.sent;
+              //@ts-ignore
+              if (response != null && response.data) {
+                //@ts-ignore
+                setCount(response == null ? void 0 : response.data); // Set the count here
+              } else {
+                setCount(null); // fallback if no data
+              }
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchStats() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    fetchStats();
+  }, [debouncedSearchText, status, clientPortal]);
+  var handleClear = function handleClear() {
+    setSearchText('');
+  };
+  return React.createElement(Search$1, null, React.createElement(SearchIcon$1, null), React.createElement(SearchInput$1, {
+    type: "text",
+    placeholder: "Search",
+    value: searchText,
+    onChange: handleInputChange
+  }), searchText ? React.createElement(ClearButton$1, {
+    className: "clear",
+    onClick: handleClear
+  }, React.createElement(CrossIcon, null)) : null);
+}
+var ClearButton$1 = /*#__PURE__*/styled.button(_templateObject$2w || (_templateObject$2w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
+var Search$1 = /*#__PURE__*/styled.div(_templateObject2$1V || (_templateObject2$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
+var SearchInput$1 = /*#__PURE__*/styled.input(_templateObject3$14 || (_templateObject3$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
+var ReturnSearchBar$1 = /*#__PURE__*/React.memo(ReturnSearchBar);
+
 var _templateObject$2x, _templateObject2$1W, _templateObject3$15;
 function ReturnAfterSearchBar() {
   var _useState = useState(''),
@@ -15367,8 +15361,8 @@ function ReturnAfterSearchBar() {
   var _useSearchAfterText = useSearchAfterText(),
     debouncedSearchText = _useSearchAfterText[0],
     setDebouncedSearchText = _useSearchAfterText[1];
-  var _useReturnAfterOrderD = useReturnAfterOrderData(),
-    setReturnOrderData = _useReturnAfterOrderD[1];
+  var _useReturnConfirmedOr = useReturnConfirmedOrderData(),
+    setReturnConfirmedData = _useReturnConfirmedOr[1];
   //condition on client view
   var _UsePaginationData = UsePaginationData(),
     setPaginationObject = _UsePaginationData[1];
@@ -15376,10 +15370,24 @@ function ReturnAfterSearchBar() {
     setSearchText(event.target.value);
   };
   //CP
+  var _useState2 = useState([]),
+    modifiedStatsFilters = _useState2[0],
+    setModifiedStatsFilters = _useState2[1];
+  var _useStartDate = useStartDate(),
+    startDate = _useStartDate[0];
+  var _useEndDate = useEndDate(),
+    endDate = _useEndDate[0];
   var _useAtom = useAtom(filtersReducerReturnAtom),
     state = _useAtom[0];
   var filters = state['x-filters'],
     pagination = state['x-pagination'];
+  var _useStatsCPCount = useStatsCPCount(),
+    count = _useStatsCPCount[0],
+    setCount = _useStatsCPCount[1];
+  var _useClientPortal = useClientPortal(),
+    clientPortal = _useClientPortal[0];
+  var _useParams = useParams(),
+    status = _useParams.status;
   var _useAxios = useAxios({
       endpoint: '/v1/return/orders/',
       method: 'GET',
@@ -15389,7 +15397,7 @@ function ReturnAfterSearchBar() {
     paginationData = _useAxios.paginationData,
     returnAfterCall = _useAxios.fetchData;
   useEffect(function () {
-    if (debouncedSearchText.length > 1) {
+    if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 1) {
       returnAfterCall({
         endPointQuery: "?search_term=" + debouncedSearchText
       }).then(function (response) {
@@ -15399,12 +15407,12 @@ function ReturnAfterSearchBar() {
           setPaginationObject(rest);
         }
         if (response != null && response.data) {
-          setReturnOrderData(response == null ? void 0 : response.data);
+          setReturnConfirmedData(response == null ? void 0 : response.data);
         } else {
-          setReturnOrderData([]);
+          setReturnConfirmedData([]);
         }
       });
-    } else if (debouncedSearchText.length > 0 && debouncedSearchText.length <= 2) {
+    } else if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 0 && (debouncedSearchText == null ? void 0 : debouncedSearchText.length) <= 2) {
       notification.warning({
         message: 'Search Phrase cannot be less than 3 characters'
       });
@@ -15420,13 +15428,97 @@ function ReturnAfterSearchBar() {
     };
   }, [searchText]);
   useEffect(function () {
-    if (debouncedSearchText.length === 0) {
+    if ((debouncedSearchText == null ? void 0 : debouncedSearchText.length) === 0) {
       setSearchText('');
     }
   }, [debouncedSearchText]);
+  //
+  var getDateFilters = function getDateFilters(startDate, endDate) {
+    var stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+    var sDate = startDate != null && startDate.isValid != null && startDate.isValid() ? startDate : dayjs(stored == null ? void 0 : stored.startDate);
+    var eDate = endDate != null && endDate.isValid != null && endDate.isValid() ? endDate : stored != null && stored.endDate ? dayjs(stored == null ? void 0 : stored.endDate) : null;
+    if (!(sDate != null && sDate.isValid != null && sDate.isValid())) return [];
+    var dateFilters = [];
+    if (eDate && eDate.isValid()) {
+      dateFilters = [{
+        field: 'created_at',
+        op: '>=',
+        value: sDate.format('YYYY-MM-DD')
+      }, {
+        field: 'created_at',
+        op: '<=',
+        value: eDate.add(1, 'day').format('YYYY-MM-DD')
+      }];
+    } else {
+      dateFilters = [{
+        field: 'created_at',
+        op: '=',
+        value: sDate.format('YYYY-MM-DD')
+      }];
+    }
+    return dateFilters;
+  };
+  useEffect(function () {
+    if (!clientPortal) return;
+    var dateFilters = getDateFilters(startDate, endDate);
+    setModifiedStatsFilters(dateFilters);
+  }, [startDate, endDate]);
+  var _useAxios2 = useAxios({
+      endpoint: "v1/portal/return/stats/",
+      method: 'GET',
+      pagination: {
+        is_pagination: false
+      },
+      filters: modifiedStatsFilters
+    }),
+    statsData = _useAxios2.data,
+    fetchStatsData = _useAxios2.fetchData;
+  useEffect(function () {
+    var validStatuses = ['scheduled_for_return', 'return_completed'];
+    var isClientView = clientPortal && validStatuses.includes(status || '');
+    if (!isClientView || (debouncedSearchText == null ? void 0 : debouncedSearchText.length) < 3) return;
+    console.log('IN after view entered');
+    var statusTypeMap = {
+      scheduled_for_return: 'scheduled',
+      return_completed: 'complete'
+    };
+    var type = statusTypeMap[status];
+    var fetchStats = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var response;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return fetchStatsData({
+                endPointQuery: "?search_term=" + debouncedSearchText + "&type=" + type
+              });
+            case 2:
+              response = _context.sent;
+              //@ts-ignore
+              if (response != null && response.data) {
+                console.log('inside response', response);
+                // @ts-ignore
+                setCount(response == null ? void 0 : response.data);
+              } else {
+                setCount(null);
+              }
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchStats() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    fetchStats();
+  }, [debouncedSearchText, status, clientPortal]);
+  console.log(statsData, 'statsData');
+  console.log(count, 'new count');
   var handleClear = function handleClear() {
     setSearchText('');
-    setDebouncedSearchText('');
   };
   return React.createElement(Search$2, null, React.createElement(SearchIcon$1, null), React.createElement(SearchInput$2, {
     type: "text",
@@ -15520,41 +15612,756 @@ var RouterHeader = function RouterHeader(_ref) {
 };
 var DatePickerWrap$1 = /*#__PURE__*/styled.div(_templateObject$2y || (_templateObject$2y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-right: 10px;\n  padding-left: 7px;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: var(--Neutral-White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  min-width: 22vw;\n  height: 35px;\n  input[type='text'] {\n    border-radius: 20px;\n    background: var(--Flowkit-White, #fff);\n    border: none;\n    color: #6a7378;\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 8px 0;\n    padding-left: 10px;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .ant-picker-outlined {\n    border-style: none !important;\n  }\n\n  .ant-picker-focused {\n    box-shadow: none;\n  }\n\n  /* .ant-picker {\n    .ant-picker-input {\n      width: 150px;\n    }\n  } */\n  .ant-btn {\n    background-color: #3348ff !important;\n  }\n"])));
 
-var _templateObject$2z, _templateObject2$1X;
-var ReturnOverview = function ReturnOverview() {
+var _excluded$a = ["count"];
+var OutstandingTable = function OutstandingTable() {
+  var _useAtom = useAtom(filtersReducerAtom),
+    state = _useAtom[0];
+  var pagination = state['x-pagination'];
+  var _useClientOutstanding = useClientOutstandingReturnData(),
+    outstandingReturnData = _useClientOutstanding[0],
+    setOutstandingReturnData = _useClientOutstanding[1];
+  var _useLoading = useLoading(),
+    load = _useLoading[0],
+    setLoading = _useLoading[1];
+  var dropdownRefParent = useRef(null);
+  var dropdownRef = useRef(null);
+  var _usePrintOptionTOggle = usePrintOptionTOggle(),
+    printToogle = _usePrintOptionTOggle[0],
+    setPrintToggle = _usePrintOptionTOggle[1];
+  var _useLocationData = useLocationData(),
+    locationData = _useLocationData[0];
   var _UsePaginationData = UsePaginationData(),
-    paginationObj = _UsePaginationData[0];
-  var _useState = useState(1),
-    setCurrentPage = _useState[1];
-  var _useItemsPerPage = useItemsPerPage(),
-    itemsPerPage = _useItemsPerPage[0],
-    setItemsPerPage = _useItemsPerPage[1];
-  var page = paginationObj.page,
-    total = paginationObj.total;
-  var _useParams = useParams(),
-    status = _useParams.status;
+    setPaginationObject = _UsePaginationData[1];
+  var _usefetchAgain = usefetchAgain(),
+    callForFetch = _usefetchAgain[0];
   var _useClientPortal = useClientPortal(),
     clientPortal = _useClientPortal[0];
-  var handlePageChange = function handlePageChange(page) {
-    setCurrentPage(page);
+  var _useParams = useParams(),
+    status = _useParams.status;
+  var _useSelectedClientPor = useSelectedClientPortOrders(),
+    selectedOrderIds = _useSelectedClientPor[0],
+    setSelectedOrderIds = _useSelectedClientPor[1];
+  var _useState = useState(false),
+    selectClientAll = _useState[0],
+    setSelectClientAll = _useState[1];
+  var _useSearchText = useSearchText(),
+    debouncedSearchText = _useSearchText[0];
+  //sorting
+  var _useState2 = useState(null),
+    sortConfig = _useState2[0],
+    setSortConfig = _useState2[1];
+  var handleSort = function handleSort(key) {
+    setSortConfig(function (prev) {
+      if ((prev == null ? void 0 : prev.key) === key && prev.direction === 'asc') {
+        return {
+          key: key,
+          direction: 'desc'
+        };
+      }
+      return {
+        key: key,
+        direction: 'asc'
+      };
+    });
   };
-  var handleItemsPerPageChange = function handleItemsPerPageChange(itemsPerPage) {
-    setItemsPerPage(itemsPerPage);
+  var sortedData = useMemo(function () {
+    if (!outstandingReturnData || !sortConfig) return outstandingReturnData;
+    var key = sortConfig.key,
+      direction = sortConfig.direction;
+    return [].concat(outstandingReturnData).sort(function (a, b) {
+      var valueA = a[key];
+      var valueB = b[key];
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      }
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      }
+      return 0;
+    });
+  }, [outstandingReturnData, sortConfig]);
+  var renderSortIcon = function renderSortIcon(columnKey) {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return React.createElement(SortIcon, null);
+    }
+    return sortConfig.direction === 'asc' ? React.createElement(CaretDownFilledIcon, null) : React.createElement(CaretDownFilledIcon, null);
   };
-  console.log(status, 'status');
-  var shouldShowReturnAfterTable = clientPortal && status === 'scheduled_for_return' || clientPortal && status === 'return_completed';
-  return React.createElement(React.Fragment, null, React.createElement(RouterHeader, null), React.createElement("div", null, React.createElement(DashBoardWrapper$4, null, React.createElement("div", {
-    className: "Tableconatiner"
-  }, React.createElement(HeaderFilter, null), React.createElement(Container$1c, null, React.createElement(ReturnFilter, null), clientPortal && status === 'outstanding_return' && React.createElement(React.Fragment, null, React.createElement(ReturnOrderTable, null), total > 0 && React.createElement(Pagination, {
-    currentPage: page,
-    totalItems: total,
-    itemsPerPage: itemsPerPage,
-    onPageChange: handlePageChange,
-    onItemsPerPageChange: handleItemsPerPageChange
-  })), shouldShowReturnAfterTable && React.createElement(React.Fragment, null, React.createElement(ReturnAfterTable, null)))))));
-};
-var Container$1c = /*#__PURE__*/styled.div(_templateObject$2z || (_templateObject$2z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -16px;\n"])));
-var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject2$1X || (_templateObject2$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+  var OpenDropDown = function OpenDropDown(index) {
+    setPrintToggle(function (prevIndex) {
+      return prevIndex === index ? null : index;
+    });
+  };
+  // Close dropdown outside click
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var handleClickOutside = function handleClickOutside(event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setPrintToggle(null);
+    }
+  };
+  //CP
+  var _useStartDate = useStartDate(),
+    startDate = _useStartDate[0];
+  var _useEndDate = useEndDate(),
+    endDate = _useEndDate[0];
+  var filters = useMemo(function () {
+    if (!clientPortal) return [];
+    var stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+    var sDate = startDate != null && startDate.isValid != null && startDate.isValid() ? startDate : dayjs(stored == null ? void 0 : stored.startDate);
+    var eDate = endDate != null && endDate.isValid != null && endDate.isValid() ? endDate : stored != null && stored.endDate ? dayjs(stored == null ? void 0 : stored.endDate) : null;
+    if (!(sDate != null && sDate.isValid != null && sDate.isValid())) return [];
+    var dateFilters = [];
+    if (eDate && eDate.isValid()) {
+      dateFilters = [{
+        field: 'created_at',
+        op: '>=',
+        value: sDate.format('YYYY-MM-DD')
+      }, {
+        field: 'created_at',
+        op: '<=',
+        value: eDate.add(1, 'day').format('YYYY-MM-DD')
+      }];
+    } else {
+      dateFilters = [{
+        field: 'created_at',
+        op: '=',
+        value: sDate.format('YYYY-MM-DD')
+      }];
+    }
+    var baseFilters = status === 'outstanding_return' ? [{
+      field: 'isdeleted',
+      op: '=',
+      value: 0
+    }, {
+      field: 'product_return_action_id',
+      op: '=',
+      value: 'RTS'
+    }] : [];
+    return [].concat(baseFilters, dateFilters);
+  }, [startDate, endDate, status]);
+  var _useAxios = useAxios({
+      endpoint: '/v1/return/product/pending/',
+      method: 'GET',
+      filters: filters,
+      pagination: pagination
+    }),
+    fetchedOrderData = _useAxios.data,
+    returnDataLoad = _useAxios.loading,
+    paginationData = _useAxios.paginationData,
+    fetchData = _useAxios.fetchData;
+  console.log(filters, 'outstanding filters');
+  var hasFetchedRef = useRef(false);
+  useEffect(function () {
+    var shouldFetch = clientPortal && debouncedSearchText === '' && (filters == null ? void 0 : filters.length) > 0 && !hasFetchedRef.current;
+    if (shouldFetch) {
+      fetchData();
+      hasFetchedRef.current = true;
+    }
+  }, [debouncedSearchText, filters, clientPortal]);
+  useEffect(function () {
+    hasFetchedRef.current = false;
+  }, [debouncedSearchText, filters]);
+  useEffect(function () {
+    setLoading(returnDataLoad);
+    if (fetchedOrderData && fetchedOrderData != null && fetchedOrderData.data) {
+      setOutstandingReturnData(fetchedOrderData == null ? void 0 : fetchedOrderData.data);
+      if (paginationData) {
+        try {
+          var _JSON$parse = JSON.parse(paginationData),
+            count = _JSON$parse.count,
+            rest = _objectWithoutPropertiesLoose(_JSON$parse, _excluded$a);
+          setPaginationObject(rest);
+        } catch (error) {
+          console.error('Error parsing paginationData:', error);
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data'
+          });
+        }
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null or undefined'
+        });
+      }
+    }
+  }, [fetchedOrderData, returnDataLoad]);
+  // console.log(modifiedFilters, 'modifiedFilters');
+  useEffect(function () {
+    setLoading(returnDataLoad);
+    if (fetchedOrderData && fetchedOrderData != null && fetchedOrderData.data && locationData) {
+      var updatedReturnData = fetchedOrderData.data.map(function (returnItem) {
+        var matchingLocation = locationData.find(function (location) {
+          return (location == null ? void 0 : location.token) === (returnItem == null ? void 0 : returnItem.return_location);
+        });
+        return _extends({}, returnItem, {
+          new_location: matchingLocation ? matchingLocation == null ? void 0 : matchingLocation.location_name : null
+        });
+      });
+      setOutstandingReturnData(updatedReturnData);
+    }
+  }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+  //Client Portal
+  var handleSelectOrderId = function handleSelectOrderId(id) {
+    setSelectedOrderIds(function (prev) {
+      return prev.includes(id) ? prev.filter(function (orderId) {
+        return orderId !== id;
+      }) : [].concat(prev, [id]);
+    });
+  };
+  var handleClientSelectAll = function handleClientSelectAll(e) {
+    var isChecked = e.target.checked;
+    setSelectClientAll(isChecked);
+    if (isChecked) {
+      setSelectedOrderIds((outstandingReturnData == null ? void 0 : outstandingReturnData.map(function (item) {
+        return item == null ? void 0 : item.order_id;
+      })) || []);
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+  return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
+    className: "fortables"
+  }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "emailInvoiceCheckbox"
+  }, React.createElement(Checkbox$1, {
+    checked: selectClientAll,
+    onChange: handleClientSelectAll
+  })), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('return_location_name');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Return Location ", renderSortIcon('return_location_name'))), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('recipient_name');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Recipient ", renderSortIcon('recipient_name'))), React.createElement("th", null, "Return Action"), React.createElement("th", null, "Code"), React.createElement("th", null, "Description"), React.createElement("th", null, "Part"), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('weight');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Weight ", renderSortIcon('weight'))), React.createElement("th", null, "CBM"), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('return_reason');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Return Reason ", renderSortIcon('return_reason'))), React.createElement("th", null, "Collected"), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('collection_reason');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Collection Reason ", renderSortIcon('collection_reason'))), React.createElement("th", {
+    className: "emailInvoiceShare"
+  }, "Labels"))), React.createElement("tbody", null, load ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 14
+  }, React.createElement(Skeleton, {
+    active: true
+  }))) : (sortedData == null ? void 0 : sortedData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 14
+  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, null)))) : sortedData == null ? void 0 : sortedData.map(function (item, index) {
+    return React.createElement("tr", {
+      key: item.id
+    }, React.createElement("td", null, React.createElement(Checkbox$1, {
+      checked: selectedOrderIds.includes(item == null ? void 0 : item.order_id),
+      onChange: function onChange() {
+        return handleSelectOrderId(item == null ? void 0 : item.order_id);
+      }
+    })), React.createElement("td", null, " ", displayValueOrNA$1(item == null ? void 0 : item.return_location_name)), React.createElement("td", null, React.createElement("ul", {
+      style: {
+        listStyleType: 'none',
+        padding: 0
+      }
+    }, React.createElement("li", {
+      style: {
+        color: '#0099ff',
+        fontWeight: 600,
+        paddingLeft: 0
+      }
+    }, React.createElement(NavLink, {
+      to: "/orders/view/" + (item == null ? void 0 : item.order_id)
+    }, displayValueOrNA$1(item == null ? void 0 : item.recipient_name))), React.createElement("li", {
+      style: {
+        color: '#888075'
+      }
+    }, displayValueOrNA$1(item == null ? void 0 : item.postcode)))), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.product_return_action)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.code)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.description)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.part)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.weight), ' ', item != null && item.weight && (item == null ? void 0 : item.weight) !== null ? 'KG' : ''), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.cube)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.return_reason)), React.createElement("td", null, item != null && item.collected_at ? format(new Date(item == null ? void 0 : item.collected_at), 'dd/MM/yyyy') : 'UNKNOWN'), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.collection_reason)), React.createElement("td", null, React.createElement("ul", {
+      className: "actionbox"
+    }, React.createElement(CustomDrop, {
+      ref: dropdownRefParent,
+      className: printToogle === index ? 'active' : ''
+    }, React.createElement("li", {
+      className: "shareIconContainer",
+      onClick: function onClick() {
+        return OpenDropDown(index);
+      }
+    }, React.createElement(PrinterIcon, null), React.createElement(DownIcon, null), printToogle === index && React.createElement("div", {
+      ref: dropdownRef
+    }, React.createElement(PrintDropDownReturn, {
+      legacyURL: item == null ? void 0 : item.return_order_product_label,
+      legacyProductID: item == null ? void 0 : item.legacy_product_id
+    })))))));
+  })))));
+};
+
+var ReturnConfirmedTable = function ReturnConfirmedTable() {
+  var dropdownRefParent = useRef(null);
+  var dropdownRef = useRef(null);
+  var _usePrintOptionTOggle = usePrintOptionTOggle(),
+    printToogle = _usePrintOptionTOggle[0],
+    setPrintToggle = _usePrintOptionTOggle[1];
+  var _useOrderId = useOrderId(),
+    setOrderId = _useOrderId[1];
+  var _useReturnConfirmedOr = useReturnConfirmedOrderData(),
+    returnConfirmedTable = _useReturnConfirmedOr[0];
+  var _useLoading = useLoading(),
+    loading = _useLoading[0];
+  var _useState = useState(false),
+    selectClientAll = _useState[0],
+    setSelectClientAll = _useState[1];
+  var _useSelectedClientAft = useSelectedClientAfterOrders(),
+    selectedOrderIds = _useSelectedClientAft[0],
+    setSelectedOrderIds = _useSelectedClientAft[1];
+  //sorting
+  var _useState2 = useState(null),
+    sortConfig = _useState2[0],
+    setSortConfig = _useState2[1];
+  var handleSort = function handleSort(key) {
+    setSortConfig(function (prev) {
+      if ((prev == null ? void 0 : prev.key) === key && prev.direction === 'asc') {
+        return {
+          key: key,
+          direction: 'desc'
+        };
+      }
+      return {
+        key: key,
+        direction: 'asc'
+      };
+    });
+  };
+  var sortedData = useMemo(function () {
+    if (!returnConfirmedTable || !sortConfig) return returnConfirmedTable;
+    var key = sortConfig.key,
+      direction = sortConfig.direction;
+    return [].concat(returnConfirmedTable).sort(function (a, b) {
+      var valueA = a[key];
+      var valueB = b[key];
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      }
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc' ? valueA.localeCompare(valueB) : valueB.localeCompare(valueA);
+      }
+      return 0;
+    });
+  }, [returnConfirmedTable, sortConfig]);
+  var renderSortIcon = function renderSortIcon(columnKey) {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return React.createElement(SortIcon, null);
+    }
+    return sortConfig.direction === 'asc' ? React.createElement(CaretDownFilledIcon, null) : React.createElement(CaretDownFilledIcon, null);
+  };
+  var OpenDropDown = function OpenDropDown(index) {
+    setPrintToggle(function (prevIndex) {
+      return prevIndex === index ? null : index;
+    });
+  };
+  // Close dropdown outside click
+  useEffect(function () {
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  var handleClickOutside = function handleClickOutside(event) {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setPrintToggle(null);
+    }
+  };
+  // const handleSelectAll = (e: any) => {
+  //   setSelectAll(e.target.checked);
+  //   if (e.target.checked) {
+  //     setSelectedReturnOrder(
+  //       returnAfterOrder.map((e: any) => ({
+  //         id: e.id,
+  //         status_id: 3,
+  //       }))
+  //     );
+  //   } else {
+  //     setSelectedReturnOrder([]);
+  //   }
+  // };
+  // const handleSelectInvoice = (id: any) => {
+  //   setSelectedReturnOrder((prevSelectedInvoices: any) => {
+  //     const isSelected = prevSelectedInvoices?.some(
+  //       (item: any) => item.id === id
+  //     );
+  //     if (isSelected) {
+  //       return prevSelectedInvoices.filter((items: any) => items.id !== id);
+  //     } else {
+  //       return [...prevSelectedInvoices, { id, status_id: 3 }];
+  //     }
+  //   });
+  // };
+  var getStatusClass = function getStatusClass(status) {
+    switch (status) {
+      case 'Cancelled':
+        return {
+          color: '#E95252',
+          background: 'rgba(233, 82, 82, 0.15)'
+        };
+      case 'On Hold':
+        return {
+          color: '#F4A503',
+          background: '#FFF1D6'
+        };
+      case 'Sub-Contracted':
+        return {
+          color: '#F4A503',
+          background: '#FFF1D6'
+        };
+      case 'Awaiting route':
+        return {
+          color: '#845ADF',
+          background: 'rgba(132, 90, 223, 0.15)'
+        };
+      case 'Awaiting':
+        return {
+          color: '#845ADF',
+          background: 'rgba(132, 90, 223, 0.15)'
+        };
+      case 'Completed':
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)'
+        };
+      case 'Outstanding':
+        return {
+          color: '#FF9900',
+          background: 'rgba(255, 153, 0, 0.15)'
+        };
+      case 'Routed':
+        return {
+          color: '#6396E5',
+          background: 'rgba(99, 150, 229, 0.15)'
+        };
+      default:
+        return {
+          color: '#000',
+          background: '#fff'
+        };
+    }
+  };
+  // API for Assign
+  // const {
+  //   data: actionResponse,
+  //   setShouldPerformAction: setAssignAction,
+  //   error: apiError,
+  // } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `return_orders/update/assign/`,
+  //   method: 'PUT',
+  //   body: [assignPayload],
+  //   performAction: false,
+  // });
+  //client options
+  // const assignOptions = assignData?.map((option: any) => ({
+  //   label: option?.type?.charAt(0)?.toUpperCase() + option?.type?.slice(1),
+  //   value: option?.bjs_delivery,
+  // }));
+  // const handleAssignPayload = (Id: number, value: boolean) => {
+  //   setCallAPi(false);
+  //   setAssign(value);
+  //   setAssignPayload({
+  //     ...assignPayload,
+  //     return_order_id: Id,
+  //     bjs_delivery: value,
+  //   });
+  //   setAssignAction(true);
+  // };
+  // useEffect(() => {
+  //   //@ts-ignore
+  //   if (actionResponse?.code === 200) {
+  //     setCallAPi(true);
+  //     notification.success({
+  //       message: 'Success',
+  //       // @ts-ignore
+  //       description: `${actionResponse?.message}`,
+  //     });
+  //     // @ts-ignore
+  //   } else if (apiError?.detail) {
+  //     notification.error({
+  //       message: 'Failure',
+  //       // @ts-ignore
+  //       description: `${apiError?.detail[0]?.msg}`,
+  //     });
+  //   }
+  // }, [actionResponse, apiError]);
+  var handleSelectOrderId = function handleSelectOrderId(id) {
+    setSelectedOrderIds(function (prev) {
+      return prev.includes(id) ? prev.filter(function (orderId) {
+        return orderId !== id;
+      }) : [].concat(prev, [id]);
+    });
+  };
+  var handleClientSelectAll = function handleClientSelectAll(e) {
+    var isChecked = e.target.checked;
+    setSelectClientAll(isChecked);
+    if (isChecked) {
+      setSelectedOrderIds((returnConfirmedTable == null ? void 0 : returnConfirmedTable.map(function (item) {
+        return item == null ? void 0 : item.id;
+      })) || []);
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+  console.log('selectedOrderIds===>', selectedOrderIds);
+  console.log('returnConfirmedTable=====>', returnConfirmedTable);
+  return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
+    className: "fortables"
+  }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+    className: "emailInvoiceCheckbox"
+  }, React.createElement(Checkbox$1, {
+    checked: selectClientAll,
+    onChange: handleClientSelectAll
+  })), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('created_at');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Created ", renderSortIcon('created_at'))), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('return_location_name');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Return Location ", renderSortIcon('return_location_name'))), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('recipient_name');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Recipient ", renderSortIcon('recipient_name'))), React.createElement("th", null, " Client"), React.createElement("th", null, "Consignment"), React.createElement("th", null, "Return Order No"), React.createElement("th", null, " Total Parts"), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('weight');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Total Weight ", renderSortIcon('weight'))), React.createElement("th", {
+    onClick: function onClick() {
+      return handleSort('cube');
+    }
+  }, React.createElement("div", {
+    className: "sortIconClass"
+  }, "Total CBM ", renderSortIcon('cube'))), React.createElement("th", null, "Status"), React.createElement("th", {
+    className: "emailInvoiceShare"
+  }, "Labels"))), React.createElement("tbody", null, loading ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 16
+  }, React.createElement(Skeleton, {
+    active: true
+  })), React.createElement("td", {
+    colSpan: 16
+  })) : (sortedData == null ? void 0 : sortedData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 16
+  }, React.createElement(EmptyDataContainer$1, null, React.createElement(Empty, null)))) : sortedData == null ? void 0 : sortedData.map(function (item, index) {
+    var statusMapping = {
+      cancelled: 'Cancelled',
+      'on hold': 'On Hold',
+      SC: 'Sub-Contracted',
+      'awaiting route': 'Awaiting',
+      'awaiting confirmation': 'Awaiting',
+      complete: 'Completed',
+      outstanding: 'Outstanding',
+      routed: 'Routed',
+      failed: 'Failed'
+    };
+    var status = statusMapping[item == null ? void 0 : item.status_value] || 'Unknown';
+    var statusClass = getStatusClass(status);
+    return React.createElement("tr", {
+      key: item.id
+    }, React.createElement("td", null, React.createElement(Checkbox$1, {
+      checked: selectedOrderIds.includes(item == null ? void 0 : item.id),
+      onChange: function onChange() {
+        return handleSelectOrderId(item == null ? void 0 : item.id);
+      }
+    })), React.createElement("td", null, formatDate(new Date(item == null ? void 0 : item.created_at))), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.return_location_name)), React.createElement("td", {
+      onClick: function onClick() {
+        return setOrderId(item.id);
+      }
+    }, React.createElement("ul", {
+      style: {
+        listStyleType: 'none',
+        padding: 0
+      }
+    }, React.createElement("li", {
+      style: {
+        color: '#0099ff',
+        fontWeight: 600,
+        paddingLeft: 0
+      }
+    }, React.createElement(NavLink, {
+      to: "../" + item.id
+    }, displayValueOrNA$1(item == null ? void 0 : item.recipient_name))), React.createElement("li", {
+      style: {
+        color: '#888075'
+      }
+    }, displayValueOrNA$1(item == null ? void 0 : item.postcode)))), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.customer_name)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.consignment)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.order_number)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.total_products)), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.weight), ' ', item != null && item.weight && (item == null ? void 0 : item.weight) > 0 ? 'KG' : ''), React.createElement("td", null, displayValueOrNA$1(item == null ? void 0 : item.cube)), React.createElement("td", null, React.createElement("ul", {
+      className: "statuscontainer",
+      style: {
+        listStyleType: 'none',
+        background: statusClass.background
+      }
+    }, React.createElement("li", {
+      className: "statustext",
+      style: {
+        color: statusClass.color
+      }
+    }, status))), React.createElement("td", null, React.createElement("ul", {
+      className: "actionbox"
+    }, React.createElement(CustomDrop, {
+      ref: dropdownRefParent,
+      className: printToogle === index ? 'active' : ''
+    }, React.createElement("li", {
+      className: "shareIconContainer",
+      onClick: function onClick() {
+        return OpenDropDown(index);
+      }
+    }, React.createElement(PrinterIcon, null), React.createElement(DownIcon, null), printToogle === index && React.createElement("div", {
+      ref: dropdownRef
+    }, React.createElement(PrintDropDown, {
+      legacyProductId: item
+    })))))));
+  })))));
+};
+
+var _templateObject$2z, _templateObject2$1X;
+var _excluded$b = ["count"];
+var ConfirmedMain = function ConfirmedMain() {
+  var _useReturnConfirmedOr = useReturnConfirmedOrderData(),
+    setReturnConfirmedData = _useReturnConfirmedOr[1];
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useAtom = useAtom(filtersReducerReturnAtom),
+    state = _useAtom[0];
+  // const [callApi] = useCallApiAgain();
+  var filters = state['x-filters'],
+    pagination = state['x-pagination'];
+  var _UsePaginationReturnD = UsePaginationReturnData(),
+    paginationObj = _UsePaginationReturnD[0];
+  var _useState = useState(1),
+    setCurrentPage = _useState[1];
+  var _useItemsPerReturnPag = useItemsPerReturnPage(),
+    itemsPerPage = _useItemsPerReturnPag[0],
+    setItemsPerPage = _useItemsPerReturnPag[1];
+  var _UsePaginationData = UsePaginationData(),
+    setPaginationObject = _UsePaginationData[1];
+  var page = paginationObj.page,
+    total = paginationObj.total;
+  var _useSearchAfterText = useSearchAfterText(),
+    debouncedSearchText = _useSearchAfterText[0];
+  var handlePageChange = function handlePageChange(page) {
+    setCurrentPage(page);
+  };
+  var handleItemsPerPageChange = function handleItemsPerPageChange(itemsPerPage) {
+    setItemsPerPage(itemsPerPage);
+  };
+  var _useParams = useParams(),
+    status = _useParams.status;
+  var _useAxios = useAxios({
+      endpoint: '/v1/return/orders/',
+      method: 'GET',
+      filters: filters && (filters == null ? void 0 : filters.length) > 0 ? filters : undefined,
+      pagination: pagination
+    }),
+    fetchedReturnOrderData = _useAxios.data,
+    loading = _useAxios.loading,
+    paginationData = _useAxios.paginationData,
+    fetchData = _useAxios.fetchData;
+  useEffect(function () {
+    var shouldFetch = debouncedSearchText === '' && (filters == null ? void 0 : filters.length) > 0;
+    if (shouldFetch) {
+      fetchData();
+    }
+  }, [debouncedSearchText, status, JSON.stringify(filters)]);
+  useEffect(function () {
+    setLoading(loading);
+    if (fetchedReturnOrderData != null && fetchedReturnOrderData.data) {
+      setReturnConfirmedData(fetchedReturnOrderData == null ? void 0 : fetchedReturnOrderData.data);
+      if (paginationData) {
+        try {
+          var _JSON$parse = JSON.parse(paginationData),
+            count = _JSON$parse.count,
+            rest = _objectWithoutPropertiesLoose(_JSON$parse, _excluded$b);
+          setPaginationObject(rest);
+        } catch (error) {
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data'
+          });
+        }
+      }
+    }
+  }, [fetchedReturnOrderData, loading]);
+  return React.createElement("div", null, React.createElement(DashBoardWrapper$4, null, React.createElement("div", {
+    className: "Tableconatiner"
+  }, React.createElement(Container$1c, null, React.createElement(ReturnConfirmedTable, null), total > 0 && React.createElement(ReturnPagination, {
+    currentPage: page,
+    totalItems: total,
+    itemsPerPage: itemsPerPage,
+    onPageChange: handlePageChange,
+    onItemsPerPageChange: handleItemsPerPageChange
+  })))));
+};
+var Container$1c = /*#__PURE__*/styled.div(_templateObject$2z || (_templateObject$2z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  /* top: -30px; */\n"])));
+var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject2$1X || (_templateObject2$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+
+var _templateObject$2A, _templateObject2$1Y;
+var ReturnOverview = function ReturnOverview() {
+  var _UsePaginationData = UsePaginationData(),
+    paginationObj = _UsePaginationData[0];
+  var _useState = useState(1),
+    setCurrentPage = _useState[1];
+  var _useItemsPerPage = useItemsPerPage(),
+    itemsPerPage = _useItemsPerPage[0],
+    setItemsPerPage = _useItemsPerPage[1];
+  var page = paginationObj.page,
+    total = paginationObj.total;
+  var _useParams = useParams(),
+    status = _useParams.status;
+  var _useClientPortal = useClientPortal(),
+    clientPortal = _useClientPortal[0];
+  var handlePageChange = function handlePageChange(page) {
+    setCurrentPage(page);
+  };
+  var handleItemsPerPageChange = function handleItemsPerPageChange(itemsPerPage) {
+    setItemsPerPage(itemsPerPage);
+  };
+  console.log(status, 'status');
+  var shouldShowReturnAfterTable = clientPortal && status === 'scheduled_for_return' || clientPortal && status === 'return_completed';
+  return React.createElement(React.Fragment, null, React.createElement(RouterHeader, null), React.createElement("div", null, React.createElement(DashBoardWrapper$5, null, React.createElement("div", {
+    className: "Tableconatiner"
+  }, React.createElement(HeaderFilter, null), React.createElement(Container$1d, null, React.createElement(ReturnFilter, null), clientPortal && status === 'outstanding_return' && React.createElement(React.Fragment, null, React.createElement(OutstandingTable, null), total > 0 && React.createElement(Pagination, {
+    currentPage: page,
+    totalItems: total,
+    itemsPerPage: itemsPerPage,
+    onPageChange: handlePageChange,
+    onItemsPerPageChange: handleItemsPerPageChange
+  })), shouldShowReturnAfterTable && React.createElement(React.Fragment, null, React.createElement(ConfirmedMain, null)))))));
+};
+var Container$1d = /*#__PURE__*/styled.div(_templateObject$2A || (_templateObject$2A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -16px;\n"])));
+var DashBoardWrapper$5 = /*#__PURE__*/styled.section(_templateObject2$1Y || (_templateObject2$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
 
 function ReturnClient() {
   notification.config({