@bjsdistribution/dms-client-return 0.1.60-prod → 0.1.61-prod

package/dist/components/store.d.ts

@@ -42,6 +42,7 @@ export declare function useClientOutstandingReturnData(): [any[], (args_0: any[]
 export declare function useReturnConfirmedOrderData(): [any[], (args_0: any[] | ((prev: any[]) => any[])) => void];
 export declare function useStatsCPCount(): [any, (args_0: any) => void];
 declare function useCustomerData(): [any, (args_0: any) => void];
+declare function useFlatCustomerData(): [any, (args_0: any) => void];
 declare function useActionType(): [any, (args_0: any) => void];
 declare function useLocationData(): [any, (args_0: any) => void];
 declare function useReturnPayload(): [CreateReturnPayload, (args_0: CreateReturnPayload | ((prev: CreateReturnPayload) => CreateReturnPayload)) => void];
@@ -66,4 +67,4 @@ declare function useClientPortal(): [boolean | undefined, (args_0: boolean | ((p
 declare function useClientLoading(): [boolean, (args_0: boolean | ((prev: boolean) => boolean)) => void];
 export declare const useActiveCardId: () => [number, (args_0: number | ((prev: number) => number)) => void];
 declare function useSendEmailNotification(): [boolean, (args_0: boolean | ((prev: boolean) => boolean)) => void];
-export { useAtom, useFilter, useStaticData, useRowCollectedCount, useRowDeliveredCount, useReminderData, useInQueueData, useEmailInvoice, useCustomerData, useActionType, useLocationData, useSelectedOrders, useReturnPayload, useNewReturnPayload, useGroupedPayload, useStatusOrderData, useSelectedConfirmLoc, useSelectAll, usePostLoading, useFinalPayload, useClearState, useAssignData, useAssignPayload, useCallApiAgain, useActionTypeOptions, useLocationOptions, useSelectedProducts, useVisibilityData, useClientPortal, useSelectedClientPortOrders, useStartDate, useEndDate, useSelectedClientAfterOrders, useClientLoading, useSendEmailNotification, };
+export { useAtom, useFilter, useStaticData, useRowCollectedCount, useRowDeliveredCount, useReminderData, useInQueueData, useEmailInvoice, useCustomerData, useActionType, useLocationData, useSelectedOrders, useReturnPayload, useNewReturnPayload, useGroupedPayload, useStatusOrderData, useSelectedConfirmLoc, useSelectAll, usePostLoading, useFinalPayload, useClearState, useAssignData, useAssignPayload, useCallApiAgain, useActionTypeOptions, useLocationOptions, useSelectedProducts, useVisibilityData, useClientPortal, useSelectedClientPortOrders, useStartDate, useEndDate, useSelectedClientAfterOrders, useClientLoading, useSendEmailNotification, useFlatCustomerData, };

package/dist/dms-client-return.cjs.development.js

@@ -429,6 +429,7 @@ var AssignUpdateInitial = {
 };
 var reminderTableData = /*#__PURE__*/jotai.atom([]);
 var customerData = /*#__PURE__*/jotai.atom([]);
+var flatCustomerData = /*#__PURE__*/jotai.atom([]);
 var actionTypeData = /*#__PURE__*/jotai.atom([]);
 var locationData = /*#__PURE__*/jotai.atom([]);
 var createReturnPayload = /*#__PURE__*/jotai.atom(CreateReturnInitial);
@@ -509,6 +510,9 @@ function useStatsCPCount() {
 function useCustomerData() {
   return jotai.useAtom(customerData);
 }
+function useFlatCustomerData() {
+  return jotai.useAtom(flatCustomerData);
+}
 function useActionType() {
   return jotai.useAtom(actionTypeData);
 }
@@ -619,7 +623,7 @@ var filterReducer = function filterReducer(state, action) {
           return f.field !== 'customer_id';
         }), [{
           field: 'customer_id',
-          op: '=',
+          op: Array != null && Array.isArray(action == null ? void 0 : action.payload) ? 'in' : '=',
           value: action.payload
         }])
       });
@@ -1200,8 +1204,7 @@ var countReducerAtom = /*#__PURE__*/utils.atomWithReducer(initialState$1, popupR
 var _templateObject;
 function SelectionFilter() {
   var _useCustomerData = useCustomerData(),
-    customers = _useCustomerData[0],
-    setCustomers = _useCustomerData[1];
+    customers = _useCustomerData[0];
   var _useSelectedAction = useSelectedAction(),
     selectedFilterValue = _useSelectedAction[0],
     setSelectedFilterValue = _useSelectedAction[1];
@@ -1231,9 +1234,9 @@ function SelectionFilter() {
     setLocationOptions = _useLocationOptions[1];
   var _useSearchParams = reactRouterDom.useSearchParams(),
     searchParams = _useSearchParams[0];
+  var navigate = reactRouterDom.useNavigate();
   var _useClientPortal = useClientPortal(),
     clientPortal = _useClientPortal[0];
-  var navigate = reactRouterDom.useNavigate();
   var _useClientLoading = useClientLoading(),
     clientLoading = _useClientLoading[0];
   //API for client data
@@ -1248,33 +1251,61 @@ function SelectionFilter() {
     fetchedCustomerData = _useAxios.data,
     loading = _useAxios.loading,
     fetchData = _useAxios.fetchData;
-  //need to fix
+  var _useFlatCustomerData = useFlatCustomerData(),
+    flatCustomers = _useFlatCustomerData[0],
+    setFlatCustomers = _useFlatCustomerData[1];
   React.useEffect(function () {
     if (!clientPortal && !clientLoading) {
-      fetchData();
+      if (!flatCustomers || flatCustomers.length === 0) {
+        fetchData();
+      }
     }
   }, [clientLoading]);
   React.useEffect(function () {
     if (fetchedCustomerData && fetchedCustomerData != null && fetchedCustomerData.data) {
-      setCustomers(fetchedCustomerData == null ? void 0 : fetchedCustomerData.data);
+      setFlatCustomers(fetchedCustomerData == null ? void 0 : fetchedCustomerData.data);
     }
   }, [loading]);
   //new codee
   var urlCustomerId = searchParams.get('customerId');
   var urlActiontype = searchParams.get('type');
-  var selectedCustomer = customers == null ? void 0 : customers.find(function (customer) {
+  // Used strictly for getting the account number for the API payload (works for both parent and children)
+  var selectedFlatCustomer = flatCustomers == null ? void 0 : flatCustomers.find(function (customer) {
     var _customer$customer_id;
     return (customer == null || (_customer$customer_id = customer.customer_id) == null ? void 0 : _customer$customer_id.toString()) === urlCustomerId;
   });
-  var accountNumber = selectedCustomer == null ? void 0 : selectedCustomer.account_number;
+  var accountNumber = selectedFlatCustomer == null ? void 0 : selectedFlatCustomer.account_number;
+  // Used strictly for retrieving children bundling IDs (only populates if it's a parent)
+  var selectedGroupedCustomer = customers == null ? void 0 : customers.find(function (customer) {
+    var _customer$customer_id2;
+    return (customer == null || (_customer$customer_id2 = customer.customer_id) == null ? void 0 : _customer$customer_id2.toString()) === urlCustomerId;
+  });
+  var getFilterPayload = function getFilterPayload() {
+    var _selectedGroupedCusto;
+    var payload = urlCustomerId;
+    if (selectedGroupedCustomer != null && selectedGroupedCustomer.children && (selectedGroupedCustomer == null || (_selectedGroupedCusto = selectedGroupedCustomer.children) == null ? void 0 : _selectedGroupedCusto.length) > 0) {
+      var _selectedGroupedCusto2;
+      payload = [urlCustomerId].concat(selectedGroupedCustomer == null || (_selectedGroupedCusto2 = selectedGroupedCustomer.children) == null ? void 0 : _selectedGroupedCusto2.map(function (child) {
+        var _child$customer_id;
+        return child == null || (_child$customer_id = child.customer_id) == null ? void 0 : _child$customer_id.toString();
+      }));
+    }
+    return payload;
+  };
   //customer name
-  var clientOptions = customers == null ? void 0 : customers.filter(function (option) {
-    return 'customer_id' in option && option.customer_id != null;
+  var clientOptions = [].concat(flatCustomers || [], customers || []).filter(function (v, i, a) {
+    return (a == null ? void 0 : a.findIndex(function (t) {
+      var _t$customer_id, _v$customer_id;
+      return (t == null || (_t$customer_id = t.customer_id) == null ? void 0 : _t$customer_id.toString()) === (v == null || (_v$customer_id = v.customer_id) == null ? void 0 : _v$customer_id.toString());
+    })) === i;
+  }).filter(function (option) {
+    return (option == null ? void 0 : option.customer_id) != null;
   }).map(function (option) {
-    var _option$customer_name, _option$customer_name2;
+    var _name$charAt;
+    var name = String((option == null ? void 0 : option.customer_name) || (option == null ? void 0 : option.trading_as) || '');
     return {
-      label: (option == null || (_option$customer_name = option.customer_name) == null || (_option$customer_name = _option$customer_name.charAt(0)) == null ? void 0 : _option$customer_name.toUpperCase()) + (option == null || (_option$customer_name2 = option.customer_name) == null ? void 0 : _option$customer_name2.slice(1)),
-      value: option == null ? void 0 : option.customer_id,
+      label: ((_name$charAt = name.charAt(0)) == null ? void 0 : _name$charAt.toUpperCase()) + (name == null ? void 0 : name.slice(1)),
+      value: Number(option == null ? void 0 : option.customer_id),
       actions: option == null ? void 0 : option.actions,
       return_locations: option == null ? void 0 : option.return_locations,
       account_number: option == null ? void 0 : option.account_number
@@ -1395,7 +1426,7 @@ function SelectionFilter() {
     if (urlCustomerId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId
+        payload: getFilterPayload()
       });
       dispatch({
         type: 'SET_PAGE',
@@ -1469,7 +1500,7 @@ function SelectionFilter() {
     if (urlCustomerId && urlActiontype) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId
+        payload: getFilterPayload()
       });
       setSelectedClient(+urlCustomerId);
       dispatch({
@@ -1484,7 +1515,7 @@ function SelectionFilter() {
     } else if (urlCustomerId) {
       dispatch({
         type: 'SET_CLIENT_FILTER',
-        payload: urlCustomerId
+        payload: getFilterPayload()
       });
       setSelectedClient(+urlCustomerId);
       dispatch({
@@ -1492,7 +1523,7 @@ function SelectionFilter() {
         payload: 1
       });
     }
-  }, [urlCustomerId]);
+  }, [urlCustomerId, customers]);
   var handleClearAction = function handleClearAction() {
     dispatch({
       type: 'CLEAR_ACTION'
@@ -1510,7 +1541,7 @@ function SelectionFilter() {
     style: {
       minWidth: '250px'
     },
-    value: selectedClient,
+    value: (clientOptions == null ? void 0 : clientOptions.length) > 0 ? selectedClient || undefined : undefined,
     allowClear: true,
     onClear: handleClear,
     filterOption: function filterOption(input, option) {
@@ -1521,7 +1552,7 @@ function SelectionFilter() {
   })), selectedClient && React__default.createElement(React__default.Fragment, null, React__default.createElement(FilterColumn, null, React__default.createElement(Label, null, "Action Type"), React__default.createElement(StyledAntSelect, {
     options: actionTypeOptions,
     placeholder: "Select Action Type",
-    value: selectedFilterValue,
+    value: (actionTypeOptions == null ? void 0 : actionTypeOptions.length) > 0 ? selectedFilterValue || undefined : undefined,
     onChange: handleActionClick,
     style: {
       minWidth: '200px'
@@ -1530,7 +1561,7 @@ function SelectionFilter() {
     onClear: handleClearAction
   })), React__default.createElement(FilterColumn, null, React__default.createElement(Label, null, "Location "), React__default.createElement(StyledAntSelect, {
     options: locationOptions,
-    value: selectedLocationValue,
+    value: (locationOptions == null ? void 0 : locationOptions.length) > 0 ? selectedLocationValue || undefined : undefined,
     placeholder: "Select Location",
     onChange: handleLocationChange,
     style: {
@@ -18482,6 +18513,8 @@ var SearchType = function SearchType() {
     state = _useAtom[0];
   var _UsePaginationOvervie = UsePaginationOverviewData(),
     setPaginationObject = _UsePaginationOvervie[1];
+  var _useStatsLoading = useStatsLoading(),
+    setStatsLoading = _useStatsLoading[1];
   var didMountRef = React.useRef(false);
   var filters = state['x-filters'],
     pagination = state['x-pagination'];
@@ -18516,7 +18549,7 @@ var SearchType = function SearchType() {
     if (searchData && Array.isArray(searchData == null ? void 0 : searchData.data)) {
       setClientData(searchData == null ? void 0 : searchData.data);
     }
-  }, [searchData, loading]);
+  }, [searchData]);
   var handleClear = function handleClear() {
     setSearchText('');
     setDebouncedSearchText('');
@@ -18532,6 +18565,13 @@ var SearchType = function SearchType() {
     statsDataLoading = _useAxios2.loading,
     paginationData = _useAxios2.paginationData,
     fetchAllData = _useAxios2.fetchData;
+  React.useEffect(function () {
+    if (debouncedSearchText && (debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 0) {
+      setStatsLoading(loading);
+    } else {
+      setStatsLoading(statsDataLoading);
+    }
+  }, [loading, statsDataLoading, debouncedSearchText]);
   React.useEffect(function () {
     if (fetchedClientData && fetchedClientData.data) {
       var result = fetchedClientData == null ? void 0 : fetchedClientData.data;
@@ -18602,9 +18642,6 @@ var Filters = function Filters() {
 var ReturnTable$1 = function ReturnTable() {
   var _useClientData = useClientData(),
     clientData = _useClientData[0];
-  var _useState = React.useState([]),
-    updatedData = _useState[0],
-    setUpdatedData = _useState[1];
   var _useStatsLoading = useStatsLoading(),
     statsLoading = _useStatsLoading[0];
   var _useAtom = jotai.useAtom(filtersReducerAtom),
@@ -18612,11 +18649,13 @@ var ReturnTable$1 = function ReturnTable() {
   var navigate = reactRouterDom.useNavigate();
   var _useCustomerData = useCustomerData(),
     customers = _useCustomerData[0];
+  var _useInternalSearchTex = useInternalSearchText(),
+    debouncedSearchText = _useInternalSearchTex[0];
   // const [searchParams] = useSearchParams();
   //sorting
-  var _useState2 = React.useState(null),
-    sortConfig = _useState2[0],
-    setSortConfig = _useState2[1];
+  var _useState = React.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') {
@@ -18631,6 +18670,29 @@ var ReturnTable$1 = function ReturnTable() {
       };
     });
   };
+  //updated client data
+  var updatedData = React.useMemo(function () {
+    var baseCustomers = debouncedSearchText && (debouncedSearchText == null ? void 0 : debouncedSearchText.length) > 0 ? clientData || [] : customers || [];
+    var mappedCustomers = (baseCustomers == null ? void 0 : baseCustomers.map(function (customer) {
+      var _customer$children;
+      // Normal state: Merge aggregate stats from the stats API onto the generic customers list
+      var matchingClientStats = clientData == null ? void 0 : clientData.find(function (client) {
+        var _customer$customer_id;
+        return (client == null ? void 0 : client.customer_id) != null && (client == null ? void 0 : client.customer_id.toString()) === (customer == null || (_customer$customer_id = customer.customer_id) == null ? void 0 : _customer$customer_id.toString());
+      });
+      var processedChildren = customer == null || (_customer$children = customer.children) == null ? void 0 : _customer$children.map(function (child) {
+        var matchingChildStats = clientData == null ? void 0 : clientData.find(function (client) {
+          var _child$customer_id;
+          return (client == null ? void 0 : client.customer_id) != null && (client == null ? void 0 : client.customer_id.toString()) === (child == null || (_child$customer_id = child.customer_id) == null ? void 0 : _child$customer_id.toString());
+        });
+        return _extends({}, child, matchingChildStats);
+      });
+      return _extends({}, customer, matchingClientStats, {
+        children: processedChildren
+      });
+    })) || [];
+    return mappedCustomers;
+  }, [customers, clientData, debouncedSearchText]);
   var sortedData = React.useMemo(function () {
     if (!updatedData || !sortConfig) return updatedData;
     var key = sortConfig.key,
@@ -18653,18 +18715,6 @@ var ReturnTable$1 = function ReturnTable() {
     }
     return sortConfig.direction === 'asc' ? React__default.createElement(CaretDownFilledIcon, null) : React__default.createElement(CaretDownFilledIcon, null);
   };
-  //updated client data
-  React.useEffect(function () {
-    var updatedClientData = clientData == null ? void 0 : clientData.map(function (client) {
-      var matchingCustomer = customers == null ? void 0 : customers.find(function (customer) {
-        return (customer == null ? void 0 : customer.customer_id) === (client == null ? void 0 : client.customer_id);
-      });
-      return _extends({}, client, {
-        account_number: matchingCustomer ? matchingCustomer == null ? void 0 : matchingCustomer.account_number : null
-      });
-    });
-    setUpdatedData(updatedClientData);
-  }, [customers, clientData]);
   //handle Redirect
   var handleRedirect = function handleRedirect(customerId) {
     if (customerId) {
@@ -18773,31 +18823,144 @@ var ReturnTable$1 = function ReturnTable() {
   }))) : (sortedData == null ? void 0 : sortedData.length) === 0 ? React__default.createElement("tr", null, React__default.createElement("td", {
     colSpan: 12
   }, React__default.createElement(EmptyDataContainer, null, React__default.createElement(antd.Empty, null)))) : sortedData == null ? void 0 : sortedData.map(function (key, index) {
+    var _key$children, _key$children2;
+    if (!key) return null; // Safe rendering fallback 
+    var renderDataRow = function renderDataRow(rowKey, isChild) {
+      var _rowKey$children, _rowKey$orders, _rowKey$return_order_, _rowKey$RTS, _rowKey$PENDING, _rowKey$CLAIMSPAID, _rowKey$DISPOSE, _rowKey$REALLOCATE, _rowKey$REDEL, _rowKey$RECYCLE, _rowKey$UNKNOWN;
+      if (isChild === void 0) {
+        isChild = false;
+      }
+      if (!rowKey) return null; // Prevent properties of undefined UI crashes
+      return React__default.createElement("tr", {
+        key: isChild ? "child-" + (rowKey == null ? void 0 : rowKey.customer_id) : rowKey == null ? void 0 : rowKey.customer_id,
+        style: isChild ? {
+          backgroundColor: '#ffffff'
+        } : {}
+      }, React__default.createElement("td", {
+        style: {
+          paddingLeft: '15px',
+          color: 'inherit'
+        }
+      }, React__default.createElement("span", {
+        style: {
+          fontWeight: !isChild && (rowKey == null || (_rowKey$children = rowKey.children) == null ? void 0 : _rowKey$children.length) > 0 ? 600 : 400
+        }
+      }, rowKey == null ? void 0 : rowKey.trading_as)), React__default.createElement("td", {
+        onClick: function onClick() {
+          return handleRedirect(rowKey == null ? void 0 : rowKey.customer_id);
+        },
+        style: {
+          color: '#0099ff',
+          fontWeight: 600,
+          cursor: 'pointer'
+        }
+      }, React__default.createElement("span", null, rowKey == null ? void 0 : rowKey.customer_name)), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$orders = rowKey == null ? void 0 : rowKey.orders) != null ? _rowKey$orders : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$return_order_ = rowKey == null ? void 0 : rowKey.return_order_products) != null ? _rowKey$return_order_ : 0))), React__default.createElement("td", {
+        style: {
+          color: (rowKey == null ? void 0 : rowKey.RTS) > 0 ? '#0099ff' : 'inherit',
+          fontWeight: (rowKey == null ? void 0 : rowKey.RTS) > 0 ? 600 : 'normal',
+          cursor: (rowKey == null ? void 0 : rowKey.RTS) > 0 ? 'pointer' : 'default'
+        },
+        onClick: (rowKey == null ? void 0 : rowKey.RTS) > 0 ? function () {
+          return handleRedirectRTS(rowKey == null ? void 0 : rowKey.customer_id, 'RTS');
+        } : undefined
+      }, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, {
+        style: {
+          backgroundColor: (rowKey == null ? void 0 : rowKey.RTS) > 0 ? 'rgba(99, 150, 229, 0.1)' : 'rgba(153, 153, 153, 0.1)'
+        }
+      }, (_rowKey$RTS = rowKey == null ? void 0 : rowKey.RTS) != null ? _rowKey$RTS : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$PENDING = rowKey == null ? void 0 : rowKey.PENDING) != null ? _rowKey$PENDING : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$CLAIMSPAID = rowKey == null ? void 0 : rowKey['CLAIMS PAID']) != null ? _rowKey$CLAIMSPAID : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$DISPOSE = rowKey == null ? void 0 : rowKey.DISPOSE) != null ? _rowKey$DISPOSE : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$REALLOCATE = rowKey == null ? void 0 : rowKey['RE-ALLOCATE']) != null ? _rowKey$REALLOCATE : 0), ' ')), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$REDEL = rowKey == null ? void 0 : rowKey['RE-DEL']) != null ? _rowKey$REDEL : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$RECYCLE = rowKey == null ? void 0 : rowKey.RECYCLE) != null ? _rowKey$RECYCLE : 0))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, (_rowKey$UNKNOWN = rowKey == null ? void 0 : rowKey.UNKNOWN) != null ? _rowKey$UNKNOWN : 0))));
+    };
+    if (!(key != null && key.children) || (key == null || (_key$children = key.children) == null ? void 0 : _key$children.length) === 0) {
+      return React__default.createElement(React__default.Fragment, {
+        key: index
+      }, renderDataRow(key, false));
+    }
     return React__default.createElement("tr", {
-      key: index
-    }, React__default.createElement("td", null, key == null ? void 0 : key.trading_as), React__default.createElement("td", {
-      onClick: function onClick() {
-        return handleRedirect(key == null ? void 0 : key.customer_id);
-      },
+      key: "group-" + index
+    }, React__default.createElement("td", {
+      colSpan: 12,
       style: {
-        color: '#0099ff',
-        fontWeight: 600,
-        cursor: 'pointer'
+        padding: 0,
+        border: 'none',
+        background: 'transparent'
       }
-    }, React__default.createElement("span", null, key == null ? void 0 : key.customer_name)), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.orders))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.return_order_products))), React__default.createElement("td", {
+    }, React__default.createElement("div", {
       style: {
-        color: (key == null ? void 0 : key.RTS) > 0 ? '#0099ff' : 'inherit',
-        fontWeight: (key == null ? void 0 : key.RTS) > 0 ? 600 : 'normal',
-        cursor: (key == null ? void 0 : key.RTS) > 0 ? 'pointer' : 'default'
-      },
-      onClick: (key == null ? void 0 : key.RTS) > 0 ? function () {
-        return handleRedirectRTS(key == null ? void 0 : key.customer_id, 'RTS');
-      } : undefined
-    }, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, {
+        margin: '12px 10px',
+        backgroundColor: '#f8fafc',
+        borderRadius: '16px',
+        border: '1px solid rgba(0,0,0,0.08)',
+        borderLeft: '4px solid #0099ff',
+        boxShadow: 'inset 0 1px 4px rgba(0,0,0,0.02)'
+      }
+    }, React__default.createElement(StyledTableWrapper, {
       style: {
-        backgroundColor: (key == null ? void 0 : key.RTS) > 0 ? 'rgba(99, 150, 229, 0.1)' : 'rgba(153, 153, 153, 0.1)'
+        margin: '0',
+        border: 'none',
+        borderRadius: '15px',
+        overflow: 'hidden'
       }
-    }, key == null ? void 0 : key.RTS))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.PENDING))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key['CLAIMS PAID']))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.DISPOSE))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key['RE-ALLOCATE']), ' ')), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key['RE-DEL']))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.RECYCLE))), React__default.createElement("td", null, React__default.createElement(ColumStyle, null, React__default.createElement(GreyBox, null, key == null ? void 0 : key.UNKNOWN))));
+    }, React__default.createElement(StyledTable, {
+      style: {
+        marginBottom: 0
+      }
+    }, React__default.createElement("thead", {
+      style: {
+        visibility: 'collapse'
+      }
+    }, React__default.createElement("tr", null, [{
+      label: 'Trading Name',
+      key: 'trading_as'
+    }, {
+      label: 'Client',
+      key: 'customer_name'
+    }, {
+      label: 'Orders',
+      key: 'orders'
+    }, {
+      label: 'Products',
+      key: 'return_order_products'
+    }, {
+      label: 'RTS',
+      key: 'RTS'
+    }, {
+      label: 'Pending',
+      key: 'PENDING'
+    }, {
+      label: 'Claims Paid',
+      key: 'CLAIMS PAID'
+    }, {
+      label: 'Dispose',
+      key: 'DISPOSE'
+    }, {
+      label: 'Re-allocate',
+      key: 'RE-ALLOCATE'
+    }, {
+      label: 'Re-Del',
+      key: 'RE-DEL'
+    }, {
+      label: 'Recycle',
+      key: 'RECYCLE'
+    }, {
+      label: 'Unknown',
+      key: 'UNKNOWN'
+    }].map(function (_ref2) {
+      var label = _ref2.label,
+        thKey = _ref2.key;
+      return React__default.createElement("th", {
+        key: "hidden-" + thKey,
+        style: {
+          padding: '0 15px',
+          border: 'none',
+          height: 0
+        }
+      }, React__default.createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, label));
+    }))), React__default.createElement("tbody", null, renderDataRow(key, false), key == null || (_key$children2 = key.children) == null ? void 0 : _key$children2.map(function (child) {
+      return renderDataRow(child, true);
+    })))))));
   })))));
 };
 
@@ -18842,7 +19005,7 @@ function ReturnMainTable() {
   };
   //API for client data
   var _useAxios = dmsComponentLibrary.useAxios({
-      endpoint: "/v1/return/product/customers/",
+      endpoint: "/v1/return/product/customers/?grouped=true",
       method: 'GET',
       //@ts-ignore
       pagination: {