@bjsdistribution/dms-client-return 0.0.12 → 0.0.13

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

@@ -558,9 +558,10 @@ var IconContainer = /*#__PURE__*/styled__default.div(_templateObject$1 || (_temp
 var currentActionAtom = /*#__PURE__*/jotai.atom(undefined);
 var isOnHold = /*#__PURE__*/jotai.atom(false);
 var orderStaticDataAtom = /*#__PURE__*/jotai.atom({});
-var clientDataAtom = /*#__PURE__*/jotai.atom([]);
-var returnDataAtom = /*#__PURE__*/jotai.atom([]);
-var returnAfterOrderAtom = /*#__PURE__*/jotai.atom([]);
+var customerInfoAtom = /*#__PURE__*/jotai.atom({
+  recipient_name: '',
+  postcode: ''
+});
 var ordersInitialValue = {
   depot_id: null,
   gsit_order_id: null,
@@ -585,6 +586,9 @@ var ordersInitialValue = {
   other_instructions: null,
   schedule_after: null,
   vehicle_type: null,
+  order_locked_by: null,
+  delivery_instructions: null,
+  drop_time: null,
   order_recipient: {
     id: null,
     order_id: null,
@@ -626,16 +630,8 @@ var ordersInitialValue = {
   order_eta_updates: [],
   order_delivery_declined_dates: [],
   order_communications: [],
-  id: null
-};
-var orderProductInitialvalue = {
-  code: '',
-  description: '',
-  sku: '',
-  weight: 0,
-  cube: 0,
-  order_id: 0,
-  product_type_id: 0
+  id: null,
+  name: ''
 };
 var unrecieveOrderProducts = {
   unrecieve_reason_id: 0,
@@ -655,20 +651,14 @@ function useCurrentAction() {
 function useOrderStaticData() {
   return jotai.useAtom(orderStaticDataAtom);
 }
-function useClientData() {
-  return jotai.useAtom(clientDataAtom);
-}
-function useReturnData() {
-  return jotai.useAtom(returnDataAtom);
-}
-function useReturnAfterOrderData() {
-  return jotai.useAtom(returnAfterOrderAtom);
+function useCustomerInfo() {
+  return jotai.useAtom(customerInfoAtom);
 }
 function useIsOnHoldOrder() {
   return jotai.useAtom(isOnHold);
 }
 //value
-var orderId = /*#__PURE__*/jotai.atom(undefined);
+var orderId = /*#__PURE__*/jotai.atom([]);
 var useOrderId = function useOrderId() {
   return jotai.useAtom(orderId);
 };
@@ -681,7 +671,7 @@ var prevOrderDetails = /*#__PURE__*/jotai.atom(ordersInitialValue);
 function usePrevOrderDetails() {
   return jotai.useAtom(prevOrderDetails);
 }
-var customerDetails = /*#__PURE__*/jotai.atom(0);
+var customerDetails = /*#__PURE__*/jotai.atom({});
 function useCustomerDetails() {
   return jotai.useAtom(customerDetails);
 }
@@ -701,7 +691,7 @@ var deleteProdId = /*#__PURE__*/jotai.atom([]);
 function useDeleteProdsID() {
   return jotai.useAtom(deleteProdId);
 }
-var createOrderProduct = /*#__PURE__*/jotai.atom(orderProductInitialvalue);
+var createOrderProduct = /*#__PURE__*/jotai.atom([]);
 function useCreateOrderProducts() {
   return jotai.useAtom(createOrderProduct);
 }
@@ -713,23 +703,45 @@ var updateOrderProduct = /*#__PURE__*/jotai.atom(updateOrderProducts);
 function useUpdateOrderProducts() {
   return jotai.useAtom(updateOrderProduct);
 }
-var selectedProductIdAtom = /*#__PURE__*/jotai.atom(null);
-var selectedTabKeyAtom = /*#__PURE__*/jotai.atom('1');
-var eventNotesData = /*#__PURE__*/jotai.atom([]);
-function useEventNotesData() {
-  return jotai.useAtom(eventNotesData);
+var CallAPi = /*#__PURE__*/jotai.atom(false);
+function useCallAPi() {
+  return jotai.useAtom(CallAPi);
+}
+var errorAtom = /*#__PURE__*/jotai.atom({
+  homeContactError: '',
+  workCOntanctError: '',
+  mobileError: '',
+  emailError: '',
+  w3wError: '',
+  postCodeError: ''
+});
+var orderProductResources = /*#__PURE__*/jotai.atom([]);
+function useOrderProductsResources() {
+  return jotai.useAtom(orderProductResources);
+}
+var orderProductToolbox = /*#__PURE__*/jotai.atom([]);
+function useOrderProductsToolbox() {
+  return jotai.useAtom(orderProductToolbox);
+}
+var locationOptions = /*#__PURE__*/jotai.atom([]);
+function useLocationOptions() {
+  return jotai.useAtom(locationOptions);
 }
 var orderProductSystemLogs = /*#__PURE__*/jotai.atom([]);
 function useOrderProductSystemLogs() {
   return jotai.useAtom(orderProductSystemLogs);
 }
-var moduleIds = /*#__PURE__*/jotai.atom(null);
-function usemoduleIds() {
-  return jotai.useAtom(moduleIds);
+var eventNotesData = /*#__PURE__*/jotai.atom([]);
+function useEventNotesData() {
+  return jotai.useAtom(eventNotesData);
 }
-var CallAPi = /*#__PURE__*/jotai.atom(false);
-function useCallAPi() {
-  return jotai.useAtom(CallAPi);
+var returnAfterOrderAtom = /*#__PURE__*/jotai.atom([]);
+function useReturnAfterOrderData() {
+  return jotai.useAtom(returnAfterOrderAtom);
+}
+var clientDataAtom = /*#__PURE__*/jotai.atom([]);
+function useClientData() {
+  return jotai.useAtom(clientDataAtom);
 }
 var NotesLoading = /*#__PURE__*/jotai.atom(true);
 var UseNotesLoading = function UseNotesLoading() {
@@ -739,17 +751,62 @@ var notes = /*#__PURE__*/jotai.atom([]);
 function usegetNotes() {
   return jotai.useAtom(notes);
 }
-var errorAtom = /*#__PURE__*/jotai.atom({
-  homeError: '',
-  mobileError: '',
-  emailError: '',
-  w3wError: ''
-});
+var moduleIds = /*#__PURE__*/jotai.atom(null);
+function usemoduleIds() {
+  return jotai.useAtom(moduleIds);
+}
+var callAPi = /*#__PURE__*/jotai.atom(false);
+function useLogsCallAPi() {
+  return jotai.useAtom(callAPi);
+}
+var gsitCUstomerId = /*#__PURE__*/jotai.atom({});
+function useGsitCUstomerId() {
+  return jotai.useAtom(gsitCUstomerId);
+}
+var CUstomerId = /*#__PURE__*/jotai.atom(undefined);
+function useCUstomerId() {
+  return jotai.useAtom(CUstomerId);
+}
+var RouteId = /*#__PURE__*/jotai.atom(undefined);
+function useRouteId() {
+  return jotai.useAtom(RouteId);
+}
+var gsitOrderId = /*#__PURE__*/jotai.atom(undefined);
+function useGsitOrderId() {
+  return jotai.useAtom(gsitOrderId);
+}
+var orderProductId = /*#__PURE__*/jotai.atom(undefined);
+function useOrderProductId() {
+  return jotai.useAtom(orderProductId);
+}
+var returnDataAtom = /*#__PURE__*/jotai.atom([]);
+function useReturnData() {
+  return jotai.useAtom(returnDataAtom);
+}
+var apiCalling = /*#__PURE__*/jotai.atom(false);
+function useApiCalling() {
+  return jotai.useAtom(apiCalling);
+}
+var liveRecalling = /*#__PURE__*/jotai.atom(false);
+//re api call of live status
+function useLiveRecalling() {
+  return jotai.useAtom(liveRecalling);
+}
+var selectedTabKeyAtom = /*#__PURE__*/jotai.atom('1');
+var letselectedProductIdAtom = /*#__PURE__*/jotai.atom(null);
+// const BulkUPdateDisabledState = atom<boolean>(false);
+// export const useBulkUPdateDisabledState = () => {
+//   return useAtom(BulkUPdateDisabledState);
+// };
+var auditLogToggle = /*#__PURE__*/jotai.atom(true);
+var SeteauditLogToggle = function SeteauditLogToggle() {
+  return jotai.useAtom(auditLogToggle);
+};
 // Popup state Manage
 var initialState = null;
 var popupReducer = function popupReducer(state, action) {
-  if (action.type === 'create-return') {
-    state = 'create-return';
+  if (action.type === 'bulkUpdate') {
+    state = 'bulkUpdate';
     return {
       state: state
     };
@@ -919,6 +976,9 @@ function Postcode() {
 var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
 var Container$3 = /*#__PURE__*/styled__default.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
+var _excluded$1 = ["order_recipient", "order_routes", "order_services_detail", "order_services"],
+  _excluded2 = ["order_recipient", "order_routes", "order_services_detail", "order_services"],
+  _excluded3 = ["id", "new_id"];
 var capitalize = function capitalize(input) {
   if (!input) {
     return;
@@ -1009,17 +1069,143 @@ var getCookie = function getCookie(name) {
   return null;
 };
 var handleKeyDown = function handleKeyDown(e) {
-  // Allowed keys: numbers (0-9), '.', '-'
+  // Allowed keys: numbers (0-9), '.', '-', '+'
   var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', '+'];
-  // Allow backspace, delete and Tab keys
+  // Allow backspace, delete, and Tab keys
   if (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Tab') {
     return;
   }
+  var input = e.currentTarget;
+  // Check if '+' is allowed only at the start and not duplicated
+  if (e.key === '+') {
+    // Prevent if '+' is not at the start or there is already a '+' in the input
+    if (input.selectionStart !== 0 || input.value.includes('+')) {
+      e.preventDefault();
+      return;
+    }
+  }
   // Prevent input if key is not in allowedKeys
   if (!allowedKeys.includes(e.key)) {
     e.preventDefault();
   }
 };
+var generateObj = function generateObj(keys, sourceObj) {
+  var newObj = {};
+  keys.forEach(function (key) {
+    if (key in sourceObj) {
+      newObj[key] = sourceObj[key];
+    }
+  });
+  return newObj;
+};
+var findDifference = function findDifference(obj1, obj2) {
+  // Check if obj1 or obj2 is null or undefined and return an empty object if so
+  if (!obj1 || !obj2) {
+    return {};
+  }
+  var diffKeys = Object.keys(obj1).reduce(function (acc, key) {
+    if (!(key in obj2) || obj1[key] !== obj2[key]) {
+      acc.push(key);
+    }
+    return acc;
+  }, []);
+  Object.keys(obj2).forEach(function (key) {
+    if (!(key in obj1) || obj1[key] !== obj2[key]) {
+      if (!diffKeys.includes(key)) {
+        diffKeys.push(key);
+      }
+    }
+  });
+  var newObj = generateObj(diffKeys, obj2);
+  return newObj;
+};
+var filterObject = function filterObject(obj, keysToRemove) {
+  var filteredObj = Object.keys(obj).reduce(function (acc, key) {
+    if (!keysToRemove.includes(key)) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {});
+  return filteredObj;
+};
+var isObjectEmpty = function isObjectEmpty(objectName) {
+  return Object.keys(objectName).length === 0;
+};
+var compareArrays = function compareArrays(arr, newArr) {
+  var required_output = [];
+  newArr.forEach(function (newObj) {
+    arr.forEach(function (oldObj) {
+      if (!newObj.hasOwnProperty('id')) {
+        required_output.push(newObj);
+      } else {
+        var newObjFiltered = {};
+        if (newObj.id === oldObj.id) {
+          Object.keys(newObj).forEach(function (key) {
+            if (key !== 'id' && oldObj.hasOwnProperty(key) && newObj[key] !== oldObj[key]) {
+              //@ts-ignore
+              newObjFiltered[key] = newObj[key];
+            }
+          });
+          var isEmpty = isObjectEmpty(newObjFiltered);
+          if (!isEmpty) {
+            var clone = _extends({}, newObjFiltered, {
+              id: newObj.id
+            });
+            required_output.push(clone);
+          }
+          // const newObjFiltered = { id: newObj.id };
+        }
+      }
+    });
+  });
+  return required_output;
+};
+var compareOrderDetailsStates = function compareOrderDetailsStates(oldData, newData) {
+  var oldOrderRecipient = oldData.order_recipient,
+    oldOrderRoutes = oldData.order_routes,
+    oldOrderServicesDetail = oldData.order_services_detail,
+    oldOrderServices = oldData.order_services,
+    oldRequiredData = _objectWithoutPropertiesLoose(oldData, _excluded$1);
+  var newOrderRecipient = newData.order_recipient,
+    newOrderRoutes = newData.order_routes,
+    newOrderServicesDetail = newData.order_services_detail,
+    newOrderServices = newData.order_services,
+    newRequiredData = _objectWithoutPropertiesLoose(newData, _excluded2);
+  var payload = findDifference(oldRequiredData, newRequiredData);
+  var payloadWithId = _extends({}, payload, {
+    id: oldData.id
+  });
+  var payloadOrderRecipient = findDifference(oldOrderRecipient, newOrderRecipient);
+  var payloadOrderRoutes = findDifference(oldOrderRoutes, newOrderRoutes);
+  var payloadOrderServicesDetail = findDifference(oldOrderServicesDetail, newOrderServicesDetail);
+  // need to remove id and new_id from new order_services
+  var filteredNewOrderServices = newOrderServices == null ? void 0 : newOrderServices.map(function (item) {
+    if (item.new_id) {
+      var newItem = _objectWithoutPropertiesLoose(item, _excluded3);
+      return newItem;
+    } else {
+      return item;
+    }
+  });
+  var newOrderServicesWithoutId = filteredNewOrderServices.filter(function (service) {
+    return !service.id;
+  });
+  var newOrderServicesWithId = filteredNewOrderServices.filter(function (service) {
+    return service.id;
+  });
+  var payloadOrderServices = compareArrays(oldOrderServices, newOrderServicesWithId);
+  var finalPayloadOrderServices = [].concat(payloadOrderServices, newOrderServicesWithoutId);
+  var finalPayload = _extends({}, payloadWithId, !isObjectEmpty(payloadOrderRecipient) && {
+    order_recipient: payloadOrderRecipient
+  }, !isObjectEmpty(payloadOrderRoutes) && {
+    order_routes: payloadOrderRoutes
+  }, !isObjectEmpty(payloadOrderServicesDetail) && {
+    order_services_detail: payloadOrderServicesDetail
+  }, finalPayloadOrderServices.length > 0 && {
+    order_services: finalPayloadOrderServices
+  });
+  return finalPayload;
+};
 
 var _templateObject$5, _templateObject2$4;
 function Latitude() {
@@ -1437,17 +1623,10 @@ function Droptime() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0],
     setOrderDetails = _useOrderDetails[1];
-  var orderRoutes = orderDetails == null ? void 0 : orderDetails.order_routes;
   var onChange = function onChange(e) {
-    var val = parseFloat(e.target.value);
-    var updatedOrderRoutes = _extends({}, orderRoutes === null ? {
-      drop_time: val
-    } : _extends({}, orderRoutes, {
-      drop_time: val
-    }));
     setOrderDetails(function (prev) {
       return _extends({}, prev, {
-        order_routes: updatedOrderRoutes
+        drop_time: e.target.value
       });
     });
   };
@@ -1459,11 +1638,11 @@ function Droptime() {
     type: "number",
     placeholder: "0",
     onKeyDown: handleKeyDown,
-    value: orderRoutes == null ? void 0 : orderRoutes.drop_time,
+    value: (orderDetails == null ? void 0 : orderDetails.drop_time) || '',
     onChange: onChange
   }));
 }
-var CustomInput$6 = /*#__PURE__*/styled__default(dmsComponentLibrary.Input)(_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 CustomInput$6 = /*#__PURE__*/styled__default(dmsComponentLibrary.Input)(_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 Container$f = /*#__PURE__*/styled__default.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 var _templateObject$k;
@@ -1620,6 +1799,16 @@ var vehicleTypeOptions = [{
 
 var _templateObject$o;
 function VehicleTypeDropdown() {
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0],
+    setOrderDetails = _useOrderDetails[1];
+  var onChange = function onChange(e) {
+    setOrderDetails(function (prev) {
+      return _extends({}, prev, {
+        vehicle_type: e.label
+      });
+    });
+  };
   return React__default.createElement(FormContainer$1, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Vehicle Type",
     htmlFor: "vehicleType"
@@ -1628,16 +1817,10 @@ function VehicleTypeDropdown() {
     options: vehicleTypeOptions,
     inputId: "vehicleType",
     openMenuOnFocus: true,
-    isDisabled: true,
-    value: vehicleTypeOptions[1],
-    styles: _extends({}, dmsComponentLibrary.dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    value: vehicleTypeOptions == null ? void 0 : vehicleTypeOptions.filter(function (x) {
+      return x.label === (orderDetails == null ? void 0 : orderDetails.vehicle_type);
+    }),
+    onChange: onChange
   }));
 }
 var FormContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1680,24 +1863,17 @@ function DeliveryInstructions() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0],
     setOrderDetails = _useOrderDetails[1];
-  var orderRoutes = orderDetails == null ? void 0 : orderDetails.order_routes;
   var onChange = function onChange(e) {
-    var val = e.target.value;
-    var updatedOrderRoutes = _extends({}, orderRoutes === null ? {
-      delivery_instructions: val
-    } : _extends({}, orderRoutes, {
-      delivery_instructions: val
-    }));
     setOrderDetails(function (prev) {
       return _extends({}, prev, {
-        order_routes: updatedOrderRoutes
+        delivery_instructions: e.target.value
       });
     });
   };
   return React__default.createElement(Container$j, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Delivery Instructions"
   }), React__default.createElement(CustomTextArea$1, {
-    value: (orderRoutes == null ? void 0 : orderRoutes.delivery_instructions) || '',
+    value: (orderDetails == null ? void 0 : orderDetails.delivery_instructions) || '',
     placeholder: "add delivery instructions",
     onChange: onChange
   }));
@@ -1738,6 +1914,15 @@ var FormInputs$2 = /*#__PURE__*/styled__default.div(_templateObject$t || (_templ
 var CustomFormSection$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.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 convertTo12HourFormat(time24) {
+  var _time24$split, _minutes$toString;
+  var _time24$split$map = time24 == null || (_time24$split = time24.split(':')) == null ? void 0 : _time24$split.map(Number),
+    hours = _time24$split$map[0],
+    minutes = _time24$split$map[1];
+  var period = hours >= 12 ? 'PM' : 'AM';
+  var hours12 = hours % 12 || 12; // Convert to 12-hour format
+  return hours12 + ":" + (minutes == null || (_minutes$toString = minutes.toString()) == null ? void 0 : _minutes$toString.padStart(2, '0')) + " " + period;
+}
 function TimedServiceDropdown() {
   var _orderData$order_serv, _orderStaticData$orde;
   var _useOrderStaticData = useOrderStaticData(),
@@ -1747,9 +1932,13 @@ function TimedServiceDropdown() {
     setOrderData = _useOrderDetails[1];
   var timesServiceId = orderData == null || (_orderData$order_serv = orderData.order_services_detail) == null ? void 0 : _orderData$order_serv.timed_service_id;
   var timedServicesOptions = orderStaticData == null || (_orderStaticData$orde = orderStaticData.order_timed_services) == null ? void 0 : _orderStaticData$orde.map(function (option) {
+    var _option$type;
+    var startTime = convertTo12HourFormat(option == null ? void 0 : option.start_time);
+    var endTime = convertTo12HourFormat(option == null ? void 0 : option.end_time);
+    var label = capitalize(option == null || (_option$type = option.type) == null ? void 0 : _option$type.replaceAll('_', ' ')) + " (" + startTime + " - " + endTime + ")";
     return {
-      label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option.id
+      label: label,
+      value: option == null ? void 0 : option.id
     };
   });
   var onChange = function onChange(event) {
@@ -1771,15 +1960,7 @@ function TimedServiceDropdown() {
       return f.value === timesServiceId;
     }),
     inputId: "timedServiceDropdown",
-    onChange: onChange,
-    styles: _extends({}, dmsComponentLibrary.dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$l = /*#__PURE__*/styled__default.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1816,15 +1997,7 @@ function ServiceTypeDropdown() {
     }),
     inputId: "serviceTypeDropdown",
     openMenuOnFocus: true,
-    onChange: onChange,
-    styles: _extends({}, dmsComponentLibrary.dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$m = /*#__PURE__*/styled__default.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1864,15 +2037,7 @@ function DeliveryPointDropdown() {
       return f.value === deliveryPointId;
     }),
     openMenuOnFocus: true,
-    onChange: onChange,
-    styles: _extends({}, dmsComponentLibrary.dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$n = /*#__PURE__*/styled__default.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1913,7 +2078,7 @@ var Container$o = /*#__PURE__*/styled__default.div(_templateObject$x || (_templa
 
 var _templateObject$y;
 function AssemblyType() {
-  var _orderStaticData$orde, _orderStaticData$orde2;
+  var _orderStaticData$orde, _orderStaticData$orde2, _orderStaticData$orde3;
   var _useOrderDetails = useOrderDetails(),
     orderData = _useOrderDetails[0],
     setOrderData = _useOrderDetails[1];
@@ -1925,37 +2090,78 @@ function AssemblyType() {
     var _x$type;
     return (x == null || (_x$type = x.type) == null ? void 0 : _x$type.toLowerCase()) === 'assemble';
   });
+  var disassembleOrderService = orderStaticData == null || (_orderStaticData$orde2 = orderStaticData.order_service_list) == null ? void 0 : _orderStaticData$orde2.find(function (x) {
+    var _x$type2;
+    return (x == null || (_x$type2 = x.type) == null ? void 0 : _x$type2.toLowerCase()) === 'disassemble';
+  });
   var assemblyTypeService = cloneServices == null ? void 0 : cloneServices.find(function (x) {
     return (x == null ? void 0 : x.order_service_list_id) === (assembleOrderService == null ? void 0 : assembleOrderService.id);
   });
-  var assemblyTypeId = assemblyTypeService == null ? void 0 : assemblyTypeService.service_category_id;
-  var assemblyTypeOptions = orderStaticData == null || (_orderStaticData$orde2 = orderStaticData.order_service_list_category) == null ? void 0 : _orderStaticData$orde2.map(function (option) {
+  var disassemblyTypeService = cloneServices == null ? void 0 : cloneServices.find(function (x) {
+    return (x == null ? void 0 : x.order_service_list_id) === (disassembleOrderService == null ? void 0 : disassembleOrderService.id);
+  });
+  var assemblyTypeId = (assemblyTypeService == null ? void 0 : assemblyTypeService.service_category_id) || (disassemblyTypeService == null ? void 0 : disassemblyTypeService.service_category_id);
+  var assemblyTypeOptions = orderStaticData == null || (_orderStaticData$orde3 = orderStaticData.order_service_list_category) == null ? void 0 : _orderStaticData$orde3.map(function (option) {
     return {
       label: capitalize(option.type.replaceAll('_', ' ')),
       value: option.id.toString()
     };
   });
   var radioGroupHandler = function radioGroupHandler(event) {
-    var updatedAssemblyTypeService = _extends({}, assemblyTypeService, {
-      service_category_id: +event.target.value
-    });
-    var updatedOrderServices = cloneServices == null ? void 0 : cloneServices.filter(function (s) {
-      return (s == null ? void 0 : s.order_service_list_id) !== (assembleOrderService == null ? void 0 : assembleOrderService.id);
-    });
-    updatedOrderServices.push(updatedAssemblyTypeService);
+    var updatedAssemblyTypeService = {};
+    var updatedDisassemblyTypeService = {};
+    var updatedOrderServices = [];
+    if ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === false && (disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true && disassemblyTypeService !== undefined && disassemblyTypeService !== null || (disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === false && (assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true && assemblyTypeService !== undefined && assemblyTypeService !== null || (assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === false && (disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === false) {
+      updatedAssemblyTypeService = _extends({}, assemblyTypeService, {
+        service_category_id: +event.target.value
+      });
+      updatedDisassemblyTypeService = _extends({}, disassemblyTypeService, {
+        service_category_id: +event.target.value
+      });
+      updatedOrderServices = cloneServices == null ? void 0 : cloneServices.filter(function (s) {
+        return (s == null ? void 0 : s.order_service_list_id) !== (assembleOrderService == null ? void 0 : assembleOrderService.id) && (s == null ? void 0 : s.order_service_list_id) !== (disassembleOrderService == null ? void 0 : disassembleOrderService.id);
+      });
+      updatedOrderServices.push(updatedAssemblyTypeService);
+      updatedOrderServices.push(updatedDisassemblyTypeService);
+    } else if ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === false && ((disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true || disassemblyTypeService === undefined || disassemblyTypeService === null)) {
+      updatedAssemblyTypeService = _extends({}, assemblyTypeService, {
+        service_category_id: +event.target.value
+      });
+      updatedOrderServices = cloneServices == null ? void 0 : cloneServices.filter(function (s) {
+        return (s == null ? void 0 : s.order_service_list_id) !== (assembleOrderService == null ? void 0 : assembleOrderService.id);
+      });
+      updatedOrderServices.push(updatedAssemblyTypeService);
+    } else {
+      updatedDisassemblyTypeService = _extends({}, disassemblyTypeService, {
+        service_category_id: +event.target.value
+      });
+      updatedOrderServices = cloneServices == null ? void 0 : cloneServices.filter(function (s) {
+        return (s == null ? void 0 : s.order_service_list_id) !== (disassembleOrderService == null ? void 0 : disassembleOrderService.id);
+      });
+      updatedOrderServices.push(updatedDisassemblyTypeService);
+    }
     var newData = _extends({}, orderData, {
       order_services: updatedOrderServices
     });
     setOrderData(newData);
   };
+  var isServiceDisable = function isServiceDisable() {
+    if ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true && ((disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true || disassemblyTypeService === undefined || disassemblyTypeService === null) || (disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true && ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true || assemblyTypeService === undefined || assemblyTypeService === null) || assemblyTypeService === undefined && disassemblyTypeService === undefined || assemblyTypeService === null && disassemblyTypeService === null) {
+      return true;
+    } else {
+      return false;
+    }
+  };
   return React__default.createElement(Container$p, {
-    "$isDisable": (assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true ? true : false
+    "$isDisable": isServiceDisable()
   }, React__default.createElement(dmsComponentLibrary.RadioButtonGroup, {
     selectedValue: (assemblyTypeId == null ? void 0 : assemblyTypeId.toString()) || '',
     heading: "Assembly Type",
     options: assemblyTypeOptions || [],
     onChange: radioGroupHandler,
-    required: false
+    required: false,
+    //@ts-ignore
+    isDisabled: isServiceDisable()
   }));
 }
 var Container$p = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  pointer-events: ", ";\n  /* temporary change will add this in library */\n  > fieldset {\n    > div {\n      > div {\n        > label {\n          text-transform: capitalize;\n        }\n      }\n    }\n  }\n"])), function (props) {
@@ -2016,19 +2222,34 @@ function OrderServices() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0],
     setOrderDetails = _useOrderDetails[1];
+  var _usePrevOrderDetails = usePrevOrderDetails(),
+    prevOrderDetails = _usePrevOrderDetails[0];
   var orderServices = orderDetails == null ? void 0 : orderDetails.order_services;
+  var prevOrderServices = prevOrderDetails == null ? void 0 : prevOrderDetails.order_services;
   var orderServicesOptions = orderStaticData == null ? void 0 : orderStaticData.order_service_list;
   var toggleServices = function toggleServices(id) {
+    var _orderStaticData$orde, _orderStaticData$orde2;
     var clone = [].concat(orderServices);
     var selectedService = clone == null ? void 0 : clone.find(function (s) {
       return (s == null ? void 0 : s.order_service_list_id) === id;
     });
+    var assembleOrderService = orderStaticData == null || (_orderStaticData$orde = orderStaticData.order_service_list) == null ? void 0 : _orderStaticData$orde.find(function (x) {
+      var _x$type;
+      return (x == null || (_x$type = x.type) == null ? void 0 : _x$type.toLowerCase()) === 'assemble';
+    });
+    var disassembleOrderService = orderStaticData == null || (_orderStaticData$orde2 = orderStaticData.order_service_list) == null ? void 0 : _orderStaticData$orde2.find(function (x) {
+      var _x$type2;
+      return (x == null || (_x$type2 = x.type) == null ? void 0 : _x$type2.toLowerCase()) === 'disassemble';
+    });
+    var assemblyTypeService = clone == null ? void 0 : clone.find(function (x) {
+      return (x == null ? void 0 : x.order_service_list_id) === (assembleOrderService == null ? void 0 : assembleOrderService.id);
+    });
+    var disassemblyTypeService = clone == null ? void 0 : clone.find(function (x) {
+      return (x == null ? void 0 : x.order_service_list_id) === (disassembleOrderService == null ? void 0 : disassembleOrderService.id);
+    });
     if (selectedService !== undefined) {
-      //TO DO -> special case for assemble service but need discussion before proceeding anything
-      // const assembleOrderService = orderStaticData?.order_service_list?.find(
-      //   (x: any) => x?.type?.toLowerCase() === 'assemble'
-      // );
-      // const isAssembleService = assembleOrderService?.id === id;
+      var isAssembleService = (assembleOrderService == null ? void 0 : assembleOrderService.id) === (selectedService == null ? void 0 : selectedService.order_service_list_id);
+      var isDisassembleService = (disassembleOrderService == null ? void 0 : disassembleOrderService.id) === (selectedService == null ? void 0 : selectedService.order_service_list_id);
       if (selectedService.new_id) {
         var updatedOrderServices = clone.filter(function (service) {
           return service.id !== selectedService.id;
@@ -2038,33 +2259,96 @@ function OrderServices() {
         });
         setOrderDetails(newData);
       } else {
+        var _updatedSelectedServi, _updatedSelectedServi2;
         var updatedSelectedService = _extends({}, selectedService, {
           is_deleted: !selectedService.is_deleted
         });
-        // if(isAssembleService && updatedSelectedService.is_deleted === true) {
-        // TO DO -> handle later
-        // }
-        var _updatedOrderServices = clone.filter(function (service) {
+        var _updatedOrderServices = [];
+        var newUpdatedOrderServices = [];
+        _updatedOrderServices = clone.filter(function (service) {
           return service.id !== selectedService.id;
         });
         _updatedOrderServices.push(updatedSelectedService);
+        if (isAssembleService && ((_updatedSelectedServi = updatedSelectedService) == null ? void 0 : _updatedSelectedServi.is_deleted) === true && ((disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true || disassemblyTypeService === undefined || disassemblyTypeService === null) || isDisassembleService && ((_updatedSelectedServi2 = updatedSelectedService) == null ? void 0 : _updatedSelectedServi2.is_deleted) === true && ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true || assemblyTypeService === undefined || assemblyTypeService === null)) {
+          var prevSelectedService = prevOrderServices == null ? void 0 : prevOrderServices.find(function (s) {
+            return (s == null ? void 0 : s.order_service_list_id) === id;
+          });
+          updatedSelectedService = _extends({}, selectedService, {
+            is_deleted: true,
+            service_category_id: prevSelectedService == null ? void 0 : prevSelectedService.service_category_id
+          });
+          _updatedOrderServices = clone.filter(function (service) {
+            return service.id !== selectedService.id;
+          });
+          _updatedOrderServices.push(updatedSelectedService);
+          // new cases
+          if (isAssembleService && (disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === true && disassemblyTypeService !== undefined && disassemblyTypeService !== null) {
+            var _updatedOrderServices2, _newUpdatedOrderServi;
+            var newUpdatedSelectedService = _extends({}, disassemblyTypeService, {
+              is_deleted: true,
+              service_category_id: prevSelectedService == null ? void 0 : prevSelectedService.service_category_id
+            });
+            newUpdatedOrderServices = (_updatedOrderServices2 = _updatedOrderServices) == null ? void 0 : _updatedOrderServices2.filter(function (service) {
+              return service.id !== disassemblyTypeService.id;
+            });
+            (_newUpdatedOrderServi = newUpdatedOrderServices) == null || _newUpdatedOrderServi.push(newUpdatedSelectedService);
+          }
+          // new cases
+          if (isDisassembleService && (assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true && assemblyTypeService !== undefined && assemblyTypeService !== null) {
+            var _updatedOrderServices3, _newUpdatedOrderServi2;
+            var _newUpdatedSelectedService = _extends({}, assemblyTypeService, {
+              is_deleted: true,
+              service_category_id: prevSelectedService == null ? void 0 : prevSelectedService.service_category_id
+            });
+            newUpdatedOrderServices = (_updatedOrderServices3 = _updatedOrderServices) == null ? void 0 : _updatedOrderServices3.filter(function (service) {
+              return service.id !== assemblyTypeService.id;
+            });
+            (_newUpdatedOrderServi2 = newUpdatedOrderServices) == null || _newUpdatedOrderServi2.push(_newUpdatedSelectedService);
+          }
+        }
         var _newData = _extends({}, orderDetails, {
-          order_services: _updatedOrderServices
+          order_services: newUpdatedOrderServices.length > 0 ? newUpdatedOrderServices : _updatedOrderServices
         });
         setOrderDetails(_newData);
       }
     } else {
       // service not exist case
       // if not matched then treat it as an new service
-      var largestId = Math.max.apply(Math, clone == null ? void 0 : clone.map(function (o) {
-        return +(o == null ? void 0 : o.order_service_list_id);
-      }));
-      var service = {
+      var largestId;
+      if (clone === undefined || clone.length === 0) {
+        largestId = 0;
+      } else {
+        largestId = Math.max.apply(Math, clone == null ? void 0 : clone.map(function (o) {
+          return +(o == null ? void 0 : o.order_service_list_id);
+        }));
+      }
+      var service = {};
+      // Normal service addition
+      service = {
         is_deleted: false,
         order_service_list_id: id,
         new_id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
         id: largestId !== undefined && largestId !== null ? largestId + 1 : 1
       };
+      // special case if assembly already exist and we are adding disassemble service and vice-versa
+      if ((assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === false && (disassembleOrderService == null ? void 0 : disassembleOrderService.id) === id) {
+        service = {
+          is_deleted: false,
+          order_service_list_id: id,
+          new_id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          service_category_id: assemblyTypeService == null ? void 0 : assemblyTypeService.service_category_id
+        };
+      }
+      if ((disassemblyTypeService == null ? void 0 : disassemblyTypeService.is_deleted) === false && (assembleOrderService == null ? void 0 : assembleOrderService.id) === id) {
+        service = {
+          is_deleted: false,
+          order_service_list_id: id,
+          new_id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          service_category_id: disassemblyTypeService == null ? void 0 : disassemblyTypeService.service_category_id
+        };
+      }
       clone.push(service);
       var _newData2 = _extends({}, orderDetails, {
         order_services: clone
@@ -2132,80 +2416,164 @@ var CreatedBy = /*#__PURE__*/styled__default.span(_templateObject2$p || (_templa
 // `;
 var Container$s = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
+function useUpdateOrder() {
+  var controller;
+  var ssoToken = getCookie('id_token');
+  var update = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(data) {
+      var endpoint, signal, requestOptions, response, json;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            endpoint = dmsComponentLibrary.getBaseEndpoint() + "/orders/update/";
+            if (controller) {
+              controller.abort();
+            }
+            // Create new AbortController
+            controller = new AbortController();
+            signal = controller.signal; // setLoading(true); // Set loading to true
+            _context.prev = 4;
+            requestOptions = {
+              headers: {
+                'Content-Type': 'application/json',
+                Authorization: "Bearer " + ssoToken
+              },
+              method: 'PUT',
+              body: JSON.stringify(data),
+              signal: signal
+            };
+            _context.next = 8;
+            return fetch(endpoint, requestOptions);
+          case 8:
+            response = _context.sent;
+            if (response.ok) {
+              _context.next = 11;
+              break;
+            }
+            throw new Error('response is not ok');
+          case 11:
+            _context.next = 13;
+            return response.json();
+          case 13:
+            json = _context.sent;
+            // alert('Order has been updated');
+            antd.notification.success({
+              message: 'Success',
+              description: 'Order has been updated.'
+            });
+            return _context.abrupt("return", json);
+          case 18:
+            _context.prev = 18;
+            _context.t0 = _context["catch"](4);
+            //   setLoading(false);
+            // console.log(err, 'error');
+            antd.notification.error({
+              message: 'Error',
+              description: "" + _context.t0 || 'An error has occurred. Please try again later.'
+            });
+          case 21:
+            _context.prev = 21;
+            return _context.finish(21);
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 18, 21, 23]]);
+    }));
+    return function update(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  return update;
+}
+
 var _templateObject$D;
-// import {
-//   useAtom,
-//   useOrderDetails,
-//   usePrevOrderDetails,
-//   errorAtom,
-// } from '../../../store';
-// import useUpdateOrder from '../../../hooks/useUpdateOrder';
-// import { compareOrderDetailsStates, filterObject } from '../../../utils';
-// import { OrderServiceType } from '../../../types';
 function OrderDetailsFooter() {
-  // const [orderDetails, setOrderDetails] = useOrderDetails();
-  // const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
-  // const updateOrder = useUpdateOrder();
-  // const [errorState] = useAtom(errorAtom);
-  // const errorFound = () => {
-  //   const isError =
-  //     errorState.w3wError.length > 0 || errorState.emailError.length > 0;
-  //   return isError;
-  // };
-  // const isDifferent = () => {
-  //   const keysToRemovefromOrders = [
-  //     'order_locked',
-  //     'order_communications',
-  //     'updated_at',
-  //     'updated_by',
-  //     'order_services',
-  //   ];
-  //   const filteredOrderDetails = filterObject(
-  //     orderDetails,
-  //     keysToRemovefromOrders
-  //   );
-  //   const filteredPrevOrderDetails = filterObject(
-  //     prevOrderDetails,
-  //     keysToRemovefromOrders
-  //   );
-  //   const newOrderServices =
-  //     orderDetails?.order_services?.length > 0 &&
-  //     orderDetails.order_services.sort(
-  //       (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-  //     );
-  //   const prevOrderServices =
-  //     prevOrderDetails?.order_services?.length > 0 &&
-  //     prevOrderDetails.order_services.sort(
-  //       (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-  //     );
-  //   const newOrderServicesSorted = JSON.stringify(newOrderServices);
-  //   const prevOrderServicesSorted = JSON.stringify(prevOrderServices);
-  //   const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
-  //   const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
-  //   const isSame =
-  //     orderDetailsSorted === prevOrderDetailsSorted &&
-  //     newOrderServicesSorted === prevOrderServicesSorted;
-  //   return !isSame;
-  // };
-  // const onSave = async () => {
-  //   const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
-  //   const response = await updateOrder([payload]);
-  //   if (response && response.data) {
-  //     setOrderDetails(response.data[0]);
-  //     setPrevOrderDetails(response.data[0]);
-  //   }
-  // };
-  var onSave = function onSave() {
-    console.log('save');
-  };
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0],
+    setOrderDetails = _useOrderDetails[1];
+  var _usePrevOrderDetails = usePrevOrderDetails(),
+    prevOrderDetails = _usePrevOrderDetails[0],
+    setPrevOrderDetails = _usePrevOrderDetails[1];
+  var _useCustomerInfo = useCustomerInfo(),
+    setCustomerInfo = _useCustomerInfo[1];
+  var updateOrder = useUpdateOrder();
+  var _useAtom = jotai.useAtom(errorAtom),
+    errorState = _useAtom[0];
+  var _useLogsCallAPi = useLogsCallAPi(),
+    setLogsCallAPi = _useLogsCallAPi[1];
+  var _useApiCalling = useApiCalling(),
+    setCallApi = _useApiCalling[1]; //single detail
+  var errorFound = function errorFound() {
+    var isError = errorState.w3wError.length > 0 || errorState.emailError.length > 0 || errorState.homeContactError.length > 0 || errorState.workCOntanctError.length > 0 || errorState.mobileError.length > 0 || errorState.postCodeError.length > 0;
+    return isError;
+  };
+  var isDifferent = function isDifferent() {
+    var _orderDetails$order_s, _prevOrderDetails$ord;
+    var keysToRemovefromOrders = ['order_locked', 'order_communications', 'updated_at', 'updated_by', 'order_services'];
+    var filteredOrderDetails = filterObject(orderDetails, keysToRemovefromOrders);
+    var filteredPrevOrderDetails = filterObject(prevOrderDetails, keysToRemovefromOrders);
+    var newOrderServices = (orderDetails == null || (_orderDetails$order_s = orderDetails.order_services) == null ? void 0 : _orderDetails$order_s.length) > 0 && orderDetails.order_services.sort(function (a, b) {
+      return a.id - b.id;
+    });
+    var prevOrderServices = (prevOrderDetails == null || (_prevOrderDetails$ord = prevOrderDetails.order_services) == null ? void 0 : _prevOrderDetails$ord.length) > 0 && prevOrderDetails.order_services.sort(function (a, b) {
+      return a.id - b.id;
+    });
+    var newOrderServicesSorted = JSON.stringify(newOrderServices);
+    var prevOrderServicesSorted = JSON.stringify(prevOrderServices);
+    var orderDetailsSorted = JSON.stringify(filteredOrderDetails);
+    var prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
+    var isSame = orderDetailsSorted === prevOrderDetailsSorted && newOrderServicesSorted === prevOrderServicesSorted;
+    return !isSame;
+  };
+  var onSave = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _response$data;
+      var payload, response, _response$data$, _response$data$2;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
+            _context.next = 3;
+            return updateOrder([payload]);
+          case 3:
+            response = _context.sent;
+            setLogsCallAPi(function (prev) {
+              return !prev;
+            });
+            setCallApi(false);
+            if (response && (response == null || (_response$data = response.data) == null ? void 0 : _response$data.length) > 0) {
+              setOrderDetails(response == null ? void 0 : response.data[0]);
+              setPrevOrderDetails(response == null ? void 0 : response.data[0]);
+              setCustomerInfo({
+                recipient_name: response == null || (_response$data$ = response.data[0]) == null || (_response$data$ = _response$data$.order_recipient) == null ? void 0 : _response$data$.recipient_name,
+                postcode: response == null || (_response$data$2 = response.data[0]) == null || (_response$data$2 = _response$data$2.order_recipient) == null ? void 0 : _response$data$2.postcode
+              });
+              setTimeout(function () {
+                setLogsCallAPi(true);
+                setCallApi(true);
+              }, 2000);
+            } else {
+              setLogsCallAPi(false);
+              setCallApi(false);
+              setOrderDetails(prevOrderDetails);
+            }
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onSave() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   return React__default.createElement(Container$t, null, React__default.createElement(AllowTracking, null), React__default.createElement(dmsComponentLibrary.Button, {
-    style: {
-      borderRadius: '20px'
-    },
-    onClick: onSave
+    onClick: onSave,
+    disabled: !isDifferent() || errorFound()
   }, "Save Details"));
 }
-var Container$t = /*#__PURE__*/styled__default.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 Container$t = /*#__PURE__*/styled__default.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"])));
 
 var _templateObject$E, _templateObject2$q, _templateObject3$d;
 function ExpandedContent() {
@@ -2270,7 +2638,6 @@ function AddNote() {
   var location = reactRouterDom.useLocation();
   var pathname = location.pathname;
   var orderIdLocaation = pathname.split('/')[1];
-  // const [note, setNote] = useState('');
   var _useCallAPi = useCallAPi(),
     CallAPi = _useCallAPi[1];
   var ssoToken = getCookie('id_token');
@@ -2303,7 +2670,8 @@ function AddNote() {
                 module_object_id: orderId || orderIdLocaation,
                 action: 'create',
                 description: noteText,
-                data_dump: '{}'
+                data_dump: '{}',
+                manual: 1
               }]
             };
             _context.prev = 6;
@@ -2328,7 +2696,7 @@ function AddNote() {
               });
               setNoteLoadingStore(true);
               setNoteText('');
-              setNoteLoadingStore(false);
+              // setNoteLoadingStore(false);
               CallAPi(true);
             } else if (error) {
               // Error: Set error notification
@@ -2407,33 +2775,49 @@ var NotesTableData = [{
   tableBody: []
 }];
 
-var _templateObject$G, _templateObject2$s;
+var _templateObject2$s, _templateObject3$f, _templateObject4$5, _templateObject12;
+var Table = /*#__PURE__*/styled__default.table(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0 12px;\n\n  thead tr {\n    border-radius: 40px;\n\n    th:first-child {\n      border-radius: 100px 0 0 100px;\n      border-left: 1px solid rgba(0, 0, 0, 0.08);\n    }\n    th:last-child {\n      border-radius: 0px 100px 100px 0;\n      border-right: 1px solid rgba(0, 0, 0, 0.08);\n    }\n  }\n\n  tbody tr {\n    border-radius: 40px;\n    &.completed td {\n      background: rgba(87, 219, 122, 0.2) !important;\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    &:nth-child(even) td {\n      background: #f6fbff;\n    }\n    td {\n      .red path {\n        fill: #e95252;\n      }\n      .green path {\n        fill: #29cc6a;\n      }\n    }\n  }\n"])));
+var Th = /*#__PURE__*/styled__default.th(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  padding: 6px 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 Td = /*#__PURE__*/styled__default.td(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n  padding: 6px 15px;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-right: none;\n  border-left: none;\n"])));
+var IconCover = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  span {\n    margin-top: 4px;\n  }\n"])));
+
+var _templateObject$G, _templateObject2$t, _templateObject3$g, _templateObject4$6, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var GenericAuditLogsTable = function GenericAuditLogsTable() {
   var tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
   var _usegetNotes = usegetNotes(),
     getNotes = _usegetNotes[0];
   var _UseNotesLoading = UseNotesLoading(),
     isLoading = _UseNotesLoading[0];
-  return React__default.createElement(ScrollableTableWrapper, null, React__default.createElement(AuditTableWrapper, null, React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, tableHeadData.map(function (column) {
-    return React__default.createElement("th", {
+  return React__default.createElement(ScrollableTableWrapper, null, React__default.createElement(AuditTableWrapper, null, React__default.createElement(StickyHeaderWrapper, null, React__default.createElement(StyledTable, null, React__default.createElement("thead", null, React__default.createElement("tr", null, tableHeadData.map(function (column) {
+    return React__default.createElement(Th, {
       key: column.key
-    }, column.label);
-  }))), React__default.createElement("tbody", null, isLoading ? React__default.createElement("tr", null, React__default.createElement("td", {
+    }, React__default.createElement(IconCover, null, column.label));
+  }))))), React__default.createElement(StyledTable, null, React__default.createElement("tbody", null, isLoading ? React__default.createElement("tr", null, React__default.createElement("td", {
     className: "noBoder",
     colSpan: tableHeadData == null ? void 0 : tableHeadData.length
   }, React__default.createElement(antd.Skeleton, null))) : getNotes && (getNotes == null ? void 0 : getNotes.length) > 0 ? getNotes == null ? void 0 : getNotes.map(function (note) {
-    return React__default.createElement("tr", {
+    return React__default.createElement(StyledTr, {
       key: note == null ? void 0 : note.id
-    }, React__default.createElement("td", null, React__default.createElement("div", {
-      className: "bold",
+    }, React__default.createElement(DateTd, null, React__default.createElement(CreatedBy$1, {
       title: note == null ? void 0 : note.created_by
-    }, note == null ? void 0 : note.created_by), React__default.createElement("div", null, dmsComponentLibrary.formatDateTime(note == null ? void 0 : note.created_at))), React__default.createElement("td", null, note == null ? void 0 : note.description));
-  }) : React__default.createElement("tr", null, React__default.createElement("td", {
+    }, note == null ? void 0 : note.created_by), React__default.createElement("div", null, dmsComponentLibrary.formatDateTime(note == null ? void 0 : note.created_at))), React__default.createElement(StyledTd, {
+      dangerouslySetInnerHTML: {
+        __html: note == null ? void 0 : note.description
+      }
+    }));
+  }) : React__default.createElement("tr", null, React__default.createElement(NoDataFound, {
     colSpan: tableHeadData == null ? void 0 : tableHeadData.length
   }, "No data found"))))));
 };
-var ScrollableTableWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var AuditTableWrapper = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 250px;\n  min-height: 200px;\n  /* overflow: auto; */\n\n  table {\n    border-spacing: 0;\n    width: 100%;\n    text-align: left;\n\n    thead {\n      th {\n        border-bottom: 1px solid rgba(58, 54, 48, 0.25);\n        background: #faf9f9;\n        padding: 14px 12px;\n        color: #3a3630;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 24px;\n      }\n    }\n    tbody {\n      td {\n        color: #667085;\n        font-family: Lato;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 16px;\n        padding: 10px;\n        .bold {\n          font-weight: 500;\n          font-size: 14px;\n        }\n      }\n    }\n  }\n"])));
+var AuditTableWrapper = /*#__PURE__*/styled__default.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 250px;\n  min-height: 200px;\n  /* overflow: auto; */\n\n  table {\n    border-spacing: 0;\n    width: 100%;\n    text-align: left;\n\n    thead {\n      th {\n        border-bottom: 1px solid rgba(58, 54, 48, 0.25);\n        background: #faf9f9;\n        padding: 14px 12px;\n        color: #3a3630;\n        font-size: 14px;\n        font-weight: 600;\n        line-height: 24px;\n      }\n    }\n    tbody {\n      td {\n        color: #667085;\n        font-family: Lato;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: 16px;\n        padding: 10px;\n        .bold {\n          font-weight: 500;\n          font-size: 14px;\n        }\n      }\n    }\n  }\n"])));
+var DateTd = /*#__PURE__*/styled__default(Td)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6d6d6d;\n"])));
+var NoDataFound = /*#__PURE__*/styled__default(Td)(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  padding: 16px;\n  font-size: 16px;\n  color: #999;\n"])));
+var StyledTable = /*#__PURE__*/styled__default(Table)(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  table-layout: fixed;\n  td.noBoder {\n    background: none !important;\n    border: none !important;\n    padding: 0;\n  }\n"])));
+var StyledTr = /*#__PURE__*/styled__default.tr(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:nth-child(even) {\n    background-color: #f3fbff;\n  }\n"])));
+var StyledTd = /*#__PURE__*/styled__default(Td)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 10px;\n"])));
+var CreatedBy$1 = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-weight: bold;\n"])));
+var ScrollableTableWrapper = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 250px;\n  min-height: 200px;\n  overflow: auto;\n"])));
+var StickyHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: #fff;\n"])));
 
 var _templateObject$H;
 // import CustomScrollBar from '../../../../common/scrollbar';
@@ -2442,7 +2826,7 @@ function AuditLogs() {
 }
 var Container$w = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 295px; /* Set height to limit container size */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
 
-var _templateObject$I, _templateObject2$t, _templateObject3$f;
+var _templateObject$I, _templateObject2$u, _templateObject3$h;
 function Notes() {
   var _usemoduleIds = usemoduleIds(),
     moduleIds = _usemoduleIds[0],
@@ -2458,8 +2842,8 @@ function Notes() {
     setNotes = _usegetNotes[1];
   var _useCallAPi = useCallAPi(),
     loderStatus = _useCallAPi[0];
-  // Declare `allIds` state to store the comma-separated IDs
-  // const [allIds, setAllIds] = useState<string | null>(null);
+  var _SeteauditLogToggle = SeteauditLogToggle(),
+    auditState = _SeteauditLogToggle[0];
   // Fetch module IDs
   var _useApiHook = dmsComponentLibrary.useApiHook({
       endpoint: 'audit_logs/modules/',
@@ -2483,52 +2867,46 @@ function Notes() {
           };
         });
       })) || [];
-      // console.log(modules, 'modulesmodules');
-      // const ids = modules?.map((module: any) => module.id).join(',');
-      // setAllIds(ids);
-      // console.log(ids, 'allIds');
       var orderNoteModule = modules == null ? void 0 : modules.find(function (module) {
         return (module == null ? void 0 : module.name) === 'ORDER-NOTE';
       });
       setModuleIds(orderNoteModule || modules[0] || null);
     }
   }, [apiLoading, fetchedData]);
-  // Fetch Notes Data when `allIds` is available
   var _useApiHook2 = dmsComponentLibrary.useApiHook({
-      // Use `allIds` in the endpoint if it's set
-      endpoint: "audit_logs/?module_id=" + (moduleIds == null ? void 0 : moduleIds.parentId) + "&module_object_id=" + (orderId || orderIdLocaation) + "\n    ",
+      endpoint: "audit_logs/?module_id=" + (moduleIds == null ? void 0 : moduleIds.parentId) + "&module_object_id=" + (orderId || orderIdLocaation),
       method: 'GET',
       performAction: false
     }),
     NotesData = _useApiHook2.data,
     NotesLoading = _useApiHook2.loading,
     setShouldPerformAction = _useApiHook2.setShouldPerformAction;
-  // &sub_module_ids=${allIds}
   React.useEffect(function () {
     setNoteLoadingStore(true);
     if (moduleIds) {
-      // Ensure `allIds` is set
-      setShouldPerformAction(true);
+      setShouldPerformAction(auditState);
     }
     if (!NotesLoading && NotesData != null && NotesData.data) {
-      var updatedData = NotesData == null ? void 0 : NotesData.data
-      // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
-      // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
-      .flat().filter(Boolean);
+      var updatedData = NotesData == null ? void 0 : NotesData.data.filter(function (item) {
+        return item['ORDER-NOTE'] || item['ORDER'];
+      }).map(function (item) {
+        return [item['ORDER-NOTE'], item['ORDER']];
+      }).flat().filter(Boolean);
       var combinedArray = updatedData.flat();
       combinedArray.sort(function (a, b) {
         return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
       });
       setNotes(combinedArray);
+      setNotes(combinedArray);
       setNoteLoadingStore(NotesLoading);
       loderStatus ? setShouldPerformAction(true) : setShouldPerformAction(false);
     }
-  }, [moduleIds, NotesLoading, loderStatus]); // Add `allIds` to dependencies
+  }, [moduleIds, NotesLoading, auditState]);
   return React__default.createElement(Container$x, null, React__default.createElement(CardHeader, null, "NOTES"), React__default.createElement(CustomizedFormSection, null, React__default.createElement(AddNote, null), React__default.createElement(AuditLogs, null)));
 }
 var Container$x = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n"])));
-var CardHeader = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  text-transform: uppercase;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n"])));
-var CustomizedFormSection = /*#__PURE__*/styled__default.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  padding: 10px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n"])));
+var CardHeader = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  text-transform: uppercase;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n"])));
+var CustomizedFormSection = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  padding: 10px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n"])));
 
 var _templateObject$J;
 function CollapsedContent() {
@@ -2552,7 +2930,7 @@ function ChevronUp(props) {
   }));
 }
 
-var _templateObject$K, _templateObject2$u, _templateObject3$g, _templateObject4$5, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject$K, _templateObject2$v, _templateObject3$i, _templateObject4$7, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
 function CollapsableForm(props) {
   var _useState = React.useState(true),
     isExpanded = _useState[0],
@@ -2572,20 +2950,20 @@ function CollapsableForm(props) {
     isExpanded: isExpanded
   }, React__default.createElement(ChevronUp, null))))), isExpanded && React__default.createElement(CustomizedFormSection$1, null, React__default.createElement(ExpandedContent$1, null, props.children)));
 }
-var CustomizedFormSection$1 = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  padding: 15px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n"])));
-var CardHeader$1 = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n"])));
-var Text$2 = /*#__PURE__*/styled__default.span(_templateObject3$g || (_templateObject3$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: #3a3630;\n  font-weight: 500;\n  font-family: 'lato', sans-serif;\n  cursor: pointer;\n"])));
-var Container$y = /*#__PURE__*/styled__default.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n"])));
-var MainContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0;\n"])));
-var IconContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 20px;\n  height: 20px;\n  padding: 0px;\n  border-radius: 3px;\n  background: #ffffff;\n  box-shadow: 0px 1px 2px 0px #1018280d;\n  &:hover {\n    background: rgba(58, 54, 57, 0.05);\n  }\n  svg {\n    transform: rotate(", ");\n  }\n"])), function (props) {
+var CustomizedFormSection$1 = /*#__PURE__*/styled__default.div(_templateObject$K || (_templateObject$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  background: #ffffff;\n  padding: 12px;\n  flex-direction: column;\n  gap: 14px;\n  border: 1px solid #f0f2f2;\n  border-bottom-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n"])));
+var CardHeader$1 = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid #f0f2f2;\n  background-color: #f8fafc;\n  color: #3a3630;\n  font-size: 16px;\n  padding: 10px;\n  border-bottom: 1px solid #ddd;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  font-family: 'Roboto', sans-serif;\n  font-weight: 600;\n"])));
+var Text$2 = /*#__PURE__*/styled__default.span(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: #3a3630;\n  font-weight: 500;\n  font-family: 'lato', sans-serif;\n  cursor: pointer;\n"])));
+var Container$y = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n"])));
+var MainContainer$4 = /*#__PURE__*/styled__default.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0;\n"])));
+var IconContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 25px;\n  height: 25px;\n  padding: 2px;\n  border-radius: 3px;\n  background: #ffffff;\n  box-shadow: 0px 1px 2px 0px #1018280d;\n  &:hover {\n    background: rgba(58, 54, 57, 0.05);\n  }\n  svg {\n    transform: rotate(", ");\n  }\n"])), function (props) {
   return props.isExpanded ? '360deg' : '180deg';
 });
-var ExpandedContent$1 = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var CollapsedContent$1 = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var ExpandedContent$1 = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var CollapsedContent$1 = /*#__PURE__*/styled__default.div(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
 
 var _templateObject$L;
 function Order() {
-  return React__default.createElement(Table, null, React__default.createElement(CollapsableForm, {
+  return React__default.createElement(Table$1, null, React__default.createElement(CollapsableForm, {
     collapsedContent: React__default.createElement(CollapsedContent, null)
   }, React__default.createElement(dmsComponentLibrary.Alert, {
     description: "",
@@ -2595,16 +2973,44 @@ function Order() {
     showOkButton: false
   })));
 }
-var Table = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Table$1 = /*#__PURE__*/styled__default.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+
+var _templateObject$M;
+// import styled from 'styled-components';
+function CollapsedContent$2() {
+  return React__default.createElement(Font$1, null, "TOOLBOX RESOURCES");
+}
+var Font$1 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n"])));
+
+var _templateObject$N;
+function Toolbox() {
+  var _orderToolbox$data, _orderToolbox$data$;
+  var _useOrderProductsTool = useOrderProductsToolbox(),
+    orderToolbox = _useOrderProductsTool[0];
+  var htmlContent = orderToolbox != null && orderToolbox.data && (orderToolbox == null || (_orderToolbox$data = orderToolbox.data) == null ? void 0 : _orderToolbox$data.length) > 0 ? orderToolbox == null || (_orderToolbox$data$ = orderToolbox.data[0]) == null ? void 0 : _orderToolbox$data$.html : '';
+  return React__default.createElement(StyledTable$1, null, React__default.createElement(CollapsableForm, {
+    collapsedContent: React__default.createElement(CollapsedContent$2, null)
+  }, React__default.createElement("div", {
+    style: {
+      overflow: 'auto'
+    }
+  }), React__default.createElement("div", {
+    className: "tableStyle",
+    dangerouslySetInnerHTML: {
+      __html: htmlContent
+    }
+  })));
+}
+var StyledTable$1 = /*#__PURE__*/styled__default.table(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  border: none;\n\n  .tableStyle {\n    border-spacing: 0;\n    width: 100%;\n    table {\n      border-spacing: 0;\n      border: none !important;\n      max-height: 400px !important;\n      min-height: 100px !important;\n      thead {\n        background: #f8f8f8 !important;\n        tr {\n          border-spacing: 0;\n          border-bottom: 1px solid rgb(215, 214, 213);\n          th {\n            padding: 10px;\n            font-family: Roboto, sans-serif;\n            font-size: 14px;\n            font-weight: 500;\n            line-height: 24px;\n            letter-spacing: 0px;\n            /* min-width: 130px; */\n            &:first-child {\n              border-radius: 10px 0px 0px 0px;\n            }\n            &:last-child {\n              border-radius: 0px 10px 0px 0px;\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: 10px 5px;\n            background: #fff;\n            border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n            border-right: none;\n            border-left: none;\n            word-wrap: break-word;\n            max-width: 200px;\n          }\n        }\n      }\n    }\n  }\n"])));
 
-var _templateObject$M;
+var _templateObject$O;
 // import styled from 'styled-components';
 function SystemCollapsedContent() {
-  return React__default.createElement(Font$1, null, "SYSTEM EVENT LOGS");
+  return React__default.createElement(Font$2, null, "SYSTEM EVENT LOGS");
 }
-var Font$1 = /*#__PURE__*/styled__default.div(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 150% */\n"])));
+var Font$2 = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px; /* 150% */\n"])));
 
-var _templateObject$N, _templateObject2$v, _templateObject3$h;
+var _templateObject$P, _templateObject2$w, _templateObject3$j;
 function CustomScrollBar(props) {
   var children = props.children,
     _props$thumbHeight = props.thumbHeight,
@@ -2622,11 +3028,11 @@ function CustomScrollBar(props) {
     }
   }, children);
 }
-var ThumbVertical = /*#__PURE__*/styled__default.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #586164;\n  border-radius: 66px;\n  width: 2px !important; // to overide styles\n  margin-top: 60px;\n"])));
-var View = /*#__PURE__*/styled__default.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
-var TrackHorizontal = /*#__PURE__*/styled__default.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var ThumbVertical = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #586164;\n  border-radius: 66px;\n  width: 2px !important; // to overide styles\n  margin-top: 60px;\n"])));
+var View = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
+var TrackHorizontal = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$O, _templateObject2$w, _templateObject3$i, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9;
+var _templateObject$Q, _templateObject2$x, _templateObject3$k, _templateObject4$8, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1;
 function DynamicTable(_ref) {
   var columns = _ref.columns,
     data = _ref.data;
@@ -2647,7 +3053,7 @@ function DynamicTable(_ref) {
   var smallColumns = ['types', 'sources', 'event', 'code', 'type', 'route', 'category', 'action'];
   var mediumColumns = ['date'];
   var largeColumns = ['reference', 'notes', 'details', 'datetime'];
-  return React__default.createElement(MainContainer$5, null, React__default.createElement(Container$z, null, React__default.createElement(TableWrapper, null, React__default.createElement(CustomScrollBar, null, React__default.createElement(Table$1, null, React__default.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
+  return React__default.createElement(MainContainer$5, null, React__default.createElement(Container$z, null, React__default.createElement(TableWrapper, null, React__default.createElement(CustomScrollBar, null, React__default.createElement(Table$2, null, React__default.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
     return React__default.createElement(TableRow, {
       key: headerGroup.id
     }, headerGroup.headers.map(function (header) {
@@ -2672,17 +3078,17 @@ function DynamicTable(_ref) {
 //   transform: rotate(180deg);
 //   cursor: pointer;
 // `;
-var Container$z = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 30vh;\n  pointer-events: initial;\n  @media (max-width: 1024px) {\n    height: 40vh;\n  }\n"])));
-var TableWrapper = /*#__PURE__*/styled__default.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n"])));
-var TableHeadData = /*#__PURE__*/styled__default.th(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 20px;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: 0px;\n"])));
-var TableData = /*#__PURE__*/styled__default.td(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0px;\n  padding: 20px;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])));
-var TableRow = /*#__PURE__*/styled__default.tr(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: 1px solid rgb(215, 214, 213);\n  font-weight: 300;\n"])));
-var TableBody = /*#__PURE__*/styled__default.tbody(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom-right-radius: 10px;\n  background: rgb(255, 255, 255);\n  height: 96%;\n  overflow: auto;\n  width: 100%;\n"])));
-var TableHead = /*#__PURE__*/styled__default.thead(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n  background: #f8f8f8;\n  white-space: nowrap;\n"])));
-var Table$1 = /*#__PURE__*/styled__default.table(_templateObject8$1 || (_templateObject8$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 50%;\n  background: rgb(255, 255, 255);\n  box-shadow: 0px 4px 30px 0px #2e2d740d;\n"])));
-var MainContainer$5 = /*#__PURE__*/styled__default.div(_templateObject9 || (_templateObject9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  // width: 40%;\n  .col {\n    flex: 2;\n    // padding: 0 0 0 10px;\n    word-break: break-all;\n    display: flex;\n    color: #3a3630;\n    align-items: center;\n    // width: 160px;\n  }\n\n  .col.sm {\n    flex: 1.5;\n    // width: 115px;\n  }\n  .col.md {\n    flex: 2.5;\n    // width: 175px;\n  }\n  .col.lg {\n    flex: 10;\n    // width: 240px;\n    // padding-right: 10px;\n  }\n"])));
-
-var _templateObject$P, _templateObject2$x;
+var Container$z = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 30vh;\n  pointer-events: initial;\n  @media (max-width: 1024px) {\n    height: 40vh;\n  }\n"])));
+var TableWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n  border-top-left-radius: 15px;\n  border-top-right-radius: 15px;\n"])));
+var TableHeadData = /*#__PURE__*/styled__default.th(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 20px;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 24px;\n  letter-spacing: 0px;\n"])));
+var TableData = /*#__PURE__*/styled__default.td(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0px;\n  padding: 13px;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  letter-spacing: 0px;\n"])));
+var TableRow = /*#__PURE__*/styled__default.tr(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  border-bottom: 1px solid rgb(215, 214, 213);\n  font-weight: 300;\n"])));
+var TableBody = /*#__PURE__*/styled__default.tbody(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom-right-radius: 10px;\n  background: rgb(255, 255, 255);\n  height: 96%;\n  overflow: auto;\n  width: 100%;\n"])));
+var TableHead = /*#__PURE__*/styled__default.thead(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0px;\n  z-index: 1;\n  background: #f8f8f8;\n  white-space: nowrap;\n"])));
+var Table$2 = /*#__PURE__*/styled__default.table(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 50%;\n  background: rgb(255, 255, 255);\n  box-shadow: 0px 4px 30px 0px #2e2d740d;\n"])));
+var MainContainer$5 = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  // width: 40%;\n  .col {\n    flex: 2;\n    // padding: 0 0 0 10px;\n    word-break: break-all;\n    display: flex;\n    color: #3a3630;\n    align-items: center;\n    // width: 160px;\n  }\n\n  .col.sm {\n    flex: 1.5;\n    // width: 115px;\n  }\n  .col.md {\n    flex: 2.5;\n    // width: 175px;\n  }\n  .col.lg {\n    flex: 10;\n    // width: 240px;\n    // padding-right: 10px;\n  }\n"])));
+
+var _templateObject$R, _templateObject2$y;
 function Event(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.event_information_id;
@@ -2697,8 +3103,8 @@ function Event(props) {
   };
   return React__default.createElement(RowContainer, null, React__default.createElement(Row, null, getDescription(data)));
 }
-var RowContainer = /*#__PURE__*/styled__default.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 //to change data into options
 var transformOption = function transformOption(option, key) {
@@ -2745,25 +3151,25 @@ var priorityData = [{
   color: '#E95252'
 }];
 
-var _templateObject$Q, _templateObject2$y;
+var _templateObject$S, _templateObject2$z;
 function Date$1(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.created_at;
   return React__default.createElement(RowContainer$1, null, React__default.createElement(Row$1, null, formatDate(data)));
 }
-var RowContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$1 = /*#__PURE__*/styled__default.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$1 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$R, _templateObject2$z;
+var _templateObject$T, _templateObject2$A;
 function Code(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.event_code;
   return React__default.createElement(RowContainer$2, null, React__default.createElement(Row$2, null, data));
 }
-var RowContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$2 = /*#__PURE__*/styled__default.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$2 = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$S, _templateObject2$A;
+var _templateObject$U, _templateObject2$B;
 function Note(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null || (_props$row = _props$row.original) == null ? void 0 : _props$row.event_notes;
@@ -2771,8 +3177,8 @@ function Note(props) {
     title: data
   }, React__default.createElement(Row$3, null, data));
 }
-var RowContainer$3 = /*#__PURE__*/styled__default.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  max-width: 200px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var Row$3 = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$3 = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  max-width: 200px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
+var Row$3 = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var tableColumns = [{
   header: 'Date',
@@ -2875,16 +3281,15 @@ function useGetEventNotes() {
   return perform;
 }
 
-var _templateObject$T;
+var _templateObject$V;
 function SystemLogs() {
   var _useOrderProductSyste = useOrderProductSystemLogs(),
     systemLogs = _useOrderProductSyste[0];
-  var _useOrderDetails = useOrderDetails(),
-    orderDetails = _useOrderDetails[0];
+  // const [orderDetails] = useOrderDetails();
   var systemLogsData = useGetEventNotes();
   var _useEventNotesData = useEventNotesData(),
     setNotesData = _useEventNotesData[1];
-  var gsitId = orderDetails == null ? void 0 : orderDetails.gsit_order_id;
+  // const gsitId = orderDetails?.gsit_order_id;
   var fetchReminderData = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var result;
@@ -2904,10 +3309,9 @@ function SystemLogs() {
           case 7:
             _context.prev = 7;
             _context.t0 = _context["catch"](0);
-            // console.error('Error fetching event notes:', error);
             antd.notification.error({
               message: 'Error',
-              description: "" + _context.t0 || 'An error has occurred. Please try again later.'
+              description: "" + _context.t0 || 'Error fetching event notes:'
             });
           case 10:
           case "end":
@@ -2920,18 +3324,16 @@ function SystemLogs() {
     };
   }();
   React.useEffect(function () {
-    if (gsitId) {
-      fetchReminderData();
-    }
-  }, [gsitId, setNotesData]);
-  return React__default.createElement(Table$2, null, React__default.createElement(CollapsableForm, {
+    fetchReminderData();
+  }, [setNotesData]);
+  return React__default.createElement(Table$3, null, React__default.createElement(CollapsableForm, {
     collapsedContent: React__default.createElement(SystemCollapsedContent, null)
   }, React__default.createElement(DynamicTable, {
     columns: tableColumns,
     data: systemLogs
   })));
 }
-var Table$2 = /*#__PURE__*/styled__default.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Table$3 = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 
 var StatusOptions = [{
   label: 'Released',
@@ -3088,19 +3490,10 @@ function ConfirmedIcon() {
   }))));
 }
 
-var _templateObject$U, _templateObject2$B, _templateObject3$j, _templateObject4$7;
-// import { useStatusDetails } from '../store';
+var _templateObject$W, _templateObject2$C, _templateObject3$l, _templateObject4$9;
 function Status() {
-  // const [orderStatus] = useStatusDetails();
-  var orderStatus = [{
-    released: true,
-    received: 'True',
-    routed: true,
-    scheduled: true,
-    confirmed: false,
-    delivered: true,
-    completed: false
-  }];
+  var _useStatusDetails = useStatusDetails(),
+    orderStatus = _useStatusDetails[0];
   return React__default.createElement(Container$A, null, React__default.createElement(BoxContainer, null, StatusOptions.map(function (option, index) {
     return React__default.createElement(React__default.Fragment, {
       key: index
@@ -3112,6 +3505,9 @@ var renderIcon = function renderIcon(value, orderStatus) {
   if (!status) {
     return null;
   }
+  if (!status) {
+    return null;
+  }
   switch (value) {
     case 'released':
     case 'scheduled':
@@ -3121,16 +3517,18 @@ var renderIcon = function renderIcon(value, orderStatus) {
     case 'received':
       if (status.received === 'True') {
         return React__default.createElement(SuccessIcon, null);
-      } else if (status.received === 'partially') {
+      } else if (status.received === 'Partial') {
         return React__default.createElement(RouteIcon, null);
       } else {
         return React__default.createElement(ConfirmedIcon, null);
       }
     case 'delivered':
       if (status.delivered && (status.completed === false || status.completed === null)) {
-        return React__default.createElement(DeliveredIcon, null);
-      } else if (status.delivered && status.completed) {
+        return React__default.createElement(DeliveredIcon, null); //grey
+      } else if (status.delivered === true && status.completed === true) {
         return React__default.createElement(SuccessIcon, null);
+      } else if (status.delivered === true && status.completed === false) {
+        return React__default.createElement(RouteIcon, null);
       } else {
         return React__default.createElement(ConfirmedIcon, null);
       }
@@ -3138,22 +3536,22 @@ var renderIcon = function renderIcon(value, orderStatus) {
       return null;
   }
 };
-var BoxContainer = /*#__PURE__*/styled__default.div(_templateObject$U || (_templateObject$U = /*#__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__default.div(_templateObject2$B || (_templateObject2$B = /*#__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__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 35px;\n"])));
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: flex;\n  align-items: center;\n"])));
+var BoxContainer = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__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__default.div(_templateObject2$C || (_templateObject2$C = /*#__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__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: flex;\n  align-items: center;\n"])));
 
-var _templateObject$V;
+var _templateObject$X;
 // import LockOrder from './LockOrder';
 function GeneralHeader() {
   return React__default.createElement(Section, null, React__default.createElement(Status, null));
 }
-var Section = /*#__PURE__*/styled__default.div(_templateObject$V || (_templateObject$V = /*#__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 = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__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, _templateObject21;
-var StyledTable = /*#__PURE__*/styled__default.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      .custom-check {\n        position: relative;\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          position: relative;\n        }\n        .statusCancelled {\n          color: #e95252;\n          /* background: rgba(233, 82, 82, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOnHold {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusSubContracted {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusAwaiting {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusCompleted {\n          color: #1f9254;\n          /* background: rgba(41, 204, 106, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOutstanding {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusUnknown {\n          color: #000;\n          /* background: #fff; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n        .statustext {\n          color: #1f9254;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: normal;\n        }\n        .downloadcontainer {\n          display: flex;\n          padding: 2px 12px;\n          align-items: center;\n\n          width: 28px;\n          height: 28px;\n          flex-direction: column;\n\n          border-radius: 14px;\n          border: 1px solid #e2e0db;\n          background: #fff;\n        }\n        .statuscontainer {\n          display: flex;\n          padding: 5px 30px 5px 30px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          flex: 1 0 0;\n          border-radius: 22px;\n          background: rgba(41, 204, 106, 0.15);\n        }\n        .awaiting {\n          display: flex;\n          min-width: 85px;\n          padding: 6px 10px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          border-radius: 22px;\n          background: rgba(233, 82, 82, 0.15);\n          color: #e95252;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-weight: 600;\n        }\n        ul > li > a {\n          text-decoration: none !important;\n          color: #0099ff;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
+var StyledTable$2 = /*#__PURE__*/styled__default.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      .custom-check {\n        position: relative;\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          position: relative;\n        }\n        .statusCancelled {\n          color: #e95252;\n          /* background: rgba(233, 82, 82, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOnHold {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusSubContracted {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusAwaiting {\n          color: #845adf;\n          /* background: rgba(132, 90, 223, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusCompleted {\n          color: #1f9254;\n          /* background: rgba(41, 204, 106, 0.15); */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusOutstanding {\n          color: #f4a503;\n          /* background: #fff1d6; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n\n        .statusUnknown {\n          color: #000;\n          /* background: #fff; */\n          padding: 4px 8px;\n          border-radius: 4px;\n        }\n        .statustext {\n          color: #1f9254;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: normal;\n        }\n        .downloadcontainer {\n          display: flex;\n          padding: 2px 12px;\n          align-items: center;\n\n          width: 28px;\n          height: 28px;\n          flex-direction: column;\n\n          border-radius: 14px;\n          border: 1px solid #e2e0db;\n          background: #fff;\n        }\n        .statuscontainer {\n          display: flex;\n          padding: 5px 30px 5px 30px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          flex: 1 0 0;\n          border-radius: 22px;\n          background: rgba(41, 204, 106, 0.15);\n        }\n        .awaiting {\n          display: flex;\n          min-width: 85px;\n          padding: 6px 10px;\n          justify-content: center;\n          align-items: center;\n          gap: 5px;\n          border-radius: 22px;\n          background: rgba(233, 82, 82, 0.15);\n          color: #e95252;\n          font-family: 'Open Sans';\n          font-size: 12px;\n          font-weight: 600;\n        }\n        ul > li > a {\n          text-decoration: none !important;\n          color: #0099ff;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
 // Styled components
-var StyledTableWrapper = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 396px);\n  scrollbar-width: none;\n  height: 600px;\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
+var StyledTableWrapper = /*#__PURE__*/styled__default.div(_templateObject20 || (_templateObject20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: 300px;\n  scrollbar-width: none;\n  /* height: 600px; */\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
 var CustomDrop = /*#__PURE__*/styled__default.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() {
@@ -3238,47 +3636,91 @@ var ReturnProductTable = function ReturnProductTable() {
   var _useSelectedOrders = useSelectedOrders(),
     selectedInvoices = _useSelectedOrders[0];
   var _useState = React.useState(false),
-    selectAll = _useState[0];
+    selectAll = _useState[0],
+    setSelectAll = _useState[1];
   var _useProductDetails = useProductDetails(),
-    productData = _useProductDetails[0];
-  // const handleSelectAll = (e: any) => {
-  //   setSelectAll(e.target.checked);
-  //   if (e.target.checked) {
-  //     setSelectedInvoices(
-  //       productData.map((invoice: any) => ({
-  //         id: invoice.id,
-  //         status_id: 3,
-  //       }))
-  //     );
-  //   } else {
-  //     setSelectedInvoices([]);
-  //   }
-  // };
+    productData = _useProductDetails[0],
+    setProductData = _useProductDetails[1];
+  var _useState2 = React.useState(null),
+    selectedRowId = _useState2[0],
+    setSelectedRowId = _useState2[1];
+  var _useOrderId = useOrderId(),
+    orderId = _useOrderId[0];
+  var handleActionClick = React.useCallback(function (id) {
+    setSelectedRowId(id);
+  }, []);
+  var _useApiHook = dmsComponentLibrary.useApiHook({
+      endpoint: "order/order_products/delete/",
+      method: 'DELETE',
+      body: [{
+        id: selectedRowId,
+        order_id: orderId
+      }],
+      performAction: false
+    }),
+    isresponse = _useApiHook.data,
+    setaction = _useApiHook.setShouldPerformAction;
+  React.useEffect(function () {
+    if (isresponse && isresponse.data) {
+      handleRemoveRow();
+      setSelectedRowId(null);
+    }
+  }, [isresponse]);
+  var handleRemoveRow = React.useCallback(function () {
+    if (selectedRowId !== null) {
+      setProductData(function (prevData) {
+        return prevData.filter(function (item) {
+          return item.id !== selectedRowId;
+        });
+      });
+    }
+  }, [selectedRowId, setProductData]);
+  var onDeleteProducts = React.useCallback(function () {
+    setaction(true);
+  }, [setaction, selectedRowId]);
+  var handleSelectAll = React.useCallback(function () {
+    setSelectAll(function (prevSelectAll) {
+      return !prevSelectAll;
+    });
+  }, []);
   return React__default.createElement("div", null, React__default.createElement(StyledTableWrapper, {
     id: "tableScrolling"
-  }, React__default.createElement(StyledTable, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+  }, React__default.createElement(StyledTable$2, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React__default.createElement(dmsComponentLibrary.Checkbox, {
     checked: selectAll,
-    onChange: function onChange() {}
-  })), React__default.createElement("th", null, " Location"), React__default.createElement("th", null, "Sender"), React__default.createElement("th", null, "Code"), React__default.createElement("th", null, " Description"), React__default.createElement("th", null, "Return Reason"), React__default.createElement("th", null, "Part"), React__default.createElement("th", null, " Action"))), React__default.createElement("tbody", null, productData == null ? void 0 : productData.map(function (invoice) {
+    onChange: handleSelectAll
+  })), React__default.createElement("th", null, "Location"), React__default.createElement("th", null, "Sender"), React__default.createElement("th", null, "Code"), React__default.createElement("th", null, "Description"), React__default.createElement("th", null, "Return Reason"), React__default.createElement("th", null, "Part"), React__default.createElement("th", null, "Action"))), React__default.createElement("tbody", null, productData && productData.length > 0 ? productData.map(function (invoice) {
     return React__default.createElement("tr", {
       key: invoice.id
     }, React__default.createElement("td", null, React__default.createElement(dmsComponentLibrary.Checkbox, {
-      checked: selectedInvoices == null ? void 0 : selectedInvoices.some(function (selectedInvoice) {
-        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === invoice.id;
+      checked: selectedInvoices.some(function (selectedInvoice) {
+        return selectedInvoice.id === invoice.id;
       })
-    })), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, invoice == null ? void 0 : invoice.code), React__default.createElement("td", null, invoice == null ? void 0 : invoice.description), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, "1 of 1"), React__default.createElement("td", null, React__default.createElement(ActionIcon, null)));
-  })))));
+    })), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, invoice.code), React__default.createElement("td", null, invoice.description), React__default.createElement("td", null, 'N/A'), React__default.createElement("td", null, "1 of 1"), React__default.createElement("td", null, React__default.createElement("div", {
+      onClick: function onClick() {
+        handleActionClick(invoice.id);
+        onDeleteProducts();
+      },
+      style: {
+        cursor: 'pointer'
+      }
+    }, React__default.createElement(ActionIcon, null))));
+  }) : React__default.createElement("tr", null, React__default.createElement("td", {
+    colSpan: 8,
+    style: {
+      textAlign: 'center'
+    }
+  }, "No records found"))))));
 };
 
-var _templateObject$W;
+var _templateObject$Y;
 var ProductTable = function ProductTable() {
   return React__default.createElement(Container$B, null, React__default.createElement(ReturnProductTable, null));
 };
-var Container$B = /*#__PURE__*/styled__default.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 230px; /* Set height to limit container size */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
+var Container$B = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* height: 230px;  */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
 
-var _templateObject$X, _templateObject2$C, _templateObject3$k;
+var _templateObject$Z, _templateObject2$D, _templateObject3$m;
 function ExpandedContent$2() {
   var SaveNote = function SaveNote() {
     // alert('saved');
@@ -3294,15 +3736,15 @@ function ExpandedContent$2() {
     onClick: SaveNote
   }, "SAVE Details"))));
 }
-var MidConatiner = /*#__PURE__*/styled__default.div(_templateObject$X || (_templateObject$X = /*#__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"])));
-var SaveNoteContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
-var Container$C = /*#__PURE__*/styled__default.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var MidConatiner = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__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"])));
+var SaveNoteContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
+var Container$C = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$Y;
+var _templateObject$_;
 // import ModalManager from '../../modalsPopup/ModalManager';
 // import { countReducerAtom, useProductDetails } from '../../store';
 // import { useAtom } from 'jotai';
-function CollapsedContent$2() {
+function CollapsedContent$3() {
   // const [, dispatch] = useAtom(countReducerAtom);
   // const [productdata] = useProductDetails();
   // const totalItems = productdata?.length;
@@ -3368,7 +3810,7 @@ function CollapsedContent$2() {
 //   align-items: center;
 //   gap: 30px;
 // `;
-var Container$D = /*#__PURE__*/styled__default.div(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 30px;\n"])));
+var Container$D = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 30px;\n"])));
 
 // Dropdown
 var PrintOptionTOggle = /*#__PURE__*/jotai.atom(null);
@@ -3462,26 +3904,143 @@ function ProductsInfo() {
     }
   }, [fetchedData, loading]);
   return React__default.createElement(CollapsableForm, {
-    collapsedContent: React__default.createElement(CollapsedContent$2, null)
+    collapsedContent: React__default.createElement(CollapsedContent$3, null)
   }, React__default.createElement(ExpandedContent$2, null));
 }
 
-var _templateObject$Z;
+var _templateObject$$;
+// import styled from 'styled-components';
+function TomTomCollapsedContent() {
+  return React__default.createElement(Font$3, null, "TOMTOM LOGS");
+}
+var Font$3 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n"])));
+
+var options = [{
+  label: 'Task',
+  value: 'task',
+  selectedBackgroundColor: '#F0F2F2',
+  selectedFontColor: '#3a3630'
+}, {
+  label: 'Reminder',
+  value: 'reminder',
+  selectedBackgroundColor: 'white',
+  selectedFontColor: '#3a3630'
+}];
+var ReturnData = [{
+  label: 'Return1',
+  value: 'return1'
+}, {
+  label: 'Return2',
+  value: 'return2'
+}, {
+  label: 'Return3',
+  value: 'return3'
+}];
+var TaskType = [{
+  label: 'Client',
+  value: 'client'
+}, {
+  label: 'Customer Service (CS)',
+  value: 'cs'
+}, {
+  label: 'Transport (DH)',
+  value: 'dh'
+}, {
+  label: 'Warehouse',
+  value: 'warehouse'
+}, {
+  label: 'Customer Portal',
+  value: 'customer-portal'
+}, {
+  label: 'Delivery App',
+  value: 'delivery-app'
+}, {
+  label: 'Complaints',
+  value: 'complaints'
+}, {
+  label: 'Offshore',
+  value: 'offshore'
+}, {
+  label: 'Stock Admin',
+  value: 'stock-admin'
+}, {
+  label: 'Call Customer',
+  value: 'call-customer'
+}, {
+  label: 'Driver Compliance',
+  value: 'driver-compliance'
+}];
+var CustomOptions = [{
+  label: 'Private',
+  value: 'private'
+}, {
+  label: 'Public',
+  value: 'public'
+}];
+var DefectConfirm = [{
+  label: 'Yes',
+  value: 'yes'
+}, {
+  label: 'No',
+  value: 'no'
+}];
+var TomTomColumns = [{
+  header: 'Event Date',
+  accessorKey: 'eventdate'
+}, {
+  header: 'Route',
+  accessorKey: 'route'
+}, {
+  header: 'Details',
+  accessorKey: 'details'
+}, {
+  header: 'Type',
+  accessorKey: 'type'
+}];
+var tomtomResources = [{
+  route: 'Hammer',
+  details: 'Sent to Object; RYF',
+  eventdate: '2024-06-01',
+  type: 'workFlow'
+}, {
+  route: 'Screwdriver',
+  details: 'Sent to Object; RYF',
+  eventdate: '2024-06-10',
+  type: 'workFlow'
+}, {
+  route: 'Wrench',
+  details: 'Sent to Object; RYF',
+  eventdate: '2024-06-20',
+  type: 'workFlow'
+}];
+
+var _templateObject$10;
+function TomTomLogs() {
+  return React__default.createElement(Table$4, null, React__default.createElement(CollapsableForm, {
+    collapsedContent: React__default.createElement(TomTomCollapsedContent, null)
+  }, React__default.createElement(DynamicTable, {
+    columns: TomTomColumns,
+    data: tomtomResources
+  })));
+}
+var Table$4 = /*#__PURE__*/styled__default.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+
+var _templateObject$11;
 function BackgroundModal(props) {
   return reactDom.createPortal(React__default.createElement(Container$E, Object.assign({}, props), props.children), document.body);
 }
-var Container$E = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;  \n  z-index: 1000;\n  background: rgba(0, 0, 0, 0.8);\n  box-shadow: 0px 3px 10px #00000029;\n"])));
+var Container$E = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;  \n  z-index: 1000;\n  background: rgba(0, 0, 0, 0.8);\n  box-shadow: 0px 3px 10px #00000029;\n"])));
 
-var _templateObject$_, _templateObject2$D, _templateObject3$l, _templateObject4$8;
+var _templateObject$12, _templateObject2$E, _templateObject3$n, _templateObject4$a;
 function AdditionalInformation(props) {
   return React__default.createElement(Container$F, null, React__default.createElement(Rect, null), React__default.createElement(AdditionalInfo, null, React__default.createElement(Text$3, null, props.info)));
 }
-var Text$3 = /*#__PURE__*/styled__default.p(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  margin: 0;\n  padding: 0;\n"])));
-var Container$F = /*#__PURE__*/styled__default.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var Rect = /*#__PURE__*/styled__default.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 9px;\n  height: 45px;\n  background: #3a3630;\n"])));
-var AdditionalInfo = /*#__PURE__*/styled__default.div(_templateObject4$8 || (_templateObject4$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 3px 10px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 20px;\n  border-radius: 0px 15px 15px 0px;\n  background: rgba(63, 151, 188, 0.6);\n  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.25) inset;\n"])));
+var Text$3 = /*#__PURE__*/styled__default.p(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  margin: 0;\n  padding: 0;\n"])));
+var Container$F = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var Rect = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 9px;\n  height: 45px;\n  background: #3a3630;\n"])));
+var AdditionalInfo = /*#__PURE__*/styled__default.div(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 3px 10px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 20px;\n  border-radius: 0px 15px 15px 0px;\n  background: rgba(63, 151, 188, 0.6);\n  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.25) inset;\n"])));
 
-var _templateObject$$, _templateObject2$E, _templateObject3$m, _templateObject4$9;
+var _templateObject$13, _templateObject2$F, _templateObject3$o, _templateObject4$b;
 function OrderActionHeader(props) {
   var title = props.title,
     actions = props.actions,
@@ -3496,12 +4055,12 @@ function OrderActionHeader(props) {
     onClick: onClose
   }, React__default.createElement(dmsComponentLibrary.CrossIcon, null)));
 }
-var Wrapper$b = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  width: 90%;\n  margin-left: 20px;\n"])));
-var IconContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg > path {\n    fill: #ffffff;\n  }\n  cursor: pointer;\n"])));
-var Title = /*#__PURE__*/styled__default.h3(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  color: #edebe8;\n  text-transform: uppercase;\n  font-size: 20px;\n  font-family: 'Roboto', sans-serif;\n  font-style: normal;\n  font-weight: 900;\n  text-wrap: nowrap;\n"])));
-var Container$G = /*#__PURE__*/styled__default.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  background: #3a3630;\n  border-radius: 12px 12px 0px 0px;\n  padding: 10px 15px 10px 15px;\n  position: sticky;\n  top: 0;\n  z-index: 9;\n"])));
+var Wrapper$b = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  width: 90%;\n  margin-left: 20px;\n"])));
+var IconContainer$2 = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg > path {\n    fill: #ffffff;\n  }\n  cursor: pointer;\n"])));
+var Title = /*#__PURE__*/styled__default.h3(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  color: #edebe8;\n  text-transform: uppercase;\n  font-size: 20px;\n  font-family: 'Roboto', sans-serif;\n  font-style: normal;\n  font-weight: 900;\n  text-wrap: nowrap;\n"])));
+var Container$G = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  background: #3a3630;\n  border-radius: 12px 12px 0px 0px;\n  padding: 10px 15px 10px 15px;\n  position: sticky;\n  top: 0;\n  z-index: 9;\n"])));
 
-var _templateObject$10, _templateObject2$F;
+var _templateObject$14, _templateObject2$G;
 function OrderActionFooter(props) {
   var isSubmitDisabled = props.isSubmitDisabled;
   return React__default.createElement(Container$H, null, React__default.createElement(SubmitButton, {
@@ -3511,10 +4070,10 @@ function OrderActionFooter(props) {
     disabled: isSubmitDisabled
   }, props.submitButtonTitle || 'submit'), props.actions);
 }
-var SubmitButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$H = /*#__PURE__*/styled__default.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* justify-content: space-between; */\n  gap: 15px;\n  align-items: center;\n  width: 100%;\n  background: #f8fafc;\n  border-radius: 0px 0px 6px 6px;\n  padding: 10px 15px 10px 15px;\n  border-top: 1px solid #edebe8;\n  margin-left: 25px;\n"])));
+var SubmitButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$H = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* justify-content: space-between; */\n  gap: 15px;\n  align-items: center;\n  width: 100%;\n  background: #f8fafc;\n  border-radius: 0px 0px 6px 6px;\n  padding: 10px 15px 10px 15px;\n  border-top: 1px solid #edebe8;\n  margin-left: 25px;\n"])));
 
-var _templateObject$11;
+var _templateObject$15;
 function OrderActionModal(props) {
   return React__default.createElement(BackgroundModal, null, React__default.createElement(MainContainer$6, null, React__default.createElement(OrderActionHeader, {
     title: props.headerTitle,
@@ -3529,9 +4088,9 @@ function OrderActionModal(props) {
     isSubmitDisabled: props.isSubmitDisabled
   })));
 }
-var MainContainer$6 = /*#__PURE__*/styled__default.div(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 30vh;\n  max-height: 80vh;\n  /* overflow: auto; */\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: hidden;\n"])));
+var MainContainer$6 = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-height: 30vh;\n  max-height: 80vh;\n  /* overflow: auto; */\n  border-radius: 12px;\n  background: #fff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  align-items: center;\n  justify-content: space-between;\n  overflow-x: hidden;\n"])));
 
-var _templateObject$12, _templateObject2$G;
+var _templateObject$16, _templateObject2$H;
 function OrderActionsDropdown(props) {
   return React__default.createElement(Container$I, {
     className: props.className
@@ -3549,8 +4108,8 @@ function OrderActionsDropdown(props) {
     selectWrapperClass: 'rounded'
   }));
 }
-var Label = /*#__PURE__*/styled__default.label(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$I = /*#__PURE__*/styled__default.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label = /*#__PURE__*/styled__default.label(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$I = /*#__PURE__*/styled__default.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function DocumentTypeDropdown() {
   var onSelect = function onSelect() {};
@@ -3630,7 +4189,7 @@ function UploadIcon(props) {
   })));
 }
 
-var _templateObject$13, _templateObject2$H, _templateObject3$n, _templateObject4$a, _templateObject5$4, _templateObject6$2, _templateObject7$2;
+var _templateObject$17, _templateObject2$I, _templateObject3$p, _templateObject4$c, _templateObject5$5, _templateObject6$3, _templateObject7$3;
 var Dragger = antd.Upload.Dragger;
 var props = {
   name: 'file',
@@ -3657,15 +4216,15 @@ function DocFileUpload() {
     shape: 'rounded'
   }, "Upload Button"), React__default.createElement(IconContainer$3, null, React__default.createElement(UploadIcon, null)), React__default.createElement(TextContainer$2, null, React__default.createElement(Text1, null, "or drag and drop your file "), React__default.createElement(Text2, null, "Excel (.xls / .xlsx) or CSV (.csv) Only")))));
 }
-var MainContainer$7 = /*#__PURE__*/styled__default.div(_templateObject$13 || (_templateObject$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  .ant-upload-wrapper .ant-upload-drag .ant-upload {\n    padding: 0;\n  }\n  .ant-upload-wrapper, .ant-upload-drag, .ant-upload  {\n    border: none;\n    background: transparent;\n  }\n"])));
-var Text2 = /*#__PURE__*/styled__default.p(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #BCBAB7;\n  text-align: center;\n  font-family: 'Roboto', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
-var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
-var Text1 = /*#__PURE__*/styled__default.p(_templateObject4$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #AEA9A1;\n  text-align: left;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
-var IconContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px dashed #0465AC;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n"])));
-var UploadButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
-var Container$J = /*#__PURE__*/styled__default.div(_templateObject7$2 || (_templateObject7$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  padding: 6px;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 30px;\n  border: 1px solid #E0E2E7;\n  background: #FFF;\n\n  \n"])));
+var MainContainer$7 = /*#__PURE__*/styled__default.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  .ant-upload-wrapper .ant-upload-drag .ant-upload {\n    padding: 0;\n  }\n  .ant-upload-wrapper, .ant-upload-drag, .ant-upload  {\n    border: none;\n    background: transparent;\n  }\n"])));
+var Text2 = /*#__PURE__*/styled__default.p(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #BCBAB7;\n  text-align: center;\n  font-family: 'Roboto', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
+var TextContainer$2 = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Text1 = /*#__PURE__*/styled__default.p(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #AEA9A1;\n  text-align: left;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: lowercase;\n  padding: 0;\n  margin: 0;\n"])));
+var IconContainer$3 = /*#__PURE__*/styled__default.div(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px dashed #0465AC;\n  padding: 5px;\n  display: flex;\n  align-items: center;\n"])));
+var UploadButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
+var Container$J = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 8px;\n  padding: 6px;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 30px;\n  border: 1px solid #E0E2E7;\n  background: #FFF;\n\n  \n"])));
 
-var _templateObject$14, _templateObject2$I, _templateObject3$o, _templateObject4$b;
+var _templateObject$18, _templateObject2$J, _templateObject3$q, _templateObject4$d;
 // import DocFileUpload from './DocFileUpload';
 function AddResources() {
   var _useCurrentAction = useCurrentAction(),
@@ -3681,12 +4240,12 @@ function AddResources() {
     onSubmit: function onSubmit() {}
   }, React__default.createElement(ContentContainer, null, React__default.createElement(Top$1, null, React__default.createElement(DocumentTypeDropdown, null), React__default.createElement(CategoryDropdown, null), React__default.createElement(VisibilityRadioButtons, null)), React__default.createElement(Bottom$1, null, React__default.createElement(Label$1, null, "File"), React__default.createElement(DocFileUpload, null))));
 }
-var Label$1 = /*#__PURE__*/styled__default.label(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Bottom$1 = /*#__PURE__*/styled__default.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var Top$1 = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  > div {\n    min-width: 240px;\n  }\n"])));
-var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject4$b || (_templateObject4$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  margin: 0px 20px 0 20px;\n"])));
+var Label$1 = /*#__PURE__*/styled__default.label(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Bottom$1 = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Top$1 = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  > div {\n    min-width: 240px;\n  }\n"])));
+var ContentContainer = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  margin: 0px 20px 0 20px;\n"])));
 
-var _templateObject$15, _templateObject2$J, _templateObject3$p;
+var _templateObject$19, _templateObject2$K, _templateObject3$r;
 function SplitOrderTable() {
   return React__default.createElement(GLobalPopupContent, null, React__default.createElement(TableSkelton, null, React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", null, React__default.createElement(CustomCheckBox, null, React__default.createElement("label", {
     className: "container"
@@ -3714,11 +4273,11 @@ function SplitOrderTable() {
     className: "checkmark"
   })))), React__default.createElement("td", null, "Return"), React__default.createElement("td", null, "FFLMW-B1"), React__default.createElement("td", null, "Outstanding"), React__default.createElement("td", null, "Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK"), React__default.createElement("td", null, "Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK"), React__default.createElement("td", null, "007022530015429326"))))));
 }
-var GLobalPopupContent = /*#__PURE__*/styled__default.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 0px 0 15px;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
-var TableSkelton = /*#__PURE__*/styled__default.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -8px;\n  min-height: 400px;\n  table {\n    border-collapse: separate;\n    width: 100%;\n    border-spacing: 0px 8px;\n    thead {\n      tr {\n        th {\n          font-size: 14px;\n          font-weight: 600;\n          padding: 8px 15px;\n          text-align: left;\n          border-top: 1px solid rgba(0, 0, 0, 0.08);\n          border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n\n          background: #f0f2f2;\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n    tbody {\n      tr {\n        td {\n          color: #3a3630;\n          font-size: 13px;\n          font-weight: 400;\n          line-height: 16px;\n          padding: 6px 15px;\n          text-align: left;\n          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);\n\n          background: #fff;\n\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n  }\n"])));
-var CustomCheckBox = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .container {\n    display: block;\n    position: relative;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    width: 20px;\n    height: 20px;\n  }\n\n  .container input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid #cfcfcf;\n    border-radius: 4px;\n  }\n\n  .container:hover input ~ .checkmark {\n    border-color: #7f7a7a;\n  }\n\n  .container input:checked ~ .checkmark {\n    background-color: #000;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  .container input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  .container .checkmark:after {\n    left: 8px;\n    top: 4px;\n    width: 3px;\n    height: 6px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
+var GLobalPopupContent = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 0px 0 15px;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
+var TableSkelton = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -8px;\n  min-height: 400px;\n  table {\n    border-collapse: separate;\n    width: 100%;\n    border-spacing: 0px 8px;\n    thead {\n      tr {\n        th {\n          font-size: 14px;\n          font-weight: 600;\n          padding: 8px 15px;\n          text-align: left;\n          border-top: 1px solid rgba(0, 0, 0, 0.08);\n          border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n\n          background: #f0f2f2;\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n    tbody {\n      tr {\n        td {\n          color: #3a3630;\n          font-size: 13px;\n          font-weight: 400;\n          line-height: 16px;\n          padding: 6px 15px;\n          text-align: left;\n          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);\n\n          background: #fff;\n\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n  }\n"])));
+var CustomCheckBox = /*#__PURE__*/styled__default.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .container {\n    display: block;\n    position: relative;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    width: 20px;\n    height: 20px;\n  }\n\n  .container input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid #cfcfcf;\n    border-radius: 4px;\n  }\n\n  .container:hover input ~ .checkmark {\n    border-color: #7f7a7a;\n  }\n\n  .container input:checked ~ .checkmark {\n    background-color: #000;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  .container input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  .container .checkmark:after {\n    left: 8px;\n    top: 4px;\n    width: 3px;\n    height: 6px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
 
-var _templateObject$16;
+var _templateObject$1a;
 function SplitOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -3734,7 +4293,7 @@ function SplitOrder() {
     submitBtnTitle: "Split Order"
   }, React__default.createElement(ContentContainer$1, null, React__default.createElement(SplitOrderTable, null)));
 }
-var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px 12px;\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 ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px 12px;\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"])));
 
 function RadioButtonCheckIcon(props) {
   return React__default.createElement("svg", Object.assign({
@@ -3765,7 +4324,7 @@ var fonts = {
   secondary: "'Lato', sans-serif"
 };
 
-var _templateObject$17, _templateObject2$K, _templateObject3$q;
+var _templateObject$1b, _templateObject2$L, _templateObject3$s;
 function RadioButton(props) {
   return React__default.createElement(RadioContainer$1, null, props.checked && React__default.createElement(RadioButtonCheckIcon, {
     color: props.color
@@ -3776,15 +4335,15 @@ function RadioButton(props) {
     htmlFor: props.id
   }, props.label));
 }
-var Label$2 = /*#__PURE__*/styled__default.label(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: #aea9a1;\n  white-space: nowrap;\n"])), fonts.secondary);
-var Input = /*#__PURE__*/styled__default.input(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  appearance: none;\n  margin: 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid #aea9a1;\n  border-radius: 14px;\n  cursor: pointer;\n\n  &:checked {\n    & + ", " {\n      color: ", ";\n    }\n    display: none;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 14px;\n    width: 12px;\n    height: 12px;\n    margin: 2px;\n  }\n\n  &:checked::after {\n    background-color: ", ";\n  }\n"])), Label$2, function (props) {
+var Label$2 = /*#__PURE__*/styled__default.label(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  color: #aea9a1;\n  white-space: nowrap;\n"])), fonts.secondary);
+var Input = /*#__PURE__*/styled__default.input(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  appearance: none;\n  margin: 0;\n  width: 16px;\n  height: 16px;\n  border: 1px solid #aea9a1;\n  border-radius: 14px;\n  cursor: pointer;\n\n  &:checked {\n    & + ", " {\n      color: ", ";\n    }\n    display: none;\n  }\n\n  &::after {\n    content: '';\n    display: block;\n    border-radius: 14px;\n    width: 12px;\n    height: 12px;\n    margin: 2px;\n  }\n\n  &:checked::after {\n    background-color: ", ";\n  }\n"])), Label$2, function (props) {
   return props.color || '#6396e5';
 }, function (props) {
   return props.color || '#6396e5';
 });
-var RadioContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  align-items: center;\n"])));
+var RadioContainer$1 = /*#__PURE__*/styled__default.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  align-items: center;\n"])));
 
-var _templateObject$18, _templateObject2$L, _templateObject3$r, _templateObject4$c, _templateObject5$5, _templateObject6$3, _templateObject7$3;
+var _templateObject$1c, _templateObject2$M, _templateObject3$t, _templateObject4$e, _templateObject5$6, _templateObject6$4, _templateObject7$4;
 function RadioButtonGroup(props) {
   var heading = props.heading,
     _props$direction = props.direction,
@@ -3819,19 +4378,19 @@ function RadioButtonGroup(props) {
     className: "custom-wrapper"
   }, renderOptions()));
 }
-var Separator = /*#__PURE__*/styled__default.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
-var labelStyles = /*#__PURE__*/styled.css(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 20px;\n"])), fonts.secondary);
-var RequiredText = /*#__PURE__*/styled__default.span(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
+var Separator = /*#__PURE__*/styled__default.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
+var labelStyles = /*#__PURE__*/styled.css(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 20px;\n"])), fonts.secondary);
+var RequiredText = /*#__PURE__*/styled__default.span(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
   return !props.$required && 'visibility: hidden;';
 }, labelStyles);
-var LegendContainer = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
-var Legend = /*#__PURE__*/styled__default.legend(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 20px;\n"])), fonts.secondary);
-var Fieldset = /*#__PURE__*/styled__default.fieldset(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
-var Wrapper$c = /*#__PURE__*/styled__default.div(_templateObject7$3 || (_templateObject7$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: ", ";\n  gap: 32px;\n  padding: 0px 10px;\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  height: 30px;\n  justify-content: space-evenly;\n"])), function (props) {
+var LegendContainer = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
+var Legend = /*#__PURE__*/styled__default.legend(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: ", ";\n  line-height: 20px;\n"])), fonts.secondary);
+var Fieldset = /*#__PURE__*/styled__default.fieldset(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
+var Wrapper$c = /*#__PURE__*/styled__default.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: ", ";\n  gap: 32px;\n  padding: 0px 10px;\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  height: 30px;\n  justify-content: space-evenly;\n"])), function (props) {
   return props.$direction === 'horizontal' ? 'row' : 'column';
 });
 
-var _templateObject$19;
+var _templateObject$1d;
 var deliveryPoints = [{
   label: 'Hallway',
   value: 'hallway'
@@ -3862,15 +4421,15 @@ function DeliveryPoint() {
     required: false
   }));
 }
-var Container$K = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* height: 30px; */\n  padding: 1px;\n  align-items: flex-start;\n  align-self: stretch;\n"])));
+var Container$K = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* height: 30px; */\n  padding: 1px;\n  align-items: flex-start;\n  align-self: stretch;\n"])));
 
-var _templateObject$1a, _templateObject2$M, _templateObject3$s, _templateObject4$d, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$2;
-var _excluded$1 = ["imageSrc", "label", "checked"];
+var _templateObject$1e, _templateObject2$N, _templateObject3$u, _templateObject4$f, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$3;
+var _excluded$2 = ["imageSrc", "label", "checked"];
 function Checkbox(props) {
   var imageSrc = props.imageSrc,
     label = props.label,
     checked = props.checked,
-    rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+    rest = _objectWithoutPropertiesLoose(props, _excluded$2);
   return React__default.createElement(MainContainer$8, {
     "$checked": checked
   }, React__default.createElement(CheckboxContainer, null, React__default.createElement(HiddenCheckbox, Object.assign({
@@ -3885,20 +4444,20 @@ function Checkbox(props) {
     "$checked": checked
   }, label)));
 }
-var Image = /*#__PURE__*/styled__default.img(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: 20px;\n  filter: ", ";\n"])), function (props) {
+var Image = /*#__PURE__*/styled__default.img(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: 20px;\n  filter: ", ";\n"])), function (props) {
   return props.$checked ? 'grayscale(0)' : 'grayscale(1)';
 });
-var CircleContainer = /*#__PURE__*/styled__default.span(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid #e0e2e7;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 8px;\n  left: 8px;\n"])));
-var Circle = /*#__PURE__*/styled__default.span(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 14px;\n  width: 14px;\n  background: ", ";\n  border-radius: 50%;\n  display: inline-block;\n  transition: 0.2s ease all;\n"])), function (props) {
+var CircleContainer = /*#__PURE__*/styled__default.span(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid #e0e2e7;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 8px;\n  left: 8px;\n"])));
+var Circle = /*#__PURE__*/styled__default.span(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 14px;\n  width: 14px;\n  background: ", ";\n  border-radius: 50%;\n  display: inline-block;\n  transition: 0.2s ease all;\n"])), function (props) {
   return props.$checked ? '#feba30' : 'white';
 });
-var Text$4 = /*#__PURE__*/styled__default.span(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: 'lato', sans-serif;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (props) {
+var Text$4 = /*#__PURE__*/styled__default.span(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: 'lato', sans-serif;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (props) {
   return props.$checked ? '#3a3630' : 'rgba(58, 54, 48, 0.50)';
 });
-var InformationContainer = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n"])));
-var CheckboxContainer = /*#__PURE__*/styled__default.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HiddenCheckbox = /*#__PURE__*/styled__default.input(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  height: 100%;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n"])));
-var MainContainer$8 = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 130px;\n  height: 93px;\n  gap: 10px;\n  border-radius: 15px;\n  border: 1px solid ", ";\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  &:hover {\n    border: 1px solid #cbc8c2;\n    .checkbox-img {\n      filter: grayscale(0);\n    }\n  }\n"])), function (props) {
+var InformationContainer = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n"])));
+var CheckboxContainer = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HiddenCheckbox = /*#__PURE__*/styled__default.input(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 0;\n  height: 100%;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 100%;\n  opacity: 0;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n"])));
+var MainContainer$8 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 130px;\n  height: 93px;\n  gap: 10px;\n  border-radius: 15px;\n  border: 1px solid ", ";\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  &:hover {\n    border: 1px solid #cbc8c2;\n    .checkbox-img {\n      filter: grayscale(0);\n    }\n  }\n"])), function (props) {
   return props.$checked ? '#cbc8c2' : '#e0e2e7';
 });
 
@@ -3925,7 +4484,7 @@ var getIcon$1 = function getIcon(input) {
   return "" + baseURL$1 + subPath;
 };
 
-var _templateObject$1b;
+var _templateObject$1f;
 function OrderServices$1() {
   // TO DO -> get services from static data
   return React__default.createElement(Container$L, null, React__default.createElement(Checkbox, {
@@ -3950,9 +4509,9 @@ function OrderServices$1() {
     imageSrc: getIcon$1(4)
   }));
 }
-var Container$L = /*#__PURE__*/styled__default.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n"])));
+var Container$L = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n"])));
 
-var _templateObject$1c, _templateObject2$N;
+var _templateObject$1g, _templateObject2$O;
 function Notes$1(_ref) {
   var onNotesChange = _ref.onNotesChange;
   var handleTextChange = function handleTextChange(event) {
@@ -3963,10 +4522,10 @@ function Notes$1(_ref) {
     onChange: handleTextChange
   }));
 }
-var Label$3 = /*#__PURE__*/styled__default.span(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$M = /*#__PURE__*/styled__default.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n"])));
+var Label$3 = /*#__PURE__*/styled__default.span(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$M = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var _templateObject$1d, _templateObject2$O, _templateObject3$t;
+var _templateObject$1h, _templateObject2$P, _templateObject3$v;
 function LogServiceRefusal() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -3986,18 +4545,18 @@ function LogServiceRefusal() {
     }
   }))));
 }
-var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  align-self: stretch;\n"])));
-var Left = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px 12px;\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 Right$1 = /*#__PURE__*/styled__default(Left)(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  align-self: stretch;\n"])));
+var Left = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 15px 12px;\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 Right$1 = /*#__PURE__*/styled__default(Left)(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$1e, _templateObject2$P;
+var _templateObject$1i, _templateObject2$Q;
 function CancelationNote() {
   return React__default.createElement(Container$N, null, React__default.createElement(Label$4, null, "Cancelation Note"), React__default.createElement(dmsComponentLibrary.TextArea, {
     rows: 5
   }));
 }
-var Label$4 = /*#__PURE__*/styled__default.label(_templateObject$1e || (_templateObject$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$N = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$4 = /*#__PURE__*/styled__default.label(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$N = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function CancelationReason() {
   var onSelect = function onSelect() {};
@@ -4035,7 +4594,7 @@ function ReturnReason() {
   });
 }
 
-var _templateObject$1f;
+var _templateObject$1j;
 function CancelOrderTable() {
   var options = [{
     value: 'bjsCouriers',
@@ -4090,9 +4649,9 @@ function CancelOrderTable() {
     }
   }));
 }
-var GLobalPopupContent$1 = /*#__PURE__*/styled__default.div(_templateObject$1f || (_templateObject$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 15px 15px 0;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
+var GLobalPopupContent$1 = /*#__PURE__*/styled__default.div(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 15px 15px 0;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
 
-var _templateObject$1g, _templateObject2$Q, _templateObject3$u, _templateObject4$e, _templateObject5$7, _templateObject6$5;
+var _templateObject$1k, _templateObject2$R, _templateObject3$w, _templateObject4$g, _templateObject5$8, _templateObject6$6;
 function CancelOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -4107,20 +4666,20 @@ function CancelOrder() {
     onSubmit: function onSubmit() {}
   }, React__default.createElement(ContentContainer$3, null, React__default.createElement(Top$2, null, React__default.createElement(TopLeft, null, React__default.createElement(CancelationReason, null), React__default.createElement(Wrapper$d, null, React__default.createElement(ReturnAction, null), React__default.createElement(ReturnReason, null))), React__default.createElement(TopRight, null, React__default.createElement(CancelationNote, null))), React__default.createElement(Bottom$2, null, React__default.createElement(CancelOrderTable, null))));
 }
-var Wrapper$d = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  > div {\n    width: 50%;\n  }\n"])));
-var TopLeft = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  width: 50%;\n"])));
-var TopRight = /*#__PURE__*/styled__default.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
-var Top$2 = /*#__PURE__*/styled__default.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
-var Bottom$2 = /*#__PURE__*/styled__default.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  flex-direction: column;\n"])));
+var Wrapper$d = /*#__PURE__*/styled__default.div(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  > div {\n    width: 50%;\n  }\n"])));
+var TopLeft = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  width: 50%;\n"])));
+var TopRight = /*#__PURE__*/styled__default.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
+var Top$2 = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
+var Bottom$2 = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$3 = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  flex-direction: column;\n"])));
 
-var _templateObject$1h, _templateObject5$8, _templateObject6$6, _templateObject7$5;
-var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 12px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n"])));
-var GLobalPopupContent$2 = /*#__PURE__*/styled__default.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 0px 0 15px;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
-var TableSkelton$1 = /*#__PURE__*/styled__default.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -8px;\n  min-height: auto;\n  width: 100%;\n\n  table {\n    border-collapse: separate;\n    width: 100%;\n    border-spacing: 0px 8px;\n    thead {\n      tr {\n        th {\n          font-size: 14px;\n          font-weight: 600;\n          padding: 8px 15px;\n          text-align: left;\n          border-top: 1px solid rgba(0, 0, 0, 0.08);\n          border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n\n          background: #f0f2f2;\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n    tbody {\n      tr {\n        td {\n          color: #3a3630;\n          font-size: 13px;\n          font-weight: 400;\n          line-height: 16px;\n          padding: 6px 15px;\n          text-align: left;\n          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);\n\n          background: #fff;\n\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n  }\n"])));
-var CustomCheckBox$1 = /*#__PURE__*/styled__default.div(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .container {\n    display: block;\n    position: relative;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    width: 20px;\n    height: 20px;\n  }\n\n  .container input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid #cfcfcf;\n    border-radius: 4px;\n  }\n\n  .container:hover input ~ .checkmark {\n    border-color: #7f7a7a;\n  }\n\n  .container input:checked ~ .checkmark {\n    background-color: #000;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  .container input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  .container .checkmark:after {\n    left: 8px;\n    top: 4px;\n    width: 3px;\n    height: 6px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
+var _templateObject$1l, _templateObject5$9, _templateObject6$7, _templateObject7$6;
+var ContentContainer$4 = /*#__PURE__*/styled__default.div(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 12px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n"])));
+var GLobalPopupContent$2 = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  section {\n    padding: 0px 0 15px;\n    .filterCover {\n      border-radius: 16px;\n      border: 1px solid var(--tonal-brown-10, #edebe8);\n      background: #f8fafc;\n      display: flex;\n      gap: 30px;\n      padding: 15px;\n      gap: 15px;\n      .col {\n        width: 21%;\n        label {\n          color: #8d8f90;\n          font-size: 14px;\n          font-weight: 500;\n          line-height: 20px;\n          display: block;\n          margin-bottom: 4px;\n        }\n        .ant-select-single {\n          width: 100%;\n        }\n        select {\n          width: 100%;\n        }\n        &:first-child {\n          width: 43%;\n        }\n        &:last-child {\n          width: 33%;\n        }\n      }\n    }\n  }\n"])));
+var TableSkelton$1 = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -8px;\n  min-height: auto;\n  width: 100%;\n\n  table {\n    border-collapse: separate;\n    width: 100%;\n    border-spacing: 0px 8px;\n    thead {\n      tr {\n        th {\n          font-size: 14px;\n          font-weight: 600;\n          padding: 8px 15px;\n          text-align: left;\n          border-top: 1px solid rgba(0, 0, 0, 0.08);\n          border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n\n          background: #f0f2f2;\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n    tbody {\n      tr {\n        td {\n          color: #3a3630;\n          font-size: 13px;\n          font-weight: 400;\n          line-height: 16px;\n          padding: 6px 15px;\n          text-align: left;\n          box-shadow: 3px 1px 3px 0px rgba(16, 24, 40, 0.1);\n\n          background: #fff;\n\n          &:first-child {\n            border-radius: 20px 0 0 20px;\n          }\n\n          &:last-child {\n            border-radius: 0 20px 20px 0;\n          }\n        }\n      }\n    }\n  }\n"])));
+var CustomCheckBox$1 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .container {\n    display: block;\n    position: relative;\n    cursor: pointer;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    width: 20px;\n    height: 20px;\n  }\n\n  .container input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 100%;\n    width: 100%;\n  }\n\n  .checkmark {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 1px solid #cfcfcf;\n    border-radius: 4px;\n  }\n\n  .container:hover input ~ .checkmark {\n    border-color: #7f7a7a;\n  }\n\n  .container input:checked ~ .checkmark {\n    background-color: #000;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    display: none;\n  }\n\n  .container input:checked ~ .checkmark:after {\n    display: block;\n  }\n\n  .container .checkmark:after {\n    left: 8px;\n    top: 4px;\n    width: 3px;\n    height: 6px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    -webkit-transform: rotate(45deg);\n    -ms-transform: rotate(45deg);\n    transform: rotate(45deg);\n  }\n"])));
 
-var options = [{
+var options$1 = [{
   value: 'bjsCouriers',
   label: 'BJS COURIERS'
 }, {
@@ -4333,7 +4892,7 @@ var UpdateProductType = function UpdateProductType() {
     }, React__default.createElement("div", {
       className: "col"
     }, React__default.createElement("label", null, "Collection Reason"), React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4343,7 +4902,7 @@ var UpdateProductType = function UpdateProductType() {
     })), React__default.createElement("div", {
       className: "col"
     }, React__default.createElement("label", null, "Collection Reason"), React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Return Action",
       onChange: onChange,
       disabled: false,
@@ -4353,7 +4912,7 @@ var UpdateProductType = function UpdateProductType() {
     })), React__default.createElement("div", {
       className: "col"
     }, React__default.createElement("label", null, "Collection Reason"), React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Return Reason",
       onChange: onChange,
       disabled: false,
@@ -4373,7 +4932,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React__default.createElement("span", {
       className: "checkmark"
     })))), React__default.createElement("td", null, React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4388,7 +4947,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React__default.createElement("span", {
       className: "checkmark"
     })))), React__default.createElement("td", null, React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4403,7 +4962,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React__default.createElement("span", {
       className: "checkmark"
     })))), React__default.createElement("td", null, React__default.createElement(dmsComponentLibrary.AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4415,7 +4974,7 @@ var UpdateProductType = function UpdateProductType() {
   );
 };
 
-var _templateObject$1i, _templateObject2$R;
+var _templateObject$1m, _templateObject2$S;
 function EmailAddress() {
   return React__default.createElement(Container$O, null, React__default.createElement(Label$5, null, "Email Address"), React__default.createElement(antd.Input, {
     style: {
@@ -4423,10 +4982,10 @@ function EmailAddress() {
     }
   }));
 }
-var Label$5 = /*#__PURE__*/styled__default.label(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$O = /*#__PURE__*/styled__default.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$5 = /*#__PURE__*/styled__default.label(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$O = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1j, _templateObject2$S;
+var _templateObject$1n, _templateObject2$T;
 function ContactPhone() {
   return React__default.createElement(Container$P, null, React__default.createElement(Label$6, null, "Contact Phone"), React__default.createElement(antd.Input, {
     style: {
@@ -4434,10 +4993,10 @@ function ContactPhone() {
     }
   }));
 }
-var Label$6 = /*#__PURE__*/styled__default.label(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$P = /*#__PURE__*/styled__default.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$6 = /*#__PURE__*/styled__default.label(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$P = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1k, _templateObject2$T;
+var _templateObject$1o, _templateObject2$U;
 function ContactWork$1() {
   return React__default.createElement(Container$Q, null, React__default.createElement(Label$7, null, "Contact Work"), React__default.createElement(antd.Input, {
     style: {
@@ -4445,10 +5004,10 @@ function ContactWork$1() {
     }
   }));
 }
-var Label$7 = /*#__PURE__*/styled__default.label(_templateObject$1k || (_templateObject$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$Q = /*#__PURE__*/styled__default.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$7 = /*#__PURE__*/styled__default.label(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$Q = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1l, _templateObject2$U;
+var _templateObject$1p, _templateObject2$V;
 function ContactMobile$1() {
   return React__default.createElement(Container$R, null, React__default.createElement(Label$8, null, "Contact Mobile"), React__default.createElement(antd.Input, {
     style: {
@@ -4456,8 +5015,8 @@ function ContactMobile$1() {
     }
   }));
 }
-var Label$8 = /*#__PURE__*/styled__default.label(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$R = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$8 = /*#__PURE__*/styled__default.label(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$R = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function ContactTypeDropdown() {
   var onSelect = function onSelect() {};
@@ -4505,7 +5064,7 @@ function ActionDropdown() {
   });
 }
 
-var _templateObject$1m, _templateObject2$V;
+var _templateObject$1q, _templateObject2$W;
 function DeliveryDate$1() {
   var onChange = function onChange() {};
   return React__default.createElement(Container$S, null, React__default.createElement(Label$9, null, "Delivery Date"), React__default.createElement(antd.DatePicker, {
@@ -4515,8 +5074,8 @@ function DeliveryDate$1() {
     }
   }));
 }
-var Label$9 = /*#__PURE__*/styled__default.label(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$S = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
+var Label$9 = /*#__PURE__*/styled__default.label(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$S = /*#__PURE__*/styled__default.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 function TimedServiceDropdown$1() {
   var onSelect = function onSelect() {};
@@ -4540,16 +5099,16 @@ function TimedServiceDropdown$1() {
   });
 }
 
-var _templateObject$1n, _templateObject2$W, _templateObject3$v, _templateObject4$f;
+var _templateObject$1r, _templateObject2$X, _templateObject3$x, _templateObject4$h;
 function CustomerInformation() {
   return React__default.createElement(Container$T, null, React__default.createElement(Title$1, null, "Address"), React__default.createElement(AddressField, null, "34 NORTHFIELD AVENUE, PONTEFRACT, WF9 3TG"), React__default.createElement(Wrapper$e, null, React__default.createElement(EmailAddress, null), React__default.createElement(ContactPhone, null)), React__default.createElement(Wrapper$e, null, React__default.createElement(ContactWork$1, null), React__default.createElement(ContactMobile$1, null)), React__default.createElement(Wrapper$e, null, React__default.createElement(ContactTypeDropdown, null), React__default.createElement(ActionDropdown, null)), React__default.createElement(Wrapper$e, null, React__default.createElement(DeliveryDate$1, null), React__default.createElement(TimedServiceDropdown$1, null)));
 }
-var Wrapper$e = /*#__PURE__*/styled__default.div(_templateObject$1n || (_templateObject$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  .contact-type-dropdown,\n  .action-dropdown {\n    flex: 1;\n  }\n"])));
-var AddressField = /*#__PURE__*/styled__default.p(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  padding: 0;\n  margin: 0;\n"])));
-var Title$1 = /*#__PURE__*/styled__default.span(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
-var Container$T = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
+var Wrapper$e = /*#__PURE__*/styled__default.div(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  .contact-type-dropdown,\n  .action-dropdown {\n    flex: 1;\n  }\n"])));
+var AddressField = /*#__PURE__*/styled__default.p(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  padding: 0;\n  margin: 0;\n"])));
+var Title$1 = /*#__PURE__*/styled__default.span(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+var Container$T = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
 
-var _templateObject$1o, _templateObject2$X;
+var _templateObject$1s, _templateObject2$Y;
 function ProductTable$1() {
   var data = [{
     action: 'option1',
@@ -4589,10 +5148,10 @@ function ProductTable$1() {
     data: data
   }));
 }
-var Title$2 = /*#__PURE__*/styled__default.h2(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 0;\n"])));
-var Container$U = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
+var Title$2 = /*#__PURE__*/styled__default.h2(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 0;\n"])));
+var Container$U = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
 
-var _templateObject$1p, _templateObject2$Y;
+var _templateObject$1t, _templateObject2$Z;
 function NotesTable() {
   var data = [{
     created: 'optimizer @ BJS via API',
@@ -4615,39 +5174,39 @@ function NotesTable() {
     data: data
   }));
 }
-var Title$3 = /*#__PURE__*/styled__default.h2(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 0;\n"])));
-var Container$V = /*#__PURE__*/styled__default.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
+var Title$3 = /*#__PURE__*/styled__default.h2(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  text-transform: uppercase;\n  padding: 0;\n  margin: 0;\n"])));
+var Container$V = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
 
-var _templateObject$1q, _templateObject2$Z;
+var _templateObject$1u, _templateObject2$_;
 function ConfirmationNotes() {
   return React__default.createElement(Container$W, null, React__default.createElement(Label$a, null, "Notes"), React__default.createElement(dmsComponentLibrary.TextArea, {
     rows: 5,
     placeholder: "Enter Notes"
   }));
 }
-var Label$a = /*#__PURE__*/styled__default.label(_templateObject$1q || (_templateObject$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$W = /*#__PURE__*/styled__default.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$a = /*#__PURE__*/styled__default.label(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$W = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1r, _templateObject2$_;
+var _templateObject$1v, _templateObject2$$;
 function DeliveryInstructions$1() {
   return React__default.createElement(Container$X, null, React__default.createElement(Label$b, null, "Delivery Instructions"), React__default.createElement(dmsComponentLibrary.TextArea, {
     rows: 5,
     placeholder: "Enter Delivery Instructions"
   }));
 }
-var Label$b = /*#__PURE__*/styled__default.label(_templateObject$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var Container$X = /*#__PURE__*/styled__default.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$b = /*#__PURE__*/styled__default.label(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Container$X = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1s, _templateObject2$$, _templateObject3$w, _templateObject4$g;
+var _templateObject$1w, _templateObject2$10, _templateObject3$y, _templateObject4$i;
 function SlotAndInstructions() {
   return React__default.createElement(Container$Y, null, React__default.createElement(Slot, null, React__default.createElement(Title$4, null, "Slot"), React__default.createElement(Value, null, "07:00-10:00")), React__default.createElement(DeliveryInstructions$1, null), React__default.createElement(ConfirmationNotes, null));
 }
-var Value = /*#__PURE__*/styled__default.span(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Lato', 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n"])));
-var Slot = /*#__PURE__*/styled__default.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
-var Title$4 = /*#__PURE__*/styled__default.span(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Lato', 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 700;\n"])));
-var Container$Y = /*#__PURE__*/styled__default.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
+var Value = /*#__PURE__*/styled__default.span(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Lato', 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n"])));
+var Slot = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
+var Title$4 = /*#__PURE__*/styled__default.span(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Lato', 'Open Sans';\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 700;\n"])));
+var Container$Y = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
 
-var _templateObject$1t, _templateObject2$10;
+var _templateObject$1x, _templateObject2$11;
 // import DocFileUpload from './DocFileUpload';
 function ConfirmOrder() {
   var _useCurrentAction = useCurrentAction(),
@@ -4670,21 +5229,21 @@ function ConfirmOrder() {
     showOkButton: false
   }), React__default.createElement(Wrapper$f, null, React__default.createElement(CustomerInformation, null), React__default.createElement(SlotAndInstructions, null)), React__default.createElement(ProductTable$1, null), React__default.createElement(NotesTable, null)));
 }
-var Wrapper$f = /*#__PURE__*/styled__default.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n"])));
-
-var _templateObject2$11, _templateObject3$x, _templateObject4$h, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$3, _templateObject9$1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject18, _templateObject19$1, _templateObject20$1, _templateObject26, _templateObject27, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
-var StyledInput = /*#__PURE__*/styled__default(dmsComponentLibrary.Input)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
-var StyledTextArea$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  resize: none;\n  min-height: 200px;\n"])));
-var StyledTextAreas = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  resize: none;\n  min-height: 50px;\n"])));
-var SplitLayout = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
-var SplitText = /*#__PURE__*/styled__default.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  flex-direction: column;\n  margin-bottom: 4px;\n"])));
-var Row$4 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 0;\n  display: grid;\n  gap: 5px;\n  justify-content: center;\n"])));
-var HoldRow = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 0;\n  display: grid;\n  gap: 5px;\n  justify-content: center;\n  /* margin-bottom: 25px; */\n"])));
-var Label$c = /*#__PURE__*/styled__default.label(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #758588;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
+var Wrapper$f = /*#__PURE__*/styled__default.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n"])));
+
+var _templateObject2$12, _templateObject3$z, _templateObject4$j, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$4, _templateObject9$2, _templateObject10, _templateObject11, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject18, _templateObject19$1, _templateObject20$1, _templateObject26, _templateObject27, _templateObject30, _templateObject31, _templateObject32, _templateObject33;
+var StyledInput = /*#__PURE__*/styled__default(dmsComponentLibrary.Input)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
+var StyledTextArea$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  resize: none;\n  min-height: 200px;\n"])));
+var StyledTextAreas = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  flex: 1 0 0;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  resize: none;\n  min-height: 50px;\n"])));
+var SplitLayout = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
+var SplitText = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  flex-direction: column;\n  margin-bottom: 4px;\n"])));
+var Row$4 = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 0;\n  display: grid;\n  gap: 5px;\n  justify-content: center;\n"])));
+var HoldRow = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 0;\n  display: grid;\n  gap: 5px;\n  justify-content: center;\n  /* margin-bottom: 25px; */\n"])));
+var Label$c = /*#__PURE__*/styled__default.label(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #758588;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
 var ContentContainer$6 = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px 12px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n"])));
 var HoldContentContainer = /*#__PURE__*/styled__default.div(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 20px 20px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  flex: 1 0 0;\n  border-radius: 15px;\n"])));
-var Container$Z = /*#__PURE__*/styled__default.div(_templateObject12 || (_templateObject12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\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  width: 450px;\n"])));
+var Container$Z = /*#__PURE__*/styled__default.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\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  width: 450px;\n"])));
 var StaticText = /*#__PURE__*/styled__default.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 18px; /* 128.571% */\n  flex: 1 0 0;\n"])));
 var ImageCircle = /*#__PURE__*/styled__default.div(_templateObject14 || (_templateObject14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 10px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 50px;\n  background: #f2f4f6;\n"])));
 var ImageRow = /*#__PURE__*/styled__default.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 15px;\n  align-self: stretch;\n"])));
@@ -4957,16 +5516,16 @@ function HoldOrderModal() {
   })))));
 }
 
-var _templateObject$1u, _templateObject2$12, _templateObject3$y;
+var _templateObject$1y, _templateObject2$13, _templateObject3$A;
 // import {
 //   EscalationCategory,
 //   EscalationLevel,
 //   EscalationReason,
 //   EscalationStatus,
 // } from '../../utils';
-var FlexContainer = /*#__PURE__*/styled__default.div(_templateObject$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n"])));
-var InnerCont = /*#__PURE__*/styled__default.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
-var StyledAntSelect = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
+var FlexContainer = /*#__PURE__*/styled__default.div(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 16px;\n  justify-content: space-between;\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n  }\n"])));
+var InnerCont = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
+var StyledAntSelect = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
 var Dropdowns = function Dropdowns() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -5034,17 +5593,17 @@ var Dropdowns = function Dropdowns() {
   })));
 };
 
-var _templateObject$1v, _templateObject2$13;
+var _templateObject$1z, _templateObject2$14;
 var Notes$2 = function Notes() {
-  var StyledTextArea = styled__default(dmsComponentLibrary.TextArea)(_templateObject$1v || (_templateObject$1v = _taggedTemplateLiteralLoose(["\n    display: flex;\n    height: 135px;\n    width: 240px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 6px;\n    flex: 1 0 0;\n    border-radius: 12px;\n    //border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n    background: var(--Flowkit-White, #fff);\n    resize: none;\n  "])));
-  var Label = styled__default.label(_templateObject2$13 || (_templateObject2$13 = _taggedTemplateLiteralLoose(["\n    font-family: 'lato', sans-serif;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--tonal-brown-651, #6a7378);\n  "])));
+  var StyledTextArea = styled__default(dmsComponentLibrary.TextArea)(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n    display: flex;\n    height: 135px;\n    width: 240px;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 6px;\n    flex: 1 0 0;\n    border-radius: 12px;\n    //border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n    background: var(--Flowkit-White, #fff);\n    resize: none;\n  "])));
+  var Label = styled__default.label(_templateObject2$14 || (_templateObject2$14 = _taggedTemplateLiteralLoose(["\n    font-family: 'lato', sans-serif;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 20px;\n    color: var(--tonal-brown-651, #6a7378);\n  "])));
   return React__default.createElement("div", null, React__default.createElement(Label, null, "Note"), React__default.createElement(StyledTextArea, {
     name: "note",
     placeholder: ""
   }));
 };
 
-var _templateObject$1w, _templateObject2$14, _templateObject3$z, _templateObject4$i, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$4, _templateObject9$2, _templateObject10$1;
+var _templateObject$1A, _templateObject2$15, _templateObject3$B, _templateObject4$k, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$5, _templateObject9$3, _templateObject10$1;
 var Upgrade = function Upgrade() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -5103,24 +5662,24 @@ var Upgrade = function Upgrade() {
     name: ''
   }))))), React__default.createElement(GiftWrapper, null, React__default.createElement(BJSGift, null, React__default.createElement(Box, null)), React__default.createElement(BJSGift, null, React__default.createElement(Box, null))));
 };
-var GiftWrapper = /*#__PURE__*/styled__default.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
-var Box = /*#__PURE__*/styled__default.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 20px;\n  height: 20px;\n  border: 1px solid #ccc;\n  border-radius: 10px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    background-color: #ccc;\n    border-radius: 2px;\n    display: none;\n  }\n"])));
-var Wrapper$g = /*#__PURE__*/styled__default.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var BJSGift = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 130px;\n  height: 93px;\n  padding: 10px 15px 15px 10px;\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n\n  /* &:hover ", "::after {\n    display: block;\n  } */\n"])), Box);
-var Toggle = /*#__PURE__*/styled__default(dmsComponentLibrary.Switch)(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
-var Heading$2 = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 16px;\n"])));
-var Container$_ = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 15px;\n  align-items: center;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 10px;\n  }\n"])));
-var InnerCont$1 = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
-var Top$3 = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 35px;\n"])));
+var GiftWrapper = /*#__PURE__*/styled__default.div(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
+var Box = /*#__PURE__*/styled__default.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 20px;\n  height: 20px;\n  border: 1px solid #ccc;\n  border-radius: 10px;\n\n  &::after {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 11px;\n    height: 11px;\n    background-color: #ccc;\n    border-radius: 2px;\n    display: none;\n  }\n"])));
+var Wrapper$g = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var BJSGift = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 130px;\n  height: 93px;\n  padding: 10px 15px 15px 10px;\n  flex-direction: column;\n  align-items: flex-start;\n  border-radius: 15px;\n  border: 1px solid #e0e2e7;\n\n  /* &:hover ", "::after {\n    display: block;\n  } */\n"])), Box);
+var Toggle = /*#__PURE__*/styled__default(dmsComponentLibrary.Switch)(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var Heading$2 = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 16px;\n"])));
+var Container$_ = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 15px;\n  align-items: center;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 10px;\n  }\n"])));
+var InnerCont$1 = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
+var Top$3 = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 35px;\n"])));
 var StyledAntSelect$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject10$1 || (_templateObject10$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n\n  @media (max-width: 768px) {\n    width: 100%;\n  }\n"])));
 
-var _templateObject$1x;
-var Flex = /*#__PURE__*/styled__default.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  /* flex-wrap: wrap; */\n  gap: 15px;\n  padding: 20px;\n  width: 97%;\n  @media (max-width: 768px) {\n    flex-direction: column;\n    padding: 10px;\n    gap: 10px;\n  }\n"])));
+var _templateObject$1B;
+var Flex = /*#__PURE__*/styled__default.div(_templateObject$1B || (_templateObject$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 15px;\n  background: #f8fafc;\n  display: flex;\n  /* flex-wrap: wrap; */\n  gap: 15px;\n  padding: 20px;\n  width: 97%;\n  @media (max-width: 768px) {\n    flex-direction: column;\n    padding: 10px;\n    gap: 10px;\n  }\n"])));
 var Escalation = function Escalation() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(Flex, null, React__default.createElement(Dropdowns, null), React__default.createElement(Notes$2, null), React__default.createElement(Upgrade, null)));
 };
 
-var _templateObject$1y, _templateObject2$15, _templateObject3$A, _templateObject4$j;
+var _templateObject$1C, _templateObject2$16, _templateObject3$C, _templateObject4$l;
 var NewEscalation = function NewEscalation() {
   var _useState = React.useState(false),
     showContent = _useState[0],
@@ -5149,10 +5708,10 @@ var NewEscalation = function NewEscalation() {
     className: "checkmark"
   })))), React__default.createElement("td", null, "VIP4"), React__default.createElement("td", null, "B63015484248[Test] WAYVER"), React__default.createElement("td", null, "Allocated to Route"), React__default.createElement("td", null, "Revieved Picked"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Data"), React__default.createElement("td", null, "Done"), React__default.createElement("td", null, "Done"), React__default.createElement("td", null, "Status"))))));
 };
-var Component = /*#__PURE__*/styled__default.div(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 98%;\n  padding: 15px 12px;\n  justify-content: space-between;\n  align-items: center;\n  gap: 15px;\n  border-radius: 15px;\n  background: #f8fafc;\n"])));
-var Button = /*#__PURE__*/styled__default.button(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #3a3630;\n  display: flex;\n  padding: 6px 10px;\n  align-items: flex-start;\n  gap: 16px;\n  color: white;\n  cursor: pointer;\n"])));
-var Flex$1 = /*#__PURE__*/styled__default.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
-var CancelButton = /*#__PURE__*/styled__default.button(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 6px 10px;\n  align-items: flex-start;\n  gap: 16px;\n  border-radius: 20px;\n  border: 1px solid #e95252;\n  background: #f8fafc;\n  color: #e95252; /* Added this line to set text color */\n  text-decoration-color: #e95252;\n  cursor: pointer;\n"])));
+var Component = /*#__PURE__*/styled__default.div(_templateObject$1C || (_templateObject$1C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 98%;\n  padding: 15px 12px;\n  justify-content: space-between;\n  align-items: center;\n  gap: 15px;\n  border-radius: 15px;\n  background: #f8fafc;\n"])));
+var Button = /*#__PURE__*/styled__default.button(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #3a3630;\n  display: flex;\n  padding: 6px 10px;\n  align-items: flex-start;\n  gap: 16px;\n  color: white;\n  cursor: pointer;\n"])));
+var Flex$1 = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var CancelButton = /*#__PURE__*/styled__default.button(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 6px 10px;\n  align-items: flex-start;\n  gap: 16px;\n  border-radius: 20px;\n  border: 1px solid #e95252;\n  background: #f8fafc;\n  color: #e95252; /* Added this line to set text color */\n  text-decoration-color: #e95252;\n  cursor: pointer;\n"])));
 
 var EscalationModal = function EscalationModal() {
   var _useCurrentAction = useCurrentAction(),
@@ -5439,7 +5998,7 @@ function ChargeLog() {
   })));
 }
 
-var _templateObject$1z;
+var _templateObject$1D;
 var UnholdOrder = function UnholdOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -5463,16 +6022,16 @@ var UnholdOrder = function UnholdOrder() {
     })
   });
 };
-var CustomCancelAndCompleteAction = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var CustomCancelAndCompleteAction = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject$1D || (_templateObject$1D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 
-var _templateObject$1A, _templateObject2$16;
+var _templateObject$1E, _templateObject2$17;
 var ProductData = function ProductData(_ref) {
   var products = _ref.products,
     handleCheckboxChange = _ref.handleCheckboxChange;
   var handleInputChange = function handleInputChange(productId, isChecked) {
     handleCheckboxChange(productId, isChecked);
   };
-  return React__default.createElement(Table$3, null, products.length > 0 ? React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", null, "Select"), React__default.createElement("th", null, "ID"), React__default.createElement("th", null, "Name"), React__default.createElement("th", null, "Parts"))), React__default.createElement("tbody", null, products.map(function (product) {
+  return React__default.createElement(Table$5, null, products.length > 0 ? React__default.createElement("table", null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", null, "Select"), React__default.createElement("th", null, "ID"), React__default.createElement("th", null, "Name"), React__default.createElement("th", null, "Parts"))), React__default.createElement("tbody", null, products.map(function (product) {
     return React__default.createElement("tr", {
       key: product.id
     }, React__default.createElement("td", null, React__default.createElement(CustomCheckBox$1, null, React__default.createElement("label", {
@@ -5488,8 +6047,8 @@ var ProductData = function ProductData(_ref) {
     })))), React__default.createElement("td", null, product.id), React__default.createElement("td", null, product.name), React__default.createElement("td", null, product.parts));
   }))) : React__default.createElement(NoProductsMessage, null, "NO PRODUCTS TO RESTORE"));
 };
-var Table$3 = /*#__PURE__*/styled__default(TableSkelton$1)(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 35vh;\n  width: 50vw;\n  padding: 5px;\n"])));
-var NoProductsMessage = /*#__PURE__*/styled__default.div(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 18px;\n  padding: 20px;\n  color: #888;\n"])));
+var Table$5 = /*#__PURE__*/styled__default(TableSkelton$1)(_templateObject$1E || (_templateObject$1E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 35vh;\n  width: 50vw;\n  padding: 5px;\n"])));
+var NoProductsMessage = /*#__PURE__*/styled__default.div(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 18px;\n  padding: 20px;\n  color: #888;\n"])));
 
 var initialProducts = [{
   id: 1458784,
@@ -5610,7 +6169,7 @@ var RestoreProducts = function RestoreProducts() {
   })));
 };
 
-var _templateObject$1B, _templateObject2$17;
+var _templateObject$1F, _templateObject2$18;
 function AssigneeDropdown() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -5632,8 +6191,8 @@ function AssigneeDropdown() {
     }
   }));
 }
-var FormContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1B || (_templateObject$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  width: 285px;\n"])));
-var StyledAntSelect$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var FormContainer$2 = /*#__PURE__*/styled__default.div(_templateObject$1F || (_templateObject$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  width: 285px;\n"])));
+var StyledAntSelect$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var DatePickerIcon = function DatePickerIcon() {
   return React__default.createElement("svg", {
@@ -5651,12 +6210,12 @@ var DatePickerIcon = function DatePickerIcon() {
   }));
 };
 
-var _templateObject$1C, _templateObject2$18, _templateObject3$B, _templateObject4$k, _templateObject8$5, _templateObject10$2, _templateObject11$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject19$2, _templateObject20$2;
-var ReferenceContainer = /*#__PURE__*/styled__default.div(_templateObject$1C || (_templateObject$1C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 52px;\n  width: 740px;\n  padding: 10px 15px;\n  align-items: center;\n  flex: 1 0 0;\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  background: #fff;\n"])));
-var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 52px;\n  padding: 10px 15px;\n  align-items: center;\n  gap: 20px;\n  flex: 1 0 0;\n"])));
-var MiniContainer = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  flex: 1;\n"])));
-var StyledText = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 96px;\n  padding: 8px 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 22px;\n  resize: none;\n"])));
-var StyledDateContainer = /*#__PURE__*/styled__default.div(_templateObject8$5 || (_templateObject8$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 66px;\n  border: 1px solid #e0e2e7;\n  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);\n  input[type='text'] {\n    border-radius: 20px;\n    background: #fff;\n    border: none;\n    color: #6a7378;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 10px 0;\n    padding-left: 33px;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
+var _templateObject$1G, _templateObject2$19, _templateObject3$D, _templateObject4$m, _templateObject8$6, _templateObject10$2, _templateObject11$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject19$2, _templateObject20$2;
+var ReferenceContainer = /*#__PURE__*/styled__default.div(_templateObject$1G || (_templateObject$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 52px;\n  width: 740px;\n  padding: 10px 15px;\n  align-items: center;\n  flex: 1 0 0;\n  border-radius: 40px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  background: #fff;\n"])));
+var InnerContainer = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 52px;\n  padding: 10px 15px;\n  align-items: center;\n  gap: 20px;\n  flex: 1 0 0;\n"])));
+var MiniContainer = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  flex: 1;\n"])));
+var StyledText = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 96px;\n  padding: 8px 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 22px;\n  resize: none;\n"])));
+var StyledDateContainer = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border-radius: 66px;\n  border: 1px solid #e0e2e7;\n  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);\n  input[type='text'] {\n    border-radius: 20px;\n    background: #fff;\n    border: none;\n    color: #6a7378;\n    font-size: 14px;\n    font-weight: 400;\n    padding: 10px 0;\n    padding-left: 33px;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n  svg {\n    position: absolute;\n    right: 10px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
 var TimeWrapper = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 80px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 6px;\n"])));
 var StyledTime = /*#__PURE__*/styled__default(dmsComponentLibrary.Input)(_templateObject11$1 || (_templateObject11$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 30px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8px 5px;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n"])));
 var Column = /*#__PURE__*/styled__default.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
@@ -5880,22 +6439,22 @@ function useFetchSingleReminderData() {
   return res;
 }
 
-var _templateObject$1D, _templateObject2$19, _templateObject3$C, _templateObject4$l, _templateObject5$b, _templateObject6$9, _templateObject7$8;
+var _templateObject$1H, _templateObject2$1a, _templateObject3$E, _templateObject4$n, _templateObject5$c, _templateObject6$a, _templateObject7$9;
 function Loader(props) {
   return React__default.createElement(MainContainer$9, {
     id: "loder"
   }, React__default.createElement(Container$$, null, React__default.createElement(Spinner, null), React__default.createElement(Wrapper$h, null, React__default.createElement(Title$5, null, props.title || 'Loading...'), React__default.createElement(Subtitle, null, props.subtitle || "Sit tight - won't be long!"))));
 }
-var rotate = /*#__PURE__*/styled.keyframes(_templateObject$1D || (_templateObject$1D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var rotate = /*#__PURE__*/styled.keyframes(_templateObject$1H || (_templateObject$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 // Styled components for the loading spinner
-var Spinner = /*#__PURE__*/styled__default.div(_templateObject2$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 4px solid rgb(0 0 0 / 50%);\n  border-left-color: #feba30;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  animation: ", " 1s linear infinite;\n"])), rotate);
-var Container$$ = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n"])));
-var Subtitle = /*#__PURE__*/styled__default.span(_templateObject4$l || (_templateObject4$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
-var Title$5 = /*#__PURE__*/styled__default.span(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
-var Wrapper$h = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
-var MainContainer$9 = /*#__PURE__*/styled__default.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(5px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-
-var _templateObject$1E, _templateObject2$1a, _templateObject3$D, _templateObject4$m;
+var Spinner = /*#__PURE__*/styled__default.div(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 4px solid rgb(0 0 0 / 50%);\n  border-left-color: #feba30;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  animation: ", " 1s linear infinite;\n"])), rotate);
+var Container$$ = /*#__PURE__*/styled__default.div(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n"])));
+var Subtitle = /*#__PURE__*/styled__default.span(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
+var Title$5 = /*#__PURE__*/styled__default.span(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
+var Wrapper$h = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+var MainContainer$9 = /*#__PURE__*/styled__default.div(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9999;\n  background-color: rgba(0, 0, 0, 0.3);\n  backdrop-filter: blur(5px);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+
+var _templateObject$1I, _templateObject2$1b, _templateObject3$F, _templateObject4$o;
 function StatusIndicator(props) {
   var statusColor = getStatusColor(props.status);
   return React__default.createElement(Container$10, null, React__default.createElement(StatusCircleContainer, {
@@ -5906,14 +6465,14 @@ function StatusIndicator(props) {
     status: props.status
   }, props.text));
 }
-var StatusCircleContainer = /*#__PURE__*/styled__default.span(_templateObject$1E || (_templateObject$1E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid\n    ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
+var StatusCircleContainer = /*#__PURE__*/styled__default.span(_templateObject$1I || (_templateObject$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 20px;\n  width: 20px;\n  border: 1px solid\n    ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) {
   return props.status === 'SD' ? '#30fe43' : props.status === 'AD' ? '#E95252' : 'transparent';
 });
-var StatusCircle = /*#__PURE__*/styled__default.span(_templateObject2$1a || (_templateObject2$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 10px;\n  background: ", ";\n  border-radius: 50%;\n  display: inline-block;\n  transition: 0.2s ease all;\n"])), function (props) {
+var StatusCircle = /*#__PURE__*/styled__default.span(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 10px;\n  background: ", ";\n  border-radius: 50%;\n  display: inline-block;\n  transition: 0.2s ease all;\n"])), function (props) {
   return props.color;
 });
-var Container$10 = /*#__PURE__*/styled__default.div(_templateObject3$D || (_templateObject3$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 22px;\n"])));
-var Text$5 = /*#__PURE__*/styled__default.span(_templateObject4$m || (_templateObject4$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: normal;\n  text-transform: capitalize;\n  font-weight: 500;\n  color: ", ";\n"])), function (props) {
+var Container$10 = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 22px;\n"])));
+var Text$5 = /*#__PURE__*/styled__default.span(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 13px;\n  font-weight: normal;\n  text-transform: capitalize;\n  font-weight: 500;\n  color: ", ";\n"])), function (props) {
   return props.status === 'SD' ? '#57DB7A' : props.status === 'AD' ? '#E95252' : 'transparent';
 });
 
@@ -6075,7 +6634,7 @@ function useFetchReminders() {
   return perform;
 }
 
-var _templateObject$1F, _templateObject2$1b, _templateObject3$E, _templateObject4$n, _templateObject5$c, _templateObject6$a, _templateObject7$9;
+var _templateObject$1J, _templateObject2$1c, _templateObject3$G, _templateObject4$p, _templateObject5$d, _templateObject6$b, _templateObject7$a;
 var ViewReminderModal = function ViewReminderModal() {
   var _reminderData$reminde, _reminderData$order_d, _reminderData$order_d2, _reminderData$reminde2, _reminderData$reminde3, _reminderData$reminde4, _reminderData$reminde5;
   var _useCurrentAction = useCurrentAction(),
@@ -6190,129 +6749,59 @@ var ViewReminderModal = function ViewReminderModal() {
       }, _callee2);
     }));
     return function handleEditReminder() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var isDisabled = (reminderData == null || (_reminderData$reminde = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde.name_alias) === 'resolved';
-  var additional = (reminderData == null || (_reminderData$order_d = reminderData.order_data) == null || (_reminderData$order_d = _reminderData$order_d.order_recipient) == null ? void 0 : _reminderData$order_d.recipient_name) + ' ' + (reminderData == null || (_reminderData$order_d2 = reminderData.order_data) == null || (_reminderData$order_d2 = _reminderData$order_d2.order_recipient) == null ? void 0 : _reminderData$order_d2.postcode);
-  return React__default.createElement(React__default.Fragment, null, reminderData && loading && React__default.createElement(Loader, null), React__default.createElement(OrderActionModal, {
-    headerTitle: "View Reminder",
-    onCloseHeader: closeModal,
-    onSubmit: handleEditReminder,
-    submitBtnTitle: "Save Details",
-    isSubmitDisabled: isDisabled,
-    showAdditionalInfo: true,
-    infoText: additional || 'NA',
-    headerActions: React__default.createElement(OuterDiv, null, (reminderData == null || (_reminderData$reminde2 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde2.name_alias) === 'pending' || (reminderData == null || (_reminderData$reminde3 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde3.name_alias) === 'unresolved' ? React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledWrapper, null, React__default.createElement(StyledLabel, null, React__default.createElement(StyledCheckbox, null, React__default.createElement("input", {
-      type: "checkbox",
-      onChange: function onChange() {
-        return handleResolved(2);
-      }
-    }), React__default.createElement(RoundCheckbox, null)), React__default.createElement(StyledSpan, null, "Mark As Complete")))) : null)
-  }, React__default.createElement(ReferenceContainer, null, React__default.createElement(InnerContainer, null, React__default.createElement(MiniContainer, null, ' ', React__default.createElement(Label$c, null, "Reference ", " "), React__default.createElement(LabelText, null, (reminderData == null ? void 0 : reminderData.reference) || 'N/A')), React__default.createElement(MiniContainer, null, ' ', React__default.createElement(Label$c, null, "Status "), React__default.createElement(LabelText, null, (reminderData == null || (_reminderData$reminde4 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde4.name_alias) === 'pending' || (reminderData == null || (_reminderData$reminde5 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde5.name_alias) === 'unresolved' ? React__default.createElement(StatusIndicator, {
-    text: "Incomplete",
-    status: "AD"
-  }) : React__default.createElement(StatusIndicator, {
-    text: "Completed on " + (reminderData == null ? void 0 : reminderData.completed) + " by " + (reminderData == null ? void 0 : reminderData.completed_by),
-    status: "SD"
-  }))))), React__default.createElement(ContentsContainer, null, React__default.createElement(Left$1, null, React__default.createElement(AssigneeDropdown, null), React__default.createElement(DateTimeContainer, null, React__default.createElement(Label$c, null, "Due "), React__default.createElement(Row$5, null, (reminderPayload == null ? void 0 : reminderPayload.due_date) && React__default.createElement(StyledDateContainer, null, React__default.createElement(DatePicker, {
-    dateFormat: "EEE, dd MMM yyyy",
-    selected: reminderPayload != null && reminderPayload.due_date ? dateFns.parse(reminderPayload.due_date, 'yyyy-MM-dd', new Date()) : null,
-    onChange: handleDateChange,
-    placeholderText: "Choose Due Date"
-  }), React__default.createElement(DatePickerIcon, null)), React__default.createElement(TimeWrapper, null, React__default.createElement(StyledTime, {
-    onChange: handleTime,
-    value: reminderPayload == null ? void 0 : reminderPayload.due_time,
-    type: "time"
-  }))))), React__default.createElement(Right$2, null, React__default.createElement(DetailedContainer, null, React__default.createElement(Label$c, null, "Details"), React__default.createElement(StyledText, {
-    name: "text",
-    required: true,
-    value: reminderPayload == null ? void 0 : reminderPayload.details,
-    onChange: onChangeDetails
-  }))))));
-};
-var StyledWrapper = /*#__PURE__*/styled__default.div(_templateObject$1F || (_templateObject$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 6px 10px;\n  align-items: center;\n  gap: 5px;\n  border-radius: 30px;\n  background: #fff;\n"])));
-var StyledLabel = /*#__PURE__*/styled__default.label(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
-var StyledSpan = /*#__PURE__*/styled__default.span(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #131313;\n  font-family: 'Lato', sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 17px;\n  white-space: nowrap;\n"])));
-var StyledCheckbox = /*#__PURE__*/styled__default.div(_templateObject4$n || (_templateObject4$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  input[type='checkbox'] + span:before {\n    width: 14px;\n    height: 14px;\n    border: 1.5px solid #3a3630;\n    content: '';\n    display: inline-block;\n    margin: 0 8px 0 0;\n    padding: 0;\n    border-radius: 50%;\n  }\n\n  input[type='checkbox']:checked + span:before {\n    background: #feba30;\n    border: 1.5px solid #3a3630;\n    box-shadow: inset 0px 0px 0px 1px #fff;\n    color: #333;\n    content: '';\n    text-align: center;\n    border-radius: 50%;\n    display: flex;\n    width: 14px;\n    height: 14px;\n  }\n\n  input[type='checkbox']:focus + span::before {\n    outline: 0;\n  }\n"])));
-var OuterDiv = /*#__PURE__*/styled__default.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 33%;\n"])));
-var RoundCheckbox = /*#__PURE__*/styled__default.span(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelText = /*#__PURE__*/styled__default.span(_templateObject7$9 || (_templateObject7$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--primary-dark-brown, #3a3630);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
-
-var options$1 = [{
-  label: 'Task',
-  value: 'task',
-  selectedBackgroundColor: '#F0F2F2',
-  selectedFontColor: '#3a3630'
-}, {
-  label: 'Reminder',
-  value: 'reminder',
-  selectedBackgroundColor: 'white',
-  selectedFontColor: '#3a3630'
-}];
-var ReturnData = [{
-  label: 'Return1',
-  value: 'return1'
-}, {
-  label: 'Return2',
-  value: 'return2'
-}, {
-  label: 'Return3',
-  value: 'return3'
-}];
-var TaskType = [{
-  label: 'Client',
-  value: 'client'
-}, {
-  label: 'Customer Service (CS)',
-  value: 'cs'
-}, {
-  label: 'Transport (DH)',
-  value: 'dh'
-}, {
-  label: 'Warehouse',
-  value: 'warehouse'
-}, {
-  label: 'Customer Portal',
-  value: 'customer-portal'
-}, {
-  label: 'Delivery App',
-  value: 'delivery-app'
-}, {
-  label: 'Complaints',
-  value: 'complaints'
-}, {
-  label: 'Offshore',
-  value: 'offshore'
-}, {
-  label: 'Stock Admin',
-  value: 'stock-admin'
-}, {
-  label: 'Call Customer',
-  value: 'call-customer'
-}, {
-  label: 'Driver Compliance',
-  value: 'driver-compliance'
-}];
-var CustomOptions = [{
-  label: 'Private',
-  value: 'private'
-}, {
-  label: 'Public',
-  value: 'public'
-}];
-var DefectConfirm = [{
-  label: 'Yes',
-  value: 'yes'
-}, {
-  label: 'No',
-  value: 'no'
-}];
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var isDisabled = (reminderData == null || (_reminderData$reminde = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde.name_alias) === 'resolved';
+  var additional = (reminderData == null || (_reminderData$order_d = reminderData.order_data) == null || (_reminderData$order_d = _reminderData$order_d.order_recipient) == null ? void 0 : _reminderData$order_d.recipient_name) + ' ' + (reminderData == null || (_reminderData$order_d2 = reminderData.order_data) == null || (_reminderData$order_d2 = _reminderData$order_d2.order_recipient) == null ? void 0 : _reminderData$order_d2.postcode);
+  return React__default.createElement(React__default.Fragment, null, reminderData && loading && React__default.createElement(Loader, null), React__default.createElement(OrderActionModal, {
+    headerTitle: "View Reminder",
+    onCloseHeader: closeModal,
+    onSubmit: handleEditReminder,
+    submitBtnTitle: "Save Details",
+    isSubmitDisabled: isDisabled,
+    showAdditionalInfo: true,
+    infoText: additional || 'NA',
+    headerActions: React__default.createElement(OuterDiv, null, (reminderData == null || (_reminderData$reminde2 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde2.name_alias) === 'pending' || (reminderData == null || (_reminderData$reminde3 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde3.name_alias) === 'unresolved' ? React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledWrapper, null, React__default.createElement(StyledLabel, null, React__default.createElement(StyledCheckbox, null, React__default.createElement("input", {
+      type: "checkbox",
+      onChange: function onChange() {
+        return handleResolved(2);
+      }
+    }), React__default.createElement(RoundCheckbox, null)), React__default.createElement(StyledSpan, null, "Mark As Complete")))) : null)
+  }, React__default.createElement(ReferenceContainer, null, React__default.createElement(InnerContainer, null, React__default.createElement(MiniContainer, null, ' ', React__default.createElement(Label$c, null, "Reference ", " "), React__default.createElement(LabelText, null, (reminderData == null ? void 0 : reminderData.reference) || 'N/A')), React__default.createElement(MiniContainer, null, ' ', React__default.createElement(Label$c, null, "Status "), React__default.createElement(LabelText, null, (reminderData == null || (_reminderData$reminde4 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde4.name_alias) === 'pending' || (reminderData == null || (_reminderData$reminde5 = reminderData.reminder_status) == null ? void 0 : _reminderData$reminde5.name_alias) === 'unresolved' ? React__default.createElement(StatusIndicator, {
+    text: "Incomplete",
+    status: "AD"
+  }) : React__default.createElement(StatusIndicator, {
+    text: "Completed on " + (reminderData == null ? void 0 : reminderData.completed) + " by " + (reminderData == null ? void 0 : reminderData.completed_by),
+    status: "SD"
+  }))))), React__default.createElement(ContentsContainer, null, React__default.createElement(Left$1, null, React__default.createElement(AssigneeDropdown, null), React__default.createElement(DateTimeContainer, null, React__default.createElement(Label$c, null, "Due "), React__default.createElement(Row$5, null, (reminderPayload == null ? void 0 : reminderPayload.due_date) && React__default.createElement(StyledDateContainer, null, React__default.createElement(DatePicker, {
+    dateFormat: "EEE, dd MMM yyyy",
+    selected: reminderPayload != null && reminderPayload.due_date ? dateFns.parse(reminderPayload.due_date, 'yyyy-MM-dd', new Date()) : null,
+    onChange: handleDateChange,
+    placeholderText: "Choose Due Date"
+  }), React__default.createElement(DatePickerIcon, null)), React__default.createElement(TimeWrapper, null, React__default.createElement(StyledTime, {
+    onChange: handleTime,
+    value: reminderPayload == null ? void 0 : reminderPayload.due_time,
+    type: "time"
+  }))))), React__default.createElement(Right$2, null, React__default.createElement(DetailedContainer, null, React__default.createElement(Label$c, null, "Details"), React__default.createElement(StyledText, {
+    name: "text",
+    required: true,
+    value: reminderPayload == null ? void 0 : reminderPayload.details,
+    onChange: onChangeDetails
+  }))))));
+};
+var StyledWrapper = /*#__PURE__*/styled__default.div(_templateObject$1J || (_templateObject$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 6px 10px;\n  align-items: center;\n  gap: 5px;\n  border-radius: 30px;\n  background: #fff;\n"])));
+var StyledLabel = /*#__PURE__*/styled__default.label(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
+var StyledSpan = /*#__PURE__*/styled__default.span(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #131313;\n  font-family: 'Lato', sans-serif;\n  font-style: normal;\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 17px;\n  white-space: nowrap;\n"])));
+var StyledCheckbox = /*#__PURE__*/styled__default.div(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  input[type='checkbox'] + span:before {\n    width: 14px;\n    height: 14px;\n    border: 1.5px solid #3a3630;\n    content: '';\n    display: inline-block;\n    margin: 0 8px 0 0;\n    padding: 0;\n    border-radius: 50%;\n  }\n\n  input[type='checkbox']:checked + span:before {\n    background: #feba30;\n    border: 1.5px solid #3a3630;\n    box-shadow: inset 0px 0px 0px 1px #fff;\n    color: #333;\n    content: '';\n    text-align: center;\n    border-radius: 50%;\n    display: flex;\n    width: 14px;\n    height: 14px;\n  }\n\n  input[type='checkbox']:focus + span::before {\n    outline: 0;\n  }\n"])));
+var OuterDiv = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 33%;\n"])));
+var RoundCheckbox = /*#__PURE__*/styled__default.span(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelText = /*#__PURE__*/styled__default.span(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--primary-dark-brown, #3a3630);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
 
-var _templateObject$1G;
+var _templateObject$1K;
 var CustomSwitchSelector = function CustomSwitchSelector(_ref) {
   var onSwitchChange = _ref.onSwitchChange;
-  var initialSelectedIndex = options$1.findIndex(function (_ref2) {
+  var initialSelectedIndex = options.findIndex(function (_ref2) {
     var value = _ref2.value;
     return value === 'task';
   });
@@ -6332,24 +6821,24 @@ var CustomSwitchSelector = function CustomSwitchSelector(_ref) {
   };
   return React__default.createElement(StyledSwitch, null, React__default.createElement(SwitchSelector, {
     onChange: handleSwitchChange,
-    options: options$1,
+    options: options,
     initialSelectedIndex: initialSelectedIndex,
     backgroundColor: '#cbc8c2',
     fontColor: '#f5f6fa',
     optionBorderRadius: 30
   }));
 };
-var StyledSwitch = /*#__PURE__*/styled__default.div(_templateObject$1G || (_templateObject$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 35%;\n  height: 40px;\n  .react-switch-selector-wrapper {\n    background: #777777;\n  }\n"])));
+var StyledSwitch = /*#__PURE__*/styled__default.div(_templateObject$1K || (_templateObject$1K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 35%;\n  height: 40px;\n  .react-switch-selector-wrapper {\n    background: #777777;\n  }\n"])));
 
-var _templateObject$1H, _templateObject3$F, _templateObject4$o, _templateObject5$d, _templateObject7$a, _templateObject8$6, _templateObject9$3;
+var _templateObject$1L, _templateObject3$H, _templateObject4$q, _templateObject5$e, _templateObject7$b, _templateObject8$7, _templateObject9$4;
 // Shared styles and components
-var Wrapper$i = /*#__PURE__*/styled__default.div(_templateObject$1H || (_templateObject$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
-var SplitContainer = /*#__PURE__*/styled__default.div(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* width: 95%; */\n  min-width: 25vw;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var StyledAntSelect$3 = /*#__PURE__*/styled__default(antd.Select)(_templateObject4$o || (_templateObject4$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
-var Label$d = /*#__PURE__*/styled__default.label(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
-var ContentContainer$7 = /*#__PURE__*/styled__default.div(_templateObject7$a || (_templateObject7$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px 12px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  background: #f8fafc;\n  border-radius: 15px;\n"])));
-var Row$6 = /*#__PURE__*/styled__default.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var DoubleDropdownContainer = /*#__PURE__*/styled__default.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  width: 100%;\n"])));
+var Wrapper$i = /*#__PURE__*/styled__default.div(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
+var SplitContainer = /*#__PURE__*/styled__default.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* width: 95%; */\n  min-width: 25vw;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$3 = /*#__PURE__*/styled__default(antd.Select)(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
+var Label$d = /*#__PURE__*/styled__default.label(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
+var ContentContainer$7 = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px 12px;\n  margin: 5px 14px;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: 15px;\n  background: #f8fafc;\n  border-radius: 15px;\n"])));
+var Row$6 = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var DoubleDropdownContainer = /*#__PURE__*/styled__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  width: 100%;\n"])));
 var FormRow = function FormRow(_ref) {
   var label = _ref.label,
     children = _ref.children,
@@ -6363,7 +6852,7 @@ var FormRow = function FormRow(_ref) {
   }, " * ")), children);
 };
 
-var _templateObject$1I, _templateObject2$1c, _templateObject3$G, _templateObject4$p, _templateObject5$e;
+var _templateObject$1M, _templateObject2$1d, _templateObject3$I, _templateObject4$r, _templateObject5$f;
 function CreateReminderModal() {
   var _useCategoryData = useCategoryData(),
     CategoryData = _useCategoryData[0];
@@ -6546,13 +7035,13 @@ function CreateReminderModal() {
     onChange: handleChange
   })));
 }
-var StyleContainer = /*#__PURE__*/styled__default.div(_templateObject$1I || (_templateObject$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
-var Label$e = /*#__PURE__*/styled__default.label(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
-var StyledAntSelect$4 = /*#__PURE__*/styled__default(antd.Select)(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    width: 20vw;\n    border-radius: 22px;\n  }\n"])));
-var StyledTextArea$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$p || (_templateObject4$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background: var(--Flowkit-White, #fff);\n  resize: none;\n  height: 100px;\n"])));
-var StyledLink = /*#__PURE__*/styled__default.div(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  cursor: pointer;\n"])));
+var StyleContainer = /*#__PURE__*/styled__default.div(_templateObject$1M || (_templateObject$1M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
+var Label$e = /*#__PURE__*/styled__default.label(_templateObject2$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
+var StyledAntSelect$4 = /*#__PURE__*/styled__default(antd.Select)(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    width: 20vw;\n    border-radius: 22px;\n  }\n"])));
+var StyledTextArea$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background: var(--Flowkit-White, #fff);\n  resize: none;\n  height: 100px;\n"])));
+var StyledLink = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  cursor: pointer;\n"])));
 
-var _templateObject$1J, _templateObject2$1d, _templateObject3$H, _templateObject4$q;
+var _templateObject$1N, _templateObject2$1e, _templateObject3$J, _templateObject4$s;
 function CreateTaskModal() {
   var _useTaskTypeData = useTaskTypeData(),
     taskTypes = _useTaskTypeData[0];
@@ -6738,10 +7227,10 @@ function CreateTaskModal() {
     value: createTask == null ? void 0 : createTask.description
   })));
 }
-var StyleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1J || (_templateObject$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
-var StyledLink$1 = /*#__PURE__*/styled__default.div(_templateObject2$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  cursor: pointer;\n"])));
-var Label$f = /*#__PURE__*/styled__default.label(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
-var StyledTextArea$3 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$q || (_templateObject4$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background: var(--Flowkit-White, #fff);\n  resize: none;\n  height: 25%;\n"])));
+var StyleContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$1N || (_templateObject$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
+var StyledLink$1 = /*#__PURE__*/styled__default.div(_templateObject2$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n  cursor: pointer;\n"])));
+var Label$f = /*#__PURE__*/styled__default.label(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
+var StyledTextArea$3 = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-radius: 10px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background: var(--Flowkit-White, #fff);\n  resize: none;\n  height: 25%;\n"])));
 
 function useCreateTask() {
   var ssoToken = getCookie('id_token');
@@ -6984,7 +7473,7 @@ function useFetchUnresolvedTasks() {
   return perform;
 }
 
-var _templateObject$1K;
+var _templateObject$1O;
 function TaskReminderModal() {
   var createTaskAPI = useCreateTask();
   var createReminderAPI = useCreateReminder();
@@ -7154,80 +7643,9 @@ function TaskReminderModal() {
     onClose: function onClose() {}
   }) : '')));
 }
-var OrderModal = /*#__PURE__*/styled__default(OrderActionModal)(_templateObject$1K || (_templateObject$1K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70%;\n"])));
-
-function useUpdateOrder() {
-  var controller;
-  var ssoToken = getCookie('id_token');
-  var update = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(data) {
-      var endpoint, signal, requestOptions, response, json;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            endpoint = dmsComponentLibrary.getBaseEndpoint() + "/orders/update/";
-            if (controller) {
-              controller.abort();
-            }
-            // Create new AbortController
-            controller = new AbortController();
-            signal = controller.signal; // setLoading(true); // Set loading to true
-            _context.prev = 4;
-            requestOptions = {
-              headers: {
-                'Content-Type': 'application/json',
-                Authorization: "Bearer " + ssoToken
-              },
-              method: 'PUT',
-              body: JSON.stringify(data),
-              signal: signal
-            };
-            _context.next = 8;
-            return fetch(endpoint, requestOptions);
-          case 8:
-            response = _context.sent;
-            if (response.ok) {
-              _context.next = 11;
-              break;
-            }
-            throw new Error('response is not ok');
-          case 11:
-            _context.next = 13;
-            return response.json();
-          case 13:
-            json = _context.sent;
-            // alert('Order has been updated');
-            antd.notification.success({
-              message: 'Success',
-              description: 'Order has been updated.'
-            });
-            return _context.abrupt("return", json);
-          case 18:
-            _context.prev = 18;
-            _context.t0 = _context["catch"](4);
-            //   setLoading(false);
-            // console.log(err, 'error');
-            antd.notification.error({
-              message: 'Error',
-              description: "" + _context.t0 || 'An error has occurred. Please try again later.'
-            });
-          case 21:
-            _context.prev = 21;
-            return _context.finish(21);
-          case 23:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[4, 18, 21, 23]]);
-    }));
-    return function update(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  return update;
-}
+var OrderModal = /*#__PURE__*/styled__default(OrderActionModal)(_templateObject$1O || (_templateObject$1O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70%;\n"])));
 
-var _templateObject$1L, _templateObject2$1e;
+var _templateObject$1P, _templateObject2$1f;
 function OrderLock() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -7280,8 +7698,8 @@ function OrderLock() {
     })
   });
 }
-var CustomCancelationModal = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelationModal)(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.8);\n"])));
-var CustomCancelAndCompleteAction$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject2$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var CustomCancelationModal = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelationModal)(_templateObject$1P || (_templateObject$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.8);\n"])));
+var CustomCancelAndCompleteAction$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject2$1f || (_templateObject2$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 
 function useUpdateFlag() {
   var ssoToken = getCookie('id_token');
@@ -7351,7 +7769,7 @@ function useUpdateFlag() {
   return create;
 }
 
-var _templateObject$1M, _templateObject2$1f, _templateObject3$I, _templateObject4$r, _templateObject5$f, _templateObject6$b;
+var _templateObject$1Q, _templateObject2$1g, _templateObject3$K, _templateObject4$t, _templateObject5$g, _templateObject6$c;
 function HeaderSection() {
   var _useSingleFlagData = useSingleFlagData(),
     dataArray = _useSingleFlagData[0];
@@ -7421,14 +7839,14 @@ function HeaderSection() {
     })
   })));
 }
-var Header$1 = /*#__PURE__*/styled__default.div(_templateObject$1M || (_templateObject$1M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"])));
-var CustomCancelAndCompleteAction$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject2$1f || (_templateObject2$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
-var ResolveButton = /*#__PURE__*/styled__default.button(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-weight: 600;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])));
-var Title$6 = /*#__PURE__*/styled__default.span(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 32px;\n  text-transform: uppercase;\n  color: #3a3630;\n"])));
-var StyledOverlay = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(2px);\n  z-index: 1000;\n"])));
-var CrossWrapper = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
+var Header$1 = /*#__PURE__*/styled__default.div(_templateObject$1Q || (_templateObject$1Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex-wrap: wrap;\n"])));
+var CustomCancelAndCompleteAction$2 = /*#__PURE__*/styled__default(dmsComponentLibrary.CancelAndCompleteAction)(_templateObject2$1g || (_templateObject2$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var ResolveButton = /*#__PURE__*/styled__default.button(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-weight: 600;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])));
+var Title$6 = /*#__PURE__*/styled__default.span(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 32px;\n  text-transform: uppercase;\n  color: #3a3630;\n"])));
+var StyledOverlay = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0, 0, 0, 0.4);\n  backdrop-filter: blur(2px);\n  z-index: 1000;\n"])));
+var CrossWrapper = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
 
-var _templateObject$1N, _templateObject2$1g;
+var _templateObject$1R, _templateObject2$1h;
 function TextSection() {
   var _useSinglePayload = useSinglePayload(),
     payload = _useSinglePayload[0],
@@ -7446,10 +7864,10 @@ function TextSection() {
     onChange: onChangeDetails
   }));
 }
-var TextField = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject$1N || (_templateObject$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 97% !important;\n"])));
-var Text$6 = /*#__PURE__*/styled__default.div(_templateObject2$1g || (_templateObject2$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  margin-top: 2%;\n"])));
+var TextField = /*#__PURE__*/styled__default(dmsComponentLibrary.TextArea)(_templateObject$1R || (_templateObject$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 97% !important;\n"])));
+var Text$6 = /*#__PURE__*/styled__default.div(_templateObject2$1h || (_templateObject2$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  margin-top: 2%;\n"])));
 
-var _templateObject$1O, _templateObject2$1h;
+var _templateObject$1S, _templateObject2$1i;
 function ButtonsSection() {
   var _useSinglePayload = useSinglePayload(),
     payload = _useSinglePayload[0],
@@ -7540,10 +7958,10 @@ function ButtonsSection() {
     status: "SD"
   }))));
 }
-var Buttons = /*#__PURE__*/styled__default.div(_templateObject$1O || (_templateObject$1O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
-var Flex$2 = /*#__PURE__*/styled__default.div(_templateObject2$1h || (_templateObject2$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var Buttons = /*#__PURE__*/styled__default.div(_templateObject$1S || (_templateObject$1S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
+var Flex$2 = /*#__PURE__*/styled__default.div(_templateObject2$1i || (_templateObject2$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
 
-var _templateObject$1P, _templateObject2$1i, _templateObject3$J, _templateObject4$s, _templateObject5$g, _templateObject6$c;
+var _templateObject$1T, _templateObject2$1j, _templateObject3$L, _templateObject4$u, _templateObject5$h, _templateObject6$d;
 function ActionSection() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -7564,12 +7982,10 @@ function ActionSection() {
             _context.next = 3;
             return updateFlag([payload]);
           case 3:
-            _context.next = 5;
-            return fetchData();
-          case 5:
-            //modal close
             setCurrentAction(undefined);
             setLoading(false);
+            _context.next = 7;
+            return fetchData();
           case 7:
           case "end":
             return _context.stop();
@@ -7631,14 +8047,14 @@ function RadioButtonsSection() {
     required: false
   }));
 }
-var ButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject$1P || (_templateObject$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
-var SaveButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject2$1i || (_templateObject2$1i = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var CancelButton$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var DropDowns = /*#__PURE__*/styled__default.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
-var TooltipContent = /*#__PURE__*/styled__default.div(_templateObject5$g || (_templateObject5$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #333;\n  color: #fff;\n  padding: 5px 10px;\n  border-radius: 5px;\n"])));
-var Wrapper$j = /*#__PURE__*/styled__default.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject$1T || (_templateObject$1T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
+var SaveButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var CancelButton$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var DropDowns = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
+var TooltipContent = /*#__PURE__*/styled__default.div(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #333;\n  color: #fff;\n  padding: 5px 10px;\n  border-radius: 5px;\n"])));
+var Wrapper$j = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$1Q, _templateObject2$1j, _templateObject3$K, _templateObject4$t, _templateObject5$h;
+var _templateObject$1U, _templateObject2$1k, _templateObject3$M, _templateObject4$v, _templateObject5$i;
 function DetailSection() {
   var _dataArray$order_data, _dataArray$order_data2;
   var _useSingleFlagData = useSingleFlagData(),
@@ -7650,11 +8066,11 @@ function DetailSection() {
     label: "Order"
   }), React__default.createElement(Order$1, null, orderColumnData)));
 }
-var Detail = /*#__PURE__*/styled__default.div(_templateObject$1Q || (_templateObject$1Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 40%;\n  flex-wrap: wrap;\n"])));
-var Flex$3 = /*#__PURE__*/styled__default.div(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var Ref = /*#__PURE__*/styled__default.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
-var Order$1 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_templateObject4$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  text-decoration: underline;\n  font-family: 'Lato', sans-serif;\n"])));
-var StyledLabel$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.Label)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
+var Detail = /*#__PURE__*/styled__default.div(_templateObject$1U || (_templateObject$1U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 40%;\n  flex-wrap: wrap;\n"])));
+var Flex$3 = /*#__PURE__*/styled__default.div(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var Ref = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
+var Order$1 = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  text-decoration: underline;\n  font-family: 'Lato', sans-serif;\n"])));
+var StyledLabel$1 = /*#__PURE__*/styled__default(dmsComponentLibrary.Label)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
 
 function useFetchSingleFlagsData() {
   var _useFlagRefId = useFlagRefId(),
@@ -7736,7 +8152,7 @@ function useFetchSingleFlagsData() {
   return res;
 }
 
-var _templateObject$1R, _templateObject2$1k, _templateObject3$L;
+var _templateObject$1V, _templateObject2$1l, _templateObject3$N;
 function ViewFlag() {
   var _useSingleFlagData = useSingleFlagData(),
     dataArray = _useSingleFlagData[0],
@@ -7833,11 +8249,11 @@ function ViewFlag() {
   }, [dataArray]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(BackgroundModals, null, dataArray && loading && React__default.createElement(Loader, null), React__default.createElement(MainContainer$a, null, React__default.createElement(HeaderSection, null), React__default.createElement(DetailSection, null), React__default.createElement(TextSection, null), React__default.createElement(ButtonsSection, null), React__default.createElement(SectionsContainer, null, React__default.createElement(ActionSection, null), React__default.createElement(RadioButtonsSection, null)))));
 }
-var SectionsContainer = /*#__PURE__*/styled__default.div(_templateObject$1R || (_templateObject$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: 6%;\n"])));
-var BackgroundModals = /*#__PURE__*/styled__default(dmsComponentLibrary.BackgroundModal)(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(1px);\n"])));
-var MainContainer$a = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 24px;\n  border-radius: 12px;\n  background: #ffffff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  width: 80%;\n  max-width: 50%;\n  margin: 0 auto;\n  @media (max-width: 1024px) {\n    max-width: 80%;\n  }\n"])));
+var SectionsContainer = /*#__PURE__*/styled__default.div(_templateObject$1V || (_templateObject$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: 6%;\n"])));
+var BackgroundModals = /*#__PURE__*/styled__default(dmsComponentLibrary.BackgroundModal)(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(1px);\n"])));
+var MainContainer$a = /*#__PURE__*/styled__default.div(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 24px;\n  border-radius: 12px;\n  background: #ffffff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  width: 80%;\n  max-width: 50%;\n  margin: 0 auto;\n  @media (max-width: 1024px) {\n    max-width: 80%;\n  }\n"])));
 
-var _templateObject$1S;
+var _templateObject$1W;
 function ReleaseOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -7856,9 +8272,9 @@ function ReleaseOrder() {
     styleAlert: "rounded" // Set the style variant of the alert
   }));
 }
-var ReleaseContainer = /*#__PURE__*/styled__default.div(_templateObject$1S || (_templateObject$1S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: -114px;\n  right: 81px;\n  opacity: 1;\n  overflow: unset;\n  color: inherit;\n  pointer-events: auto;\n  position: absolute;\n  transform: translate3d(57px, 308px, 0px) scaleX(1);\n"])));
+var ReleaseContainer = /*#__PURE__*/styled__default.div(_templateObject$1W || (_templateObject$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  top: -114px;\n  right: 81px;\n  opacity: 1;\n  overflow: unset;\n  color: inherit;\n  pointer-events: auto;\n  position: absolute;\n  transform: translate3d(57px, 308px, 0px) scaleX(1);\n"])));
 
-var _templateObject$1T;
+var _templateObject$1X;
 function OrderActions() {
   var _useCurrentAction = useCurrentAction(),
     currentAction = _useCurrentAction[0];
@@ -7911,58 +8327,7 @@ function OrderActions() {
   };
   return React__default.createElement(Container$11, null, renderContent());
 }
-var Container$11 = /*#__PURE__*/styled__default.div(_templateObject$1T || (_templateObject$1T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-
-var _templateObject$1U, _templateObject2$1l;
-var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject$1U || (_templateObject$1U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 20px;\n  gap: 10px;\n  border-radius: 0px 0px 30px 30px;\n  background: #313130;\n  height: 151px;\n  background: url(./assets/bgBlack.png) no-repeat;\n    background-size: cover;\n    background-color: #000000d9;\n"])));
-var StyledFlex = /*#__PURE__*/styled__default.div(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
-
-var _templateObject$1V;
-var HeaderTitle = function HeaderTitle(props) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Title$7, null, props.title));
-};
-var Title$7 = /*#__PURE__*/styled__default.h2(_templateObject$1V || (_templateObject$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px;\n  padding: 0px;\n  color: #fff;\n  font-size: 26px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 36px;\n  text-transform: uppercase;\n  margin-bottom: 8px;\n"])));
-
-var _templateObject$1W, _templateObject2$1m;
-function Breadcrumb(props) {
-  return React__default.createElement(BreadcrumbContainer, null, React__default.createElement(BreadcrumbList, null, props.title || ''), React__default.createElement(BreadcrumbList, null, props.subtitle || ''), props.subPart && React__default.createElement(React__default.Fragment, null, React__default.createElement(BreadcrumbList, null, props.subPart)));
-}
-var BreadcrumbContainer = /*#__PURE__*/styled__default.div(_templateObject$1W || (_templateObject$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var BreadcrumbList = /*#__PURE__*/styled__default.span(_templateObject2$1m || (_templateObject2$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #edebe8;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
-
-var RouterHeader = function RouterHeader(_ref) {
-  var _ref$breadcrumbTitle = _ref.breadcrumbTitle,
-    breadcrumbTitle = _ref$breadcrumbTitle === void 0 ? 'Clients >' : _ref$breadcrumbTitle,
-    _ref$breadcrumbSubtit = _ref.breadcrumbSubtitle,
-    breadcrumbSubtitle = _ref$breadcrumbSubtit === void 0 ? ' Return' : _ref$breadcrumbSubtit,
-    breadcrumbSubPart = _ref.breadcrumbSubPart;
-  // const [, dispatch] = useAtom(filtersReducerAtom);
-  // const [today, setToday] = usedate();
-  // const maxDate = new Date();
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(HeaderWrapper, {
-    className: "headerWrap"
-  }, React__default.createElement(StyledFlex, null, React__default.createElement("div", null, React__default.createElement(HeaderTitle, {
-    title: 'Return'
-  }), React__default.createElement(Breadcrumb, {
-    title: breadcrumbTitle,
-    subtitle: breadcrumbSubtitle,
-    subPart: breadcrumbSubPart
-  })))));
-};
-
-var _templateObject$1X, _templateObject2$1n;
-var Details = function Details() {
-  return React__default.createElement(DetailsContainer, null, React__default.createElement(Typo, null, "CUSTOMER RETURN - BJS DEV TEST COMPANY, WS10 8RR"));
-};
-var DetailsContainer = /*#__PURE__*/styled__default.div(_templateObject$1X || (_templateObject$1X = /*#__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__default.div(_templateObject2$1n || (_templateObject2$1n = /*#__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$1Y;
-// import ActionsMenu from './left-side-filters/ActionsMenu';
-var DetailsFilters = function DetailsFilters() {
-  return React__default.createElement(Flex$4, null, React__default.createElement(Details, null));
-};
-var Flex$4 = /*#__PURE__*/styled__default.div(_templateObject$1Y || (_templateObject$1Y = /*#__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 Container$11 = /*#__PURE__*/styled__default.div(_templateObject$1X || (_templateObject$1X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 function useSystemLogs() {
   var ssoToken = getCookie('id_token');
@@ -8055,11 +8420,17 @@ function useSystemLogs() {
   return perform;
 }
 
-var _templateObject$1Z, _templateObject2$1o, _templateObject3$M, _templateObject4$u, _templateObject5$i, _templateObject6$d, _templateObject7$b;
+var _templateObject$1Y, _templateObject2$1m, _templateObject3$O, _templateObject4$w;
 function OrderView() {
+  antd.notification.config({
+    top: 150
+  });
   var _useOrderId = useOrderId(),
     orderId = _useOrderId[0],
     setOrderId = _useOrderId[1];
+  var _useGsitOrderId = useGsitOrderId(),
+    gsitOrderId = _useGsitOrderId[0],
+    setGsitOrderId = _useGsitOrderId[1];
   var splitPath = function splitPath(str) {
     var _str$split;
     var parts = str == null || (_str$split = str.split('/')) == null ? void 0 : _str$split.filter(function (part) {
@@ -8073,16 +8444,40 @@ function OrderView() {
     setOrderDetails = _useOrderDetails[1];
   var _usePrevOrderDetails = usePrevOrderDetails(),
     setPrevOrderDetails = _usePrevOrderDetails[1];
-  var _useLoading = useLoading(),
-    setLoading = _useLoading[1];
+  var _useState = React.useState(false),
+    setLoading = _useState[1];
   var _useOrderStaticData = useOrderStaticData(),
     setOrderStaticData = _useOrderStaticData[1];
   var _useStatusDetails = useStatusDetails(),
     setOrderStatus = _useStatusDetails[1];
   var _useDepotOptions = useDepotOptions(),
     setDepotOptions = _useDepotOptions[1];
+  var _useCustomerInfo = useCustomerInfo(),
+    setCustomerInfo = _useCustomerInfo[1];
   var location = reactRouterDom.useLocation();
   var paths = splitPath(location.pathname);
+  var _useLocationOptions = useLocationOptions(),
+    setLocationOptions = _useLocationOptions[1];
+  var _useApiCalling = useApiCalling(),
+    apiCalling = _useApiCalling[0];
+  var _useOrderProductsReso = useOrderProductsResources(),
+    orderResources = _useOrderProductsReso[0],
+    setOrderResources = _useOrderProductsReso[1];
+  var _useOrderProductsTool = useOrderProductsToolbox(),
+    orderToolbox = _useOrderProductsTool[0],
+    setOrderToolbox = _useOrderProductsTool[1];
+  var _useGsitCUstomerId = useGsitCUstomerId(),
+    GsitCUstomerId = _useGsitCUstomerId[0],
+    setGsitCUstomerId = _useGsitCUstomerId[1];
+  var _useOrderProductId = useOrderProductId(),
+    setOrderProductId = _useOrderProductId[1];
+  var _useCUstomerId = useCUstomerId(),
+    setCUstomerId = _useCUstomerId[1];
+  var _useRouteId = useRouteId(),
+    setRouteId = _useRouteId[1];
+  var _useLiveRecalling = useLiveRecalling(),
+    liveRecalling = _useLiveRecalling[0];
+  var systemLogsData = useSystemLogs();
   var _useApiHook = dmsComponentLibrary.useApiHook({
       endpoint: "orders/" + orderId,
       method: 'GET',
@@ -8090,7 +8485,7 @@ function OrderView() {
     }),
     fetchedData = _useApiHook.data,
     loading = _useApiHook.loading,
-    setShouldPerformAction = _useApiHook.setShouldPerformAction;
+    orderUpdate = _useApiHook.setShouldPerformAction;
   var _useApiHook2 = dmsComponentLibrary.useApiHook({
       endpoint: "/orders/getStaticData/all/",
       method: 'GET'
@@ -8105,23 +8500,39 @@ function OrderView() {
     }),
     fetchedStatusData = _useApiHook3.data,
     statusDataLoading = _useApiHook3.loading,
-    setPerformAction = _useApiHook3.setShouldPerformAction;
+    setLivePerformAction = _useApiHook3.setShouldPerformAction;
   var _useApiHook4 = dmsComponentLibrary.useApiHook({
       endpoint: "/depot/",
-      method: 'GET'
+      method: 'GET',
+      filters: [{
+        field: 'visibility',
+        op: '=',
+        value: true
+      }]
     }),
     fetchedDepotData = _useApiHook4.data,
     depotDataLoading = _useApiHook4.loading;
   React.useEffect(function () {
     if (orderId) {
-      setShouldPerformAction(true);
-      setPerformAction(true);
+      orderUpdate(true);
+      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
     }
-  }, [orderId]);
+  }, [orderId, liveRecalling]);
+  React.useEffect(function () {
+    if (apiCalling) {
+      orderUpdate(true);
+    } else {
+      orderUpdate(false);
+    }
+  }, [apiCalling]);
   React.useEffect(function () {
     if (paths.length > 1) {
       setOrderId(paths[1]);
     }
+    // for local
+    // if (paths.length >= 0) {
+    //   setOrderId(paths[0]);
+    // }
   }, [paths]);
   React.useEffect(function () {
     setLoading(staticDataLoading);
@@ -8133,8 +8544,20 @@ function OrderView() {
   React.useEffect(function () {
     setLoading(loading);
     if (fetchedData && fetchedData.data) {
+      var _requiredData$, _requiredData$2, _requiredData$3, _requiredData$4, _requiredData$5, _requiredData$6;
       var requiredData = fetchedData == null ? void 0 : fetchedData.data;
       setOrderDetails(requiredData[0]);
+      //@ts-ignore
+      setCUstomerId((_requiredData$ = requiredData[0]) == null ? void 0 : _requiredData$.customer_id);
+      setRouteId((_requiredData$2 = requiredData[0]) == null || (_requiredData$2 = _requiredData$2.order_routes) == null ? void 0 : _requiredData$2.route_id);
+      //@ts-ignore
+      setGsitOrderId((_requiredData$3 = requiredData[0]) == null ? void 0 : _requiredData$3.gsit_order_id);
+      //@ts-ignore
+      setOrderProductId((_requiredData$4 = requiredData[0]) == null ? void 0 : _requiredData$4.id);
+      setCustomerInfo({
+        recipient_name: (_requiredData$5 = requiredData[0]) == null || (_requiredData$5 = _requiredData$5.order_recipient) == null ? void 0 : _requiredData$5.recipient_name,
+        postcode: (_requiredData$6 = requiredData[0]) == null || (_requiredData$6 = _requiredData$6.order_recipient) == null ? void 0 : _requiredData$6.postcode
+      });
       setPrevOrderDetails(requiredData[0]);
     }
   }, [loading]);
@@ -8142,13 +8565,14 @@ function OrderView() {
     setLoading(statusDataLoading);
     if (fetchedStatusData && fetchedStatusData.data) {
       var requiredData = fetchedStatusData == null ? void 0 : fetchedStatusData.data;
-      if (requiredData.length > 0) {
+      if (requiredData) {
         setOrderStatus(requiredData);
-      } else {
-        setOrderStatus(null);
       }
     }
-  }, [statusDataLoading]);
+    return function () {
+      setOrderId(null);
+    };
+  }, [statusDataLoading, fetchedStatusData]);
   React.useEffect(function () {
     setLoading(depotDataLoading);
     if (fetchedDepotData && fetchedDepotData.data) {
@@ -8165,9 +8589,90 @@ function OrderView() {
         setDepotOptions([]);
       }
     }
+    return function () {
+      setOrderId(null);
+    };
   }, [depotDataLoading]);
+  // Order resources
+  var _useApiHook5 = dmsComponentLibrary.useApiHook({
+      endpoint: "/orders/" + orderId + "/order_resources/",
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedResourcesData = _useApiHook5.data,
+    setActions = _useApiHook5.setShouldPerformAction;
+  React.useEffect(function () {
+    if (orderId) {
+      setActions(true);
+    }
+  }, [orderId, setActions]);
+  React.useEffect(function () {
+    if (orderId) {
+      setOrderResources(fetchedResourcesData);
+    }
+    return function () {
+      setOrderId(null);
+    };
+  }, [fetchedResourcesData, orderResources, setOrderResources]);
+  // Toolbox resources
+  var _useApiHook6 = dmsComponentLibrary.useApiHook({
+      endpoint: "/orders/" + orderId + "/toolbox_resources/",
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedToolboxData = _useApiHook6.data,
+    setAction = _useApiHook6.setShouldPerformAction;
+  React.useEffect(function () {
+    if (orderId) {
+      setAction(true);
+    }
+  }, [orderId, setAction]);
+  React.useEffect(function () {
+    if (orderId) {
+      setOrderToolbox(fetchedToolboxData);
+    }
+    return function () {
+      setOrderId(undefined);
+    };
+  }, [fetchedToolboxData, orderToolbox, setOrderToolbox]);
+  React.useEffect(function () {
+    if (GsitCUstomerId != null && GsitCUstomerId.id) {
+      shouldFetch(true);
+    } else {
+      shouldFetch(false);
+    }
+  }, [GsitCUstomerId]);
+  React.useEffect(function () {
+    return function () {
+      setGsitCUstomerId(function (prev) {
+        return _extends({}, prev, {
+          id: undefined
+        });
+      });
+    };
+  }, []);
+  var _useApiHook7 = dmsComponentLibrary.useApiHook({
+      endpoint: "/return_locations/?customer_id=" + (GsitCUstomerId == null ? void 0 : GsitCUstomerId.id),
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedLocationData = _useApiHook7.data,
+    dataLoading = _useApiHook7.loading,
+    shouldFetch = _useApiHook7.setShouldPerformAction;
+  React.useEffect(function () {
+    if (fetchedLocationData && fetchedLocationData != null && fetchedLocationData.data) {
+      var _fetchedLocationData$;
+      var locationOptions = fetchedLocationData == null || (_fetchedLocationData$ = fetchedLocationData.data) == null ? void 0 : _fetchedLocationData$.map(function (item) {
+        return {
+          label: (item == null ? void 0 : item.location_name) + ', ' + (item == null ? void 0 : item.postcode),
+          value: item == null ? void 0 : item.token,
+          is_default: (item == null ? void 0 : item.is_default) === 'True' ? true : false
+        };
+      });
+      setLocationOptions(locationOptions);
+    }
+  }, [dataLoading]);
   var gsitId = orderDetails == null ? void 0 : orderDetails.gsit_order_id;
-  var systemLogsData = useSystemLogs();
   var _useOrderProductSyste = useOrderProductSystemLogs(),
     setSystemLogsEvents = _useOrderProductSyste[1];
   var fetchReminderData = /*#__PURE__*/function () {
@@ -8192,36 +8697,26 @@ function OrderView() {
     };
   }();
   React.useEffect(function () {
-    if (gsitId) {
+    if (gsitOrderId) {
       fetchReminderData();
-      console.log('Setting filters for gsitId:', gsitId);
     }
+    return function () {
+      setGsitOrderId(undefined);
+    };
   }, [gsitId]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DashBoardWrapper, null, React__default.createElement(RouterHeader, null), React__default.createElement("div", {
-    className: "Tableconatiner"
-  }, React__default.createElement(DetailsFilters, null), React__default.createElement(MainContainer$b, null, React__default.createElement(Section$1, null, React__default.createElement(GeneralHeader, null), React__default.createElement(NotifyContainer, null, React__default.createElement(dmsComponentLibrary.Alert, {
-    type: "error",
-    title: "Outstanding",
-    description: "",
-    showOkButton: false,
-    onClose: function onClose() {}
-  })), React__default.createElement(OrderDetails$1, null)), React__default.createElement(ProductsInfo, null), React__default.createElement(SplitLayout$1, null, React__default.createElement(NotesContainer, null, React__default.createElement(Notes, null)), React__default.createElement(TablesContainer, null, React__default.createElement(Order, null), React__default.createElement(SystemLogs, null))), React__default.createElement(OrderActions, null)))));
-}
-var Section$1 = /*#__PURE__*/styled__default.div(_templateObject$1Z || (_templateObject$1Z = /*#__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 = /*#__PURE__*/styled__default.section(_templateObject2$1o || (_templateObject2$1o = /*#__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__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n"])));
-var MainContainer$b = /*#__PURE__*/styled__default.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n"])));
-var SplitLayout$1 = /*#__PURE__*/styled__default.div(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
-var NotesContainer = /*#__PURE__*/styled__default.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
-var TablesContainer = /*#__PURE__*/styled__default.div(_templateObject7$b || (_templateObject7$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
-
-var _templateObject3$N, _templateObject5$j, _templateObject7$c, _templateObject8$7, _templateObject9$4, _templateObject10$3, _templateObject11$2, _templateObject14$2;
-var CoverPage = /*#__PURE__*/styled__default.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"])));
+  return React__default.createElement(MainContainer$b, null, React__default.createElement(Loader, null), React__default.createElement(GeneralHeader, null), React__default.createElement(OrderDetails$1, null), React__default.createElement(ProductsInfo, null), React__default.createElement(SplitLayout$1, null, React__default.createElement(NotesContainer, null, React__default.createElement(Notes, null)), React__default.createElement(TablesContainer, null, React__default.createElement(Order, null), React__default.createElement(Toolbox, null), React__default.createElement(SystemLogs, null), React__default.createElement(TomTomLogs, null))), React__default.createElement(OrderActions, null));
+}
+var MainContainer$b = /*#__PURE__*/styled__default.div(_templateObject$1Y || (_templateObject$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n"])));
+var SplitLayout$1 = /*#__PURE__*/styled__default.div(_templateObject2$1m || (_templateObject2$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
+var NotesContainer = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+var TablesContainer = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
+
+var _templateObject3$P, _templateObject5$j, _templateObject7$c, _templateObject8$8, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject14$2;
+var CoverPage = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__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__default.div(_templateObject5$j || (_templateObject5$j = /*#__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__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8e8a85;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n"])));
-var FilterRow = /*#__PURE__*/styled__default.div(_templateObject8$7 || (_templateObject8$7 = /*#__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__default.div(_templateObject9$4 || (_templateObject9$4 = /*#__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 FilterRow = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__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__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__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__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
 var LeftColumn = /*#__PURE__*/styled__default.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
 var ApplyButton = /*#__PURE__*/styled__default.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  cursor: pointer;\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"])));
@@ -8321,7 +8816,7 @@ var filtersReducerAtom = /*#__PURE__*/jotai.atom(function (get) {
   return set(filtersStateAtom, filterReducer(get(filtersStateAtom), action));
 });
 
-var _templateObject$1_;
+var _templateObject$1Z;
 function SelectionFilter() {
   var _useCustomerData = useCustomerData(),
     customers = _useCustomerData[0];
@@ -8547,7 +9042,7 @@ function SelectionFilter() {
     disabled: !isButtonEnabled
   }, "Apply"))));
 }
-var StyledAntSelect$5 = /*#__PURE__*/styled__default(antd.Select)(_templateObject$1_ || (_templateObject$1_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
+var StyledAntSelect$5 = /*#__PURE__*/styled__default(antd.Select)(_templateObject$1Z || (_templateObject$1Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    /* width: 22vw; */\n    border-radius: 22px;\n  }\n"])));
 
 function HeaderFilter() {
   var _useCustomerData = useCustomerData(),
@@ -8615,20 +9110,20 @@ function HeaderFilter() {
   return React__default.createElement(CoverPage, null, React__default.createElement(SelectionFilter, null));
 }
 
-var _templateObject$1$, _templateObject4$v, _templateObject5$k, _templateObject7$d, _templateObject8$8;
+var _templateObject$1_, _templateObject4$x, _templateObject5$k, _templateObject7$d, _templateObject8$9;
 //Left side
-var LeftSideConatiner = /*#__PURE__*/styled__default.div(_templateObject$1$ || (_templateObject$1$ = /*#__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: 2px;\n    border-radius: 20px;\n    border: 1px solid #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  }\n"])));
+var LeftSideConatiner = /*#__PURE__*/styled__default.div(_templateObject$1_ || (_templateObject$1_ = /*#__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: 2px;\n    border-radius: 20px;\n    border: 1px solid #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  }\n"])));
 //
-var StyledFiter = /*#__PURE__*/styled__default.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var StyledFiter = /*#__PURE__*/styled__default.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var StyledFIlterELements = /*#__PURE__*/styled__default.div(_templateObject5$k || (_templateObject5$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0;\n  gap: 10px;\n  align-items: center;\n"])));
 var Text$7 = /*#__PURE__*/styled__default.div(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #232d42;\n  font-style: normal;\n  line-height: 175%;\n  position: relative;\n  padding-right: 10px;\n  text-transform: uppercase;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 900;\n  /* &:after{\n    content: '';\n    width: 1px;\n    height: 100%;\n    background: rgba(58, 54, 48, 0.20);\n    position: absolute;\n    right: 0;\n    top: 0;\n  } */\n"])));
 // Right side filter
-var StyledTableFilter = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledTableFilter = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject2$1p;
-var StyledBulkItem = /*#__PURE__*/styled__default.div(_templateObject2$1p || (_templateObject2$1p = /*#__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$1n;
+var StyledBulkItem = /*#__PURE__*/styled__default.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 _templateObject$20, _templateObject2$1q;
+var _templateObject$1$, _templateObject2$1o;
 var SearchType = function SearchType() {
   var _useState = React.useState(''),
     searchText = _useState[0],
@@ -8643,8 +9138,8 @@ var SearchType = function SearchType() {
     onChange: handleInputChange
   }));
 };
-var Search = /*#__PURE__*/styled__default.div(_templateObject$20 || (_templateObject$20 = /*#__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__default.input(_templateObject2$1q || (_templateObject2$1q = /*#__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__default.div(_templateObject$1$ || (_templateObject$1$ = /*#__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__default.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"])));
 
 function DownloadIcon() {
   return React__default.createElement("svg", {
@@ -8664,7 +9159,7 @@ function DownloadIcon() {
   }));
 }
 
-var _templateObject$21, _templateObject2$1r, _templateObject3$O, _templateObject4$w, _templateObject5$l;
+var _templateObject$20, _templateObject2$1p, _templateObject3$Q, _templateObject4$y, _templateObject5$l;
 var RightFilters = function RightFilters() {
   var _useAtom = jotai.useAtom(countReducerAtom),
     dispatch = _useAtom[1];
@@ -8679,10 +9174,10 @@ var RightFilters = function RightFilters() {
     disabled: (selectedReturnOrder == null ? void 0 : selectedReturnOrder.length) === 0
   }, "Create Return"), React__default.createElement(StyledBulkItem, null, React__default.createElement(SearchType, null)), React__default.createElement(IconConatiner, null, React__default.createElement(Mid, null, React__default.createElement(IconText, null, "Export"), React__default.createElement(DownloadIcon, null))));
 };
-var Container$12 = /*#__PURE__*/styled__default.div(_templateObject$21 || (_templateObject$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
-var Mid = /*#__PURE__*/styled__default.div(_templateObject2$1r || (_templateObject2$1r = /*#__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 ButtonText = /*#__PURE__*/styled__default.button(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 15px;\n  background: #3a3630;\n  font-family: 'Lato';\n  cursor: pointer;\n  border: none;\n\n  &:disabled {\n    border-radius: 15px;\n    background: rgba(136, 128, 117, 0.35);\n    color: #888075;\n    cursor: not-allowed;\n  }\n"])));
-var IconConatiner = /*#__PURE__*/styled__default.div(_templateObject4$w || (_templateObject4$w = /*#__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 Container$12 = /*#__PURE__*/styled__default.div(_templateObject$20 || (_templateObject$20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
+var Mid = /*#__PURE__*/styled__default.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 ButtonText = /*#__PURE__*/styled__default.button(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n\n  display: flex;\n  padding: 7px 12px;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n  border-radius: 15px;\n  background: #3a3630;\n  font-family: 'Lato';\n  cursor: pointer;\n  border: none;\n\n  &:disabled {\n    border-radius: 15px;\n    background: rgba(136, 128, 117, 0.35);\n    color: #888075;\n    cursor: not-allowed;\n  }\n"])));
+var IconConatiner = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__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__default.div(_templateObject5$l || (_templateObject5$l = /*#__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() {
@@ -8691,12 +9186,12 @@ var ReturnFilter = function ReturnFilter() {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledFiter, null, React__default.createElement(Text$7, null, " ", clientName), React__default.createElement(StyledFIlterELements, null, React__default.createElement(StyledTableFilter, null)), React__default.createElement(RightFilters, null)));
 };
 
-var _templateObject$22, _templateObject2$1s, _templateObject3$P, _templateObject4$x, _templateObject34;
-var ColumStyle = /*#__PURE__*/styled__default.div(_templateObject$22 || (_templateObject$22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 67px;\n  align-items: center;\n  gap: 7px;\n"])));
-var GreyBox = /*#__PURE__*/styled__default.div(_templateObject2$1s || (_templateObject2$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 3px 12px;\n  align-items: flex-start;\n  gap: 24px;\n  border-radius: 6px;\n  background: rgba(153, 153, 153, 0.1);\n"])));
+var _templateObject$21, _templateObject2$1q, _templateObject3$R, _templateObject4$z, _templateObject34;
+var ColumStyle = /*#__PURE__*/styled__default.div(_templateObject$21 || (_templateObject$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 67px;\n  align-items: center;\n  gap: 7px;\n"])));
+var GreyBox = /*#__PURE__*/styled__default.div(_templateObject2$1q || (_templateObject2$1q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 3px 12px;\n  align-items: flex-start;\n  gap: 24px;\n  border-radius: 6px;\n  background: rgba(153, 153, 153, 0.1);\n"])));
 // Styled components
-var StyledTableWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$P || (_templateObject3$P = /*#__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__default.table(_templateObject4$x || (_templateObject4$x = /*#__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 StyledTableWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__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$3 = /*#__PURE__*/styled__default.table(_templateObject4$z || (_templateObject4$z = /*#__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__default.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 
 var PrinterIcon = function PrinterIcon() {
@@ -8865,7 +9360,7 @@ var optionsForReturnPrint = [{
   label: 'Print Return Labels'
 }];
 
-var _templateObject$23, _templateObject2$1t;
+var _templateObject$22, _templateObject2$1r;
 // import { PrintIconMap } from '../utils';
 // import { optionsPrint } from '../fakeData';
 // import { PrintData } from '../interface';
@@ -8880,8 +9375,8 @@ var PrintDropDownReturn = function PrintDropDownReturn() {
     }, IconComponent && React__default.createElement(IconComponent, null), " ", item.label);
   }));
 };
-var OptionsList = /*#__PURE__*/styled__default.ul(_templateObject$23 || (_templateObject$23 = /*#__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: 26px;\n  right: 0;\n  z-index: 99;\n  min-width: 194px;\n"])));
-var OptionsListLi = /*#__PURE__*/styled__default.li(_templateObject2$1t || (_templateObject2$1t = /*#__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 OptionsList = /*#__PURE__*/styled__default.ul(_templateObject$22 || (_templateObject$22 = /*#__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: 26px;\n  right: 0;\n  z-index: 99;\n  min-width: 194px;\n"])));
+var OptionsListLi = /*#__PURE__*/styled__default.li(_templateObject2$1r || (_templateObject2$1r = /*#__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 ReturnOrderTable = function ReturnOrderTable() {
   var _useAtom = jotai.useAtom(filtersReducerAtom),
@@ -9067,7 +9562,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
     var mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTableWrapper, null, React__default.createElement(StyledTable, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTableWrapper, null, React__default.createElement(StyledTable$2, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React__default.createElement(dmsComponentLibrary.Checkbox, {
     checked: selectAll,
@@ -9127,12 +9622,12 @@ var ReturnOrderTable = function ReturnOrderTable() {
   })))));
 };
 
-var _templateObject$24, _templateObject2$1u, _templateObject3$Q, _templateObject4$y;
+var _templateObject$23, _templateObject2$1s, _templateObject3$S, _templateObject4$A;
 var DefetcDetails = function DefetcDetails() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
   };
-  return React__default.createElement(Container$13, null, React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
+  return React__default.createElement(Container$13, null, React__default.createElement(Flex$4, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "What is the defect"
   }), React__default.createElement(StyledAntSelect$6, {
     options: TaskType,
@@ -9146,14 +9641,14 @@ var DefetcDetails = function DefetcDetails() {
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$4, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Where is the primary defect located?"
   }), React__default.createElement(StyledAntSelect$6, {
     options: TaskType,
     placeholder: "Select located",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$4, null, React__default.createElement(LabelWrapper, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Where is the secondary defect located?"
   }), React__default.createElement(StyledAntSelect$6, {
     options: TaskType,
@@ -9169,12 +9664,12 @@ var DefetcDetails = function DefetcDetails() {
     selectWrapperClass: "rounded"
   }))));
 };
-var StyledAntSelect$6 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$13 = /*#__PURE__*/styled__default.div(_templateObject2$1u || (_templateObject2$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
-var Flex$5 = /*#__PURE__*/styled__default.div(_templateObject3$Q || (_templateObject3$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
-var LabelWrapper = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$6 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$23 || (_templateObject$23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$13 = /*#__PURE__*/styled__default.div(_templateObject2$1s || (_templateObject2$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
+var Flex$4 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var LabelWrapper = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 
-var _templateObject$25;
+var _templateObject$24;
 var RepackProduct = function RepackProduct() {
   var options = [{
     value: 'bjsCouriers',
@@ -9234,9 +9729,9 @@ var RepackProduct = function RepackProduct() {
     }
   })));
 };
-var GLobalPopupContent$3 = /*#__PURE__*/styled__default.div(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var GLobalPopupContent$3 = /*#__PURE__*/styled__default.div(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$26, _templateObject2$1v, _templateObject3$R, _templateObject4$z, _templateObject5$m, _templateObject6$e;
+var _templateObject$25, _templateObject2$1t, _templateObject3$T, _templateObject4$B, _templateObject5$m, _templateObject6$e;
 var RepackDetails = function RepackDetails() {
   var _useState = React.useState(false),
     isAdditionalBoxChecked = _useState[0],
@@ -9247,28 +9742,28 @@ var RepackDetails = function RepackDetails() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$14, null, React__default.createElement(Flex$6, null, React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$14, null, React__default.createElement(Flex$5, null, React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Who repacked it?"
   }), React__default.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Packaging Type"
   }), React__default.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select located",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$5, null, React__default.createElement(LabelWrapper$1, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Repack Images"
   }), React__default.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  })))), React__default.createElement(Flex$6, null, React__default.createElement(CheckboxContainer$1, null, React__default.createElement(antd.Checkbox, {
+  })))), React__default.createElement(Flex$5, null, React__default.createElement(CheckboxContainer$1, null, React__default.createElement(antd.Checkbox, {
     onChange: function onChange(e) {
       return setIsAdditionalBoxChecked(e.target.checked);
     }
@@ -9283,19 +9778,19 @@ var RepackDetails = function RepackDetails() {
     }
   }, "Have any other boxes repacked into this one?"), isRepacked && React__default.createElement(RepackProduct, null)))));
 };
-var StyledAntSelect$7 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var CheckboxContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$1v || (_templateObject2$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 10px;\n"])));
-var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  margin-left: 24px; // Indent input field to align with the checkbox\n"])));
-var Container$14 = /*#__PURE__*/styled__default.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
-var Flex$6 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var StyledAntSelect$7 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var CheckboxContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$1t || (_templateObject2$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 10px;\n"])));
+var InputWrapper = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  margin-left: 24px; // Indent input field to align with the checkbox\n"])));
+var Container$14 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
+var Flex$5 = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
 var LabelWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 
-var _templateObject$27, _templateObject2$1w, _templateObject3$S, _templateObject4$A;
+var _templateObject$26, _templateObject2$1u, _templateObject3$U, _templateObject4$C;
 var OtherDamage = function OtherDamage() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
   };
-  return React__default.createElement(Container$15, null, React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
+  return React__default.createElement(Container$15, null, React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "What is the primary defect?"
   }), React__default.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9309,7 +9804,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "What is the secondary defect?"
   }), React__default.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9323,7 +9818,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Where is the tertiary defect located?\n"
   }), React__default.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9337,7 +9832,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), React__default.createElement(Flex$6, null, React__default.createElement(LabelWrapper$2, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "What is the size of the defect?(cm)"
   }), React__default.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9346,12 +9841,12 @@ var OtherDamage = function OtherDamage() {
     selectWrapperClass: "rounded"
   }))));
 };
-var StyledAntSelect$8 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$15 = /*#__PURE__*/styled__default.div(_templateObject2$1w || (_templateObject2$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
-var Flex$7 = /*#__PURE__*/styled__default.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
-var LabelWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$8 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$15 = /*#__PURE__*/styled__default.div(_templateObject2$1u || (_templateObject2$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  border: 1px solid #ccc;\n  border-radius: 15px;\n  padding: 10px;\n  white-space: nowrap;\n"])));
+var Flex$6 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var LabelWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 
-var _templateObject$28, _templateObject2$1x, _templateObject3$T, _templateObject4$B, _templateObject5$n;
+var _templateObject$27, _templateObject2$1v, _templateObject3$V, _templateObject4$D, _templateObject5$n;
 var AddDefect = function AddDefect() {
   var _useState = React.useState({
       actionDuring: '',
@@ -9378,7 +9873,7 @@ var AddDefect = function AddDefect() {
       });
     });
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$16, null, React__default.createElement(Flex$8, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$16, null, React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Does the packaging have any damage?"
   }), React__default.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9391,7 +9886,7 @@ var AddDefect = function AddDefect() {
     return React__default.createElement(DefetcDetails, {
       key: index
     });
-  })), React__default.createElement(Container$16, null, React__default.createElement(Flex$8, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
+  })), React__default.createElement(Container$16, null, React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Has the product been checked?"
   }), React__default.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9405,7 +9900,7 @@ var AddDefect = function AddDefect() {
     placeholder: "Select",
     onChange: handleChange('productDamage'),
     selectWrapperClass: "rounded"
-  }))), state.productDamage === 'yes' && state.productChecked === 'yes' && React__default.createElement(OtherDamage, null)), React__default.createElement(Container$16, null, React__default.createElement(Flex$8, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
+  }))), state.productDamage === 'yes' && state.productChecked === 'yes' && React__default.createElement(OtherDamage, null)), React__default.createElement(Container$16, null, React__default.createElement(Flex$7, null, React__default.createElement(LabelWrapper$3, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Has the product been repacked?"
   }), React__default.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9414,18 +9909,18 @@ var AddDefect = function AddDefect() {
     selectWrapperClass: "rounded"
   }))), state.productRepacked === 'yes' && React__default.createElement(RepackDetails, null)));
 };
-var StyledAntSelect$9 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$16 = /*#__PURE__*/styled__default.div(_templateObject2$1x || (_templateObject2$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n  border: 1px solid #e6e6e6;\n  border-radius: 15px;\n  padding: 10px;\n"])));
-var Flex$8 = /*#__PURE__*/styled__default.div(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  /* justify-content: space-between; */\n"])));
-var LabelWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
+var StyledAntSelect$9 = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$16 = /*#__PURE__*/styled__default.div(_templateObject2$1v || (_templateObject2$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n  border: 1px solid #e6e6e6;\n  border-radius: 15px;\n  padding: 10px;\n"])));
+var Flex$7 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  /* justify-content: space-between; */\n"])));
+var LabelWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
 var AddButton = /*#__PURE__*/styled__default(dmsComponentLibrary.Button)(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  border-radius: 30px;\n"])));
 
-var _templateObject$29, _templateObject2$1y, _templateObject3$U, _templateObject4$C;
+var _templateObject$28, _templateObject2$1w, _templateObject3$W, _templateObject4$E;
 var QCLogs = function QCLogs() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
   };
-  return React__default.createElement(Container$17, null, React__default.createElement(Flex$9, null, React__default.createElement(LabelWrapper$4, null, React__default.createElement(dmsComponentLibrary.Label, {
+  return React__default.createElement(Container$17, null, React__default.createElement(Flex$8, null, React__default.createElement(LabelWrapper$4, null, React__default.createElement(dmsComponentLibrary.Label, {
     label: "Action During"
   }), React__default.createElement(StyledAntSelect$a, {
     options: TaskType,
@@ -9441,12 +9936,12 @@ var QCLogs = function QCLogs() {
     selectWrapperClass: "rounded"
   }))), React__default.createElement(AddDefect, null));
 };
-var StyledAntSelect$a = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$17 = /*#__PURE__*/styled__default.div(_templateObject2$1y || (_templateObject2$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
-var Flex$9 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
-var LabelWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
+var StyledAntSelect$a = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$17 = /*#__PURE__*/styled__default.div(_templateObject2$1w || (_templateObject2$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
+var Flex$8 = /*#__PURE__*/styled__default.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
+var LabelWrapper$4 = /*#__PURE__*/styled__default.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
 
-var _templateObject$2a, _templateObject2$1z, _templateObject3$V, _templateObject4$D, _templateObject5$o;
+var _templateObject$29, _templateObject2$1x, _templateObject3$X, _templateObject4$F, _templateObject5$o;
 function UpdateProduct() {
   var _orderStaticData$coll, _orderStaticData$orde, _orderStaticData$retu, _orderStaticData$orde2;
   var _useState = React.useState(),
@@ -9543,13 +10038,13 @@ function UpdateProduct() {
     selectWrapperClass: "rounded"
   }))));
 }
-var CollectionBox = /*#__PURE__*/styled__default.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
-var ReturnBox = /*#__PURE__*/styled__default.div(_templateObject2$1z || (_templateObject2$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  margin-top: 32px;\n  justify-content: space-between;\n"])));
-var Container$18 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var CollectionBox = /*#__PURE__*/styled__default.div(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
+var ReturnBox = /*#__PURE__*/styled__default.div(_templateObject2$1x || (_templateObject2$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  margin-top: 32px;\n  justify-content: space-between;\n"])));
+var Container$18 = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelWrapper$5 = /*#__PURE__*/styled__default.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var StyledAntSelect$b = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2b, _templateObject2$1A, _templateObject3$W;
+var _templateObject$2a, _templateObject2$1y, _templateObject3$Y;
 function UnReceiveProduct() {
   var _orderStaticData$unre;
   var _useRecieveOrderProdu = useRecieveOrderProducts(),
@@ -9597,11 +10092,11 @@ function UnReceiveProduct() {
     onNotesChange: handleNotesChange
   })));
 }
-var Container$19 = /*#__PURE__*/styled__default.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelWrapper$6 = /*#__PURE__*/styled__default.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var StyledAntSelect$c = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$19 = /*#__PURE__*/styled__default.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelWrapper$6 = /*#__PURE__*/styled__default.div(_templateObject2$1y || (_templateObject2$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$c = /*#__PURE__*/styled__default(dmsComponentLibrary.AntSelect)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2c, _templateObject2$1B;
+var _templateObject$2b, _templateObject2$1z;
 var ProductAction = function ProductAction() {
   var _useAtom = jotai.useAtom(selectedTabKeyAtom),
     setSelectedTabKey = _useAtom[1];
@@ -9626,10 +10121,10 @@ var ProductAction = function ProductAction() {
     }]
   }))));
 };
-var GLobalPopupContent$4 = /*#__PURE__*/styled__default.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$1a = /*#__PURE__*/styled__default.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 50vh;\n  padding-bottom: 30px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 20px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #edebe8;\n  padding: 15px;\n  overflow-y: scroll;\n  .ant-tabs {\n    width: 100%;\n  }\n  .ant-tabs-tab-active {\n    .ant-tabs-tab-btn {\n      color: #3a3630 !important;\n      font-family: 'Lato', sans-serif;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n    }\n  }\n  .ant-tabs-ink-bar {\n    background: #feba30;\n  }\n"])));
+var GLobalPopupContent$4 = /*#__PURE__*/styled__default.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$1a = /*#__PURE__*/styled__default.div(_templateObject2$1z || (_templateObject2$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  height: 50vh;\n  padding-bottom: 30px;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 20px;\n  align-self: stretch;\n  border-radius: 6px;\n  border: 1px solid #edebe8;\n  padding: 15px;\n  overflow-y: scroll;\n  .ant-tabs {\n    width: 100%;\n  }\n  .ant-tabs-tab-active {\n    .ant-tabs-tab-btn {\n      color: #3a3630 !important;\n      font-family: 'Lato', sans-serif;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n    }\n  }\n  .ant-tabs-ink-bar {\n    background: #feba30;\n  }\n"])));
 
-var _templateObject$2d;
+var _templateObject$2c;
 var LogsTable = function LogsTable() {
   var options = [{
     value: 'bjsCouriers',
@@ -9704,9 +10199,9 @@ var LogsTable = function LogsTable() {
     }
   })));
 };
-var GlobalPopupContent = /*#__PURE__*/styled__default.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var GlobalPopupContent = /*#__PURE__*/styled__default.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2e, _templateObject2$1C;
+var _templateObject$2d, _templateObject2$1A;
 var DefectsModal = function DefectsModal() {
   var options = [{
     value: 'bjsCouriers',
@@ -9758,10 +10253,10 @@ var DefectsModal = function DefectsModal() {
     }
   }))));
 };
-var StyledConatiner = /*#__PURE__*/styled__default.div(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* tex: nowrap; */\n"])));
-var GLobalPopupContent$5 = /*#__PURE__*/styled__default.div(_templateObject2$1C || (_templateObject2$1C = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledConatiner = /*#__PURE__*/styled__default.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* tex: nowrap; */\n"])));
+var GLobalPopupContent$5 = /*#__PURE__*/styled__default.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2f;
+var _templateObject$2e;
 var repackModal = function repackModal() {
   var columns = [{
     key: 'packaging_type',
@@ -9791,10 +10286,10 @@ var repackModal = function repackModal() {
     }
   }))));
 };
-var StyledConatiner$1 = /*#__PURE__*/styled__default.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* text-wrap: nowrap; */\n"])));
+var StyledConatiner$1 = /*#__PURE__*/styled__default.div(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* text-wrap: nowrap; */\n"])));
 
-var _templateObject$2g, _templateObject2$1D, _templateObject3$X;
-var _excluded$2 = ["id"];
+var _templateObject$2f, _templateObject2$1B, _templateObject3$Z;
+var _excluded$3 = ["id"];
 var CreateReturnModal = function CreateReturnModal() {
   var _useSelectedConfirmLo = useSelectedConfirmLoc(),
     selectedlocation = _useSelectedConfirmLo[0],
@@ -9837,7 +10332,7 @@ var CreateReturnModal = function CreateReturnModal() {
       });
       if (matchedItems.length > 0) {
         var finalPayload = matchedItems == null ? void 0 : matchedItems.map(function (_ref) {
-          var rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+          var rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
           return rest;
         });
         setNew(finalPayload);
@@ -9875,9 +10370,9 @@ var CreateReturnModal = function CreateReturnModal() {
     }, displayValueOrNA(returnLoc == null ? void 0 : returnLoc.new_location)));
   })))));
 };
-var StyledText$1 = /*#__PURE__*/styled__default.div(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8d8f90;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n"])));
-var Container$1b = /*#__PURE__*/styled__default.div(_templateObject2$1D || (_templateObject2$1D = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Wrapper$l = /*#__PURE__*/styled__default.div(_templateObject3$X || (_templateObject3$X = /*#__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  align-self: stretch;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n"])));
+var StyledText$1 = /*#__PURE__*/styled__default.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8d8f90;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n"])));
+var Container$1b = /*#__PURE__*/styled__default.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Wrapper$l = /*#__PURE__*/styled__default.div(_templateObject3$Z || (_templateObject3$Z = /*#__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  align-self: stretch;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n"])));
 
 var ModalManager = function ModalManager() {
   var _useAtom = jotai.useAtom(countReducerAtom),
@@ -9896,7 +10391,7 @@ var ModalManager = function ModalManager() {
   var _useUpdateOrderProduc = useUpdateOrderProducts(),
     updateOrderProduct = _useUpdateOrderProduc[0],
     setUpdateOrderProduct = _useUpdateOrderProduc[1];
-  var _useAtom2 = jotai.useAtom(selectedProductIdAtom),
+  var _useAtom2 = jotai.useAtom(letselectedProductIdAtom),
     selectedProductId = _useAtom2[0];
   var _useAtom3 = jotai.useAtom(selectedTabKeyAtom),
     selectedTab = _useAtom3[0];
@@ -10220,14 +10715,14 @@ var ModalManager = function ModalManager() {
   }));
 };
 
-var _templateObject$2h, _templateObject2$1E;
+var _templateObject$2g, _templateObject2$1C;
 var ReturnTable = function ReturnTable() {
-  return React__default.createElement("div", null, React__default.createElement(DashBoardWrapper$1, null, React__default.createElement(RouterHeader, null), React__default.createElement("div", {
+  return React__default.createElement("div", null, React__default.createElement(DashBoardWrapper, null, React__default.createElement("div", {
     className: "Tableconatiner"
   }, React__default.createElement(HeaderFilter, null), React__default.createElement(Container$1c, null, React__default.createElement(ReturnFilter, null), React__default.createElement(ReturnOrderTable, null)))), React__default.createElement(ModalManager, null));
 };
-var Container$1c = /*#__PURE__*/styled__default.div(_templateObject$2h || (_templateObject$2h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$1 = /*#__PURE__*/styled__default.section(_templateObject2$1E || (_templateObject2$1E = /*#__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 Container$1c = /*#__PURE__*/styled__default.div(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var DashBoardWrapper = /*#__PURE__*/styled__default.section(_templateObject2$1C || (_templateObject2$1C = /*#__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__default.createElement("svg", {
@@ -10355,7 +10850,7 @@ var OrderTable = function OrderTable(_ref) {
   console.log(id, 'idid');
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTableWrapper, {
     id: "tableScrolling"
-  }, React__default.createElement(StyledTable, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
+  }, React__default.createElement(StyledTable$2, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React__default.createElement(dmsComponentLibrary.Checkbox, {
     checked: selectAll,
@@ -10450,7 +10945,7 @@ var OrderTable = function OrderTable(_ref) {
   })))));
 };
 
-var _templateObject$2i, _templateObject2$1F, _templateObject3$Y, _templateObject4$E;
+var _templateObject$2h, _templateObject2$1D, _templateObject3$_, _templateObject4$G;
 var TableFilters = function TableFilters() {
   return React__default.createElement(Container$1d, null, React__default.createElement(StyledBulkItem, null, React__default.createElement(SearchType, null)), React__default.createElement(IconConatiner$1, null, React__default.createElement(Mid$1, null, React__default.createElement(IconText$1, null, "Export"), React__default.createElement(DownloadIcon, null))));
   //   return (
@@ -10466,8 +10961,8 @@ var TableFilters = function TableFilters() {
   //     // </StyledBulkFilterCover>
   //   );
 };
-var Container$1d = /*#__PURE__*/styled__default.div(_templateObject$2i || (_templateObject$2i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
-var Mid$1 = /*#__PURE__*/styled__default.div(_templateObject2$1F || (_templateObject2$1F = /*#__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$1d = /*#__PURE__*/styled__default.div(_templateObject$2h || (_templateObject$2h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* align-items: flex-start; */\n  gap: 16px;\n  align-items: center;\n"])));
+var Mid$1 = /*#__PURE__*/styled__default.div(_templateObject2$1D || (_templateObject2$1D = /*#__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;
@@ -10485,8 +10980,8 @@ var Mid$1 = /*#__PURE__*/styled__default.div(_templateObject2$1F || (_templateOb
 //   font-weight: 600;
 //   line-height: 20px;
 // `;
-var IconConatiner$1 = /*#__PURE__*/styled__default.div(_templateObject3$Y || (_templateObject3$Y = /*#__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__default.div(_templateObject4$E || (_templateObject4$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 IconConatiner$1 = /*#__PURE__*/styled__default.div(_templateObject3$_ || (_templateObject3$_ = /*#__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__default.div(_templateObject4$G || (_templateObject4$G = /*#__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__default.createElement("svg", {
@@ -10671,7 +11166,7 @@ var AssigneIcon = function AssigneIcon() {
   }))));
 };
 
-var _templateObject$2j, _templateObject2$1G;
+var _templateObject$2i, _templateObject2$1E;
 var ReturnOrderFilter = function ReturnOrderFilter() {
   var _useAtom = jotai.useAtom(filtersReducerAtom$1),
     dispatch = _useAtom[1];
@@ -10786,11 +11281,11 @@ var ReturnOrderFilter = function ReturnOrderFilter() {
     className: "dateiconcontainer"
   }, React__default.createElement(AssigneIcon, null))))), React__default.createElement(TableFilters, null)));
 };
-var StyledDatePicker = /*#__PURE__*/styled__default.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-datepicker {\n    border: none;\n  }\n"])));
+var StyledDatePicker = /*#__PURE__*/styled__default.div(_templateObject$2i || (_templateObject$2i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-datepicker {\n    border: none;\n  }\n"])));
 // const DropdownContainer = styled.div``;
-var StyledAntSelect$d = /*#__PURE__*/styled__default.div(_templateObject2$1G || (_templateObject2$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-select {\n    border: none;\n    width: 80px;\n  }\n  .ant-select-selector {\n    border: 1px solid #ffffff !important;\n  }\n  :where(.css-dev-only-do-not-override-m4timi).ant-select-single:not(.ant-select-customize-input)\n    .ant-select-selector {\n    padding: 0 5px;\n  }\n\n  :where(.css-dev-only-do-not-override-m4timi).ant-select-outlined:not(.ant-select-customize-input)\n    .ant-select-selector {\n    border: none;\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    left: 359px;\n    position: absolute;\n    border-radius: 18px;\n    background: #fff;\n    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);\n    top: 16px;\n  }\n"])));
+var StyledAntSelect$d = /*#__PURE__*/styled__default.div(_templateObject2$1E || (_templateObject2$1E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-select {\n    border: none;\n    width: 80px;\n  }\n  .ant-select-selector {\n    border: 1px solid #ffffff !important;\n  }\n  :where(.css-dev-only-do-not-override-m4timi).ant-select-single:not(.ant-select-customize-input)\n    .ant-select-selector {\n    padding: 0 5px;\n  }\n\n  :where(.css-dev-only-do-not-override-m4timi).ant-select-outlined:not(.ant-select-customize-input)\n    .ant-select-selector {\n    border: none;\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    left: 359px;\n    position: absolute;\n    border-radius: 18px;\n    background: #fff;\n    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);\n    top: 16px;\n  }\n"])));
 
-var _templateObject$2k, _templateObject2$1H;
+var _templateObject$2j, _templateObject2$1F;
 var ReturnAfterTable = function ReturnAfterTable() {
   var _useReturnAfterOrderD = useReturnAfterOrderData(),
     setReturnOrderData = _useReturnAfterOrderD[1];
@@ -10812,12 +11307,12 @@ var ReturnAfterTable = function ReturnAfterTable() {
       setReturnOrderData(fetchedReturnOrderData == null ? void 0 : fetchedReturnOrderData.data);
     }
   }, [fetchedReturnOrderData, staticDataLoading]);
-  return React__default.createElement("div", null, React__default.createElement(DashBoardWrapper$2, null, React__default.createElement(RouterHeader, null), React__default.createElement("div", {
+  return React__default.createElement("div", null, React__default.createElement(DashBoardWrapper$1, null, React__default.createElement("div", {
     className: "Tableconatiner"
   }, React__default.createElement(HeaderFilter, null), React__default.createElement(Container$1e, null, React__default.createElement(ReturnOrderFilter, null), React__default.createElement(OrderTable, null)))));
 };
-var Container$1e = /*#__PURE__*/styled__default.div(_templateObject$2k || (_templateObject$2k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -30px;\n"])));
-var DashBoardWrapper$2 = /*#__PURE__*/styled__default.section(_templateObject2$1H || (_templateObject2$1H = /*#__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 Container$1e = /*#__PURE__*/styled__default.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -30px;\n"])));
+var DashBoardWrapper$1 = /*#__PURE__*/styled__default.section(_templateObject2$1F || (_templateObject2$1F = /*#__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();
@@ -10846,7 +11341,7 @@ var BulkFilter = function BulkFilter() {
   );
 };
 
-var _excluded$3 = ["count"];
+var _excluded$4 = ["count"];
 // import { useAtom } from 'jotai';
 var Filters = function Filters() {
   var _useRoutesTable = useRoutesTable(),
@@ -10872,7 +11367,7 @@ var Filters = function Filters() {
       if (paginationData !== null) {
         var _JSON$parse = JSON.parse(paginationData),
           count = _JSON$parse.count,
-          rest = _objectWithoutPropertiesLoose(_JSON$parse, _excluded$3);
+          rest = _objectWithoutPropertiesLoose(_JSON$parse, _excluded$4);
         setPaginationObject(rest);
         setCount(count);
       } else {
@@ -10914,7 +11409,7 @@ var ReturnTable$1 = function ReturnTable(_ref) {
   }, [staticDataLoading, fetchedStaticData]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(StyledTableWrapper$1, {
     id: "tableScrolling"
-  }, React__default.createElement(StyledTable$1, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", null, "Trading Name"), React__default.createElement("th", null, "Client"), React__default.createElement("th", null, "Orders"), React__default.createElement("th", null, "Products"), React__default.createElement("th", null, "RTS"), React__default.createElement("th", null, "Pending"), React__default.createElement("th", null, "Dispose"), React__default.createElement("th", null, "Re-allocate"), React__default.createElement("th", null, "Re-Del"), React__default.createElement("th", null, "Recycle"), React__default.createElement("th", null, "Unknown"))), React__default.createElement("tbody", null, loadingskeleton ? React__default.createElement("tr", null, React__default.createElement("td", {
+  }, React__default.createElement(StyledTable$3, null, React__default.createElement("thead", null, React__default.createElement("tr", null, React__default.createElement("th", null, "Trading Name"), React__default.createElement("th", null, "Client"), React__default.createElement("th", null, "Orders"), React__default.createElement("th", null, "Products"), React__default.createElement("th", null, "RTS"), React__default.createElement("th", null, "Pending"), React__default.createElement("th", null, "Dispose"), React__default.createElement("th", null, "Re-allocate"), React__default.createElement("th", null, "Re-Del"), React__default.createElement("th", null, "Recycle"), React__default.createElement("th", null, "Unknown"))), React__default.createElement("tbody", null, loadingskeleton ? React__default.createElement("tr", null, React__default.createElement("td", {
     colSpan: 9
   }, React__default.createElement(antd.Skeleton, {
     active: true
@@ -10938,7 +11433,7 @@ var ReturnTable$1 = function ReturnTable(_ref) {
   })))));
 };
 
-var _templateObject$2l, _templateObject2$1I, _templateObject3$Z;
+var _templateObject$2k, _templateObject2$1G, _templateObject3$$;
 // import Loader from '../loader/Loader';
 // interface ApiResponse {
 //   message: string;
@@ -10981,15 +11476,52 @@ function ReturnMainTable() {
       setClientData(result);
     }
   }, [staticDataLoading]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DashBoardWrapper$3, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(DashBoardWrapper$2, {
     className: " " + (isScrolled ? 'stickyTableHead' : '')
-  }, React__default.createElement(RouterHeader, null), React__default.createElement("div", {
+  }, React__default.createElement("div", {
     className: "Tableconatiner"
   }, React__default.createElement(HeaderFilter, null), React__default.createElement(Container$1f, null, React__default.createElement(Row$7, null, React__default.createElement(Text$7, null, "Client Return"), selectedClient ? React__default.createElement(ReturnFilter, null) : React__default.createElement(Filters, null)), React__default.createElement(ReturnTable$1, null)))));
 }
-var Row$7 = /*#__PURE__*/styled__default.div(_templateObject$2l || (_templateObject$2l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var Container$1f = /*#__PURE__*/styled__default.div(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$3 = /*#__PURE__*/styled__default.section(_templateObject3$Z || (_templateObject3$Z = /*#__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$7 = /*#__PURE__*/styled__default.div(_templateObject$2k || (_templateObject$2k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Container$1f = /*#__PURE__*/styled__default.div(_templateObject2$1G || (_templateObject2$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var DashBoardWrapper$2 = /*#__PURE__*/styled__default.section(_templateObject3$$ || (_templateObject3$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+
+var _templateObject$2l, _templateObject2$1H;
+var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject$2l || (_templateObject$2l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 20px;\n  gap: 10px;\n  border-radius: 0px 0px 30px 30px;\n  background: #313130;\n  height: 151px;\n  background: url(./assets/bgBlack.png) no-repeat;\n    background-size: cover;\n    background-color: #000000d9;\n"])));
+var StyledFlex = /*#__PURE__*/styled__default.div(_templateObject2$1H || (_templateObject2$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+
+var _templateObject$2m;
+var HeaderTitle = function HeaderTitle(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Title$7, null, props.title));
+};
+var Title$7 = /*#__PURE__*/styled__default.h2(_templateObject$2m || (_templateObject$2m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px;\n  padding: 0px;\n  color: #fff;\n  font-size: 26px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 36px;\n  text-transform: uppercase;\n  margin-bottom: 8px;\n"])));
+
+var _templateObject$2n, _templateObject2$1I;
+function Breadcrumb(props) {
+  return React__default.createElement(BreadcrumbContainer, null, React__default.createElement(BreadcrumbList, null, props.title || ''), React__default.createElement(BreadcrumbList, null, props.subtitle || ''), props.subPart && React__default.createElement(React__default.Fragment, null, React__default.createElement(BreadcrumbList, null, props.subPart)));
+}
+var BreadcrumbContainer = /*#__PURE__*/styled__default.div(_templateObject$2n || (_templateObject$2n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var BreadcrumbList = /*#__PURE__*/styled__default.span(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #edebe8;\n  font-family: 'Open Sans', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
+
+var RouterHeader = function RouterHeader(_ref) {
+  var _ref$breadcrumbTitle = _ref.breadcrumbTitle,
+    breadcrumbTitle = _ref$breadcrumbTitle === void 0 ? 'Clients >' : _ref$breadcrumbTitle,
+    _ref$breadcrumbSubtit = _ref.breadcrumbSubtitle,
+    breadcrumbSubtitle = _ref$breadcrumbSubtit === void 0 ? ' Return' : _ref$breadcrumbSubtit,
+    breadcrumbSubPart = _ref.breadcrumbSubPart;
+  // const [, dispatch] = useAtom(filtersReducerAtom);
+  // const [today, setToday] = usedate();
+  // const maxDate = new Date();
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(HeaderWrapper, {
+    className: "headerWrap"
+  }, React__default.createElement(StyledFlex, null, React__default.createElement("div", null, React__default.createElement(HeaderTitle, {
+    title: 'Return'
+  }), React__default.createElement(Breadcrumb, {
+    title: breadcrumbTitle,
+    subtitle: breadcrumbSubtitle,
+    subPart: breadcrumbSubPart
+  })))));
+};
 
 function ReturnClient() {
   var _selectedClientString;
@@ -11018,7 +11550,7 @@ function ReturnClient() {
       navigate("filter/" + _selectedClientString2);
     }
   }, [selectedClient]);
-  return React__default.createElement(React.Suspense, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(RouterHeader, null), React__default.createElement(React.Suspense, {
     fallback: React__default.createElement(LoadingMessage, null)
   }, React__default.createElement(reactRouterDom.Routes, null, React__default.createElement(reactRouterDom.Route, {
     path: "",
@@ -11032,7 +11564,7 @@ function ReturnClient() {
   }), React__default.createElement(reactRouterDom.Route, {
     path: "filter/:clientName",
     element: React__default.createElement(ReturnTable, null)
-  })));
+  }))));
 }
 
 exports.default = ReturnClient;