npm - @bjsdistribution/dms-client-return - Versions diffs - 0.0.2 → 0.0.3 - Mend

@bjsdistribution/dms-client-return 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useState, useRef, Suspense } from 'react';
 import { useLocation, Routes, Route } from 'react-router-dom';
 import styled, { css, keyframes } from 'styled-components';
-import { Label as Label$h, Input as Input$1, TextArea, FormSection, displayValueOrNA, SelectDropdown, RadioButtonGroup as RadioButtonGroup$1, Switch, Button as Button$1, useApiHook, Alert, Checkbox as Checkbox$1, AntSelect, SectionHeader, CrossIcon, AntTable, CustomRating, DeleteIcon, CancelationModal, CancelAndCompleteAction, getBaseEndpoint, dropdownStyles, filterDropdownStyles, BackgroundModal as BackgroundModal$1 } from '@bjsdistribution/dms-component-library';
+import { Label as Label$h, Input as Input$1, TextArea, FormSection, displayValueOrNA, SelectDropdown, dropdownStyles, RadioButtonGroup as RadioButtonGroup$1, Switch, Button as Button$1, useApiHook, Alert, Checkbox as Checkbox$1, AntSelect, SectionHeader, CrossIcon, AntTable, CustomRating, DeleteIcon, CancelationModal, CancelAndCompleteAction, getBaseEndpoint, filterDropdownStyles, BackgroundModal as BackgroundModal$1 } from '@bjsdistribution/dms-component-library';
 import { useAtom, atom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
-import { DatePicker, Upload, message, Input as Input$2, Select, Skeleton, Empty, ConfigProvider } from 'antd';
+import { DatePicker, Upload, message, Input as Input$2, Select, Skeleton, Empty } from 'antd';
 import dayjs from 'dayjs';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { createPortal } from 'react-dom';
@@ -549,6 +549,9 @@ var IconContainer = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObjec
 var currentActionAtom = /*#__PURE__*/atom(undefined);
 var isOnHold = /*#__PURE__*/atom(false);
 var orderStaticDataAtom = /*#__PURE__*/atom({});
+var clientDataAtom = /*#__PURE__*/atom([]);
+var returnDataAtom = /*#__PURE__*/atom([]);
+var returnAfterOrderAtom = /*#__PURE__*/atom([]);
 var ordersInitialValue = {
   depot_id: null,
   gsit_order_id: null,
@@ -622,6 +625,15 @@ function useCurrentAction() {
 function useOrderStaticData() {
   return useAtom(orderStaticDataAtom);
 }
+function useClientData() {
+  return useAtom(clientDataAtom);
+}
+function useReturnData() {
+  return useAtom(returnDataAtom);
+}
+function useReturnAfterOrderData() {
+  return useAtom(returnAfterOrderAtom);
+}
 function useIsOnHoldOrder() {
   return useAtom(isOnHold);
 }
@@ -752,7 +764,7 @@ function RecipientName() {
 }
 var Wrapper = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
 var Container$1 = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
-var InputStyled = /*#__PURE__*/styled(Input$1)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* Hide autofill suggestions in Safari */\n  &:-webkit-autofill {\n    -webkit-box-shadow: 0 0 0 100px white inset;\n    -webkit-text-fill-color: black;\n  }\n\n  &:-webkit-autofill::first-line {\n    font-family: 'inherit';\n    font-size: inherit;\n  }\n"])));
+var InputStyled = /*#__PURE__*/styled(Input$1)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* Hide autofill suggestions in Safari */\n  border-radius: 25px;\n  &:-webkit-autofill {\n    -webkit-box-shadow: 0 0 0 100px white inset;\n    -webkit-text-fill-color: black;\n  }\n\n  &:-webkit-autofill::first-line {\n    font-family: 'inherit';\n    font-size: inherit;\n  }\n"])));
 var _templateObject$3, _templateObject2$2, _templateObject3$1;
 function Address() {
@@ -790,7 +802,7 @@ function Address() {
 }
 var Wrapper$1 = /*#__PURE__*/styled.div(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
 var Container$2 = /*#__PURE__*/styled.div(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
-var TextContainer = /*#__PURE__*/styled(TextArea)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  resize: none;\n  height: 70%;\n"])));
+var TextContainer = /*#__PURE__*/styled(TextArea)(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  resize: none;\n  height: 70%;\n  border-radius: 15px;\n"])));
 var _templateObject$4, _templateObject2$3;
 // import { LocationIcon } from '../../../../assets/icons';
@@ -826,7 +838,10 @@ function Postcode() {
     placeholder: "Enter Postcode",
     value: (orderRecipient == null ? void 0 : orderRecipient.postcode) || '',
     onChange: onChange,
-    autoComplete: "off"
+    autoComplete: "off",
+    style: {
+      borderRadius: '25px'
+    }
   }));
 }
 var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
@@ -895,7 +910,7 @@ function Latitude() {
     onChange: onChange
   }));
 }
-var CustomInput = /*#__PURE__*/styled(Input$1)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput = /*#__PURE__*/styled(Input$1)(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$4 = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var _templateObject$6, _templateObject2$5;
@@ -929,7 +944,7 @@ function Longitude() {
     onChange: onChange
   }));
 }
-var CustomInput$1 = /*#__PURE__*/styled(Input$1)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$1 = /*#__PURE__*/styled(Input$1)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$5 = /*#__PURE__*/styled.div(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var _templateObject$7, _templateObject2$6, _templateObject3$2, _templateObject4, _templateObject5;
@@ -977,7 +992,7 @@ function What3words() {
 }
 var What3wordsPrefix = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  left: 12px;\n"])));
 var Wrapper$3 = /*#__PURE__*/styled.div(_templateObject2$6 || (_templateObject2$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var CustomInput$2 = /*#__PURE__*/styled(Input$1)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  padding-left: 40px;\n"])));
+var CustomInput$2 = /*#__PURE__*/styled(Input$1)(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  padding-left: 40px;\n"])));
 var Container$6 = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var ErrorText = /*#__PURE__*/styled.span(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
@@ -1029,7 +1044,7 @@ function ContactHome() {
   })));
 }
 var Wrapper$4 = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$3 = /*#__PURE__*/styled(Input$1)(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n  // @media (max-width: 1024px) {\n  //   width: 80%;\n  // }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$3 = /*#__PURE__*/styled(Input$1)(_templateObject2$8 || (_templateObject2$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n  border-radius: 25px;\n  // @media (max-width: 1024px) {\n  //   width: 80%;\n  // }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var MainContainer = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1073,7 +1088,7 @@ function ContactWork() {
 }
 var InputContainer$1 = /*#__PURE__*/styled.div(_templateObject$a || (_templateObject$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject2$9 || (_templateObject2$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$4 = /*#__PURE__*/styled(Input$1)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$4 = /*#__PURE__*/styled(Input$1)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  width: 100%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$8 = /*#__PURE__*/styled.div(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var _templateObject$b;
@@ -1122,7 +1137,7 @@ function ContactMobile() {
 }
 var InputContainer$2 = /*#__PURE__*/styled.div(_templateObject$c || (_templateObject$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject2$a || (_templateObject2$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$5 = /*#__PURE__*/styled(Input$1)(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$5 = /*#__PURE__*/styled(Input$1)(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$a = /*#__PURE__*/styled.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var _templateObject$d, _templateObject2$b, _templateObject3$7;
@@ -1169,7 +1184,10 @@ function ContactEmail() {
     type: "email",
     placeholder: "Email",
     value: (orderRecipient == null ? void 0 : orderRecipient.contact_email) || '',
-    onChange: onChange
+    onChange: onChange,
+    style: {
+      borderRadius: '25px'
+    }
   }), errors.emailError && React.createElement(ErrorText$1, null, errors.emailError));
 }
 var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
@@ -1226,7 +1244,10 @@ function RecipientReference() {
     type: "text",
     placeholder: "Enter Recipient Reference",
     value: orderDetails.recipient_reference || '',
-    onChange: onChange
+    onChange: onChange,
+    style: {
+      borderRadius: '25px'
+    }
   }));
 }
 var Container$e = /*#__PURE__*/styled.div(_templateObject$h || (_templateObject$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1256,7 +1277,15 @@ function DepotDropdown() {
       return x.value === orderDetails.depot_id;
     }),
     options: depotOptions || [],
-    onChange: onChange
+    onChange: onChange,
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles) {
+        return _extends({}, styles, {
+          borderRadius: '25px',
+          cursor: 'pointer'
+        });
+      }
+    })
   }));
 }
 var FormContainer = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1292,7 +1321,7 @@ function Droptime() {
     onChange: onChange
   }));
 }
-var CustomInput$6 = /*#__PURE__*/styled(Input$1)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$6 = /*#__PURE__*/styled(Input$1)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$f = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var _templateObject$k;
@@ -1332,7 +1361,10 @@ function DeliveryDate() {
   }), React.createElement(DatePicker, {
     onChange: onChange,
     value: actionDate === null ? actionDate : dayjs(actionDate),
-    format: "DD/MM/YY"
+    format: "DD/MM/YY",
+    style: {
+      borderRadius: '25px'
+    }
   }));
 }
 var MainContainer$1 = /*#__PURE__*/styled.div(_templateObject$k || (_templateObject$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1349,7 +1381,10 @@ function Carrier() {
     name: "carrier",
     type: "text",
     placeholder: "Carrier",
-    disabled: true
+    disabled: true,
+    style: {
+      borderRadius: '25PX'
+    }
   }));
 }
 var Wrapper$9 = /*#__PURE__*/styled.div(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
@@ -1379,7 +1414,10 @@ function OrderNumber() {
     type: "text",
     placeholder: "Order Number",
     value: (orderDetails == null ? void 0 : orderDetails.order_number) || '',
-    onChange: onChange
+    onChange: onChange,
+    style: {
+      borderRadius: '25px'
+    }
   }));
 }
 var Wrapper$a = /*#__PURE__*/styled.div(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
@@ -1422,7 +1460,10 @@ function ScheduleAfter() {
   }), React.createElement(DatePicker, {
     onChange: onChange,
     value: scheduleDate === null ? scheduleDate : dayjs(scheduleDate),
-    format: "DD/MM/YY"
+    format: "DD/MM/YY",
+    style: {
+      borderRadius: '25px'
+    }
   }));
 }
 var MainContainer$2 = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1446,7 +1487,15 @@ function VehicleTypeDropdown() {
     inputId: "vehicleType",
     openMenuOnFocus: true,
     isDisabled: true,
-    value: vehicleTypeOptions[1]
+    value: vehicleTypeOptions[1],
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles) {
+        return _extends({}, styles, {
+          borderRadius: '25px',
+          cursor: 'pointer'
+        });
+      }
+    })
   }));
 }
 var FormContainer$1 = /*#__PURE__*/styled.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1543,8 +1592,8 @@ function InstructionSection() {
     label: "Instructions / Notes"
   }), React.createElement(FormInputs$2, null, React.createElement(OrderStatusNote, null), React.createElement(DeliveryInstructions, null), React.createElement(OtherInstructions, null)));
 }
-var FormInputs$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  flex: 1;\n"])));
-var CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n"])));
+var FormInputs$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  flex: 1;\n"])));
+var CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n  padding: 10px !important;\n"])));
 var _templateObject$u;
 function TimedServiceDropdown() {
@@ -1580,7 +1629,15 @@ function TimedServiceDropdown() {
       return f.value === timesServiceId;
     }),
     inputId: "timedServiceDropdown",
-    onChange: onChange
+    onChange: onChange,
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles) {
+        return _extends({}, styles, {
+          borderRadius: '25px',
+          cursor: 'pointer'
+        });
+      }
+    })
   }));
 }
 var Container$l = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1617,7 +1674,15 @@ function ServiceTypeDropdown() {
     }),
     inputId: "serviceTypeDropdown",
     openMenuOnFocus: true,
-    onChange: onChange
+    onChange: onChange,
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles) {
+        return _extends({}, styles, {
+          borderRadius: '25px',
+          cursor: 'pointer'
+        });
+      }
+    })
   }));
 }
 var Container$m = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1657,7 +1722,15 @@ function DeliveryPointDropdown() {
       return f.value === deliveryPointId;
     }),
     openMenuOnFocus: true,
-    onChange: onChange
+    onChange: onChange,
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles) {
+        return _extends({}, styles, {
+          borderRadius: '25px',
+          cursor: 'pointer'
+        });
+      }
+    })
   }));
 }
 var Container$n = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1990,14 +2063,14 @@ function OrderDetailsFooter() {
     onClick: onSave
   }, "Save Details"));
 }
-var Container$t = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  align-items: flex-start;\n  border-top: 1px solid #edebe8;\n  background: #f8fafc;\n  /* margin: 0px -15px -15px -15px; */\n  border-radius: 0px 0px 8px 8px;\n  margin-bottom: 22px;\n  position: relative;\n  top: 21px;\n"])));
+var Container$t = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  align-items: flex-start;\n  border-top: 1px solid #edebe8;\n  background: #f8fafc;\n  /* margin: 0px -15px -15px -15px; */\n  border-radius: 0px 0px 8px 8px;\n  /* margin-bottom: 22px; */\n  position: relative;\n  align-items: center;\n  /* top: 21px; */\n"])));
 var _templateObject$E, _templateObject2$q, _templateObject3$d;
 function ExpandedContent() {
   return React.createElement(MainContainer$3, null, React.createElement(Container$u, null, React.createElement(HalfWidth, null, React.createElement(CustomerSection, null)), React.createElement(HalfWidth, null, React.createElement(OrdersSection, null)), React.createElement(InstructionSection, null)), React.createElement(ServicesSection, null), React.createElement(OrderDetailsFooter, null));
 }
 var HalfWidth = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media (min-width: 769px) {\n    flex-direction: row; /* Change to row for large screens */\n    width: 50%;\n  }\n\n  @media (min-width: 1024px) {\n    width: auto;\n  }\n\n  @media (min-width: 1440px) {\n    width: 50%;\n  }\n"])));
-var Container$u = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 25px;\n  justify-content: space-between;\n\n  @media (min-width: 769px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 1024px) {\n    justify-content: flex-start;\n  }\n"])));
+var Container$u = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  justify-content: space-between;\n\n  @media (min-width: 769px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 1024px) {\n    justify-content: flex-start;\n  }\n"])));
 // const InstructionContainer = styled.div`
 //   display: flex;
 //   justify-content: center;
@@ -2850,7 +2923,7 @@ var renderIcon = function renderIcon(value, orderStatus) {
 };
 var BoxContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid #e3e3e3;\n  display: flex;\n  justify-content: space-evenly;\n  border-radius: 8px;\n  background: #f8fafc;\n  align-items: center;\n  height: 5%;\n"])));
 var Heading = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n"])));
-var Container$A = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var Container$A = /*#__PURE__*/styled.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 35px;\n"])));
 var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: flex;\n  align-items: center;\n"])));
 var _templateObject$S;
@@ -2860,28 +2933,11 @@ function GeneralHeader() {
 }
 var Section = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex;\n  background: #ffffff;\n  // padding: 15px;\n  flex-direction: column;\n  gap: 14px;\n  border-radius: 12px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0; */\n"])));
-var _templateObject19, _templateObject20;
-var StyledTable = /*#__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    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      .emailInvoiceCheckbox {\n        padding-right: 0px;\n        width: 0;\n        > div {\n          width: fit-content;\n        }\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      }\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        .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        }\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      }\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"])));
+var _templateObject19, _templateObject20, _templateObject21;
+var StyledTable = /*#__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    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      .emailInvoiceCheckbox {\n        padding-right: 0px;\n        width: 0;\n        > div {\n          width: fit-content;\n        }\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      }\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        .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        }\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      }\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 = /*#__PURE__*/styled.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 396px);\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 staticData = /*#__PURE__*/atom({});
-function useStaticData() {
-  return useAtom(staticData);
-}
-var emailInvoiceData = /*#__PURE__*/atom({});
-function useEmailInvoice() {
-  return useAtom(emailInvoiceData);
-}
-var selectedEmailList = /*#__PURE__*/atom([]);
-function useSelectedEmail() {
-  return useAtom(selectedEmailList);
-}
-// Sticky menu state
-var stickyStatus = /*#__PURE__*/atom(false);
-var useStickyStatus = function useStickyStatus() {
-  return useAtom(stickyStatus);
-};
+var CustomDrop = /*#__PURE__*/styled.div(_templateObject21 || (_templateObject21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* border-radius: 20px;\n  border: 1px solid #e2e0db;\n  background: #fff;\n  display: flex;\n  padding: 4px 8px;\n  gap: 8px;\n  align-items: center; */\n  cursor: pointer;\n  &.active .drop {\n    transform: rotate(180deg);\n  }\n"])));
 var ActionIcon = function ActionIcon() {
   return React.createElement("svg", {
@@ -2900,10 +2956,32 @@ var ActionIcon = function ActionIcon() {
   }));
 };
+var customerData = /*#__PURE__*/atom([]);
+var actionTypeData = /*#__PURE__*/atom([]);
+var locationData = /*#__PURE__*/atom([]);
+var selectedOrderlList = /*#__PURE__*/atom([]);
+function useSelectedOrders() {
+  return useAtom(selectedOrderlList);
+}
+// Sticky menu state
+var stickyStatus = /*#__PURE__*/atom(false);
+var useStickyStatus = function useStickyStatus() {
+  return useAtom(stickyStatus);
+};
+function useCustomerData() {
+  return useAtom(customerData);
+}
+function useActionType() {
+  return useAtom(actionTypeData);
+}
+function useLocationData() {
+  return useAtom(locationData);
+}
 var ReturnProductTable = function ReturnProductTable() {
-  var _useSelectedEmail = useSelectedEmail(),
-    selectedInvoices = _useSelectedEmail[0],
-    setSelectedInvoices = _useSelectedEmail[1];
+  var _useSelectedOrders = useSelectedOrders(),
+    selectedInvoices = _useSelectedOrders[0],
+    setSelectedInvoices = _useSelectedOrders[1];
   var _useState = useState(false),
     selectAll = _useState[0],
     setSelectAll = _useState[1];
@@ -3066,7 +3144,11 @@ function CollapsedContent$2() {
 // `;
 var Container$E = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 30px;\n"])));
-// Base
+// Dropdown
+var PrintOptionTOggle = /*#__PURE__*/atom(null);
+var usePrintOptionTOggle = function usePrintOptionTOggle() {
+  return useAtom(PrintOptionTOggle);
+};
 // Overview Table
 var atomRoutesTable = /*#__PURE__*/atom([]);
 var useRoutesTable = function useRoutesTable() {
@@ -3076,6 +3158,22 @@ var loading = /*#__PURE__*/atom(false);
 var useLoading = function useLoading() {
   return useAtom(loading);
 };
+var selectedAction = /*#__PURE__*/atom(null);
+function useSelectedAction() {
+  return useAtom(selectedAction);
+}
+var selectedLocation = /*#__PURE__*/atom(null);
+function useSelectedLocation() {
+  return useAtom(selectedLocation);
+}
+var selectedClient = /*#__PURE__*/atom(null);
+function useSelectedClient() {
+  return useAtom(selectedClient);
+}
+var clientTableName = /*#__PURE__*/atom(null);
+function useTableName() {
+  return useAtom(clientTableName);
+}
 // Paginations
 var atomPaginationData = /*#__PURE__*/atom({
   firstPage: 1,
@@ -3097,6 +3195,7 @@ var countStatus = /*#__PURE__*/atom([]);
 var useCountData = function useCountData() {
   return useAtom(countStatus);
 };
+//
 // ROUTE DETAILS PAGE STATES ->
 // const orderId = atom<number | undefined>(undefined);
 // export const useOrderId = () => {
@@ -7535,10 +7634,154 @@ var Details = function Details() {
 var DetailsContainer = /*#__PURE__*/styled.div(_templateObject$1V || (_templateObject$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  > svg {\n    transform: scale(0.6);\n  }\n"])));
 var Typo = /*#__PURE__*/styled.div(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px; /* 160% */\n  text-transform: uppercase;\n  margin: 0;\n  padding: 0;\n\n  @media screen and (max-width: 1220px) {\n    font-size: 14px;\n  }\n"])));
-var _templateObject$1W;
-var DropDownContainer$1 = /*#__PURE__*/styled.div(_templateObject$1W || (_templateObject$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  border-right: 1px solid #d0d5dd;\n  padding: 4px;\n  @media screen and (max-width: 1220px) {\n    font-size: 12px;\n  }\n"])));
+var CollectionLabelIcon = function CollectionLabelIcon() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, React.createElement("g", {
+    clipPath: "url(#clip0_137_17799)"
+  }, React.createElement("path", {
+    d: "M4.31833 0.0159435H12.1831C12.6855 0.0335435 13.0735 0.179144 13.3087 0.503944C13.4959 0.761544 13.5927 1.08634 13.6127 1.49674L13.6119 3.17114H14.5711C15.0727 3.18874 15.4607 3.33354 15.6959 3.65834C15.8831 3.91594 15.9799 4.24154 15.9999 4.65194V11.1295C15.9983 11.6303 15.9631 12.0047 15.8247 12.2639C15.6103 12.6639 15.2135 12.8423 14.5527 12.8951L13.6127 12.8943V14.4535C13.6127 14.8191 13.5471 15.1407 13.4071 15.4135C13.2103 15.7959 12.8351 15.9887 12.3535 15.9999H3.77993C3.30473 15.9999 2.91433 15.8263 2.67113 15.4703C2.47673 15.1847 2.37513 14.8471 2.36313 14.4535V12.8943H1.54713C0.957534 12.8943 0.507134 12.7183 0.267934 12.3087C0.0895338 12.0031 0.00633383 11.6119 0.00153383 11.1279V4.81994C-0.0160662 4.31114 0.0879338 3.89434 0.341534 3.58554C0.647934 3.21114 1.17913 3.11034 1.90633 3.17114L2.41273 3.17034L2.41353 1.66474C2.39593 1.15594 2.49993 0.739944 2.75353 0.430344C3.05993 0.0567435 3.59193 -0.0440565 4.31833 0.0159435ZM12.5415 9.72074H3.43433V14.4367C3.43993 14.6183 3.48233 14.7567 3.55593 14.8655C3.58233 14.9039 3.63593 14.9279 3.77993 14.9279H12.3407C12.3754 14.9275 12.4101 14.9259 12.4447 14.9231H12.4543C12.5103 14.8151 12.5423 14.6591 12.5423 14.4535L12.5415 9.72074ZM11.4391 13.3479C11.5813 13.3479 11.7176 13.4044 11.8181 13.5049C11.9187 13.6055 11.9751 13.7418 11.9751 13.8839C11.9751 14.0261 11.9187 14.1624 11.8181 14.263C11.7176 14.3635 11.5813 14.4199 11.4391 14.4199H4.57513C4.43298 14.4199 4.29664 14.3635 4.19612 14.263C4.0956 14.1624 4.03913 14.0261 4.03913 13.8839C4.03913 13.7418 4.0956 13.6055 4.19612 13.5049C4.29664 13.4044 4.43298 13.3479 4.57513 13.3479H11.4391ZM11.4391 11.8303C11.5813 11.8303 11.7176 11.8868 11.8181 11.9873C11.9187 12.0879 11.9751 12.2242 11.9751 12.3663C11.9751 12.5085 11.9187 12.6448 11.8181 12.7454C11.7176 12.8459 11.5813 12.9023 11.4391 12.9023H4.57513C4.43298 12.9023 4.29664 12.8459 4.19612 12.7454C4.0956 12.6448 4.03913 12.5085 4.03913 12.3663C4.03913 12.2242 4.0956 12.0879 4.19612 11.9873C4.29664 11.8868 4.43298 11.8303 4.57513 11.8303H11.4391ZM1.86313 4.24154C1.40793 4.24314 1.30313 4.24314 1.20713 4.35354C1.11113 4.46554 1.06313 4.51194 1.07273 4.80154V11.1231C1.07593 11.4303 1.08553 11.5775 1.15513 11.6895C1.22473 11.8015 1.29913 11.8231 1.54713 11.8231L2.36313 11.8223V9.72074H2.25593C2.11378 9.72074 1.97744 9.66427 1.87692 9.56375C1.7764 9.46323 1.71993 9.3269 1.71993 9.18474C1.71993 9.04259 1.7764 8.90625 1.87692 8.80573C1.97744 8.70522 2.11378 8.64874 2.25593 8.64874H13.7791C13.9213 8.64874 14.0576 8.70522 14.1581 8.80573C14.2587 8.90625 14.3151 9.04259 14.3151 9.18474C14.3151 9.3269 14.2587 9.46323 14.1581 9.56375C14.0576 9.66427 13.9213 9.72074 13.7791 9.72074H13.6127V11.8223L14.5087 11.8247C14.6751 11.8111 14.7703 11.8287 14.8567 11.7383C14.9431 11.6471 14.9279 11.4263 14.9287 11.1279V4.67834C14.9199 4.48794 14.9023 4.42394 14.8431 4.35434C14.7839 4.28394 14.7391 4.25034 14.5527 4.24314L1.86313 4.24154ZM11.4391 10.3135C11.5813 10.3135 11.7176 10.37 11.8181 10.4705C11.9187 10.5711 11.9751 10.7074 11.9751 10.8495C11.9751 10.9917 11.9187 11.128 11.8181 11.2286C11.7176 11.3291 11.5813 11.3855 11.4391 11.3855H4.57513C4.43298 11.3855 4.29664 11.3291 4.19612 11.2286C4.0956 11.128 4.03913 10.9917 4.03913 10.8495C4.03913 10.7074 4.0956 10.5711 4.19612 10.4705C4.29664 10.37 4.43298 10.3135 4.57513 10.3135H11.4391ZM12.8671 4.73114C13.0783 4.73125 13.2874 4.77294 13.4824 4.85385C13.6775 4.93476 13.8547 5.05329 14.0039 5.20268C14.1532 5.35207 14.2715 5.5294 14.3522 5.72453C14.433 5.91966 14.4744 6.12878 14.4743 6.33994C14.4742 6.55111 14.4325 6.76019 14.3516 6.95524C14.2707 7.15029 14.1522 7.3275 14.0028 7.47674C13.8534 7.62598 13.6761 7.74434 13.481 7.82505C13.2858 7.90576 13.0767 7.94725 12.8655 7.94714C12.4391 7.94693 12.0301 7.77732 11.7287 7.47561C11.4273 7.1739 11.2581 6.76481 11.2583 6.33834C11.2585 5.91188 11.4282 5.50296 11.7299 5.20155C12.0316 4.90014 12.4407 4.73093 12.8671 4.73114ZM12.8671 5.80314C12.725 5.80314 12.5886 5.85962 12.4881 5.96013C12.3876 6.06065 12.3311 6.19699 12.3311 6.33914C12.3311 6.4813 12.3876 6.61763 12.4881 6.71815C12.5886 6.81867 12.725 6.87514 12.8671 6.87514C13.0093 6.87514 13.1456 6.81867 13.2461 6.71815C13.3467 6.61763 13.4031 6.4813 13.4031 6.33914C13.4031 6.19699 13.3467 6.06065 13.2461 5.96013C13.1456 5.85962 13.0093 5.80314 12.8671 5.80314ZM3.58233 1.11034C3.51673 1.19034 3.47513 1.35754 3.48473 1.64634L3.48393 3.17034L12.5407 3.17114L12.5415 1.52314C12.5319 1.33354 12.4943 1.20554 12.4415 1.13354C12.4375 1.12714 12.3519 1.09514 12.1647 1.08874L4.27513 1.08634C3.82953 1.05034 3.59433 1.09514 3.58233 1.11034Z",
+    fill: "#FEBA30"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_137_17799"
+  }, React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
+};
+var CustomerLabelIcon = function CustomerLabelIcon() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, React.createElement("g", {
+    clipPath: "url(#clip0_137_17783)"
+  }, React.createElement("path", {
+    d: "M4.31833 0.0159435H12.1831C12.6855 0.0335435 13.0735 0.179144 13.3087 0.503944C13.4959 0.761544 13.5927 1.08634 13.6127 1.49674L13.6119 3.17114H14.5711C15.0727 3.18874 15.4607 3.33354 15.6959 3.65834C15.8831 3.91594 15.9799 4.24154 15.9999 4.65194V11.1295C15.9983 11.6303 15.9631 12.0047 15.8247 12.2639C15.6103 12.6639 15.2135 12.8423 14.5527 12.8951L13.6127 12.8943V14.4535C13.6127 14.8191 13.5471 15.1407 13.4071 15.4135C13.2103 15.7959 12.8351 15.9887 12.3535 15.9999H3.77993C3.30473 15.9999 2.91433 15.8263 2.67113 15.4703C2.47673 15.1847 2.37513 14.8471 2.36313 14.4535V12.8943H1.54713C0.957534 12.8943 0.507134 12.7183 0.267934 12.3087C0.0895338 12.0031 0.00633383 11.6119 0.00153383 11.1279V4.81994C-0.0160662 4.31114 0.0879338 3.89434 0.341534 3.58554C0.647934 3.21114 1.17913 3.11034 1.90633 3.17114L2.41273 3.17034L2.41353 1.66474C2.39593 1.15594 2.49993 0.739944 2.75353 0.430344C3.05993 0.0567435 3.59193 -0.0440565 4.31833 0.0159435ZM12.5415 9.72074H3.43433V14.4367C3.43993 14.6183 3.48233 14.7567 3.55593 14.8655C3.58233 14.9039 3.63593 14.9279 3.77993 14.9279H12.3407C12.3754 14.9275 12.4101 14.9259 12.4447 14.9231H12.4543C12.5103 14.8151 12.5423 14.6591 12.5423 14.4535L12.5415 9.72074ZM11.4391 13.3479C11.5813 13.3479 11.7176 13.4044 11.8181 13.5049C11.9187 13.6055 11.9751 13.7418 11.9751 13.8839C11.9751 14.0261 11.9187 14.1624 11.8181 14.263C11.7176 14.3635 11.5813 14.4199 11.4391 14.4199H4.57513C4.43298 14.4199 4.29664 14.3635 4.19612 14.263C4.0956 14.1624 4.03913 14.0261 4.03913 13.8839C4.03913 13.7418 4.0956 13.6055 4.19612 13.5049C4.29664 13.4044 4.43298 13.3479 4.57513 13.3479H11.4391ZM11.4391 11.8303C11.5813 11.8303 11.7176 11.8868 11.8181 11.9873C11.9187 12.0879 11.9751 12.2242 11.9751 12.3663C11.9751 12.5085 11.9187 12.6448 11.8181 12.7454C11.7176 12.8459 11.5813 12.9023 11.4391 12.9023H4.57513C4.43298 12.9023 4.29664 12.8459 4.19612 12.7454C4.0956 12.6448 4.03913 12.5085 4.03913 12.3663C4.03913 12.2242 4.0956 12.0879 4.19612 11.9873C4.29664 11.8868 4.43298 11.8303 4.57513 11.8303H11.4391ZM1.86313 4.24154C1.40793 4.24314 1.30313 4.24314 1.20713 4.35354C1.11113 4.46554 1.06313 4.51194 1.07273 4.80154V11.1231C1.07593 11.4303 1.08553 11.5775 1.15513 11.6895C1.22473 11.8015 1.29913 11.8231 1.54713 11.8231L2.36313 11.8223V9.72074H2.25593C2.11378 9.72074 1.97744 9.66427 1.87692 9.56375C1.7764 9.46323 1.71993 9.3269 1.71993 9.18474C1.71993 9.04259 1.7764 8.90625 1.87692 8.80573C1.97744 8.70522 2.11378 8.64874 2.25593 8.64874H13.7791C13.9213 8.64874 14.0576 8.70522 14.1581 8.80573C14.2587 8.90625 14.3151 9.04259 14.3151 9.18474C14.3151 9.3269 14.2587 9.46323 14.1581 9.56375C14.0576 9.66427 13.9213 9.72074 13.7791 9.72074H13.6127V11.8223L14.5087 11.8247C14.6751 11.8111 14.7703 11.8287 14.8567 11.7383C14.9431 11.6471 14.9279 11.4263 14.9287 11.1279V4.67834C14.9199 4.48794 14.9023 4.42394 14.8431 4.35434C14.7839 4.28394 14.7391 4.25034 14.5527 4.24314L1.86313 4.24154ZM11.4391 10.3135C11.5813 10.3135 11.7176 10.37 11.8181 10.4705C11.9187 10.5711 11.9751 10.7074 11.9751 10.8495C11.9751 10.9917 11.9187 11.128 11.8181 11.2286C11.7176 11.3291 11.5813 11.3855 11.4391 11.3855H4.57513C4.43298 11.3855 4.29664 11.3291 4.19612 11.2286C4.0956 11.128 4.03913 10.9917 4.03913 10.8495C4.03913 10.7074 4.0956 10.5711 4.19612 10.4705C4.29664 10.37 4.43298 10.3135 4.57513 10.3135H11.4391ZM12.8671 4.73114C13.0783 4.73125 13.2874 4.77294 13.4824 4.85385C13.6775 4.93476 13.8547 5.05329 14.0039 5.20268C14.1532 5.35207 14.2715 5.5294 14.3522 5.72453C14.433 5.91966 14.4744 6.12878 14.4743 6.33994C14.4742 6.55111 14.4325 6.76019 14.3516 6.95524C14.2707 7.15029 14.1522 7.3275 14.0028 7.47674C13.8534 7.62598 13.6761 7.74434 13.481 7.82505C13.2858 7.90576 13.0767 7.94725 12.8655 7.94714C12.4391 7.94693 12.0301 7.77732 11.7287 7.47561C11.4273 7.1739 11.2581 6.76481 11.2583 6.33834C11.2585 5.91188 11.4282 5.50296 11.7299 5.20155C12.0316 4.90014 12.4407 4.73093 12.8671 4.73114ZM12.8671 5.80314C12.725 5.80314 12.5886 5.85962 12.4881 5.96013C12.3876 6.06065 12.3311 6.19699 12.3311 6.33914C12.3311 6.4813 12.3876 6.61763 12.4881 6.71815C12.5886 6.81867 12.725 6.87514 12.8671 6.87514C13.0093 6.87514 13.1456 6.81867 13.2461 6.71815C13.3467 6.61763 13.4031 6.4813 13.4031 6.33914C13.4031 6.19699 13.3467 6.06065 13.2461 5.96013C13.1456 5.85962 13.0093 5.80314 12.8671 5.80314ZM3.58233 1.11034C3.51673 1.19034 3.47513 1.35754 3.48473 1.64634L3.48393 3.17034L12.5407 3.17114L12.5415 1.52314C12.5319 1.33354 12.4943 1.20554 12.4415 1.13354C12.4375 1.12714 12.3519 1.09514 12.1647 1.08874L4.27513 1.08634C3.82953 1.05034 3.59433 1.09514 3.58233 1.11034Z",
+    fill: "#E95252"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_137_17783"
+  }, React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
+};
+var DeliveryNotes = function DeliveryNotes() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, React.createElement("g", {
+    clipPath: "url(#clip0_137_17767)"
+  }, React.createElement("path", {
+    d: "M4.31833 0.0159435H12.1831C12.6855 0.0335435 13.0735 0.179144 13.3087 0.503944C13.4959 0.761544 13.5927 1.08634 13.6127 1.49674L13.6119 3.17114H14.5711C15.0727 3.18874 15.4607 3.33354 15.6959 3.65834C15.8831 3.91594 15.9799 4.24154 15.9999 4.65194V11.1295C15.9983 11.6303 15.9631 12.0047 15.8247 12.2639C15.6103 12.6639 15.2135 12.8423 14.5527 12.8951L13.6127 12.8943V14.4535C13.6127 14.8191 13.5471 15.1407 13.4071 15.4135C13.2103 15.7959 12.8351 15.9887 12.3535 15.9999H3.77993C3.30473 15.9999 2.91433 15.8263 2.67113 15.4703C2.47673 15.1847 2.37513 14.8471 2.36313 14.4535V12.8943H1.54713C0.957534 12.8943 0.507134 12.7183 0.267934 12.3087C0.0895338 12.0031 0.00633383 11.6119 0.00153383 11.1279V4.81994C-0.0160662 4.31114 0.0879338 3.89434 0.341534 3.58554C0.647934 3.21114 1.17913 3.11034 1.90633 3.17114L2.41273 3.17034L2.41353 1.66474C2.39593 1.15594 2.49993 0.739944 2.75353 0.430344C3.05993 0.0567435 3.59193 -0.0440565 4.31833 0.0159435ZM12.5415 9.72074H3.43433V14.4367C3.43993 14.6183 3.48233 14.7567 3.55593 14.8655C3.58233 14.9039 3.63593 14.9279 3.77993 14.9279H12.3407C12.3754 14.9275 12.4101 14.9259 12.4447 14.9231H12.4543C12.5103 14.8151 12.5423 14.6591 12.5423 14.4535L12.5415 9.72074ZM11.4391 13.3479C11.5813 13.3479 11.7176 13.4044 11.8181 13.5049C11.9187 13.6055 11.9751 13.7418 11.9751 13.8839C11.9751 14.0261 11.9187 14.1624 11.8181 14.263C11.7176 14.3635 11.5813 14.4199 11.4391 14.4199H4.57513C4.43298 14.4199 4.29664 14.3635 4.19612 14.263C4.0956 14.1624 4.03913 14.0261 4.03913 13.8839C4.03913 13.7418 4.0956 13.6055 4.19612 13.5049C4.29664 13.4044 4.43298 13.3479 4.57513 13.3479H11.4391ZM11.4391 11.8303C11.5813 11.8303 11.7176 11.8868 11.8181 11.9873C11.9187 12.0879 11.9751 12.2242 11.9751 12.3663C11.9751 12.5085 11.9187 12.6448 11.8181 12.7454C11.7176 12.8459 11.5813 12.9023 11.4391 12.9023H4.57513C4.43298 12.9023 4.29664 12.8459 4.19612 12.7454C4.0956 12.6448 4.03913 12.5085 4.03913 12.3663C4.03913 12.2242 4.0956 12.0879 4.19612 11.9873C4.29664 11.8868 4.43298 11.8303 4.57513 11.8303H11.4391ZM1.86313 4.24154C1.40793 4.24314 1.30313 4.24314 1.20713 4.35354C1.11113 4.46554 1.06313 4.51194 1.07273 4.80154V11.1231C1.07593 11.4303 1.08553 11.5775 1.15513 11.6895C1.22473 11.8015 1.29913 11.8231 1.54713 11.8231L2.36313 11.8223V9.72074H2.25593C2.11378 9.72074 1.97744 9.66427 1.87692 9.56375C1.7764 9.46323 1.71993 9.3269 1.71993 9.18474C1.71993 9.04259 1.7764 8.90625 1.87692 8.80573C1.97744 8.70522 2.11378 8.64874 2.25593 8.64874H13.7791C13.9213 8.64874 14.0576 8.70522 14.1581 8.80573C14.2587 8.90625 14.3151 9.04259 14.3151 9.18474C14.3151 9.3269 14.2587 9.46323 14.1581 9.56375C14.0576 9.66427 13.9213 9.72074 13.7791 9.72074H13.6127V11.8223L14.5087 11.8247C14.6751 11.8111 14.7703 11.8287 14.8567 11.7383C14.9431 11.6471 14.9279 11.4263 14.9287 11.1279V4.67834C14.9199 4.48794 14.9023 4.42394 14.8431 4.35434C14.7839 4.28394 14.7391 4.25034 14.5527 4.24314L1.86313 4.24154ZM11.4391 10.3135C11.5813 10.3135 11.7176 10.37 11.8181 10.4705C11.9187 10.5711 11.9751 10.7074 11.9751 10.8495C11.9751 10.9917 11.9187 11.128 11.8181 11.2286C11.7176 11.3291 11.5813 11.3855 11.4391 11.3855H4.57513C4.43298 11.3855 4.29664 11.3291 4.19612 11.2286C4.0956 11.128 4.03913 10.9917 4.03913 10.8495C4.03913 10.7074 4.0956 10.5711 4.19612 10.4705C4.29664 10.37 4.43298 10.3135 4.57513 10.3135H11.4391ZM12.8671 4.73114C13.0783 4.73125 13.2874 4.77294 13.4824 4.85385C13.6775 4.93476 13.8547 5.05329 14.0039 5.20268C14.1532 5.35207 14.2715 5.5294 14.3522 5.72453C14.433 5.91966 14.4744 6.12878 14.4743 6.33994C14.4742 6.55111 14.4325 6.76019 14.3516 6.95524C14.2707 7.15029 14.1522 7.3275 14.0028 7.47674C13.8534 7.62598 13.6761 7.74434 13.481 7.82505C13.2858 7.90576 13.0767 7.94725 12.8655 7.94714C12.4391 7.94693 12.0301 7.77732 11.7287 7.47561C11.4273 7.1739 11.2581 6.76481 11.2583 6.33834C11.2585 5.91188 11.4282 5.50296 11.7299 5.20155C12.0316 4.90014 12.4407 4.73093 12.8671 4.73114ZM12.8671 5.80314C12.725 5.80314 12.5886 5.85962 12.4881 5.96013C12.3876 6.06065 12.3311 6.19699 12.3311 6.33914C12.3311 6.4813 12.3876 6.61763 12.4881 6.71815C12.5886 6.81867 12.725 6.87514 12.8671 6.87514C13.0093 6.87514 13.1456 6.81867 13.2461 6.71815C13.3467 6.61763 13.4031 6.4813 13.4031 6.33914C13.4031 6.19699 13.3467 6.06065 13.2461 5.96013C13.1456 5.85962 13.0093 5.80314 12.8671 5.80314ZM3.58233 1.11034C3.51673 1.19034 3.47513 1.35754 3.48473 1.64634L3.48393 3.17034L12.5407 3.17114L12.5415 1.52314C12.5319 1.33354 12.4943 1.20554 12.4415 1.13354C12.4375 1.12714 12.3519 1.09514 12.1647 1.08874L4.27513 1.08634C3.82953 1.05034 3.59433 1.09514 3.58233 1.11034Z",
+    fill: "#6396E5"
+  })), React.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_137_17767"
+  }, React.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white"
+  }))));
+};
+var LoadSheetIcon = function LoadSheetIcon() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, React.createElement("path", {
+    d: "M0.571246 2.66577C0.419742 2.66577 0.274444 2.72595 0.167314 2.83308C0.0601847 2.94021 0 3.08551 0 3.23701V7.80698C0 8.2615 0.180554 8.69739 0.501942 9.01878C0.823331 9.34017 1.25923 9.52072 1.71374 9.52072H5.52205C5.97656 9.52072 6.41245 9.34017 6.73384 9.01878C7.05523 8.69739 7.23579 8.2615 7.23579 7.80698V3.23701C7.23579 3.08551 7.1756 2.94021 7.06847 2.83308C6.96134 2.72595 6.81604 2.66577 6.66454 2.66577H6.47412V1.90411C6.47412 1.56986 6.38613 1.24151 6.219 0.952046C6.05187 0.662584 5.81149 0.422215 5.52203 0.255096C5.23256 0.0879774 4.9042 -2.12281e-06 4.56996 0C4.23571 2.12289e-06 3.90736 0.0879859 3.61789 0.255108C3.32843 0.0879859 3.00007 2.12289e-06 2.66583 0C2.33158 -2.12281e-06 2.00323 0.0879774 1.71376 0.255096C1.42429 0.422215 1.18392 0.662584 1.01679 0.952046C0.84966 1.24151 0.76167 1.56986 0.761662 1.90411V2.66501L0.571246 2.66577ZM4.56997 2.66577V1.90411C4.56997 1.63905 4.51589 1.38618 4.41764 1.15768C4.52831 1.13509 4.64263 1.13739 4.7523 1.16443C4.86197 1.19147 4.96426 1.24257 5.05175 1.31402C5.13924 1.38547 5.20974 1.47548 5.25815 1.57754C5.30655 1.6796 5.33165 1.79115 5.33163 1.90411V2.66577H4.56997ZM3.42748 1.90411V2.66577H1.90415V1.90411C1.90415 1.7021 1.9844 1.50837 2.12724 1.36553C2.27008 1.22269 2.46381 1.14244 2.66582 1.14244C2.86782 1.14244 3.06155 1.22269 3.20439 1.36553C3.34723 1.50837 3.42748 1.7021 3.42748 1.90411ZM0.761662 12.377V10.092C1.0549 10.2146 1.37632 10.2824 1.71374 10.2824H1.90415V12.377C1.90414 12.5182 1.95644 12.6544 2.05097 12.7593C2.14549 12.8643 2.27553 12.9305 2.41599 12.9452C2.57398 12.4998 2.86611 12.1144 3.25218 11.8419C3.63825 11.5694 4.09927 11.4233 4.57181 11.4236C5.04434 11.424 5.50516 11.5708 5.89084 11.8438C6.27653 12.1168 6.56811 12.5026 6.72547 12.9482H8.50928C8.66687 12.5028 8.95859 12.1172 9.34432 11.8444C9.73004 11.5716 10.1908 11.4251 10.6633 11.4249V3.23701C10.6633 3.08551 10.6031 2.94021 10.4959 2.83308C10.3888 2.72595 10.2435 2.66577 10.092 2.66577H7.86949C7.73736 2.38798 7.51357 2.16419 7.23579 2.03207V1.90411C7.23579 1.77462 7.22665 1.64743 7.20913 1.52328H10.092C10.5465 1.52328 10.9824 1.70383 11.3038 2.02522C11.6252 2.34661 11.8058 2.7825 11.8058 3.23701V3.80826H12.9863C13.649 3.80826 14.2522 4.18985 14.5356 4.78852L15.8304 7.5206C15.9385 7.74986 15.9949 8.00045 15.9949 8.25408V12.377C15.9949 12.8315 15.8143 13.2674 15.493 13.5888C15.1716 13.9101 14.7357 14.0907 14.2812 14.0907H12.917C12.8275 14.6236 12.5519 15.1075 12.1394 15.4564C11.7269 15.8054 11.204 15.9969 10.6636 15.9969C10.1233 15.9969 9.60043 15.8054 9.18789 15.4564C8.77535 15.1075 8.49984 14.6236 8.41027 14.0907H6.82297C6.73393 14.6249 6.45806 15.1101 6.04455 15.4598C5.63104 15.8095 5.10676 16.0009 4.56522 16C4.02367 15.9991 3.50004 15.8059 3.08772 15.4548C2.67539 15.1037 2.40116 14.6176 2.31393 14.0831C1.88927 14.0429 1.49486 13.8458 1.2078 13.5303C0.920737 13.2147 0.76166 12.8035 0.761662 12.377ZM12.8188 12.9482H14.2812C14.4327 12.9482 14.578 12.888 14.6851 12.7809C14.7922 12.6738 14.8524 12.5285 14.8524 12.377V12.1865H13.9003C13.7488 12.1865 13.6035 12.1264 13.4964 12.0192C13.3893 11.9121 13.3291 11.7668 13.3291 11.6153C13.3291 11.4638 13.3893 11.3185 13.4964 11.2114C13.6035 11.1042 13.7488 11.044 13.9003 11.044H14.8524V8.75906H11.8058V11.7303C12.2774 12.003 12.6365 12.4348 12.8188 12.9482ZM11.8058 4.95075V7.61657H14.611L13.5043 5.27751C13.458 5.17973 13.3848 5.09712 13.2934 5.03927C13.202 4.98143 13.096 4.95073 12.9879 4.95075H11.8058ZM4.56997 14.8524C4.87298 14.8524 5.16358 14.732 5.37783 14.5177C5.59209 14.3035 5.71246 14.0129 5.71246 13.7099C5.71246 13.4069 5.59209 13.1163 5.37783 12.902C5.16358 12.6877 4.87298 12.5674 4.56997 12.5674C4.26696 12.5674 3.97636 12.6877 3.76211 12.902C3.54785 13.1163 3.42748 13.4069 3.42748 13.7099C3.42748 14.0129 3.54785 14.3035 3.76211 14.5177C3.97636 14.732 4.26696 14.8524 4.56997 14.8524ZM11.8058 13.7099C11.8058 13.4069 11.6854 13.1163 11.4711 12.902C11.2569 12.6877 10.9663 12.5674 10.6633 12.5674C10.3603 12.5674 10.0697 12.6877 9.8554 12.902C9.64114 13.1163 9.52077 13.4069 9.52077 13.7099C9.52077 14.0129 9.64114 14.3035 9.8554 14.5177C10.0697 14.732 10.3603 14.8524 10.6633 14.8524C10.9663 14.8524 11.2569 14.732 11.4711 14.5177C11.6854 14.3035 11.8058 14.0129 11.8058 13.7099ZM1.90415 1.90411C1.90415 1.79595 1.927 1.69313 1.96737 1.59944L1.90415 1.90411Z",
+    fill: "#FEBA30"
+  }));
+};
+var RunsheetIcon = function RunsheetIcon() {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, React.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: "white"
+  }), React.createElement("path", {
+    d: "M6.5 12C6.36739 12 6.24021 11.9473 6.14645 11.8536C6.05268 11.7598 6 11.6326 6 11.5C6 11.3674 6.05268 11.2402 6.14645 11.1464C6.24021 11.0527 6.36739 11 6.5 11H13.5C13.6326 11 13.7598 11.0527 13.8536 11.1464C13.9473 11.2402 14 11.3674 14 11.5C14 11.6326 13.9473 11.7598 13.8536 11.8536C13.7598 11.9473 13.6326 12 13.5 12H6.5ZM6.5 15C6.36739 15 6.24021 14.9473 6.14645 14.8536C6.05268 14.7598 6 14.6326 6 14.5C6 14.3674 6.05268 14.2402 6.14645 14.1464C6.24021 14.0527 6.36739 14 6.5 14H13.5C13.6326 14 13.7598 14.0527 13.8536 14.1464C13.9473 14.2402 14 14.3674 14 14.5C14 14.6326 13.9473 14.7598 13.8536 14.8536C13.7598 14.9473 13.6326 15 13.5 15H6.5Z",
+    fill: "#FEBA30"
+  }), React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.185 1H4.5C4.10218 1 3.72064 1.15804 3.43934 1.43934C3.15804 1.72064 3 2.10218 3 2.5V17.5C3 17.8978 3.15804 18.2794 3.43934 18.5607C3.72064 18.842 4.10218 19 4.5 19H15.5C15.8978 19 16.2794 18.842 16.5607 18.5607C16.842 18.2794 17 17.8978 17 17.5V7.202C16.9999 6.82647 16.859 6.46464 16.605 6.188L12.291 1.486C12.1504 1.33275 11.9795 1.2104 11.7891 1.12673C11.5987 1.04307 11.393 0.99991 11.185 1ZM4 2.5C4 2.36739 4.05268 2.24022 4.14645 2.14645C4.24021 2.05268 4.36739 2 4.5 2H11.185C11.2544 1.99992 11.323 2.01429 11.3865 2.04218C11.4501 2.07007 11.5071 2.11087 11.554 2.162L15.868 6.864C15.9528 6.95616 15.9999 7.07678 16 7.202V17.5C16 17.6326 15.9473 17.7598 15.8536 17.8536C15.7598 17.9473 15.6326 18 15.5 18H4.5C4.36739 18 4.24021 17.9473 4.14645 17.8536C4.05268 17.7598 4 17.6326 4 17.5V2.5Z",
+    fill: "#3A3630"
+  }), React.createElement("path", {
+    d: "M11 7H16.5C16.6326 7 16.7598 7.05268 16.8536 7.14645C16.9473 7.24021 17 7.36739 17 7.5C17 7.63261 16.9473 7.75979 16.8536 7.85355C16.7598 7.94732 16.6326 8 16.5 8H10.5C10.3674 8 10.2402 7.94732 10.1464 7.85355C10.0527 7.75979 10 7.63261 10 7.5V1.5C10 1.36739 10.0527 1.24021 10.1464 1.14645C10.2402 1.05268 10.3674 1 10.5 1C10.6326 1 10.7598 1.05268 10.8536 1.14645C10.9473 1.24021 11 1.36739 11 1.5V7Z",
+    fill: "#3A3630"
+  }));
+};
+var PrintIconMap = {
+  runSheet: RunsheetIcon,
+  loadSheet: LoadSheetIcon,
+  deliveryLables: DeliveryNotes,
+  customerLables: CustomerLabelIcon,
+  collectionLables: CollectionLabelIcon
+};
+var optionsPrint = [{
+  icon: 'runSheet',
+  label: 'Print Runsheet'
+}, {
+  icon: 'loadSheet',
+  label: 'Print Loadsheet'
+}, {
+  icon: 'deliveryLables',
+  label: 'Print Delivery Labels'
+}, {
+  icon: 'customerLables',
+  label: 'Print Customer Labels'
+}, {
+  icon: 'collectionLables',
+  label: 'Print Collection Labels'
+}];
+var _templateObject$1W, _templateObject2$1l;
+// import { PrintIconMap } from '../utils';
+// import { optionsPrint } from '../fakeData';
+// import { PrintData } from '../interface';
+var options$2 = optionsPrint;
+var PrintDropDown = function PrintDropDown() {
+  var downloadFiles = function downloadFiles() {};
+  return React.createElement(OptionsList, null, options$2.map(function (item, index) {
+    var IconComponent = PrintIconMap[item.icon];
+    return React.createElement(OptionsListLi, {
+      key: index,
+      onClick: downloadFiles
+    }, IconComponent && React.createElement(IconComponent, null), " ", item.label);
+  }));
+};
+var OptionsList = /*#__PURE__*/styled.ul(_templateObject$1W || (_templateObject$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  box-sizing: border-box;\n  border-radius: 6px;\n  border: 1px solid rgba(224, 226, 231, 0.5);\n  background: #fff;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  width: 177px;\n  padding: 5px 1px 3px 1px;\n  position: absolute;\n  /* top: 34px;\n  right: 0; */\n\n  top: 530px;\n  right: 25px;\n  z-index: 99;\n  min-width: 194px;\n"])));
+var OptionsListLi = /*#__PURE__*/styled.li(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid #f0f2f2;\n  padding: 8px 10px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  font-size: 13px;\n  cursor: pointer;\n  &:last-child {\n    border: none;\n  }\n"])));
 var _templateObject$1X;
+var DropDownContainer$1 = /*#__PURE__*/styled.div(_templateObject$1X || (_templateObject$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  border-right: 1px solid #d0d5dd;\n  padding: 4px;\n  @media screen and (max-width: 1220px) {\n    font-size: 12px;\n  }\n"])));
+var _templateObject$1Y;
 var DropDownItem = function DropDownItem(_ref) {
   var label = _ref.label,
     icon = _ref.icon,
@@ -7547,9 +7790,9 @@ var DropDownItem = function DropDownItem(_ref) {
     onClick: onClick
   }, React.createElement("label", null, label), icon);
 };
-var Flex$4 = /*#__PURE__*/styled.div(_templateObject$1X || (_templateObject$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  display: flex;\n  position: relative;\n  label {\n    color: #3a3630;\n    font-size: 14px;\n    line-height: 18px;\n    cursor: pointer;\n  }\n"])));
+var Flex$4 = /*#__PURE__*/styled.div(_templateObject$1Y || (_templateObject$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  display: flex;\n  position: relative;\n  label {\n    color: #3a3630;\n    font-size: 14px;\n    line-height: 18px;\n    cursor: pointer;\n  }\n"])));
-var _templateObject$1Y;
+var _templateObject$1Z;
 var DropDownMenu = function DropDownMenu(_ref) {
   var options = _ref.options,
     onSelect = _ref.onSelect;
@@ -7564,7 +7807,7 @@ var DropDownMenu = function DropDownMenu(_ref) {
     });
   }));
 };
-var DropDownContent = /*#__PURE__*/styled.div(_templateObject$1Y || (_templateObject$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 173px;\n  position: absolute;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 7px;\n  padding-left: 28px;\n  top: 46px;\n  background-color: white;\n  border: 1px solid #ddd;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  border-radius: 10px;\n  padding: 8px 8px 10px 16px;\n"])));
+var DropDownContent = /*#__PURE__*/styled.div(_templateObject$1Z || (_templateObject$1Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 173px;\n  position: absolute;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 7px;\n  padding-left: 28px;\n  top: 46px;\n  background-color: white;\n  border: 1px solid #ddd;\n  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n  z-index: 1;\n  border-radius: 10px;\n  padding: 8px 8px 10px 16px;\n"])));
 var DropDownLarge = function DropDownLarge() {
   return React.createElement("svg", {
@@ -7588,53 +7831,6 @@ var DropDownLarge = function DropDownLarge() {
 };
 var Options = [{
-  label: 'Return notes',
-  value: 'return-notes'
-}, {
-  label: 'Product Labels',
-  value: 'product-labels'
-}, {
-  label: 'Returns Cover Note',
-  value: 'cover-note'
-}];
-var PrintDropDown = function PrintDropDown() {
-  var _useState = useState(false),
-    isOpen = _useState[0],
-    setIsOpen = _useState[1];
-  var dropdownRef = useRef(null);
-  var handleClick = function handleClick() {
-    setIsOpen(function (prev) {
-      return !prev;
-    });
-  };
-  var handleSelect = function handleSelect(value) {
-    console.log("Selected: " + value);
-    setIsOpen(false);
-  };
-  useEffect(function () {
-    var handleClickOutside = function handleClickOutside(event) {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  return React.createElement(DropDownContainer$1, {
-    ref: dropdownRef
-  }, React.createElement(DropDownItem, {
-    label: "Print",
-    icon: React.createElement(DropDownLarge, null),
-    onClick: handleClick
-  }), isOpen && React.createElement(DropDownMenu, {
-    options: Options,
-    onSelect: handleSelect
-  }));
-};
-var Options$1 = [{
   label: 'Create Reminder',
   value: 'create-reminder'
 }, {
@@ -7694,13 +7890,13 @@ var OptionsDropDown = function OptionsDropDown() {
     icon: React.createElement(DropDownLarge, null),
     onClick: handleClick
   }), isOpen && React.createElement(DropDownMenu, {
-    options: Options$1,
+    options: Options,
     onSelect: handleSelect
   }));
 };
 // import { countReducerAtom } from '../../../store/store';
-var Options$2 = [{
+var Options$1 = [{
   label: 'Add Order Resource ',
   value: 'add-order-resources'
 }, {
@@ -7744,23 +7940,23 @@ var MenuDropDown = function MenuDropDown() {
     icon: React.createElement(DropDownLarge, null),
     onClick: handleClick
   }), isOpen && React.createElement(DropDownMenu, {
-    options: Options$2,
+    options: Options$1,
     onSelect: handleSelect
   }));
 };
-var _templateObject$1Z;
+var _templateObject$1_;
 // components
 function DropDowns$1() {
   return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper, null, React.createElement(MenuDropDown, null), React.createElement(OptionsDropDown, null), React.createElement(PrintDropDown, null)));
 }
-var DashBoardWrapper = /*#__PURE__*/styled.section(_templateObject$1Z || (_templateObject$1Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 5px;\n  display: flex;\n  align-content: center;\n  gap: 10px;\n"])));
+var DashBoardWrapper = /*#__PURE__*/styled.section(_templateObject$1_ || (_templateObject$1_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 5px;\n  display: flex;\n  align-content: center;\n  gap: 10px;\n"])));
-var _templateObject2$1l, _templateObject3$L;
-var Typo$1 = /*#__PURE__*/styled.div(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  font-style: normal;\n  color: #3a3630;\n  font-weight: 400;\n  line-height: 15px;\n  text-transform: uppercase;\n  @media screen and (max-width: 1220px) {\n    font-size: 13px;\n  }\n"])));
+var _templateObject2$1m, _templateObject3$L;
+var Typo$1 = /*#__PURE__*/styled.div(_templateObject2$1m || (_templateObject2$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 14px;\n  font-style: normal;\n  color: #3a3630;\n  font-weight: 400;\n  line-height: 15px;\n  text-transform: uppercase;\n  @media screen and (max-width: 1220px) {\n    font-size: 13px;\n  }\n"])));
 var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  border-right: 1px solid #d0d5dd;\n  gap: 8px;\n  cursor: pointer;\n  position: relative;\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: 13px;\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 _templateObject$1_;
+var _templateObject$1$;
 var ActionItem = function ActionItem(_ref) {
   var name = _ref.name,
     onClick = _ref.onClick,
@@ -7769,9 +7965,9 @@ var ActionItem = function ActionItem(_ref) {
     onClick: onClick
   }, React.createElement(Typo$1, null, name), icon && React.createElement(IconWrapper, null, icon));
 };
-var IconWrapper = /*#__PURE__*/styled.div(_templateObject$1_ || (_templateObject$1_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 34px;\n\n  & > svg {\n    width: 100%;\n    transform: scale(0.7);\n  }\n"])));
+var IconWrapper = /*#__PURE__*/styled.div(_templateObject$1$ || (_templateObject$1$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 24px;\n  width: 34px;\n\n  & > svg {\n    width: 100%;\n    transform: scale(0.7);\n  }\n"])));
-var _templateObject$1$;
+var _templateObject$20;
 var Actions = function Actions() {
   var _useAtom = useAtom(countReducerAtom),
     dispatch = _useAtom[1];
@@ -7790,24 +7986,23 @@ var Actions = function Actions() {
     }
   })));
 };
-var Flex$5 = /*#__PURE__*/styled.div(_templateObject$1$ || (_templateObject$1$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 31px;\n"])));
+var Flex$5 = /*#__PURE__*/styled.div(_templateObject$20 || (_templateObject$20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 31px;\n"])));
-var _templateObject$20;
+var _templateObject$21;
 var ActionsMenu = function ActionsMenu() {
   return React.createElement(Flex$6, null, React.createElement(DropDowns$1, null), React.createElement(Actions, null));
 };
-var Flex$6 = /*#__PURE__*/styled.div(_templateObject$20 || (_templateObject$20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n"])));
+var Flex$6 = /*#__PURE__*/styled.div(_templateObject$21 || (_templateObject$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n"])));
-var _templateObject$21;
+var _templateObject$22;
 var DetailsFilters = function DetailsFilters() {
   return React.createElement(Flex$7, null, React.createElement(Details, null), React.createElement(ActionsMenu, null));
 };
-var Flex$7 = /*#__PURE__*/styled.div(_templateObject$21 || (_templateObject$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);\n\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  /* z-index: 9999; */\n  display: flex;\n  padding: 10px;\n  flex-direction: row;\n  gap: 10px;\n  align-self: stretch;\n  position: relative;\n  margin-top: -30px;\n  width: 97%;\n  margin-left: 28px;\n  justify-content: space-between;\n"])));
+var Flex$7 = /*#__PURE__*/styled.div(_templateObject$22 || (_templateObject$22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: linear-gradient(180deg, #fff 0%, #f9fcff 100%);\n\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  /* z-index: 9999; */\n  display: flex;\n  padding: 10px;\n  flex-direction: row;\n  gap: 10px;\n  align-self: stretch;\n  position: relative;\n  margin-bottom: -71px;\n  width: 97%;\n  margin-left: 21px;\n  top: -40px;\n  justify-content: space-between;\n"])));
-var _templateObject$22, _templateObject2$1m, _templateObject3$M, _templateObject4$t, _templateObject5$h, _templateObject6$c, _templateObject7$a;
+var _templateObject$23, _templateObject2$1n, _templateObject3$M, _templateObject4$t, _templateObject5$h, _templateObject6$c, _templateObject7$a;
 function OrderView() {
   var _useOrderId = useOrderId(),
-    orderId = _useOrderId[0],
     setOrderId = _useOrderId[1];
   var splitPath = function splitPath(str) {
     var _str$split;
@@ -7831,6 +8026,7 @@ function OrderView() {
     setDepotOptions = _useDepotOptions[1];
   var location = useLocation();
   var paths = splitPath(location.pathname);
+  var orderId = 192;
   var _useApiHook = useApiHook({
       endpoint: "orders/" + orderId,
       method: 'GET',
@@ -7861,7 +8057,7 @@ function OrderView() {
     fetchedDepotData = _useApiHook4.data,
     depotDataLoading = _useApiHook4.loading;
   useEffect(function () {
-    if (orderId) {
+    {
       setShouldPerformAction(true);
       setPerformAction(true);
     }
@@ -7924,237 +8120,350 @@ function OrderView() {
     onClose: function onClose() {}
   })), React.createElement(OrderDetails$1, null)), React.createElement(ProductsInfo, null), React.createElement(SplitLayout$1, null, React.createElement(NotesContainer, null, React.createElement(Notes, null)), React.createElement(TablesContainer, null, React.createElement(Order, null), React.createElement(SystemLogs, null))), React.createElement(OrderActions, null)))));
 }
-var Section$1 = /*#__PURE__*/styled.div(_templateObject$22 || (_templateObject$22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  // padding: 15px;\n  flex-direction: column;\n  gap: 14px;\n  border-radius: 12px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0;\n"])));
+var Section$1 = /*#__PURE__*/styled.div(_templateObject$23 || (_templateObject$23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  // padding: 15px;\n  flex-direction: column;\n  gap: 14px;\n  border-radius: 12px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0;\n  padding: 12px;\n"])));
 /* // `; */
-var DashBoardWrapper$1 = /*#__PURE__*/styled.section(_templateObject2$1m || (_templateObject2$1m = /*#__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 DashBoardWrapper$1 = /*#__PURE__*/styled.section(_templateObject2$1n || (_templateObject2$1n = /*#__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 0px;\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 NotifyContainer = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n"])));
 var MainContainer$a = /*#__PURE__*/styled.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n"])));
 var SplitLayout$1 = /*#__PURE__*/styled.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
 var NotesContainer = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
 var TablesContainer = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
-var _templateObject3$N, _templateObject5$i, _templateObject6$d, _templateObject7$b, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject14$2;
-var CoverPage = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 16px;\n  border: 1px solid #e3e3e3;\n  background: #fff;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  padding:  20px 20px 20px 20px;\n  top: -60px;\n"])));
-var Wrapper$k = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px;\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 StyledAntSelect$5 = /*#__PURE__*/styled(Select)(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
+var _templateObject3$N, _templateObject5$i, _templateObject7$b, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject14$2;
+var CoverPage = /*#__PURE__*/styled.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 16px;\n  border: 1px solid #e3e3e3;\n  background: #fff;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  padding: 20px 20px 20px 20px;\n  top: -60px;\n"])));
+var Wrapper$k = /*#__PURE__*/styled.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px;\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 Label$g = /*#__PURE__*/styled.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8e8a85;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
 var FilterRow = /*#__PURE__*/styled.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  align-self: stretch;\n  justify-content: space-between;\n"])));
 var FilterColumn = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 6px;\n  align-self: stretch;\n  margin: 10px;\n"])));
 var RightColumn$1 = /*#__PURE__*/styled.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
 var LeftColumn = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
-var ApplyButton = /*#__PURE__*/styled(Button$1)(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px !important;\n  display: flex;\n  padding: 7px 12px !important;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px !important;\n  font-family: 'Lato', sans-serif;\n  background: transparent;\n"])));
+var ApplyButton = /*#__PURE__*/styled.button(_templateObject14$2 || (_templateObject14$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px;\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  font-size: 14px;\n  font-family: 'Lato', sans-serif;\n  background: transparent;\n  color: #3a3620;\n  border: 1px solid #3a3630;\n\n  &:not(:disabled):hover {\n    background: #feba30;\n  }\n\n  &:disabled {\n    background: #ccc;\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n"])));
-function SelectionFilter() {
-  // const [, setFilterAplied] = usefilterApplied();
-  // const [selectedFilter] = useSelectedFilter();
-  // const [, dispatchEmailFilters] = useAtom(emailFiltersReducerAtom);
-  // const [, dispatchOverviewFilters] = useAtom(overviewFiltersReducerAtom);
-  // const [, dispatchFilters] = useAtom(filtersReducerAtom);
-  // const [
-  //   readyForInvoiceView,
-  //   setReadyForInvoiceView,
-  // ] = useReadyForInvoiceView();
-  // const [prevSelectedDate, setPrevSelectedDate] = useState<
-  //   Date | string | null
-  // >(lastSundayDate); // for comparison
-  // const [selectedDate, setDate] = useState<Date | string | null>(
-  //   lastSundayDate
-  // );
-  // const [customerData, setCustomerData] = allCustomerData();
-  // const [
-  //   prevSelectedClients,
-  //   setPrevSelectedClients,
-  // ] = usePrevSelectedClients();
-  // const [selectedClients, setClients] = useSelectedClients();
-  // const [subAccounts, setSubaccounts] = useState<any>([]);
-  // const [selectedSubClients, setSelectedSubClients] = useSelectedSubClients();
-  // const [, setIsClicked] = useAtom(clickedState);
-  //API
-  // const { data: fetchedStaticData, loading: loading } = useApiHook<ApiResponse>(
-  //   {
-  //     endpoint: `/customer/`,
-  //     method: 'GET',
-  //     pagination: { page: 1, per_page: 50 },
-  //   }
-  // );
-  // useEffect(() => {
-  //   if (!loading) {
-  //     setCustomerData(fetchedStaticData?.data);
-  //   }
-  // }, [loading]);
-  // const clientOptions = customerData
-  //   ?.filter((x: any) => x.id === x?.parent_id || x?.parent_id === null)
-  //   ?.map((option: any) => ({
-  //     label: option?.name?.charAt(0)?.toUpperCase() + option?.name?.slice(1),
-  //     value: option?.id,
-  //   }));
-  // const selectedClientValues = selectedClients?.map(item => item?.value);
-  // const prevSelectedClientValues = prevSelectedClients?.map(
-  //   item => item?.value
-  // );
-  // const subAccountData = customerData
-  //   ?.filter(item => selectedClientValues?.includes(item?.parent_id))
-  //   ?.filter(x => x.id !== x.parent_id);
-  // const preparedData = prepareData(clientOptions, subAccountData);
-  // const subAccountOptions = preparedData?.filter(
-  //   (item: any) => item?.options?.length > 0
-  // );
-  // const handleDateChange: DatePickerProps['onChange'] = (date, _dateString) => {
-  //   setFilterAplied(true);
-  //   const newDate = date?.format('YYYY-MM-DDTHH:mm:ss');
-  //   if (newDate !== undefined) {
-  //     setDate(newDate);
-  //   } else {
-  //     setDate(null);
-  //   }
-  // };
-  // const handleCustomerChange = (_label: any, value: any) => {
-  //   if (value.length === 0) {
-  //     setReadyForInvoiceView(undefined);
-  //     setPrevSelectedClients(value);
-  //     dispatchOverviewFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //   }
-  //   setClients(value);
-  // };
-  // const onChangeSubAccount = (value: any) => {
-  //   setSubaccounts(value);
-  // };
-  // const ApplyFilters = () => {
-  //   setIsClicked(true);
-  //   if (
-  //     readyForInvoiceView !== 'client' &&
-  //     selectedClientValues?.length === 0
-  //   ) {
-  //     console.log('inside if rfiview');
-  //     dispatchOverviewFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //   }
-  //   if (selectedClientValues?.length > 0) {
-  //     console.log('inside if rfiview asdfasdf');
-  //     dispatchFilters({
-  //       type: 'SET_CUSTOMER_FILTER',
-  //       payload: selectedClientValues,
-  //     });
-  //     dispatchFilters({
-  //       type: 'SET_DATE_FILTER',
-  //       payload: selectedDate,
-  //     });
-  //     if (readyForInvoiceView !== 'client') {
-  //       setReadyForInvoiceView('client');
-  //     }
-  //   }
-  //   dispatchEmailFilters({
-  //     type: 'SET_CUSTOMER_FILTER',
-  //     payload: selectedClientValues,
-  //   });
-  //   dispatchEmailFilters({
-  //     type: 'SET_DATE_FILTERS',
-  //     payload: selectedDate,
-  //   });
-  //   // need to update prev selected clients state for comparison
-  //   setPrevSelectedClients(selectedClients);
-  //   setPrevSelectedDate(selectedDate);
-  //   setSelectedSubClients(subAccounts);
-  //   if (selectedClients?.length === 0) {
-  //     setIsClicked(false);
-  //   }
-  // };
-  // const isDifferent = () => {
-  //   let actualDate = null;
-  //   let isDateDiff;
-  //   if (selectedDate !== null) {
-  //     actualDate = new Date(selectedDate);
-  //   }
-  //   if (prevSelectedDate !== null && actualDate !== null) {
-  //     isDateDiff =
-  //       actualDate.getTime() !== new Date(prevSelectedDate).getTime();
-  //   }
-  //   if (prevSelectedDate !== null && actualDate === null) {
-  //     isDateDiff = false;
-  //   }
-  //   const isClientDiff = compareArrays(
-  //     selectedClientValues,
-  //     prevSelectedClientValues
-  //   );
-  //   const isSubAccountDiff = compareArrays(subAccounts, selectedSubClients);
-  //   const isSame = isDateDiff || isClientDiff || isSubAccountDiff;
-  //   return !isSame;
-  // };
-  var ActionOptions = [{
-    label: 'RTS',
-    value: 'rt'
-  }, {
-    label: 'Dispose',
-    value: 'dispose'
-  }, {
-    label: 'Pending',
-    value: 'pending'
-  }, {
-    label: 'Re-allocated',
-    value: 're-allocate'
-  }, {
-    label: 'Re-Del',
-    value: 're-del'
-  }, {
-    label: 'Re-Recycle',
-    value: 're-recycle'
-  }, {
-    label: 'Unknown',
-    value: 'unknown'
-  }];
-  var ReturnLocationOptions = [{
-    label: 'bedkingdom wf14 0dq ',
-    value: 'bedkingdom'
-  }, {
-    label: 'cotswold returns',
-    value: 'cotswold-returns'
-  }, {
-    label: 'appliance house c/o hdl',
-    value: 'appliance'
-  }];
+// let todayDate = new Date();
+var initialState$1 = {
+  'x-filters': [
+    // {
+    //   field: 'action_date',
+    //   op: '>=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
+    // },
+    // {
+    //   field: 'action_date',
+    //   op: '<=',
+    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
+    // },
+    // { field: 'status', op: 'count', value: '' },
+  ],
+  'x-pagination': {
+    page: 1,
+    per_page: 50
+  }
+};
+var filterReducer = function filterReducer(state, action) {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'action_date' && f.field !== 'status';
+        }), [{
+          field: 'action_date',
+          op: '>=',
+          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T00:00:00+00:00"
+        }, {
+          field: 'action_date',
+          op: '<=',
+          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T23:59:59+00:00"
+        }, {
+          field: 'status',
+          op: 'count',
+          value: ''
+        }])
+      });
+    case 'SET_CLIENT_FILTER':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'order.customer_id';
+        }), [{
+          field: 'order.customer_id',
+          op: '=',
+          value: action.payload
+        }])
+      });
+    case 'SET_ACTIONS_FILTER':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'product_return_action_id';
+        }), [{
+          field: 'product_return_action_id',
+          op: '=',
+          value: action.payload
+        }])
+      });
+    case 'SET_LOCATION_FILTER':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'return_location';
+        }), [{
+          field: 'return_location',
+          op: '=',
+          value: action.payload
+        }])
+      });
+    case 'SET_PAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          page: action.payload
+        })
+      });
+    case 'SET_PERPAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          per_page: action.payload
+        })
+      });
+    case 'CLEAR_FILTERS':
+      return _extends({}, state);
+    default:
+      return state;
+  }
+};
+var filtersStateAtom = /*#__PURE__*/atom(initialState$1);
+var filtersReducerAtom = /*#__PURE__*/atom(function (get) {
+  return get(filtersStateAtom);
+}, function (get, set, action) {
+  return set(filtersStateAtom, filterReducer(get(filtersStateAtom), action));
+});
+var _templateObject$24;
+function SelectionFilter() {
+  var _useCustomerData = useCustomerData(),
+    customers = _useCustomerData[0];
+  var _useActionType = useActionType(),
+    actionType = _useActionType[0];
+  var _useLocationData = useLocationData(),
+    locationData = _useLocationData[0];
+  var _useState = useState([]),
+    filteredLocationOptions = _useState[0],
+    setFilteredLocationOptions = _useState[1];
+  var _useState2 = useState(),
+    getUuid = _useState2[0],
+    setUuid = _useState2[1];
+  var _useSelectedAction = useSelectedAction(),
+    selectedFilterValue = _useSelectedAction[0],
+    setSelectedFilterValue = _useSelectedAction[1];
+  var _useAtom = useAtom(filtersReducerAtom),
+    dispatch = _useAtom[1];
+  var _useSelectedLocation = useSelectedLocation(),
+    selectedLocationValue = _useSelectedLocation[0],
+    setSelectedLocationValue = _useSelectedLocation[1];
+  var _useSelectedClient = useSelectedClient(),
+    selectedClientId = _useSelectedClient[0],
+    setSelectedClient = _useSelectedClient[1];
+  var _useTableName = useTableName(),
+    setClientLabel = _useTableName[1];
+  var _useState3 = useState(),
+    name = _useState3[0],
+    setName = _useState3[1];
+  var _useState4 = useState(false),
+    isButtonEnabled = _useState4[0],
+    setIsButtonEnabled = _useState4[1];
+  //client options
+  var clientOptions = customers == null ? void 0 : customers.map(function (option) {
+    var _option$customer_name, _option$customer_name2;
+    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.id) + "_" + (option == null ? void 0 : option.uuid),
+      id: option == null ? void 0 : option.id,
+      uuid: option == null ? void 0 : option.uuid
+    };
+  });
+  var actionTypeOptions = actionType == null ? void 0 : actionType.map(function (option) {
+    var _option$type, _option$type2;
+    return {
+      label: (option == null || (_option$type = option.type) == null || (_option$type = _option$type.charAt(0)) == null ? void 0 : _option$type.toUpperCase()) + (option == null || (_option$type2 = option.type) == null ? void 0 : _option$type2.slice(1)),
+      value: option == null ? void 0 : option.id
+    };
+  });
+  var LocationOptions = locationData == null ? void 0 : locationData.map(function (option) {
+    return {
+      label: option == null ? void 0 : option.location_name,
+      value: option == null ? void 0 : option.customer_id
+    };
+  });
+  //client change
+  var handleSelectChange = function handleSelectChange(value, option) {
+    console.log(value, 'value');
+    var selectedLabel = option == null ? void 0 : option.label;
+    var selectedValue = option == null ? void 0 : option.id;
+    var selectedUuids = option == null ? void 0 : option.uuid;
+    setSelectedClient(selectedValue);
+    setName(selectedLabel);
+    localStorage.setItem('clientName', selectedLabel);
+    var filteredSubLocations = locationData == null ? void 0 : locationData.filter(function (subCat) {
+      return (subCat == null ? void 0 : subCat.customer_id) === selectedUuids;
+    }).map(function (subCat) {
+      return {
+        label: subCat == null ? void 0 : subCat.location_name,
+        value: subCat == null ? void 0 : subCat.customer_id
+      };
+    });
+    setFilteredLocationOptions(filteredSubLocations);
+    setUuid('');
+  };
+  useEffect(function () {}, [getUuid, filteredLocationOptions]);
+  //location change
+  var handleLocationChange = function handleLocationChange(value, option) {
+    var selectedLabel = option == null ? void 0 : option.label;
+    console.log(value, 'value');
+    setSelectedLocationValue(selectedLabel);
+    if (selectedLocationValue === selectedLabel) {
+      dispatch({
+        type: 'CLEAR_ALL_FILTERS',
+        payload: null
+      });
+    }
+  };
+  //action type
+  var handleActionClick = function handleActionClick(value) {
+    setSelectedFilterValue(value);
+    if (selectedFilterValue === value) {
+      dispatch({
+        type: 'CLEAR_ALL_FILTERS',
+        payload: null
+      });
+    }
+  };
+  //Apply filters
+  var applyFilters = function applyFilters() {
+    if (storedName) {
+      setClientLabel(storedName);
+    }
+    if (selectedClientId) {
+      dispatch({
+        type: 'SET_CLIENT_FILTER',
+        payload: selectedClientId
+      });
+    }
+    if (selectedFilterValue) {
+      dispatch({
+        type: 'SET_ACTIONS_FILTER',
+        payload: selectedFilterValue
+      });
+    }
+    if (selectedLocationValue) {
+      dispatch({
+        type: 'SET_LOCATION_FILTER',
+        payload: selectedLocationValue
+      });
+    }
+  };
+  var storedName = localStorage.getItem('clientName');
+  useEffect(function () {
+    if (selectedClientId || selectedFilterValue || selectedLocationValue) {
+      setIsButtonEnabled(true);
+    } else {
+      setIsButtonEnabled(false);
+    }
+  }, [storedName, selectedFilterValue, selectedLocationValue]);
+  console.log('check', storedName, selectedFilterValue, selectedLocationValue);
   return React.createElement(Wrapper$k, null, React.createElement(FilterRow, null, React.createElement(LeftColumn, null, React.createElement(FilterColumn, null, React.createElement(Label$g, null, "Clients"), React.createElement(StyledAntSelect$5, {
-    options: [],
+    options: clientOptions,
     placeholder: "Select Client Name",
-    onChange: function onChange() {},
-    mode: "multiple",
+    onChange: handleSelectChange,
     style: {
       minWidth: '14vw'
-    }
+    },
+    allowClear: true,
+    value: name
   })), React.createElement(FilterColumn, null, React.createElement(Label$g, null, "Action Type"), React.createElement(StyledAntSelect$5, {
-    options: ActionOptions,
+    options: actionTypeOptions,
     placeholder: "Select Action Type",
-    // value={""}
-    onChange: function onChange() {},
+    value: selectedFilterValue,
+    onChange: handleActionClick,
     style: {
       minWidth: '14vw'
     },
-    // style={{ width: '18vw', overflow: 'hidden' }}
-    mode: "multiple"
+    allowClear: true
   })), React.createElement(FilterColumn, null, React.createElement(Label$g, null, "Location "), React.createElement(StyledAntSelect$5, {
-    options: ReturnLocationOptions,
+    options: (filteredLocationOptions == null ? void 0 : filteredLocationOptions.length) > 0 ? filteredLocationOptions : LocationOptions,
+    value: selectedLocationValue,
     placeholder: "Select Location",
-    onChange: function onChange() {},
-    mode: "multiple",
+    onChange: handleLocationChange,
     style: {
       minWidth: '14vw'
-    }
+    },
+    allowClear: true
   }))), React.createElement(RightColumn$1, null, React.createElement(ApplyButton, {
-    colors: "secondary"
+    onClick: applyFilters,
+    disabled: !isButtonEnabled
   }, "Apply"))));
 }
+var StyledAntSelect$5 = /*#__PURE__*/styled(Select)(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
 function HeaderFilter() {
+  var _useCustomerData = useCustomerData(),
+    setCustomers = _useCustomerData[1];
+  var _useActionType = useActionType(),
+    setActionType = _useActionType[1];
+  var _useLocationData = useLocationData(),
+    setLocationData = _useLocationData[1];
+  //API for client data
+  var _useApiHook = useApiHook({
+      endpoint: "/customers/",
+      method: 'GET',
+      pagination: {
+        page: 1,
+        per_page: 50
+      }
+    }),
+    fetchedCustomerData = _useApiHook.data,
+    loading = _useApiHook.loading;
+  //API for action type
+  var _useApiHook2 = useApiHook({
+      endpoint: "/orders/getStaticData/all/",
+      method: 'GET',
+      pagination: {
+        page: 1,
+        per_page: 50
+      }
+    }),
+    fetchedStaticData = _useApiHook2.data,
+    actionLoading = _useApiHook2.loading;
+  //API for return locations
+  var _useApiHook3 = useApiHook({
+      endpoint: "/return_locations/",
+      method: 'GET',
+      pagination: {
+        page: 1,
+        per_page: 50
+      }
+    }),
+    fetchedLocationData = _useApiHook3.data,
+    locationloading = _useApiHook3.loading;
+  useEffect(function () {
+    if (fetchedCustomerData && fetchedCustomerData != null && fetchedCustomerData.data) {
+      setCustomers(fetchedCustomerData == null ? void 0 : fetchedCustomerData.data);
+    }
+  }, [loading, fetchedCustomerData]);
+  useEffect(function () {
+    if (fetchedStaticData && fetchedStaticData != null && fetchedStaticData.data) {
+      var _fetchedStaticData$da;
+      setActionType(fetchedStaticData == null || (_fetchedStaticData$da = fetchedStaticData.data) == null ? void 0 : _fetchedStaticData$da.flatMap(function (i) {
+        return i.order_contact_action_type;
+      }));
+    }
+  }, [actionLoading, fetchedStaticData]);
+  useEffect(function () {
+    if (fetchedLocationData && fetchedLocationData != null && fetchedLocationData.data) {
+      setLocationData(fetchedLocationData == null ? void 0 : fetchedLocationData.data);
+    }
+  }, [locationloading, fetchedLocationData]);
   return React.createElement(CoverPage, null, React.createElement(SelectionFilter, null));
 }
-var _templateObject$23, _templateObject4$u, _templateObject5$j, _templateObject7$c, _templateObject8$7;
+var _templateObject$25, _templateObject4$u, _templateObject5$j, _templateObject7$c, _templateObject8$7;
 //Left side
-var LeftSideConatiner = /*#__PURE__*/styled.div(_templateObject$23 || (_templateObject$23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 1px 5px 1px 1.1px;\n  align-items: center;\n  gap: 10px;\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: var(--Flowkit-White, #fff);\n\n  .filtercontainer {\n    display: flex;\n    padding: 8px 8px 8px 4px;\n    align-items: center;\n    gap: 4px;\n    align-self: stretch;\n    border-radius: 20px 0px 0px 20px;\n    border-right: 1px solid rgba(0, 0, 0, 0.04);\n    background: var(--BjsColor-Bg-F0F2F2, #f0f2f2);\n\n    .filtericon {\n      display: flex;\n      padding: 7px 0px 5px 5px;\n      align-items: flex-start;\n      gap: 10px;\n      border-radius: 30px;\n    }\n    .textcont {\n      color: #758588;\n      text-align: center;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: normal;\n    }\n  }\n  .datefilter {\n    display: flex;\n    height: 36px;\n    padding: 6px 8px;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border-radius: 20px;\n    border: 1px solid var(--tonal-brown-10, #edebe8);\n\n    .dateiconcontainer {\n      display: flex;\n      width: 24px;\n      height: 24px;\n      padding: 5px;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      border-radius: 20px;\n      border: 1px solid var(--tonal-brown-101, #e2e0db);\n      background: #f1f5f6;\n    }\n    .datetext {\n      color: #6a7378;\n\n      /* body/captions */\n      font-family: 'Lato';\n      font-size: 13px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 16px; /* 123.077% */\n    }\n    .roundbox {\n      display: flex;\n      width: 18px;\n      height: 18px;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      border-radius: 18px;\n      background: #fff;\n      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
+var LeftSideConatiner = /*#__PURE__*/styled.div(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 1px 5px 1px 1.1px;\n  align-items: center;\n  gap: 10px;\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: var(--Flowkit-White, #fff);\n\n  .filtercontainer {\n    display: flex;\n    padding: 8px 8px 8px 4px;\n    align-items: center;\n    gap: 4px;\n    align-self: stretch;\n    border-radius: 20px 0px 0px 20px;\n    border-right: 1px solid rgba(0, 0, 0, 0.04);\n    background: var(--BjsColor-Bg-F0F2F2, #f0f2f2);\n\n    .filtericon {\n      display: flex;\n      padding: 7px 0px 5px 5px;\n      align-items: flex-start;\n      gap: 10px;\n      border-radius: 30px;\n    }\n    .textcont {\n      color: #758588;\n      text-align: center;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: normal;\n    }\n  }\n  .datefilter {\n    display: flex;\n    height: 36px;\n    padding: 6px 8px;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    border-radius: 20px;\n    border: 1px solid var(--tonal-brown-10, #edebe8);\n\n    .dateiconcontainer {\n      display: flex;\n      width: 24px;\n      height: 24px;\n      padding: 5px;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      border-radius: 20px;\n      border: 1px solid var(--tonal-brown-101, #e2e0db);\n      background: #f1f5f6;\n    }\n    .datetext {\n      color: #6a7378;\n\n      /* body/captions */\n      font-family: 'Lato';\n      font-size: 13px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 16px; /* 123.077% */\n    }\n    .roundbox {\n      display: flex;\n      width: 18px;\n      height: 18px;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n      border-radius: 18px;\n      background: #fff;\n      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);\n    }\n  }\n"])));
 //
 var StyledFiter = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n"])));
 var StyledFIlterELements = /*#__PURE__*/styled.div(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0;\n  gap: 10px;\n  align-items: center;\n"])));
@@ -8162,10 +8471,10 @@ var Text$8 = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c =
 // Right side filter
 var StyledTableFilter = /*#__PURE__*/styled.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var _templateObject2$1n;
-var StyledBulkItem$1 = /*#__PURE__*/styled.div(_templateObject2$1n || (_templateObject2$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  /* border-right: 1px solid #d0d5dd; */\n  gap: 8px;\n  cursor: pointer;\n  position: relative;\n\n  @media screen and (max-width: 1030px) {\n    padding: 8px 11px;\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: #6a7378;\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 _templateObject2$1o;
+var StyledBulkItem$1 = /*#__PURE__*/styled.div(_templateObject2$1o || (_templateObject2$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  /* border-right: 1px solid #d0d5dd; */\n  gap: 8px;\n  cursor: pointer;\n  position: relative;\n\n  @media screen and (max-width: 1030px) {\n    padding: 8px 11px;\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: #6a7378;\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 _templateObject$24, _templateObject2$1o;
+var _templateObject$26, _templateObject2$1p;
 var SearchType = function SearchType() {
   var _useState = useState(''),
     searchText = _useState[0],
@@ -8180,8 +8489,8 @@ var SearchType = function SearchType() {
     onChange: handleInputChange
   }));
 };
-var Search = /*#__PURE__*/styled.div(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
-var SearchInput = /*#__PURE__*/styled.input(_templateObject2$1o || (_templateObject2$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  padding-left: 39px;\n"])));
+var Search = /*#__PURE__*/styled.div(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
+var SearchInput = /*#__PURE__*/styled.input(_templateObject2$1p || (_templateObject2$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  padding-left: 39px;\n"])));
 function DownloadIcon() {
   return React.createElement("svg", {
@@ -8201,7 +8510,7 @@ function DownloadIcon() {
   }));
 }
-var _templateObject$25, _templateObject2$1p, _templateObject3$O, _templateObject4$v, _templateObject5$k, _templateObject6$e;
+var _templateObject$27, _templateObject2$1q, _templateObject3$O, _templateObject4$v, _templateObject5$k, _templateObject6$d;
 var RightFilters = function RightFilters() {
   return React.createElement(Container$13, null, React.createElement(TextConatiner, null, React.createElement(Text$9, null, "Create Return")), React.createElement(StyledBulkItem$1, null, React.createElement(SearchType, null)), React.createElement(IconConatiner, null, React.createElement(Mid, null, React.createElement(IconText, null, "Export"), React.createElement(DownloadIcon, null))));
   //   return (
@@ -8217,40 +8526,23 @@ var RightFilters = function RightFilters() {
   //     // </StyledBulkFilterCover>
   //   );
 };
-var Container$13 = /*#__PURE__*/styled.div(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n/* align-items: flex-start; */\ngap: 16px;\nalign-items: center;\n\n"])));
-var Mid = /*#__PURE__*/styled.div(_templateObject2$1p || (_templateObject2$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 15px 0px 0px 15px;\n"])));
+var Container$13 = /*#__PURE__*/styled.div(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n/* align-items: flex-start; */\ngap: 16px;\nalign-items: center;\n\n"])));
+var Mid = /*#__PURE__*/styled.div(_templateObject2$1q || (_templateObject2$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 10px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 15px 0px 0px 15px;\n"])));
 var TextConatiner = /*#__PURE__*/styled.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 15px;\n  background: rgba(136, 128, 117, 0.35);\n"])));
 var Text$9 = /*#__PURE__*/styled.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #888075;\n  font-family: \"'Lato\";\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n"])));
 var IconConatiner = /*#__PURE__*/styled.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex;\n  height: 34px;\n  padding: 4px 10px;  \n  align-items: flex-start;\n  border-radius: 8px 8px 8px 8px; */\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  background: #f0f2f2;\n  border: 1px solid  #e2e0db;\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 15px;\n  height: 34px;\n"])));
-var IconText = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  text-align: center;\n\n  /* body/captions */\n  font-family: 'Lato';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
+var IconText = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  text-align: center;\n\n  /* body/captions */\n  font-family: 'Lato';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
 var ReturnFilter = function ReturnFilter() {
-  return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(StyledFIlterELements, null, React.createElement(Text$8, null, "Client Return"), React.createElement(StyledTableFilter, null)), React.createElement(RightFilters, null)));
+  return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(StyledFIlterELements, null, React.createElement(StyledTableFilter, null)), React.createElement(RightFilters, null)));
 };
-var _templateObject$26, _templateObject2$1q, _templateObject4$w, _templateObject28, _templateObject29, _templateObject30$1, _templateObject31$1, _templateObject32$1;
+var _templateObject$28, _templateObject2$1r, _templateObject32$1;
 // Styled components
-var StyledTableWrapper$1 = /*#__PURE__*/styled.div(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 396px);\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$1 = /*#__PURE__*/styled.table(_templateObject2$1q || (_templateObject2$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  min-width: 1600px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      .emailInvoiceCheckbox {\n        padding-right: 0px;\n        width: 0;\n        > div {\n          width: fit-content;\n        }\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      }\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        .shareIconContainer {\n          display: flex;\n          width: 24px;\n          height: 24px;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          gap: 10px;\n          flex-shrink: 0;\n          border-radius: 15px;\n          background: #edebe8;\n          cursor: pointer;\n        }\n        .statuscontainer {\n          display: flex;\n          padding: 6px 10px;\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      }\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"])));
-var StyledTdBasic = /*#__PURE__*/styled.td(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  padding: 15px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-right: none;\n  border-left: none;\n"])));
-var Header$2 = /*#__PURE__*/styled.th(_templateObject28 || (_templateObject28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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: 1px solid rgba(0, 0, 0, 0.08);\n  border-right: none;\n  border-left: none;\n  text-align: left;\n"])));
-var Back = /*#__PURE__*/styled.div(_templateObject29 || (_templateObject29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid var(--contextual-blue, #6396e5);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #6396e5;\n  align-content: center;\n  padding: 4px 12px;\n  height: 28px;\n  cursor: pointer;\n  &:hover {\n    background-color: #89b8ff;\n    color: white;\n  }\n"])));
-var Remove = /*#__PURE__*/styled.div(_templateObject30$1 || (_templateObject30$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid rgba(233, 82, 82, 0.5);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  color: #e95252;\n  align-content: center;\n  padding: 4px 12px;\n  height: 28px;\n  cursor: pointer;\n  &:hover {\n    background-color: #ff7b7b;\n    color: white;\n  }\n"])));
-var Buttons$1 = /*#__PURE__*/styled.div(_templateObject31$1 || (_templateObject31$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  white-space: nowrap;\n  align-items: center;\n"])));
+var StyledTableWrapper$1 = /*#__PURE__*/styled.div(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 396px);\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$1 = /*#__PURE__*/styled.table(_templateObject2$1r || (_templateObject2$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  min-width: 1600px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      .emailInvoiceCheckbox {\n        padding-right: 0px;\n        width: 0;\n        > div {\n          width: fit-content;\n        }\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      }\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        .shareIconContainer {\n          display: flex;\n          width: 24px;\n          height: 24px;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          gap: 10px;\n          flex-shrink: 0;\n          border-radius: 15px;\n          background: #edebe8;\n          cursor: pointer;\n        }\n        .statuscontainer {\n          display: flex;\n          padding: 6px 10px;\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      }\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"])));
 var EmptyDataContainer = /*#__PURE__*/styled.div(_templateObject32$1 || (_templateObject32$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
-var getIntegerValue = function getIntegerValue(value) {
-  return value != null ? value : 0;
-};
-var getStringValue = function getStringValue(value) {
-  return value === '' ? 'N/A' : value;
-};
-var FormattedDate = function FormattedDate(_ref) {
-  var date = _ref.date;
-  var formattedDate = format(new Date(date), 'dd/MM/yyyy');
-  return formattedDate;
-};
 var PrinterIcon = function PrinterIcon() {
   return React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8280,33 +8572,52 @@ function DownIcon() {
   }));
 }
-// import React, { useEffect } from 'react';
 var ReturnOrderTable = function ReturnOrderTable(_ref) {
   var loadingskeleton = _ref.loadingskeleton;
-  var _useEmailInvoice = useEmailInvoice(),
-    emailInvoiceData = _useEmailInvoice[0];
-  var _useAtom = useAtom(countReducerAtom);
-  var _useSelectedEmail = useSelectedEmail(),
-    selectedInvoices = _useSelectedEmail[0],
-    setSelectedInvoices = _useSelectedEmail[1];
+  var _useAtom = useAtom(filtersReducerAtom),
+    state = _useAtom[0];
+  var _useSelectedOrders = useSelectedOrders(),
+    selectedReturnOrder = _useSelectedOrders[0],
+    setSelectedReturnOrder = _useSelectedOrders[1];
   var _useState = useState(false),
     selectAll = _useState[0],
     setSelectAll = _useState[1];
+  var filters = state['x-filters'],
+    pagination = state['x-pagination'];
+  var _useReturnData = useReturnData(),
+    returnData = _useReturnData[0],
+    setReturnData = _useReturnData[1];
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useApiHook = useApiHook({
+      endpoint: '/return_order_products/',
+      method: 'GET',
+      filters: filters,
+      pagination: pagination
+    }),
+    fetchedOrderData = _useApiHook.data,
+    staticDataLoading = _useApiHook.loading;
+  useEffect(function () {
+    setLoading(staticDataLoading);
+    if (fetchedOrderData && fetchedOrderData != null && fetchedOrderData.data) {
+      setReturnData(fetchedOrderData == null ? void 0 : fetchedOrderData.data);
+    }
+  }, [fetchedOrderData, staticDataLoading]);
   var handleSelectAll = function handleSelectAll(e) {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
-      setSelectedInvoices(data.map(function (invoice) {
+      setSelectedReturnOrder(returnData.map(function (invoice) {
         return {
           id: invoice.id,
           status_id: 3
         };
       }));
     } else {
-      setSelectedInvoices([]);
+      setSelectedReturnOrder([]);
     }
   };
   var handleSelectInvoice = function handleSelectInvoice(id) {
-    setSelectedInvoices(function (prevSelectedInvoices) {
+    setSelectedReturnOrder(function (prevSelectedInvoices) {
       var isSelected = prevSelectedInvoices == null ? void 0 : prevSelectedInvoices.some(function (invoice) {
         return invoice.id === id;
       });
@@ -8337,19 +8648,20 @@ var ReturnOrderTable = function ReturnOrderTable(_ref) {
     active: true
   })), React.createElement("td", {
     colSpan: 6
-  })) : (emailInvoiceData == null ? void 0 : emailInvoiceData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
-    colSpan: 7
-  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : data == null ? void 0 : data.map(function (invoice) {
+  })) : (returnData == null ? void 0 : returnData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 14
+  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : returnData == null ? void 0 : returnData.map(function (item) {
+    var _item$order_data, _item$order_data2, _item$return_reasons, _item$collection_reas;
     return React.createElement("tr", {
-      key: invoice.id
+      key: item.id
     }, React.createElement("td", null, React.createElement(Checkbox$1, {
-      checked: selectedInvoices == null ? void 0 : selectedInvoices.some(function (selectedInvoice) {
-        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === invoice.id;
+      checked: selectedReturnOrder == null ? void 0 : selectedReturnOrder.some(function (selectedInvoice) {
+        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === item.id;
       }),
       onChange: function onChange() {
-        return handleSelectInvoice(invoice.id);
+        return handleSelectInvoice(item.id);
       }
-    })), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, React.createElement("ul", {
+    })), React.createElement("td", null, "N/A"), React.createElement("td", null, item == null ? void 0 : item.return_location), React.createElement("td", null, React.createElement("ul", {
       style: {
         listStyleType: 'none',
         padding: 0
@@ -8360,25 +8672,23 @@ var ReturnOrderTable = function ReturnOrderTable(_ref) {
         fontWeight: 600,
         paddingLeft: 0
       }
-    }, ' ', getStringValue(invoice == null ? void 0 : invoice.account_number)), React.createElement("li", {
+    }, item == null || (_item$order_data = item.order_data) == null || (_item$order_data = _item$order_data.order_recipient) == null ? void 0 : _item$order_data.recipient_name), React.createElement("li", {
       style: {
         color: '#888075'
       }
-    }, invoice == null ? void 0 : invoice.customer_name))), React.createElement("td", null, FormattedDate({
-      date: invoice == null ? void 0 : invoice.date
-    })), React.createElement("td", null, invoice == null ? void 0 : invoice.vat_rate_amount), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, React.createElement("div", {
+    }, item == null || (_item$order_data2 = item.order_data) == null || (_item$order_data2 = _item$order_data2.order_recipient) == null ? void 0 : _item$order_data2.postcode))), React.createElement("td", null, item == null ? void 0 : item.code), React.createElement("td", null, item == null ? void 0 : item.description), React.createElement("td", null, "N/A"), React.createElement("td", null, item == null ? void 0 : item.weight), React.createElement("td", null, item == null ? void 0 : item.cube), React.createElement("td", null, item == null || (_item$return_reasons = item.return_reasons) == null ? void 0 : _item$return_reasons.reason), React.createElement("td", null, "N/A"), React.createElement("td", null, item == null || (_item$collection_reas = item.collection_reasons) == null ? void 0 : _item$collection_reas.reason), React.createElement("td", null, React.createElement("div", {
       className: "shareIconContainer"
     }, React.createElement(PrinterIcon, null), React.createElement(DownIcon, null))));
   })))));
 };
-var _templateObject$27;
+var _templateObject$29;
 var ReturnTable = function ReturnTable() {
   return React.createElement("div", null, React.createElement(DashBoardWrapper$2, null, React.createElement(RouterHeader, null), React.createElement("div", {
     className: "Tableconatiner"
   }, React.createElement(HeaderFilter, null), React.createElement(ReturnFilter, null), React.createElement(ReturnOrderTable, null))));
 };
-var DashBoardWrapper$2 = /*#__PURE__*/styled.section(_templateObject$27 || (_templateObject$27 = /*#__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 DashBoardWrapper$2 = /*#__PURE__*/styled.section(_templateObject$29 || (_templateObject$29 = /*#__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 LoadIcon() {
   return React.createElement("svg", {
@@ -8396,16 +8706,11 @@ function LoadIcon() {
   }));
 }
-// import React, { useEffect } from 'react';
-// import { StyledAntSelect } from '../../Header-filters/Styledfilters';
 var OrderTable = function OrderTable(_ref) {
   var loadingskeleton = _ref.loadingskeleton;
-  var _useEmailInvoice = useEmailInvoice(),
-    emailInvoiceData = _useEmailInvoice[0];
-  var _useAtom = useAtom(countReducerAtom);
-  var _useSelectedEmail = useSelectedEmail(),
-    selectedInvoices = _useSelectedEmail[0],
-    setSelectedInvoices = _useSelectedEmail[1];
+  var _useSelectedOrders = useSelectedOrders(),
+    selectedOrders = _useSelectedOrders[0],
+    setSelectedReturnOrder = _useSelectedOrders[1];
   var _useState = useState(false),
     selectAll = _useState[0],
     setSelectAll = _useState[1];
@@ -8414,27 +8719,51 @@ var OrderTable = function OrderTable(_ref) {
   };
   var defaultPopupClassName = 'dropDownStyle';
   var defaultSelectWrapperClass = 'rounded';
+  var dropdownRefParent = useRef(null);
+  var dropdownRef = useRef(null);
+  var _usePrintOptionTOggle = usePrintOptionTOggle(),
+    printToogle = _usePrintOptionTOggle[0],
+    setPrintToggle = _usePrintOptionTOggle[1];
+  var _useReturnAfterOrderD = useReturnAfterOrderData(),
+    returnAfterOrder = _useReturnAfterOrderD[0];
+  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);
+    }
+  };
   var handleSelectAll = function handleSelectAll(e) {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
-      setSelectedInvoices(data.map(function (invoice) {
+      setSelectedReturnOrder(returnAfterOrder.map(function (e) {
         return {
-          id: invoice.id,
+          id: e.id,
           status_id: 3
         };
       }));
     } else {
-      setSelectedInvoices([]);
+      setSelectedReturnOrder([]);
     }
   };
   var handleSelectInvoice = function handleSelectInvoice(id) {
-    setSelectedInvoices(function (prevSelectedInvoices) {
-      var isSelected = prevSelectedInvoices == null ? void 0 : prevSelectedInvoices.some(function (invoice) {
-        return invoice.id === id;
+    setSelectedReturnOrder(function (prevSelectedInvoices) {
+      var isSelected = prevSelectedInvoices == null ? void 0 : prevSelectedInvoices.some(function (item) {
+        return item.id === id;
       });
       if (isSelected) {
-        return prevSelectedInvoices.filter(function (invoice) {
-          return invoice.id !== id;
+        return prevSelectedInvoices.filter(function (items) {
+          return items.id !== id;
         });
       } else {
         return [].concat(prevSelectedInvoices, [{
@@ -8444,6 +8773,43 @@ var OrderTable = function OrderTable(_ref) {
       }
     });
   };
+  console.log('', returnAfterOrder);
+  var assigneOptions = [{
+    label: 'BJS Distribution',
+    value: 'bjs-dist'
+  }, {
+    label: 'Haulage',
+    value: 'haulage'
+  }];
+  var getStatusClass = function getStatusClass(status) {
+    switch (status) {
+      case 'Cancelled':
+        return {
+          color: '#E95252',
+          background: 'rgba(233, 82, 82, 0.15)'
+        };
+      case 'Pending':
+        return {
+          color: '#F4A503',
+          background: '#FFF1D6'
+        };
+      case 'Awaiting':
+        return {
+          color: '#845ADF',
+          background: 'rgba(132, 90, 223, 0.15)'
+        };
+      case 'Completed':
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)'
+        };
+      default:
+        return {
+          color: '#000',
+          background: '#fff'
+        };
+    }
+  };
   return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper, {
     id: "tableScrolling"
   }, React.createElement(StyledTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
@@ -8461,19 +8827,30 @@ var OrderTable = function OrderTable(_ref) {
     active: true
   })), React.createElement("td", {
     colSpan: 6
-  })) : (emailInvoiceData == null ? void 0 : emailInvoiceData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
+  })) : (returnAfterOrder == null ? void 0 : returnAfterOrder.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
     colSpan: 7
-  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : data == null ? void 0 : data.map(function (invoice) {
+  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : returnAfterOrder == null ? void 0 : returnAfterOrder.map(function (item, index) {
+    var _item$order_recipient, _item$order_recipient2, _item$customer_data;
+    var statusMapping = {
+      CO: 'Cancelled',
+      OO: 'On Hold',
+      SC: 'Sub-Contracted',
+      AR: 'Awaiting Route',
+      SD: 'Completed',
+      AD: 'Outstanding'
+    };
+    var status = statusMapping[item == null ? void 0 : item.status] || 'Unknown';
+    var statusClass = getStatusClass(status);
     return React.createElement("tr", {
-      key: invoice.id
+      key: item.id
     }, React.createElement("td", null, React.createElement(Checkbox$1, {
-      checked: selectedInvoices == null ? void 0 : selectedInvoices.some(function (selectedInvoice) {
-        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === invoice.id;
+      checked: selectedOrders == null ? void 0 : selectedOrders.some(function (selectedInvoice) {
+        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === item.id;
       }),
       onChange: function onChange() {
-        return handleSelectInvoice(invoice.id);
+        return handleSelectInvoice(item.id);
       }
-    })), React.createElement("td", null, invoice == null ? void 0 : invoice.date), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, React.createElement("ul", {
+    })), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.created_at)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.return_locations)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.pick_up_location)), React.createElement("td", null, React.createElement("ul", {
       style: {
         listStyleType: 'none',
         padding: 0
@@ -8484,17 +8861,15 @@ var OrderTable = function OrderTable(_ref) {
         fontWeight: 600,
         paddingLeft: 0
       }
-    }, ' ', getStringValue(invoice == null ? void 0 : invoice.account_number)), React.createElement("li", {
+    }, displayValueOrNA(item == null || (_item$order_recipient = item.order_recipient) == null ? void 0 : _item$order_recipient.recipient_name)), React.createElement("li", {
       style: {
         color: '#888075'
       }
-    }, invoice == null ? void 0 : invoice.customer_name))), React.createElement("td", null, FormattedDate({
-      date: invoice == null ? void 0 : invoice.date
-    })), React.createElement("td", null, invoice == null ? void 0 : invoice.vat_rate_amount), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, invoice == null ? void 0 : invoice.customer_name), React.createElement("td", null, React.createElement(AntSelect, {
-      options: [],
+    }, displayValueOrNA(item == null || (_item$order_recipient2 = item.order_recipient) == null ? void 0 : _item$order_recipient2.postcode)))), React.createElement("td", null, displayValueOrNA(item == null || (_item$customer_data = item.customer_data) == null ? void 0 : _item$customer_data.customer_name)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.consignment)), React.createElement("td", null, "N/A"), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.box_count)), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.weight), "KG"), React.createElement("td", null, displayValueOrNA(item == null ? void 0 : item.cube)), React.createElement("td", null, React.createElement(AntSelect, {
+      options: assigneOptions,
       placeholder: "Select",
       onChange: function onChange() {},
-      defaultValue: (invoice == null ? void 0 : invoice.customer_name) || '',
+      // defaultValue={item?.customer_name || ''}
       style: defaultSelectStyle,
       disabled: false,
       // onSearch={handleSearch}
@@ -8507,18 +8882,26 @@ var OrderTable = function OrderTable(_ref) {
         listStyleType: 'none'
       }
     }, React.createElement("li", {
-      className: "statustext"
-    }, "Completed"))), React.createElement("td", null, React.createElement("ul", {
+      className: "statustext " + statusClass
+    }, status))), React.createElement("td", null, React.createElement("ul", {
       className: "actionbox"
+    }, React.createElement(CustomDrop, {
+      ref: dropdownRefParent,
+      className: printToogle === index ? 'active' : ''
     }, React.createElement("li", {
-      className: "shareIconContainer"
-    }, React.createElement(PrinterIcon, null), React.createElement(DownIcon, null)), 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, null))), React.createElement("li", {
       className: "downloadcontainer"
     }, React.createElement(LoadIcon, null)))));
   })))));
 };
-var _templateObject$28, _templateObject2$1r, _templateObject3$P, _templateObject4$x;
+var _templateObject$2a, _templateObject2$1s, _templateObject3$P, _templateObject4$w;
 var TableFilters = function TableFilters() {
   return React.createElement(Container$14, null, React.createElement(StyledBulkItem$1, null, React.createElement(SearchType, null)), React.createElement(IconConatiner$1, null, React.createElement(Mid$1, null, React.createElement(IconText$1, null, "Export"), React.createElement(DownloadIcon, null))));
   //   return (
@@ -8534,8 +8917,8 @@ var TableFilters = function TableFilters() {
   //     // </StyledBulkFilterCover>
   //   );
 };
-var Container$14 = /*#__PURE__*/styled.div(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
-var Mid$1 = /*#__PURE__*/styled.div(_templateObject2$1r || (_templateObject2$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  /* border-radius: 15px 15px 15px 15px; */\n"])));
+var Container$14 = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
+var Mid$1 = /*#__PURE__*/styled.div(_templateObject2$1s || (_templateObject2$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px 10px 10px 10px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  /* border-radius: 15px 15px 15px 15px; */\n"])));
 // const TextConatiner = styled.div`
 //   display: flex;
 //   padding: 7px 12px;
@@ -8554,7 +8937,7 @@ var Mid$1 = /*#__PURE__*/styled.div(_templateObject2$1r || (_templateObject2$1r
 //   line-height: 20px;
 // `;
 var IconConatiner$1 = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex;\n  height: 34px;\n  padding: 4px 10px;  \n  align-items: flex-start;\n  border-radius: 8px 8px 8px 8px; */\n\n  ///working\n  /* box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  background: #f0f2f2;\n  border: 1px solid #e2e0db;\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 15px;\n  height: 34px; */\n  ///////\n\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  background: #f0f2f2;\n  border: 1px solid #e2e0db;\n  border-radius: 20px 20px 20px 20px;\n\n  /* shadow/shadow-xs */\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
-var IconText$1 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  text-align: center;\n\n  /* body/captions */\n  font-family: 'Lato';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
+var IconText$1 = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  text-align: center;\n\n  /* body/captions */\n  font-family: 'Lato';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
 var FilterIcon = function FilterIcon() {
   return React.createElement("svg", {
@@ -8673,6 +9056,44 @@ var AssigneIcon = function AssigneIcon() {
 };
 var ReturnOrderFilter = function ReturnOrderFilter() {
+  var _useState = useState(false),
+    isDatePickerVisible = _useState[0],
+    setDatePickerVisible = _useState[1];
+  var handleDateIconClick = function handleDateIconClick() {
+    setDatePickerVisible(function (prevState) {
+      return !prevState;
+    });
+  };
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0],
+    setOrderDetails = _useOrderDetails[1];
+  var _usePrevOrderDetails = usePrevOrderDetails(),
+    prevOrderDetails = _usePrevOrderDetails[0];
+  var actionDate = orderDetails != null && orderDetails.action_date ? new Date(orderDetails == null ? void 0 : orderDetails.action_date) : null;
+  var onChange = function onChange(date, _dateString) {
+    var selectedDate = date == null ? void 0 : date.format('YYYY-MM-DDTHH:mm:ss');
+    if (selectedDate !== undefined && prevOrderDetails.action_date !== undefined) {
+      if (new Date(selectedDate).toLocaleDateString() === new Date(prevOrderDetails.action_date).toLocaleDateString()) {
+        setOrderDetails(function (prev) {
+          return _extends({}, prev, {
+            action_date: prevOrderDetails.action_date
+          });
+        });
+      } else {
+        setOrderDetails(function (prev) {
+          return _extends({}, prev, {
+            action_date: selectedDate
+          });
+        });
+      }
+    } else {
+      setOrderDetails(function (prev) {
+        return _extends({}, prev, {
+          action_date: null
+        });
+      });
+    }
+  };
   return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(StyledFIlterELements, null, React.createElement(LeftSideConatiner, null, React.createElement("div", {
     className: "filtercontainer"
   }, React.createElement("div", {
@@ -8682,10 +9103,15 @@ var ReturnOrderFilter = function ReturnOrderFilter() {
   }, "Filters")), React.createElement("div", {
     className: "datefilter"
   }, React.createElement("div", {
-    className: "dateiconcontainer"
+    className: "dateiconcontainer",
+    onClick: handleDateIconClick
   }, React.createElement(DateIcon, null)), React.createElement("div", {
     className: "datetext"
-  }, "Date"), React.createElement("div", {
+  }, "Date"), isDatePickerVisible && React.createElement(DatePicker, {
+    onChange: onChange,
+    value: actionDate === null ? actionDate : dayjs(actionDate),
+    format: "DD/MM/YY"
+  }), React.createElement("div", {
     className: "roundbox"
   }, React.createElement(DownArrowIcon, null))), React.createElement("div", {
     className: "datefilter"
@@ -8714,13 +9140,31 @@ var ReturnOrderFilter = function ReturnOrderFilter() {
   }, React.createElement(DownArrowIcon, null))))), React.createElement(TableFilters, null)));
 };
-var _templateObject$29;
+var _templateObject$2b;
 var ReturnAfterTable = function ReturnAfterTable() {
+  var _useReturnAfterOrderD = useReturnAfterOrderData(),
+    returnAfterOrder = _useReturnAfterOrderD[0],
+    setReturnOrderData = _useReturnAfterOrderD[1];
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useApiHook = useApiHook({
+      endpoint: '/return_orders/?skip_filters=0',
+      method: 'GET'
+    }),
+    fetchedReturnOrderData = _useApiHook.data,
+    staticDataLoading = _useApiHook.loading;
+  useEffect(function () {
+    setLoading(staticDataLoading);
+    if (fetchedReturnOrderData && fetchedReturnOrderData != null && fetchedReturnOrderData.data) {
+      setReturnOrderData(fetchedReturnOrderData == null ? void 0 : fetchedReturnOrderData.data);
+    }
+  }, [fetchedReturnOrderData, staticDataLoading]);
+  console.log('returnAfterOrder', returnAfterOrder);
   return React.createElement("div", null, React.createElement(DashBoardWrapper$3, null, React.createElement(RouterHeader, null), React.createElement("div", {
     className: "Tableconatiner"
   }, React.createElement(HeaderFilter, null), React.createElement(ReturnOrderFilter, null), React.createElement(OrderTable, null))));
 };
-var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject$29 || (_templateObject$29 = /*#__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 DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject$2b || (_templateObject$2b = /*#__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 BulkFilter = function BulkFilter() {
   // const [printToogle, setPrintToggle] = useMenuDropDown();
@@ -8749,76 +9193,10 @@ var BulkFilter = function BulkFilter() {
   );
 };
-var todayDate = /*#__PURE__*/new Date();
-var initialState$1 = {
-  'x-filters': [{
-    field: 'action_date',
-    op: '>=',
-    value: /*#__PURE__*/format( /*#__PURE__*/new Date(todayDate), 'yyyy-MM-dd') + "T00:00:00+00:00"
-  }, {
-    field: 'action_date',
-    op: '<=',
-    value: /*#__PURE__*/format( /*#__PURE__*/new Date(todayDate), 'yyyy-MM-dd') + "T23:59:59+00:00"
-  }, {
-    field: 'status',
-    op: 'count',
-    value: ''
-  }],
-  'x-pagination': {
-    page: 1,
-    per_page: 50
-  }
-};
-var filterReducer = function filterReducer(state, action) {
-  switch (action.type) {
-    case 'SET_DATE_FILTER':
-      return _extends({}, state, {
-        'x-filters': [].concat(state['x-filters'].filter(function (f) {
-          return f.field !== 'action_date' && f.field !== 'status';
-        }), [{
-          field: 'action_date',
-          op: '>=',
-          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T00:00:00+00:00"
-        }, {
-          field: 'action_date',
-          op: '<=',
-          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T23:59:59+00:00"
-        }, {
-          field: 'status',
-          op: 'count',
-          value: ''
-        }])
-      });
-    case 'SET_PAGE':
-      return _extends({}, state, {
-        'x-pagination': _extends({}, state['x-pagination'], {
-          page: action.payload
-        })
-      });
-    case 'SET_PERPAGE':
-      return _extends({}, state, {
-        'x-pagination': _extends({}, state['x-pagination'], {
-          per_page: action.payload
-        })
-      });
-    default:
-      return state;
-  }
-};
-var filtersStateAtom = /*#__PURE__*/atom(initialState$1);
-var filtersReducerAtom = /*#__PURE__*/atom(function (get) {
-  return get(filtersStateAtom);
-}, function (get, set, action) {
-  return set(filtersStateAtom, filterReducer(get(filtersStateAtom), action));
-});
 var _excluded$2 = ["count"];
 var Filters = function Filters() {
-  // const [apiData, setApiData] = useState<TableRowType[] | undefined>(undefined);
-  // Stats and variables
   var _useRoutesTable = useRoutesTable(),
     setData = _useRoutesTable[1];
-  // const [loading, setLoading] = useLoading();
   var _useAtom = useAtom(filtersReducerAtom),
     state = _useAtom[0];
   var _UsePaginationData = UsePaginationData(),
@@ -8856,15 +9234,15 @@ var Filters = function Filters() {
   // const ToggleView = () => {
   //   setDataView(!DataView);
   // };
-  return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(StyledFIlterELements, null, React.createElement(Text$8, null, "Client Return"), React.createElement(StyledTableFilter, null)), React.createElement(BulkFilter, null)));
+  return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(StyledFIlterELements, null, React.createElement(StyledTableFilter, null)), React.createElement(BulkFilter, null)));
 };
-var _templateObject$2a, _templateObject2$1s, _templateObject3$Q, _templateObject4$y, _templateObject6$f, _templateObject7$d;
-var StyledContainer = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  padding: 0;\n  max-width: 100%;\n  margin-top: 11px;\n  margin-bottom: 0;\n"])));
-var StyledContentWrapper = /*#__PURE__*/styled.div(_templateObject2$1s || (_templateObject2$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n"])));
+var _templateObject$2c, _templateObject2$1t, _templateObject3$Q, _templateObject4$x, _templateObject6$e, _templateObject7$d;
+var StyledContainer = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  padding: 0;\n  max-width: 100%;\n  margin-top: 11px;\n  margin-bottom: 0;\n"])));
+var StyledContentWrapper = /*#__PURE__*/styled.div(_templateObject2$1t || (_templateObject2$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n"])));
 var StyledInfoBox = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e2e0db;\n  background: #fff;\n  color: #8e8a85;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0.07px;\n  padding: 6px 10px;\n"])));
-var StyledLabel$2 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8e8a85;\n\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  display: flex;\n  align-items: center;\n"])));
-var StyledPaginationWrapper = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 0;\n  background-color: white;\n  border: 1px solid rgba(208, 213, 221, 0.5);\n  border-radius: 9999px;\n"])));
+var StyledLabel$2 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8e8a85;\n\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  display: flex;\n  align-items: center;\n"])));
+var StyledPaginationWrapper = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 0;\n  background-color: white;\n  border: 1px solid rgba(208, 213, 221, 0.5);\n  border-radius: 9999px;\n"])));
 var StyledPaginationItem = /*#__PURE__*/styled.button(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: ", ";\n  color: ", ";\n  border: none;\n  border-left: 1px solid rgba(208, 213, 221, 0.5);\n  padding: 0.5em 1em;\n  border-radius: 0;\n  cursor: pointer;\n  &:hover {\n    background: rgba(208, 213, 221, 0.8);\n    color: #000;\n  }\n  &:disabled {\n    background: #f0f0f0;\n    cursor: not-allowed;\n  }\n  &:first-child {\n    border-radius: 100px;\n    padding: 0 1em;\n    display: flex;\n    align-items: center;\n  }\n  &:last-child {\n    border-radius: 0 100px 100px 0;\n    padding: 0 1em;\n    display: flex;\n    align-items: center;\n  }\n"])), function (_ref) {
   var active = _ref.active;
   return active ? 'rgba(208, 213, 221, 0.80)' : 'white';
@@ -8899,6 +9277,69 @@ var NextIcon = function NextIcon() {
   }));
 };
+var todayDate = /*#__PURE__*/new Date();
+var initialState$2 = {
+  'x-filters': [{
+    field: 'action_date',
+    op: '>=',
+    value: /*#__PURE__*/format( /*#__PURE__*/new Date(todayDate), 'yyyy-MM-dd') + "T00:00:00+00:00"
+  }, {
+    field: 'action_date',
+    op: '<=',
+    value: /*#__PURE__*/format( /*#__PURE__*/new Date(todayDate), 'yyyy-MM-dd') + "T23:59:59+00:00"
+  }, {
+    field: 'status',
+    op: 'count',
+    value: ''
+  }],
+  'x-pagination': {
+    page: 1,
+    per_page: 50
+  }
+};
+var filterReducer$1 = function filterReducer(state, action) {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'action_date' && f.field !== 'status';
+        }), [{
+          field: 'action_date',
+          op: '>=',
+          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T00:00:00+00:00"
+        }, {
+          field: 'action_date',
+          op: '<=',
+          value: format(new Date(action.payload), 'yyyy-MM-dd') + "T23:59:59+00:00"
+        }, {
+          field: 'status',
+          op: 'count',
+          value: ''
+        }])
+      });
+    case 'SET_PAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          page: action.payload
+        })
+      });
+    case 'SET_PERPAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          per_page: action.payload
+        })
+      });
+    default:
+      return state;
+  }
+};
+var filtersStateAtom$1 = /*#__PURE__*/atom(initialState$2);
+var filtersReducerAtom$1 = /*#__PURE__*/atom(function (get) {
+  return get(filtersStateAtom$1);
+}, function (get, set, action) {
+  return set(filtersStateAtom$1, filterReducer$1(get(filtersStateAtom$1), action));
+});
 var PAGE_SIZE_OPTIONS = [50, 100, 150];
 var MAX_PAGES_TO_SHOW = 5;
 var Pagination = function Pagination(_ref) {
@@ -8907,7 +9348,7 @@ var Pagination = function Pagination(_ref) {
     itemsPerPage = _ref.itemsPerPage,
     onPageChange = _ref.onPageChange,
     onItemsPerPageChange = _ref.onItemsPerPageChange;
-  var _useAtom = useAtom(filtersReducerAtom),
+  var _useAtom = useAtom(filtersReducerAtom$1),
     dispatch = _useAtom[1];
   var totalPages = Math.ceil(totalItems / itemsPerPage);
   var startItem = (currentPage - 1) * itemsPerPage + 1;
@@ -8983,492 +9424,127 @@ var Pagination = function Pagination(_ref) {
   }, React.createElement(NextIcon, null)))));
 };
-var ArrowIcon = function ArrowIcon() {
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "20",
-    height: "21",
-    viewBox: "0 0 20 21",
-    fill: "none"
-  }, React.createElement("path", {
-    d: "M17.3172 10.9422L11.6922 16.5672C11.5749 16.6844 11.4159 16.7503 11.25 16.7503C11.0841 16.7503 10.9251 16.6844 10.8078 16.5672C10.6905 16.4499 10.6247 16.2908 10.6247 16.125C10.6247 15.9591 10.6905 15.8001 10.8078 15.6828L15.3664 11.125H3.125C2.95924 11.125 2.80027 11.0591 2.68306 10.9419C2.56585 10.8247 2.5 10.6657 2.5 10.5C2.5 10.3342 2.56585 10.1753 2.68306 10.058C2.80027 9.94083 2.95924 9.87498 3.125 9.87498H15.3664L10.8078 5.31717C10.6905 5.19989 10.6247 5.04083 10.6247 4.87498C10.6247 4.70913 10.6905 4.55007 10.8078 4.43279C10.9251 4.31552 11.0841 4.24963 11.25 4.24963C11.4159 4.24963 11.5749 4.31552 11.6922 4.43279L17.3172 10.0578C17.3753 10.1158 17.4214 10.1848 17.4529 10.2606C17.4843 10.3365 17.5005 10.4178 17.5005 10.5C17.5005 10.5821 17.4843 10.6634 17.4529 10.7393C17.4214 10.8152 17.3753 10.8841 17.3172 10.9422Z",
-    fill: "#898B92"
-  }));
-};
-var ArrivalIcon = function ArrivalIcon() {
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "30",
-    height: "31",
-    viewBox: "0 0 30 31",
-    fill: "none"
-  }, React.createElement("path", {
-    d: "M6.875 18C7.59541 17.9999 8.29374 18.2486 8.85181 18.7042C9.40989 19.1598 9.79342 19.7941 9.9375 20.5H18.75V8H5C4.33696 8 3.70107 8.26339 3.23223 8.73223C2.76339 9.20107 2.5 9.83696 2.5 10.5V20.5H3.8125C3.95658 19.7941 4.34011 19.1598 4.89819 18.7042C5.45626 18.2486 6.15459 17.9999 6.875 18ZM6.875 24.25C6.15459 24.2501 5.45626 24.0014 4.89819 23.5458C4.34011 23.0902 3.95658 22.4559 3.8125 21.75H1.25V10.5C1.25 9.50544 1.64509 8.55161 2.34835 7.84835C3.05161 7.14509 4.00544 6.75 5 6.75H18.75C19.0815 6.75 19.3995 6.8817 19.6339 7.11612C19.8683 7.35054 20 7.66848 20 8V10.5H23.75L27.5 15.5V21.75H24.9375C24.7941 22.4564 24.4108 23.0915 23.8527 23.5477C23.2945 24.0039 22.5958 24.2531 21.875 24.2531C21.1542 24.2531 20.4555 24.0039 19.8973 23.5477C19.3392 23.0915 18.9559 22.4564 18.8125 21.75H9.9375C9.79342 22.4559 9.40989 23.0902 8.85181 23.5458C8.29374 24.0014 7.59541 24.2501 6.875 24.25ZM6.875 19.25C6.37772 19.25 5.90081 19.4475 5.54917 19.7992C5.19754 20.1508 5 20.6277 5 21.125C5 21.6223 5.19754 22.0992 5.54917 22.4508C5.90081 22.8025 6.37772 23 6.875 23C7.37228 23 7.84919 22.8025 8.20083 22.4508C8.55246 22.0992 8.75 21.6223 8.75 21.125C8.75 20.6277 8.55246 20.1508 8.20083 19.7992C7.84919 19.4475 7.37228 19.25 6.875 19.25ZM21.875 18C22.5954 17.9999 23.2937 18.2486 23.8518 18.7042C24.4099 19.1598 24.7934 19.7941 24.9375 20.5H26.25V15.9L25.95 15.5H20V18.625C20.525 18.2375 21.175 18 21.875 18ZM21.875 19.25C21.3777 19.25 20.9008 19.4475 20.5492 19.7992C20.1975 20.1508 20 20.6277 20 21.125C20 21.6223 20.1975 22.0992 20.5492 22.4508C20.9008 22.8025 21.3777 23 21.875 23C22.3723 23 22.8492 22.8025 23.2008 22.4508C23.5525 22.0992 23.75 21.6223 23.75 21.125C23.75 20.6277 23.5525 20.1508 23.2008 19.7992C22.8492 19.4475 22.3723 19.25 21.875 19.25ZM20 11.75V14.25H25L23.125 11.75H20Z",
-    fill: "#3A3630",
-    fillOpacity: "0.7"
-  }));
-};
-var VehicleIcon = function VehicleIcon() {
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "25",
-    height: "31",
-    viewBox: "0 0 30 31",
-    fill: "none"
-  }, React.createElement("path", {
-    d: "M6.875 18C7.59541 17.9999 8.29374 18.2486 8.85181 18.7042C9.40989 19.1598 9.79342 19.7941 9.9375 20.5H18.75V8H5C4.33696 8 3.70107 8.26339 3.23223 8.73223C2.76339 9.20107 2.5 9.83696 2.5 10.5V20.5H3.8125C3.95658 19.7941 4.34011 19.1598 4.89819 18.7042C5.45626 18.2486 6.15459 17.9999 6.875 18ZM6.875 24.25C6.15459 24.2501 5.45626 24.0014 4.89819 23.5458C4.34011 23.0902 3.95658 22.4559 3.8125 21.75H1.25V10.5C1.25 9.50544 1.64509 8.55161 2.34835 7.84835C3.05161 7.14509 4.00544 6.75 5 6.75H18.75C19.0815 6.75 19.3995 6.8817 19.6339 7.11612C19.8683 7.35054 20 7.66848 20 8V10.5H23.75L27.5 15.5V21.75H24.9375C24.7941 22.4564 24.4108 23.0915 23.8527 23.5477C23.2945 24.0039 22.5958 24.2531 21.875 24.2531C21.1542 24.2531 20.4555 24.0039 19.8973 23.5477C19.3392 23.0915 18.9559 22.4564 18.8125 21.75H9.9375C9.79342 22.4559 9.40989 23.0902 8.85181 23.5458C8.29374 24.0014 7.59541 24.2501 6.875 24.25ZM6.875 19.25C6.37772 19.25 5.90081 19.4475 5.54917 19.7992C5.19754 20.1508 5 20.6277 5 21.125C5 21.6223 5.19754 22.0992 5.54917 22.4508C5.90081 22.8025 6.37772 23 6.875 23C7.37228 23 7.84919 22.8025 8.20083 22.4508C8.55246 22.0992 8.75 21.6223 8.75 21.125C8.75 20.6277 8.55246 20.1508 8.20083 19.7992C7.84919 19.4475 7.37228 19.25 6.875 19.25ZM21.875 18C22.5954 17.9999 23.2937 18.2486 23.8518 18.7042C24.4099 19.1598 24.7934 19.7941 24.9375 20.5H26.25V15.9L25.95 15.5H20V18.625C20.525 18.2375 21.175 18 21.875 18ZM21.875 19.25C21.3777 19.25 20.9008 19.4475 20.5492 19.7992C20.1975 20.1508 20 20.6277 20 21.125C20 21.6223 20.1975 22.0992 20.5492 22.4508C20.9008 22.8025 21.3777 23 21.875 23C22.3723 23 22.8492 22.8025 23.2008 22.4508C23.5525 22.0992 23.75 21.6223 23.75 21.125C23.75 20.6277 23.5525 20.1508 23.2008 19.7992C22.8492 19.4475 22.3723 19.25 21.875 19.25ZM20 11.75V14.25H25L23.125 11.75H20Z",
-    fill: "#3A3630",
-    fillOpacity: "0.7"
-  }));
-};
-var _templateObject$2b;
-var getColor = function getColor(data) {
-  switch (data == null ? void 0 : data.value) {
-    case 1:
-      return '#FFF1D6';
-    case 2:
-      return '#ffcbcb';
-    case 3:
-      return '#ceffd6';
-    default:
-      return 'grey';
-  }
-};
-var getStatusColor$1 = function getStatusColor(data) {
-  switch (data == null ? void 0 : data.value) {
-    case 1:
-      return '#FEBA30';
-    case 2:
-      return '#E95252';
-    case 3:
-      return '#1F9254';
-    default:
-      return 'grey';
-  }
-};
-var CustomSelectDropdown = /*#__PURE__*/styled(Select)(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    background-color: ", " !important;\n    color: ", " !important;\n    border-color: ", ";\n    border-radius: 25px !important;\n    border: none !important;\n    min-width: 100px;\n    padding: 0 10px;\n  }\n  .ant-select-arrow {\n    display: none;\n  }\n  .ant-select-selection-item {\n    font-weight: 600;\n    font-size: 12px;\n  }\n"])), function (props) {
-  return getColor(props.value);
-}, function (props) {
-  return getStatusColor$1(props.value);
-}, function (props) {
-  return getStatusColor$1(props.value);
-});
-var _templateObject$2c, _templateObject2$1t, _templateObject3$R, _templateObject4$z;
-// import GreenDotIcon from '../../assets/GreenDotIcon';
-// import RedDotIcon from '../../assets/RedDotIcon';
-// import OrangeDotIcon from '../../assets/OrangeDotIcon';
-var selectedValueAtom = /*#__PURE__*/atom(null);
-var selectedIDAtom = /*#__PURE__*/atom(null);
-// Function to render nested content
-var MyTable = function MyTable(_ref) {
-  var _staticData$invoice_d;
-  var columns = _ref.columns,
-    data = _ref.data,
-    loadingskeleton = _ref.loadingskeleton,
-    view = _ref.view;
-  var _useStaticData = useStaticData(),
-    staticData = _useStaticData[0];
-  var statusOptions = staticData == null || (_staticData$invoice_d = staticData.invoice_discount_status) == null ? void 0 : _staticData$invoice_d.map(function (item) {
-    var _item$status, _item$status2;
-    return {
-      value: item == null ? void 0 : item.id,
-      label: item == null ? void 0 : item.status,
-      icon: (item == null || (_item$status = item.status) == null ? void 0 : _item$status.toLowerCase()) === 'pending' ? React.createElement(ArrivalIcon, null) : (item == null || (_item$status2 = item.status) == null ? void 0 : _item$status2.toLowerCase()) === 'approved' ? React.createElement(ArrivalIcon, null) : React.createElement(VehicleIcon, null)
-    };
-  });
-  var renderContent = function renderContent(content) {
-    if (Array.isArray(content)) {
-      return React.createElement("div", null, content.map(function (item, index) {
-        return React.createElement("div", {
-          key: index
-        }, renderContent(item));
-      }));
-    } else if (typeof content === 'object' && content !== null) {
-      return React.createElement("div", null, Object.entries(content).map(function (_ref2) {
-        var key = _ref2[0],
-          value = _ref2[1];
-        return React.createElement("div", {
-          key: key
-        }, renderContent(value));
-      }));
-    }
-    return content;
-  };
-  //   const [, dispatch] = useAtom(countReducerAtom);
-  var _useAtom = useAtom(selectedValueAtom),
-    setSelectedValue = _useAtom[1];
-  var _useAtom2 = useAtom(selectedIDAtom),
-    setSelectedID = _useAtom2[1];
-  var handleSelect = function handleSelect(id) {
-    setSelectedID(id);
-  };
-  var handleOption = function handleOption(event) {
-    var selectedValue = event;
-    setSelectedValue(selectedValue);
-  };
-  var renderCellContent = function renderCellContent(column, tableRow) {
-    var _tableRow$invoice_dis, _tableRow$grand_total, _tableRow$grand_total2, _tableRow$invoice_dis2, _tableRow$grand_total3, _tableRow$grand_total4;
-    var cellData = tableRow[column == null ? void 0 : column.accessor];
-    var statusID = tableRow == null || (_tableRow$invoice_dis = tableRow.invoice_discount_queues) == null ? void 0 : _tableRow$invoice_dis.status_id;
-    var selectedOption = statusOptions == null ? void 0 : statusOptions.find(function (option) {
-      return (option == null ? void 0 : option.value) === statusID;
-    });
-    switch (column.accessor) {
-      case 'action':
-        return React.createElement(Buttons$1, null, React.createElement(Back, {
-          onClick: function onClick() {
-            return console.log('Action button clicked');
-          }
-        }, "Back to debrief"), React.createElement(Remove, {
-          onClick: function onClick() {
-            return console.log('Another button clicked');
-          }
-        }, "Remove from Invoice"));
-      case 'invoice_date':
-        if (!cellData) {
-          return null;
-        }
-        var formattedInvoiceDate = format(new Date(cellData), 'dd/MM/yyyy');
-        return React.createElement("span", null, formattedInvoiceDate);
-      case 'date':
-        if (!cellData) {
-          return null;
-        }
-        var formattedDate = format(new Date(cellData), 'dd/MM/yyyy');
-        return React.createElement("span", null, formattedDate);
-      case 'total_orders':
-        return React.createElement("span", {
-          style: {
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px',
-            color: '#6A7378'
-          }
-        }, view !== 'rfi' ? cellData : tableRow == null || (_tableRow$grand_total = tableRow.grand_total) == null ? void 0 : _tableRow$grand_total.total_orders);
-      case 'total_amount':
-        var val = +(tableRow == null || (_tableRow$grand_total2 = tableRow.grand_total) == null ? void 0 : _tableRow$grand_total2.total_amount);
-        return React.createElement("span", {
-          style: {
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px',
-            color: '#6A7378'
-          }
-        }, view !== 'rfi' ? cellData == null ? void 0 : cellData.toLocaleString() : val == null ? void 0 : val.toLocaleString());
-      case 'discount':
-        return React.createElement("span", {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            gap: '5px',
-            alignItems: 'center'
-          }
-        }, React.createElement(Percentage, null, tableRow == null || (_tableRow$invoice_dis2 = tableRow.invoice_discount_queues) == null ? void 0 : _tableRow$invoice_dis2.new_discount, '%'), React.createElement("span", {
-          style: {
-            alignItems: 'center',
-            fontSize: '14px',
-            color: '#3A3630'
-          }
-        }, getIntegerValue(cellData)));
-      case 'total':
-        var totalVal = +(tableRow == null || (_tableRow$grand_total3 = tableRow.grand_total) == null ? void 0 : _tableRow$grand_total3.grand_total);
-        return React.createElement("span", null, '£', view !== 'rfi' ? cellData == null ? void 0 : cellData.toLocaleString() : totalVal == null ? void 0 : totalVal.toLocaleString());
-      case 'amount':
-        return React.createElement("span", null, '£', cellData == null ? void 0 : cellData.toLocaleString());
-      case 'zone':
-        return React.createElement("span", {
-          style: {
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px'
-          }
-        }, cellData);
-      case 'vat_rate':
-        return React.createElement("span", {
-          style: {
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px'
-          }
-        }, "            ", view !== 'rfi' ? cellData : tableRow == null || (_tableRow$grand_total4 = tableRow.grand_total) == null ? void 0 : _tableRow$grand_total4.vat_rate, '%');
-      case 'products':
-        return React.createElement("span", {
-          style: {
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px'
-          }
-        }, cellData);
-      case 'customer_name':
-        return React.createElement("span", {
-          style: {
-            color: '#0099ff',
-            fontWeight: 600,
-            cursor: 'pointer'
-          },
-          onClick: function onClick() {
-            return column.callback !== undefined && (column == null ? void 0 : column.callback({
-              label: tableRow == null ? void 0 : tableRow.customer_name,
-              value: tableRow == null ? void 0 : tableRow.customer_id
-            }));
-          }
-        }, cellData);
-      case 'status_id':
-        return React.createElement(React.Fragment, null, React.createElement("div", {
-          onClick: function onClick() {
-            return handleSelect(tableRow == null ? void 0 : tableRow.id);
-          }
-        }, React.createElement(DropdownContainer, null, React.createElement(ConfigProvider, {
-          theme: {
-            components: {
-              Select: {
-                /* here is your component tokens */
-                optionPadding: '10px 6px',
-                optionFontSize: 13,
-                optionHeight: 16,
-                optionSelectedFontWeight: 400
-              }
-            }
-          }
-        }, React.createElement(CustomSelectDropdown, {
-          value: selectedOption,
-          options: statusOptions,
-          onChange: handleOption,
-          variant: "borderless",
-          optionRender: function optionRender(option) {
-            return React.createElement("div", {
-              style: {
-                display: 'flex',
-                gap: '8px',
-                alignItems: 'center'
-              }
-            }, React.createElement("span", {
-              style: {
-                display: 'flex'
-              },
-              "aria-label": option.data.label
-            }, option.data.icon), React.createElement("span", {
-              style: {
-                color: '#8D8F90'
-              }
-            }, option.data.label));
-          }
-        }), React.createElement(IconContainer$4, null, React.createElement(ArrowIcon, null))))));
-      default:
-        return renderContent(cellData);
+var ReturnTable$1 = function ReturnTable(_ref) {
+  var loadingskeleton = _ref.loadingskeleton;
+  var _useClientData = useClientData(),
+    clientData = _useClientData[0];
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useOrderStaticData = useOrderStaticData(),
+    setOrderStaticData = _useOrderStaticData[1];
+  var _useApiHook = useApiHook({
+      endpoint: "/orders/getStaticData/all/",
+      method: 'GET'
+    }),
+    fetchedStaticData = _useApiHook.data,
+    staticDataLoading = _useApiHook.loading;
+  console.log('fetchedStaticData', fetchedStaticData);
+  useEffect(function () {
+    setLoading(staticDataLoading);
+    if (fetchedStaticData && fetchedStaticData.data) {
+      var result = fetchedStaticData == null ? void 0 : fetchedStaticData.data;
+      setOrderStaticData(result[0]);
     }
-  };
-  return React.createElement(CoverDiv, null, React.createElement(StyledTableWrapper$1, {
+  }, [staticDataLoading, fetchedStaticData]);
+  return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
     id: "tableScrolling"
-  }, React.createElement(StyledTable$1, {
-    className: "mainTable"
-  }, React.createElement("thead", null, React.createElement("tr", null, columns == null ? void 0 : columns.map(function (column) {
-    return React.createElement(Header$2, {
-      key: column.accessor
-    }, column.Header);
-  }))), React.createElement("tbody", null, loadingskeleton ? React.createElement("tr", null, React.createElement("td", {
-    colSpan: (columns == null ? void 0 : columns.length) || 7
+  }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Trading Name"), React.createElement("th", null, "Client"), React.createElement("th", null, "Orders"), React.createElement("th", null, "Products"), React.createElement("th", null, "Dispose"), React.createElement("th", null, "Re-allocate"), React.createElement("th", null, "Re-Del"), React.createElement("th", null, "Recycle"), React.createElement("th", null, "Unknown"))), React.createElement("tbody", null, loadingskeleton ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 9
   }, React.createElement(Skeleton, {
     active: true
-  }))) : data != null && data.length ? data.map(function (tableRow, index) {
+  }))) : (clientData == null ? void 0 : clientData.length) === 0 ? React.createElement("tr", null, React.createElement("td", {
+    colSpan: 9
+  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : Object.keys(clientData[0]).map(function (key) {
+    var clientReturn = clientData[0][key];
     return React.createElement("tr", {
-      key: index
-    }, columns == null ? void 0 : columns.map(function (column) {
-      return React.createElement(StyledTdBasic, {
-        key: column.accessor
-      }, renderCellContent(column, tableRow));
-    }));
-  }) : React.createElement("tr", null, React.createElement("td", {
-    colSpan: (columns == null ? void 0 : columns.length) || 7
-  }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null))))))));
-};
-var Percentage = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  background: rgba(42, 175, 77, 0.12);\n  display: flex;\n  padding: 4px 8px;\n  align-items: flex-start;\n  gap: 24px;\n  color: #2aaf4d;\n"])));
-var IconContainer$4 = /*#__PURE__*/styled.div(_templateObject2$1t || (_templateObject2$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 7px;\n  left: 71px;\n  border-radius: 18px;\n  background: rgba(255, 255, 255, 0.5);\n  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);\n  display: flex;\n  width: 18px;\n  height: 18px;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  pointer-events: none;\n"])));
-var DropdownContainer = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  .custom-dropdown {\n    .ant-select-item {\n      font-weight: 400;\n      font-size: 13px;\n    }\n  }\n"])));
-var CoverDiv = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  min-height: calc(100vh - 396px);\n  .ant-skeleton {\n    position: absolute;\n    bottom: 0;\n    background: #fff;\n  }\n"])));
-// import useInfiniteScroll from './InfiniteScrolling';
-// import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
-// import {
-//   usePrevSelectedClients,
-//   useSelectedClients,
-// } from '../header-for-invoice/store';
-// import ClientView from './client-view';
-var ReturnTable$1 = function ReturnTable() {
-  //   const [, setClient] = useSelectedClients();
-  //   const [
-  //     readyForInvoiceView,
-  //     setReadyForInvoiceView,
-  //   ] = useReadyForInvoiceView();
-  //   const [filterState, dispatchOverviewFilter] = useAtom(
-  //     overviewFiltersReducerAtom
-  //   );
-  //   const [, setPrevSelectedClients] = usePrevSelectedClients();
-  // const [, dispatchFilters] = useAtom(overviewFiltersReducerAtom);
-  //   const getId = (data: any) => {
-  //     setClient([data]);
-  //     setPrevSelectedClients([data]); // to disable apply button if client is clickec from table
-  //     setReadyForInvoiceView('client');
-  //     dispatchOverviewFilter({
-  //       type: 'SET_CUSTOMER_FILTER',
-  //       payload: [data.value],
-  //     });
-  //   };
-  var columns = [{
-    Header: 'Trading Name',
-    accessor: 'name',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Client',
-    accessor: 'customer_name',
-    //   callback: getId,
-    sortable: true,
-    showIcon: false
-  }, {
-    Header: 'Orders',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Products',
-    accessor: 'total_orders',
-    sortable: true,
-    showIcon: false
-  }, {
-    Header: 'RTS',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Pending',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Dispose',
-    accessor: 'total_orders',
-    sortable: true,
-    showIcon: false
-  }, {
-    Header: 'Re-allocate',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Re-Del',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }, {
-    Header: 'Recycle',
-    accessor: 'total_orders',
-    sortable: true,
-    showIcon: false
-  }, {
-    Header: 'unknown',
-    accessor: 'total_amount',
-    sortable: true,
-    showIcon: true
-  }];
-  // const [invoiceData, setInvoiceData] = useInvoiceData();
-  //   const [
-  //     readyForInvoiceOverview,
-  //     setReadyForInvoiceOverview,
-  //   ] = useReadyForInvoiceOverview();
-  // const [filterApplied] = usefilterApplied();
-  //   const { 'x-filters': filters, 'x-pagination': pagination } = filterState;
-  //   const {
-  //     data: fetchedOverviewData,
-  //     setShouldPerformAction, // need for  infinite
-  //     paginationData, // need for  infinite
-  //     loadingskeleton, // need for  infinite
-  //   } = useApiHook<ApiResponse>({
-  //     endpoint: `/invoices/ready_for_invoice/overview/`,
-  //     method: 'GET',
-  //     filters: filters,
-  //     pagination: pagination,
-  //     performAction: true,
-  //   });
-  //   //  infinite scrolling code start here
-  //   const { page, scrollActivated } = useInfiniteScroll(
-  //     paginationData,
-  //     setShouldPerformAction,
-  //     'tableScrolling'
-  //   );
-  //   useEffect(() => {
-  //     dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
-  //   }, [page]);
-  //   useEffect(() => {
-  //     if (fetchedOverviewData && fetchedOverviewData?.data) {
-  //       const invoiceData = fetchedOverviewData?.data;
-  //       if (scrollActivated) {
-  //         setReadyForInvoiceOverview((prev: any) => {
-  //           const newData = invoiceData?.filter(
-  //             (newItem: any) =>
-  //               !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
-  //           );
-  //           return [...prev, ...newData];
-  //         });
-  //       } else {
-  //         setReadyForInvoiceOverview(invoiceData);
-  //       }
-  //     }
-  //   }, [fetchedOverviewData, scrollActivated]);
-  //   const renderContent = () => {
-  //     <MyTable
-  //     columns={columns}
-  //     data={data}
-  //     loading={false}
-  //     // loadingskeleton={loadingskeleton}
-  //     view="rfi"
-  //   />
-  // switch (readyForInvoiceView) {
-  //   case 'client':
-  //     return (
-  //       <div
-  //         style={{
-  //           display: 'flex',
-  //           flexDirection: 'column',
-  //           gap: '10px',
-  //           marginTop: '10px',
-  //         }}
-  //       >
-  //         {/* <ClientView /> */}
-  //       </div>
-  //     );
-  //   default:
-  //     return (
-  //       <MyTable
-  //         columns={columns}
-  //         data={data}
-  //         loading={false}
-  //         // loadingskeleton={loadingskeleton}
-  //         view="rfi"
-  //       />
-  //     );
-  // }
-  //   };
-  return React.createElement("div", {
-    style: {
-      textTransform: 'capitalize',
-      overflow: 'auto'
-    }
-  }, React.createElement(MyTable, {
-    columns: columns,
-    data: data,
-    loading: false,
-    // loadingskeleton={loadingskeleton}
-    view: "rfi"
-  }));
+      key: key
+    }, React.createElement("td", null, clientReturn == null ? void 0 : clientReturn.trading_as), React.createElement("td", null, ' ', React.createElement("ul", {
+      style: {
+        listStyleType: 'none',
+        padding: 0
+      }
+    }, React.createElement("li", {
+      style: {
+        color: '#0099ff',
+        fontWeight: 600,
+        paddingLeft: 0
+      }
+    }, clientReturn == null ? void 0 : clientReturn.customer_name)), ' '), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn.return_orders)), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn.return_order_products)), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn.DISPOSE)), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn['RE-ALLOCATE'])), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn['RE-DEL'])), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn.RECYCLE)), React.createElement("td", null, React.createElement("div", {
+      style: {
+        background: 'rgba(153, 153, 153, 0.10)',
+        padding: '3px 12px',
+        borderRadius: '4px',
+        color: '#6A7378',
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, clientReturn == null ? void 0 : clientReturn.UNKNOWN)));
+  })))));
 };
-var _templateObject$2d;
+var _templateObject$2d, _templateObject2$1u;
 // import Loader from '../loader/Loader';
+// interface ApiResponse {
+//   message: string;
+//   code: number;
+//   error: string | null;
+//   error_traceback: string | null;
+//   data: [];
+// }
 function ReturnMainTable() {
   var _UsePaginationData = UsePaginationData(),
     paginationObj = _UsePaginationData[0];
@@ -9477,6 +9553,8 @@ function ReturnMainTable() {
   var _useItemsPerPage = useItemsPerPage(),
     itemsPerPage = _useItemsPerPage[0],
     setItemsPerPage = _useItemsPerPage[1];
+  var _useTableName = useTableName(),
+    selectedClient = _useTableName[0];
   var page = paginationObj.page,
     total = paginationObj.total;
   var _useStickyStatus = useStickyStatus(),
@@ -9488,11 +9566,33 @@ function ReturnMainTable() {
     setItemsPerPage(itemsPerPage);
   };
   ////
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useClientData = useClientData(),
+    setClientData = _useClientData[1];
+  var _useApiHook = useApiHook({
+      endpoint: "/return_orders/get/client-returns/",
+      method: 'GET'
+    }),
+    fetchedClientData = _useApiHook.data,
+    staticDataLoading = _useApiHook.loading;
+  console.log('fetchedClientData', fetchedClientData == null ? void 0 : fetchedClientData.data);
+  useEffect(function () {
+    setLoading(staticDataLoading);
+    if (fetchedClientData && fetchedClientData.data) {
+      var result = fetchedClientData == null ? void 0 : fetchedClientData.data;
+      setClientData(result);
+      // Flatten the nested objects into an array
+      // const data = Object.values(fetchedClientData.data);
+      // console.log('data', data);
+      // setClientData(data);
+    }
+  }, [staticDataLoading]);
   return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper$4, {
     className: " " + (isScrolled ? 'stickyTableHead' : '')
   }, React.createElement(RouterHeader, null), React.createElement("div", {
     className: "Tableconatiner"
-  }, React.createElement(HeaderFilter, null), React.createElement(Filters, null), React.createElement(ReturnTable$1, null), total > 0 && React.createElement(Pagination, {
+  }, React.createElement(HeaderFilter, null), React.createElement(Row$3, null, React.createElement(Text$8, null, " ", selectedClient ? selectedClient : 'Client Return'), selectedClient ? React.createElement(ReturnFilter, null) : React.createElement(Filters, null)), selectedClient ? React.createElement(ReturnOrderTable, null) : React.createElement(ReturnTable$1, null), total > 0 && React.createElement(Pagination, {
     currentPage: page,
     totalItems: total,
     itemsPerPage: itemsPerPage,
@@ -9500,7 +9600,8 @@ function ReturnMainTable() {
     onItemsPerPageChange: handleItemsPerPageChange
   }))));
 }
-var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject$2d || (_templateObject$2d = /*#__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 Row$3 = /*#__PURE__*/styled.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject2$1u || (_templateObject2$1u = /*#__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() {
   var LoadingMessage = function LoadingMessage() {