@bjsdistribution/dms-client-return 0.0.12 → 0.0.14

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

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useMemo, useRef, Suspense } from 'react';
+import React, { useEffect, useState, useMemo, useCallback, useRef, Suspense } from 'react';
 import { useLocation, useParams, NavLink, useNavigate, Routes, Route } from 'react-router-dom';
 import styled, { css, keyframes } from 'styled-components';
-import { Label as Label$h, Input as Input$1, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, SelectDropdown, dropdownStyles, RadioButtonGroup as RadioButtonGroup$1, Switch, Button as Button$1, useApiHook, getBaseEndpoint, formatDateTime, Alert, Checkbox as Checkbox$1, SectionHeader, CrossIcon, AntSelect, AntTable, CustomRating, DeleteIcon, CancelationModal, CancelAndCompleteAction, filterDropdownStyles, BackgroundModal as BackgroundModal$1, AntModal } from '@bjsdistribution/dms-component-library';
+import { Label as Label$h, Input as Input$1, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, SelectDropdown, dropdownStyles, RadioButtonGroup as RadioButtonGroup$1, Switch, getBaseEndpoint, Button as Button$1, useApiHook, formatDateTime, Alert, Checkbox as Checkbox$1, SectionHeader, CrossIcon, AntSelect, AntTable, CustomRating, DeleteIcon, CancelationModal, CancelAndCompleteAction, filterDropdownStyles, BackgroundModal as BackgroundModal$1, AntModal } from '@bjsdistribution/dms-component-library';
 import { useAtom, atom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
 import { DatePicker, notification, Skeleton, Upload, message, Input as Input$2, Select, Empty, Checkbox as Checkbox$2, Tabs } from 'antd';
@@ -550,9 +550,10 @@ var IconContainer = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObjec
 var currentActionAtom = /*#__PURE__*/atom(undefined);
 var isOnHold = /*#__PURE__*/atom(false);
 var orderStaticDataAtom = /*#__PURE__*/atom({});
-var clientDataAtom = /*#__PURE__*/atom([]);
-var returnDataAtom = /*#__PURE__*/atom([]);
-var returnAfterOrderAtom = /*#__PURE__*/atom([]);
+var customerInfoAtom = /*#__PURE__*/atom({
+  recipient_name: '',
+  postcode: ''
+});
 var ordersInitialValue = {
   depot_id: null,
   gsit_order_id: null,
@@ -577,6 +578,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,
@@ -618,16 +622,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,
@@ -647,20 +643,14 @@ function useCurrentAction() {
 function useOrderStaticData() {
   return useAtom(orderStaticDataAtom);
 }
-function useClientData() {
-  return useAtom(clientDataAtom);
-}
-function useReturnData() {
-  return useAtom(returnDataAtom);
-}
-function useReturnAfterOrderData() {
-  return useAtom(returnAfterOrderAtom);
+function useCustomerInfo() {
+  return useAtom(customerInfoAtom);
 }
 function useIsOnHoldOrder() {
   return useAtom(isOnHold);
 }
 //value
-var orderId = /*#__PURE__*/atom(undefined);
+var orderId = /*#__PURE__*/atom([]);
 var useOrderId = function useOrderId() {
   return useAtom(orderId);
 };
@@ -673,7 +663,7 @@ var prevOrderDetails = /*#__PURE__*/atom(ordersInitialValue);
 function usePrevOrderDetails() {
   return useAtom(prevOrderDetails);
 }
-var customerDetails = /*#__PURE__*/atom(0);
+var customerDetails = /*#__PURE__*/atom({});
 function useCustomerDetails() {
   return useAtom(customerDetails);
 }
@@ -693,7 +683,7 @@ var deleteProdId = /*#__PURE__*/atom([]);
 function useDeleteProdsID() {
   return useAtom(deleteProdId);
 }
-var createOrderProduct = /*#__PURE__*/atom(orderProductInitialvalue);
+var createOrderProduct = /*#__PURE__*/atom([]);
 function useCreateOrderProducts() {
   return useAtom(createOrderProduct);
 }
@@ -705,23 +695,45 @@ var updateOrderProduct = /*#__PURE__*/atom(updateOrderProducts);
 function useUpdateOrderProducts() {
   return useAtom(updateOrderProduct);
 }
-var selectedProductIdAtom = /*#__PURE__*/atom(null);
-var selectedTabKeyAtom = /*#__PURE__*/atom('1');
-var eventNotesData = /*#__PURE__*/atom([]);
-function useEventNotesData() {
-  return useAtom(eventNotesData);
+var CallAPi = /*#__PURE__*/atom(false);
+function useCallAPi() {
+  return useAtom(CallAPi);
+}
+var errorAtom = /*#__PURE__*/atom({
+  homeContactError: '',
+  workCOntanctError: '',
+  mobileError: '',
+  emailError: '',
+  w3wError: '',
+  postCodeError: ''
+});
+var orderProductResources = /*#__PURE__*/atom([]);
+function useOrderProductsResources() {
+  return useAtom(orderProductResources);
+}
+var orderProductToolbox = /*#__PURE__*/atom([]);
+function useOrderProductsToolbox() {
+  return useAtom(orderProductToolbox);
+}
+var locationOptions = /*#__PURE__*/atom([]);
+function useLocationOptions() {
+  return useAtom(locationOptions);
 }
 var orderProductSystemLogs = /*#__PURE__*/atom([]);
 function useOrderProductSystemLogs() {
   return useAtom(orderProductSystemLogs);
 }
-var moduleIds = /*#__PURE__*/atom(null);
-function usemoduleIds() {
-  return useAtom(moduleIds);
+var eventNotesData = /*#__PURE__*/atom([]);
+function useEventNotesData() {
+  return useAtom(eventNotesData);
 }
-var CallAPi = /*#__PURE__*/atom(false);
-function useCallAPi() {
-  return useAtom(CallAPi);
+var returnAfterOrderAtom = /*#__PURE__*/atom([]);
+function useReturnAfterOrderData() {
+  return useAtom(returnAfterOrderAtom);
+}
+var clientDataAtom = /*#__PURE__*/atom([]);
+function useClientData() {
+  return useAtom(clientDataAtom);
 }
 var NotesLoading = /*#__PURE__*/atom(true);
 var UseNotesLoading = function UseNotesLoading() {
@@ -731,12 +743,57 @@ var notes = /*#__PURE__*/atom([]);
 function usegetNotes() {
   return useAtom(notes);
 }
-var errorAtom = /*#__PURE__*/atom({
-  homeError: '',
-  mobileError: '',
-  emailError: '',
-  w3wError: ''
-});
+var moduleIds = /*#__PURE__*/atom(null);
+function usemoduleIds() {
+  return useAtom(moduleIds);
+}
+var callAPi = /*#__PURE__*/atom(false);
+function useLogsCallAPi() {
+  return useAtom(callAPi);
+}
+var gsitCUstomerId = /*#__PURE__*/atom({});
+function useGsitCUstomerId() {
+  return useAtom(gsitCUstomerId);
+}
+var CUstomerId = /*#__PURE__*/atom(undefined);
+function useCUstomerId() {
+  return useAtom(CUstomerId);
+}
+var RouteId = /*#__PURE__*/atom(undefined);
+function useRouteId() {
+  return useAtom(RouteId);
+}
+var gsitOrderId = /*#__PURE__*/atom(undefined);
+function useGsitOrderId() {
+  return useAtom(gsitOrderId);
+}
+var orderProductId = /*#__PURE__*/atom(undefined);
+function useOrderProductId() {
+  return useAtom(orderProductId);
+}
+var returnDataAtom = /*#__PURE__*/atom([]);
+function useReturnData() {
+  return useAtom(returnDataAtom);
+}
+var apiCalling = /*#__PURE__*/atom(false);
+function useApiCalling() {
+  return useAtom(apiCalling);
+}
+var liveRecalling = /*#__PURE__*/atom(false);
+//re api call of live status
+function useLiveRecalling() {
+  return useAtom(liveRecalling);
+}
+var selectedTabKeyAtom = /*#__PURE__*/atom('1');
+var letselectedProductIdAtom = /*#__PURE__*/atom(null);
+// const BulkUPdateDisabledState = atom<boolean>(false);
+// export const useBulkUPdateDisabledState = () => {
+//   return useAtom(BulkUPdateDisabledState);
+// };
+var auditLogToggle = /*#__PURE__*/atom(true);
+var SeteauditLogToggle = function SeteauditLogToggle() {
+  return useAtom(auditLogToggle);
+};
 // Popup state Manage
 var initialState = null;
 var popupReducer = function popupReducer(state, action) {
@@ -745,6 +802,12 @@ var popupReducer = function popupReducer(state, action) {
     return {
       state: state
     };
+  }
+  if (action.type === 'bulkUpdate') {
+    state = 'bulkUpdate';
+    return {
+      state: state
+    };
   } else if (action.type === 'addProduct') {
     state = 'addProduct';
     return {
@@ -911,6 +974,9 @@ function Postcode() {
 var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
 var Container$3 = /*#__PURE__*/styled.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;
@@ -1001,17 +1067,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() {
@@ -1429,17 +1621,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
       });
     });
   };
@@ -1451,11 +1636,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(Input$1)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$6 = /*#__PURE__*/styled(Input$1)(_templateObject$j || (_templateObject$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$f = /*#__PURE__*/styled.div(_templateObject2$f || (_templateObject2$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 var _templateObject$k;
@@ -1612,6 +1797,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.createElement(FormContainer$1, null, React.createElement(Label$h, {
     label: "Vehicle Type",
     htmlFor: "vehicleType"
@@ -1620,16 +1815,10 @@ function VehicleTypeDropdown() {
     options: vehicleTypeOptions,
     inputId: "vehicleType",
     openMenuOnFocus: true,
-    isDisabled: true,
-    value: vehicleTypeOptions[1],
-    styles: _extends({}, 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.div(_templateObject$o || (_templateObject$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1672,24 +1861,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.createElement(Container$j, null, React.createElement(Label$h, {
     label: "Delivery Instructions"
   }), React.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
   }));
@@ -1730,6 +1912,15 @@ var FormInputs$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject
 var CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n  padding: 10px !important;\n"])));
 
 var _templateObject$u;
+function 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(),
@@ -1739,9 +1930,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) {
@@ -1763,15 +1958,7 @@ function TimedServiceDropdown() {
       return f.value === timesServiceId;
     }),
     inputId: "timedServiceDropdown",
-    onChange: onChange,
-    styles: _extends({}, dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$l = /*#__PURE__*/styled.div(_templateObject$u || (_templateObject$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1808,15 +1995,7 @@ function ServiceTypeDropdown() {
     }),
     inputId: "serviceTypeDropdown",
     openMenuOnFocus: true,
-    onChange: onChange,
-    styles: _extends({}, dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$m = /*#__PURE__*/styled.div(_templateObject$v || (_templateObject$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1856,15 +2035,7 @@ function DeliveryPointDropdown() {
       return f.value === deliveryPointId;
     }),
     openMenuOnFocus: true,
-    onChange: onChange,
-    styles: _extends({}, dropdownStyles, {
-      control: function control(styles) {
-        return _extends({}, styles, {
-          borderRadius: '25px',
-          cursor: 'pointer'
-        });
-      }
-    })
+    onChange: onChange
   }));
 }
 var Container$n = /*#__PURE__*/styled.div(_templateObject$w || (_templateObject$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
@@ -1905,7 +2076,7 @@ var Container$o = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$
 
 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];
@@ -1917,37 +2088,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.createElement(Container$p, {
-    "$isDisable": (assemblyTypeService == null ? void 0 : assemblyTypeService.is_deleted) === true ? true : false
+    "$isDisable": isServiceDisable()
   }, React.createElement(RadioButtonGroup$1, {
     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.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) {
@@ -2008,19 +2220,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;
@@ -2030,33 +2257,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
@@ -2124,80 +2414,164 @@ var CreatedBy = /*#__PURE__*/styled.span(_templateObject2$p || (_templateObject2
 // `;
 var Container$s = /*#__PURE__*/styled.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 = 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');
+            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');
+            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 = 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.createElement(Container$t, null, React.createElement(AllowTracking, null), React.createElement(Button$1, {
-    style: {
-      borderRadius: '20px'
-    },
-    onClick: onSave
+    onClick: onSave,
+    disabled: !isDifferent() || errorFound()
   }, "Save Details"));
 }
-var Container$t = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  align-items: flex-start;\n  border-top: 1px solid #edebe8;\n  background: #f8fafc;\n  /* margin: 0px -15px -15px -15px; */\n  border-radius: 0px 0px 8px 8px;\n  /* margin-bottom: 22px; */\n  position: relative;\n  align-items: center;\n  /* top: 21px; */\n"])));
+var Container$t = /*#__PURE__*/styled.div(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px 15px;\n  align-items: flex-start;\n  border-top: 1px solid #edebe8;\n  background: #f8fafc;\n  margin: 0px -15px -15px -15px;\n  border-radius: 0px 0px 8px 8px;\n"])));
 
 var _templateObject$E, _templateObject2$q, _templateObject3$d;
 function ExpandedContent() {
@@ -2262,7 +2636,6 @@ function AddNote() {
   var location = 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');
@@ -2295,7 +2668,8 @@ function AddNote() {
                 module_object_id: orderId || orderIdLocaation,
                 action: 'create',
                 description: noteText,
-                data_dump: '{}'
+                data_dump: '{}',
+                manual: 1
               }]
             };
             _context.prev = 6;
@@ -2320,7 +2694,7 @@ function AddNote() {
               });
               setNoteLoadingStore(true);
               setNoteText('');
-              setNoteLoadingStore(false);
+              // setNoteLoadingStore(false);
               CallAPi(true);
             } else if (error) {
               // Error: Set error notification
@@ -2399,33 +2773,49 @@ var NotesTableData = [{
   tableBody: []
 }];
 
-var _templateObject$G, _templateObject2$s;
+var _templateObject2$s, _templateObject3$f, _templateObject4$5, _templateObject12;
+var Table = /*#__PURE__*/styled.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.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.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.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.createElement(ScrollableTableWrapper, null, React.createElement(AuditTableWrapper, null, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, tableHeadData.map(function (column) {
-    return React.createElement("th", {
+  return React.createElement(ScrollableTableWrapper, null, React.createElement(AuditTableWrapper, null, React.createElement(StickyHeaderWrapper, null, React.createElement(StyledTable, null, React.createElement("thead", null, React.createElement("tr", null, tableHeadData.map(function (column) {
+    return React.createElement(Th, {
       key: column.key
-    }, column.label);
-  }))), React.createElement("tbody", null, isLoading ? React.createElement("tr", null, React.createElement("td", {
+    }, React.createElement(IconCover, null, column.label));
+  }))))), React.createElement(StyledTable, null, React.createElement("tbody", null, isLoading ? React.createElement("tr", null, React.createElement("td", {
     className: "noBoder",
     colSpan: tableHeadData == null ? void 0 : tableHeadData.length
   }, React.createElement(Skeleton, null))) : getNotes && (getNotes == null ? void 0 : getNotes.length) > 0 ? getNotes == null ? void 0 : getNotes.map(function (note) {
-    return React.createElement("tr", {
+    return React.createElement(StyledTr, {
       key: note == null ? void 0 : note.id
-    }, React.createElement("td", null, React.createElement("div", {
-      className: "bold",
+    }, React.createElement(DateTd, null, React.createElement(CreatedBy$1, {
       title: note == null ? void 0 : note.created_by
-    }, note == null ? void 0 : note.created_by), React.createElement("div", null, formatDateTime(note == null ? void 0 : note.created_at))), React.createElement("td", null, note == null ? void 0 : note.description));
-  }) : React.createElement("tr", null, React.createElement("td", {
+    }, note == null ? void 0 : note.created_by), React.createElement("div", null, formatDateTime(note == null ? void 0 : note.created_at))), React.createElement(StyledTd, {
+      dangerouslySetInnerHTML: {
+        __html: note == null ? void 0 : note.description
+      }
+    }));
+  }) : React.createElement("tr", null, React.createElement(NoDataFound, {
     colSpan: tableHeadData == null ? void 0 : tableHeadData.length
   }, "No data found"))))));
 };
-var ScrollableTableWrapper = /*#__PURE__*/styled.div(_templateObject$G || (_templateObject$G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var AuditTableWrapper = /*#__PURE__*/styled.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.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(Td)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6d6d6d;\n"])));
+var NoDataFound = /*#__PURE__*/styled(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(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.tr(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:nth-child(even) {\n    background-color: #f3fbff;\n  }\n"])));
+var StyledTd = /*#__PURE__*/styled(Td)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 10px;\n"])));
+var CreatedBy$1 = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-weight: bold;\n"])));
+var ScrollableTableWrapper = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 250px;\n  min-height: 200px;\n  overflow: auto;\n"])));
+var StickyHeaderWrapper = /*#__PURE__*/styled.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';
@@ -2434,7 +2824,7 @@ function AuditLogs() {
 }
 var Container$w = /*#__PURE__*/styled.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],
@@ -2450,8 +2840,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 = useApiHook({
       endpoint: 'audit_logs/modules/',
@@ -2475,52 +2865,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 = 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}
   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.createElement(Container$x, null, React.createElement(CardHeader, null, "NOTES"), React.createElement(CustomizedFormSection, null, React.createElement(AddNote, null), React.createElement(AuditLogs, null)));
 }
 var Container$x = /*#__PURE__*/styled.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 5px;\n"])));
-var CardHeader = /*#__PURE__*/styled.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.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.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.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() {
@@ -2544,7 +2928,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 = useState(true),
     isExpanded = _useState[0],
@@ -2564,20 +2948,20 @@ function CollapsableForm(props) {
     isExpanded: isExpanded
   }, React.createElement(ChevronUp, null))))), isExpanded && React.createElement(CustomizedFormSection$1, null, React.createElement(ExpandedContent$1, null, props.children)));
 }
-var CustomizedFormSection$1 = /*#__PURE__*/styled.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.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.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.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n"])));
-var MainContainer$4 = /*#__PURE__*/styled.div(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0;\n"])));
-var IconContainer$1 = /*#__PURE__*/styled.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.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.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.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.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n"])));
+var MainContainer$4 = /*#__PURE__*/styled.div(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 0;\n"])));
+var IconContainer$1 = /*#__PURE__*/styled.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.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var CollapsedContent$1 = /*#__PURE__*/styled.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.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var CollapsedContent$1 = /*#__PURE__*/styled.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.createElement(Table, null, React.createElement(CollapsableForm, {
+  return React.createElement(Table$1, null, React.createElement(CollapsableForm, {
     collapsedContent: React.createElement(CollapsedContent, null)
   }, React.createElement(Alert, {
     description: "",
@@ -2587,16 +2971,44 @@ function Order() {
     showOkButton: false
   })));
 }
-var Table = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Table$1 = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+
+var _templateObject$M;
+// import styled from 'styled-components';
+function CollapsedContent$2() {
+  return React.createElement(Font$1, null, "TOOLBOX RESOURCES");
+}
+var Font$1 = /*#__PURE__*/styled.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.createElement(StyledTable$1, null, React.createElement(CollapsableForm, {
+    collapsedContent: React.createElement(CollapsedContent$2, null)
+  }, React.createElement("div", {
+    style: {
+      overflow: 'auto'
+    }
+  }), React.createElement("div", {
+    className: "tableStyle",
+    dangerouslySetInnerHTML: {
+      __html: htmlContent
+    }
+  })));
+}
+var StyledTable$1 = /*#__PURE__*/styled.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.createElement(Font$1, null, "SYSTEM EVENT LOGS");
+  return React.createElement(Font$2, null, "SYSTEM EVENT LOGS");
 }
-var Font$1 = /*#__PURE__*/styled.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.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,
@@ -2614,11 +3026,11 @@ function CustomScrollBar(props) {
     }
   }, children);
 }
-var ThumbVertical = /*#__PURE__*/styled.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.div(_templateObject2$v || (_templateObject2$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
-var TrackHorizontal = /*#__PURE__*/styled.div(_templateObject3$h || (_templateObject3$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var ThumbVertical = /*#__PURE__*/styled.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.div(_templateObject2$w || (_templateObject2$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
+var TrackHorizontal = /*#__PURE__*/styled.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;
@@ -2639,7 +3051,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.createElement(MainContainer$5, null, React.createElement(Container$z, null, React.createElement(TableWrapper, null, React.createElement(CustomScrollBar, null, React.createElement(Table$1, null, React.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
+  return React.createElement(MainContainer$5, null, React.createElement(Container$z, null, React.createElement(TableWrapper, null, React.createElement(CustomScrollBar, null, React.createElement(Table$2, null, React.createElement(TableHead, null, headerGroups.map(function (headerGroup) {
     return React.createElement(TableRow, {
       key: headerGroup.id
     }, headerGroup.headers.map(function (header) {
@@ -2664,17 +3076,17 @@ function DynamicTable(_ref) {
 //   transform: rotate(180deg);
 //   cursor: pointer;
 // `;
-var Container$z = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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;
@@ -2689,8 +3101,8 @@ function Event(props) {
   };
   return React.createElement(RowContainer, null, React.createElement(Row, null, getDescription(data)));
 }
-var RowContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 //to change data into options
 var transformOption = function transformOption(option, key) {
@@ -2737,25 +3149,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.createElement(RowContainer$1, null, React.createElement(Row$1, null, formatDate(data)));
 }
-var RowContainer$1 = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$1 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$1 = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$1 = /*#__PURE__*/styled.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.createElement(RowContainer$2, null, React.createElement(Row$2, null, data));
 }
-var RowContainer$2 = /*#__PURE__*/styled.div(_templateObject$R || (_templateObject$R = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$2 = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$2 = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$2 = /*#__PURE__*/styled.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;
@@ -2763,8 +3175,8 @@ function Note(props) {
     title: data
   }, React.createElement(Row$3, null, data));
 }
-var RowContainer$3 = /*#__PURE__*/styled.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.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$3 = /*#__PURE__*/styled.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.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var tableColumns = [{
   header: 'Date',
@@ -2867,16 +3279,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;
@@ -2896,10 +3307,9 @@ function SystemLogs() {
           case 7:
             _context.prev = 7;
             _context.t0 = _context["catch"](0);
-            // console.error('Error fetching event notes:', error);
             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":
@@ -2912,18 +3322,16 @@ function SystemLogs() {
     };
   }();
   useEffect(function () {
-    if (gsitId) {
-      fetchReminderData();
-    }
-  }, [gsitId, setNotesData]);
-  return React.createElement(Table$2, null, React.createElement(CollapsableForm, {
+    fetchReminderData();
+  }, [setNotesData]);
+  return React.createElement(Table$3, null, React.createElement(CollapsableForm, {
     collapsedContent: React.createElement(SystemCollapsedContent, null)
   }, React.createElement(DynamicTable, {
     columns: tableColumns,
     data: systemLogs
   })));
 }
-var Table$2 = /*#__PURE__*/styled.div(_templateObject$T || (_templateObject$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Table$3 = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 
 var StatusOptions = [{
   label: 'Released',
@@ -3080,19 +3488,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.createElement(Container$A, null, React.createElement(BoxContainer, null, StatusOptions.map(function (option, index) {
     return React.createElement(React.Fragment, {
       key: index
@@ -3104,6 +3503,9 @@ var renderIcon = function renderIcon(value, orderStatus) {
   if (!status) {
     return null;
   }
+  if (!status) {
+    return null;
+  }
   switch (value) {
     case 'released':
     case 'scheduled':
@@ -3113,16 +3515,18 @@ var renderIcon = function renderIcon(value, orderStatus) {
     case 'received':
       if (status.received === 'True') {
         return React.createElement(SuccessIcon, null);
-      } else if (status.received === 'partially') {
+      } else if (status.received === 'Partial') {
         return React.createElement(RouteIcon, null);
       } else {
         return React.createElement(ConfirmedIcon, null);
       }
     case 'delivered':
       if (status.delivered && (status.completed === false || status.completed === null)) {
-        return React.createElement(DeliveredIcon, null);
-      } else if (status.delivered && status.completed) {
+        return React.createElement(DeliveredIcon, null); //grey
+      } else if (status.delivered === true && status.completed === true) {
         return React.createElement(SuccessIcon, null);
+      } else if (status.delivered === true && status.completed === false) {
+        return React.createElement(RouteIcon, null);
       } else {
         return React.createElement(ConfirmedIcon, null);
       }
@@ -3130,22 +3534,22 @@ var renderIcon = function renderIcon(value, orderStatus) {
       return null;
   }
 };
-var BoxContainer = /*#__PURE__*/styled.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.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.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 35px;\n"])));
-var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject4$7 || (_templateObject4$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: flex;\n  align-items: center;\n"])));
+var BoxContainer = /*#__PURE__*/styled.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.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.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var TextContainer$1 = /*#__PURE__*/styled.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.createElement(Section, null, React.createElement(Status, null));
 }
-var Section = /*#__PURE__*/styled.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.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.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.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.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.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.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() {
@@ -3230,47 +3634,91 @@ var ReturnProductTable = function ReturnProductTable() {
   var _useSelectedOrders = useSelectedOrders(),
     selectedInvoices = _useSelectedOrders[0];
   var _useState = 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 = useState(null),
+    selectedRowId = _useState2[0],
+    setSelectedRowId = _useState2[1];
+  var _useOrderId = useOrderId(),
+    orderId = _useOrderId[0];
+  var handleActionClick = useCallback(function (id) {
+    setSelectedRowId(id);
+  }, []);
+  var _useApiHook = useApiHook({
+      endpoint: "order/order_products/delete/",
+      method: 'DELETE',
+      body: [{
+        id: selectedRowId,
+        order_id: orderId
+      }],
+      performAction: false
+    }),
+    isresponse = _useApiHook.data,
+    setaction = _useApiHook.setShouldPerformAction;
+  useEffect(function () {
+    if (isresponse && isresponse.data) {
+      handleRemoveRow();
+      setSelectedRowId(null);
+    }
+  }, [isresponse]);
+  var handleRemoveRow = useCallback(function () {
+    if (selectedRowId !== null) {
+      setProductData(function (prevData) {
+        return prevData.filter(function (item) {
+          return item.id !== selectedRowId;
+        });
+      });
+    }
+  }, [selectedRowId, setProductData]);
+  var onDeleteProducts = useCallback(function () {
+    setaction(true);
+  }, [setaction, selectedRowId]);
+  var handleSelectAll = useCallback(function () {
+    setSelectAll(function (prevSelectAll) {
+      return !prevSelectAll;
+    });
+  }, []);
   return React.createElement("div", null, React.createElement(StyledTableWrapper, {
     id: "tableScrolling"
-  }, React.createElement(StyledTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+  }, React.createElement(StyledTable$2, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React.createElement(Checkbox$1, {
     checked: selectAll,
-    onChange: function onChange() {}
-  })), React.createElement("th", null, " Location"), React.createElement("th", null, "Sender"), React.createElement("th", null, "Code"), React.createElement("th", null, " Description"), React.createElement("th", null, "Return Reason"), React.createElement("th", null, "Part"), React.createElement("th", null, " Action"))), React.createElement("tbody", null, productData == null ? void 0 : productData.map(function (invoice) {
+    onChange: handleSelectAll
+  })), React.createElement("th", null, "Location"), React.createElement("th", null, "Sender"), React.createElement("th", null, "Code"), React.createElement("th", null, "Description"), React.createElement("th", null, "Return Reason"), React.createElement("th", null, "Part"), React.createElement("th", null, "Action"))), React.createElement("tbody", null, productData && productData.length > 0 ? productData.map(function (invoice) {
     return React.createElement("tr", {
       key: invoice.id
     }, React.createElement("td", null, React.createElement(Checkbox$1, {
-      checked: selectedInvoices == null ? void 0 : selectedInvoices.some(function (selectedInvoice) {
-        return (selectedInvoice == null ? void 0 : selectedInvoice.id) === invoice.id;
+      checked: selectedInvoices.some(function (selectedInvoice) {
+        return selectedInvoice.id === invoice.id;
       })
-    })), React.createElement("td", null, 'N/A'), React.createElement("td", null, 'N/A'), React.createElement("td", null, invoice == null ? void 0 : invoice.code), React.createElement("td", null, invoice == null ? void 0 : invoice.description), React.createElement("td", null, 'N/A'), React.createElement("td", null, "1 of 1"), React.createElement("td", null, React.createElement(ActionIcon, null)));
-  })))));
+    })), React.createElement("td", null, 'N/A'), React.createElement("td", null, 'N/A'), React.createElement("td", null, invoice.code), React.createElement("td", null, invoice.description), React.createElement("td", null, 'N/A'), React.createElement("td", null, "1 of 1"), React.createElement("td", null, React.createElement("div", {
+      onClick: function onClick() {
+        handleActionClick(invoice.id);
+        onDeleteProducts();
+      },
+      style: {
+        cursor: 'pointer'
+      }
+    }, React.createElement(ActionIcon, null))));
+  }) : React.createElement("tr", null, React.createElement("td", {
+    colSpan: 8,
+    style: {
+      textAlign: 'center'
+    }
+  }, "No records found"))))));
 };
 
-var _templateObject$W;
+var _templateObject$Y;
 var ProductTable = function ProductTable() {
   return React.createElement(Container$B, null, React.createElement(ReturnProductTable, null));
 };
-var Container$B = /*#__PURE__*/styled.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.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');
@@ -3286,15 +3734,15 @@ function ExpandedContent$2() {
     onClick: SaveNote
   }, "SAVE Details"))));
 }
-var MidConatiner = /*#__PURE__*/styled.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.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
-var Container$C = /*#__PURE__*/styled.div(_templateObject3$k || (_templateObject3$k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var MidConatiner = /*#__PURE__*/styled.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.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
+var Container$C = /*#__PURE__*/styled.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;
@@ -3360,7 +3808,7 @@ function CollapsedContent$2() {
 //   align-items: center;
 //   gap: 30px;
 // `;
-var Container$D = /*#__PURE__*/styled.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.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__*/atom(null);
@@ -3454,26 +3902,143 @@ function ProductsInfo() {
     }
   }, [fetchedData, loading]);
   return React.createElement(CollapsableForm, {
-    collapsedContent: React.createElement(CollapsedContent$2, null)
+    collapsedContent: React.createElement(CollapsedContent$3, null)
   }, React.createElement(ExpandedContent$2, null));
 }
 
-var _templateObject$Z;
+var _templateObject$$;
+// import styled from 'styled-components';
+function TomTomCollapsedContent() {
+  return React.createElement(Font$3, null, "TOMTOM LOGS");
+}
+var Font$3 = /*#__PURE__*/styled.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.createElement(Table$4, null, React.createElement(CollapsableForm, {
+    collapsedContent: React.createElement(TomTomCollapsedContent, null)
+  }, React.createElement(DynamicTable, {
+    columns: TomTomColumns,
+    data: tomtomResources
+  })));
+}
+var Table$4 = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+
+var _templateObject$11;
 function BackgroundModal(props) {
   return createPortal(React.createElement(Container$E, Object.assign({}, props), props.children), document.body);
 }
-var Container$E = /*#__PURE__*/styled.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.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.createElement(Container$F, null, React.createElement(Rect, null), React.createElement(AdditionalInfo, null, React.createElement(Text$3, null, props.info)));
 }
-var Text$3 = /*#__PURE__*/styled.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.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
-var Rect = /*#__PURE__*/styled.div(_templateObject3$l || (_templateObject3$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 9px;\n  height: 45px;\n  background: #3a3630;\n"])));
-var AdditionalInfo = /*#__PURE__*/styled.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.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.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var Rect = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 9px;\n  height: 45px;\n  background: #3a3630;\n"])));
+var AdditionalInfo = /*#__PURE__*/styled.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,
@@ -3488,12 +4053,12 @@ function OrderActionHeader(props) {
     onClick: onClose
   }, React.createElement(CrossIcon, null)));
 }
-var Wrapper$b = /*#__PURE__*/styled.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.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg > path {\n    fill: #ffffff;\n  }\n  cursor: pointer;\n"])));
-var Title = /*#__PURE__*/styled.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.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.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.div(_templateObject2$F || (_templateObject2$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg > path {\n    fill: #ffffff;\n  }\n  cursor: pointer;\n"])));
+var Title = /*#__PURE__*/styled.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.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.createElement(Container$H, null, React.createElement(SubmitButton, {
@@ -3503,10 +4068,10 @@ function OrderActionFooter(props) {
     disabled: isSubmitDisabled
   }, props.submitButtonTitle || 'submit'), props.actions);
 }
-var SubmitButton = /*#__PURE__*/styled(Button$1)(_templateObject$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$H = /*#__PURE__*/styled.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(Button$1)(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$H = /*#__PURE__*/styled.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.createElement(BackgroundModal, null, React.createElement(MainContainer$6, null, React.createElement(OrderActionHeader, {
     title: props.headerTitle,
@@ -3521,9 +4086,9 @@ function OrderActionModal(props) {
     isSubmitDisabled: props.isSubmitDisabled
   })));
 }
-var MainContainer$6 = /*#__PURE__*/styled.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.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.createElement(Container$I, {
     className: props.className
@@ -3541,8 +4106,8 @@ function OrderActionsDropdown(props) {
     selectWrapperClass: 'rounded'
   }));
 }
-var Label = /*#__PURE__*/styled.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.div(_templateObject2$G || (_templateObject2$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label = /*#__PURE__*/styled.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.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function DocumentTypeDropdown() {
   var onSelect = function onSelect() {};
@@ -3622,7 +4187,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 = Upload.Dragger;
 var props = {
   name: 'file',
@@ -3649,15 +4214,15 @@ function DocFileUpload() {
     shape: 'rounded'
   }, "Upload Button"), React.createElement(IconContainer$3, null, React.createElement(UploadIcon, null)), React.createElement(TextContainer$2, null, React.createElement(Text1, null, "or drag and drop your file "), React.createElement(Text2, null, "Excel (.xls / .xlsx) or CSV (.csv) Only")))));
 }
-var MainContainer$7 = /*#__PURE__*/styled.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.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.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
-var Text1 = /*#__PURE__*/styled.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.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(Button$1)(_templateObject6$2 || (_templateObject6$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
-var Container$J = /*#__PURE__*/styled.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.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.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.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Text1 = /*#__PURE__*/styled.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.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(Button$1)(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
+var Container$J = /*#__PURE__*/styled.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(),
@@ -3673,12 +4238,12 @@ function AddResources() {
     onSubmit: function onSubmit() {}
   }, React.createElement(ContentContainer, null, React.createElement(Top$1, null, React.createElement(DocumentTypeDropdown, null), React.createElement(CategoryDropdown, null), React.createElement(VisibilityRadioButtons, null)), React.createElement(Bottom$1, null, React.createElement(Label$1, null, "File"), React.createElement(DocFileUpload, null))));
 }
-var Label$1 = /*#__PURE__*/styled.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.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var Top$1 = /*#__PURE__*/styled.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.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.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.div(_templateObject2$J || (_templateObject2$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Top$1 = /*#__PURE__*/styled.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.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.createElement(GLobalPopupContent, null, React.createElement(TableSkelton, null, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, React.createElement(CustomCheckBox, null, React.createElement("label", {
     className: "container"
@@ -3706,11 +4271,11 @@ function SplitOrderTable() {
     className: "checkmark"
   })))), React.createElement("td", null, "Return"), React.createElement("td", null, "FFLMW-B1"), React.createElement("td", null, "Outstanding"), React.createElement("td", null, "Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK"), React.createElement("td", null, "Flair Furnishings Loop Midsleeper White /DOUBLE COXMOOR NEST OF 3 TABLES - OAK"), React.createElement("td", null, "007022530015429326"))))));
 }
-var GLobalPopupContent = /*#__PURE__*/styled.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.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.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.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.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.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];
@@ -3726,7 +4291,7 @@ function SplitOrder() {
     submitBtnTitle: "Split Order"
   }, React.createElement(ContentContainer$1, null, React.createElement(SplitOrderTable, null)));
 }
-var ContentContainer$1 = /*#__PURE__*/styled.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.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.createElement("svg", Object.assign({
@@ -3757,7 +4322,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.createElement(RadioContainer$1, null, props.checked && React.createElement(RadioButtonCheckIcon, {
     color: props.color
@@ -3768,15 +4333,15 @@ function RadioButton(props) {
     htmlFor: props.id
   }, props.label));
 }
-var Label$2 = /*#__PURE__*/styled.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.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.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.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.div(_templateObject3$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  align-items: center;\n"])));
+var RadioContainer$1 = /*#__PURE__*/styled.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,
@@ -3811,19 +4376,19 @@ function RadioButtonGroup(props) {
     className: "custom-wrapper"
   }, renderOptions()));
 }
-var Separator = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
-var labelStyles = /*#__PURE__*/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.span(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
+var Separator = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
+var labelStyles = /*#__PURE__*/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.span(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
   return !props.$required && 'visibility: hidden;';
 }, labelStyles);
-var LegendContainer = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
-var Legend = /*#__PURE__*/styled.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.fieldset(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
-var Wrapper$c = /*#__PURE__*/styled.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.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
+var Legend = /*#__PURE__*/styled.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.fieldset(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
+var Wrapper$c = /*#__PURE__*/styled.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'
@@ -3854,15 +4419,15 @@ function DeliveryPoint() {
     required: false
   }));
 }
-var Container$K = /*#__PURE__*/styled.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.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.createElement(MainContainer$8, {
     "$checked": checked
   }, React.createElement(CheckboxContainer, null, React.createElement(HiddenCheckbox, Object.assign({
@@ -3877,20 +4442,20 @@ function Checkbox(props) {
     "$checked": checked
   }, label)));
 }
-var Image = /*#__PURE__*/styled.img(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: 20px;\n  filter: ", ";\n"])), function (props) {
+var Image = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.div(_templateObject6$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HiddenCheckbox = /*#__PURE__*/styled.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.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.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.div(_templateObject6$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HiddenCheckbox = /*#__PURE__*/styled.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.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';
 });
 
@@ -3917,7 +4482,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.createElement(Container$L, null, React.createElement(Checkbox, {
@@ -3942,9 +4507,9 @@ function OrderServices$1() {
     imageSrc: getIcon$1(4)
   }));
 }
-var Container$L = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n"])));
+var Container$L = /*#__PURE__*/styled.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) {
@@ -3955,10 +4520,10 @@ function Notes$1(_ref) {
     onChange: handleTextChange
   }));
 }
-var Label$3 = /*#__PURE__*/styled.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.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.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.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];
@@ -3978,18 +4543,18 @@ function LogServiceRefusal() {
     }
   }))));
 }
-var ContentContainer$2 = /*#__PURE__*/styled.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.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(Left)(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$2 = /*#__PURE__*/styled.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.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(Left)(_templateObject3$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$1e, _templateObject2$P;
+var _templateObject$1i, _templateObject2$Q;
 function CancelationNote() {
   return React.createElement(Container$N, null, React.createElement(Label$4, null, "Cancelation Note"), React.createElement(TextArea, {
     rows: 5
   }));
 }
-var Label$4 = /*#__PURE__*/styled.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.div(_templateObject2$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$4 = /*#__PURE__*/styled.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.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function CancelationReason() {
   var onSelect = function onSelect() {};
@@ -4027,7 +4592,7 @@ function ReturnReason() {
   });
 }
 
-var _templateObject$1f;
+var _templateObject$1j;
 function CancelOrderTable() {
   var options = [{
     value: 'bjsCouriers',
@@ -4082,9 +4647,9 @@ function CancelOrderTable() {
     }
   }));
 }
-var GLobalPopupContent$1 = /*#__PURE__*/styled.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.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];
@@ -4099,20 +4664,20 @@ function CancelOrder() {
     onSubmit: function onSubmit() {}
   }, React.createElement(ContentContainer$3, null, React.createElement(Top$2, null, React.createElement(TopLeft, null, React.createElement(CancelationReason, null), React.createElement(Wrapper$d, null, React.createElement(ReturnAction, null), React.createElement(ReturnReason, null))), React.createElement(TopRight, null, React.createElement(CancelationNote, null))), React.createElement(Bottom$2, null, React.createElement(CancelOrderTable, null))));
 }
-var Wrapper$d = /*#__PURE__*/styled.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.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.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
-var Top$2 = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
-var Bottom$2 = /*#__PURE__*/styled.div(_templateObject5$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var ContentContainer$3 = /*#__PURE__*/styled.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.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.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.div(_templateObject3$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
+var Top$2 = /*#__PURE__*/styled.div(_templateObject4$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
+var Bottom$2 = /*#__PURE__*/styled.div(_templateObject5$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$3 = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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'
 }, {
@@ -4325,7 +4890,7 @@ var UpdateProductType = function UpdateProductType() {
     }, React.createElement("div", {
       className: "col"
     }, React.createElement("label", null, "Collection Reason"), React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4335,7 +4900,7 @@ var UpdateProductType = function UpdateProductType() {
     })), React.createElement("div", {
       className: "col"
     }, React.createElement("label", null, "Collection Reason"), React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Return Action",
       onChange: onChange,
       disabled: false,
@@ -4345,7 +4910,7 @@ var UpdateProductType = function UpdateProductType() {
     })), React.createElement("div", {
       className: "col"
     }, React.createElement("label", null, "Collection Reason"), React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Return Reason",
       onChange: onChange,
       disabled: false,
@@ -4365,7 +4930,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React.createElement("span", {
       className: "checkmark"
     })))), React.createElement("td", null, React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4380,7 +4945,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React.createElement("span", {
       className: "checkmark"
     })))), React.createElement("td", null, React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4395,7 +4960,7 @@ var UpdateProductType = function UpdateProductType() {
     }), React.createElement("span", {
       className: "checkmark"
     })))), React.createElement("td", null, React.createElement(AntSelect, {
-      options: options,
+      options: options$1,
       placeholder: "Select Collection Reason",
       onChange: onChange,
       disabled: false,
@@ -4407,7 +4972,7 @@ var UpdateProductType = function UpdateProductType() {
   );
 };
 
-var _templateObject$1i, _templateObject2$R;
+var _templateObject$1m, _templateObject2$S;
 function EmailAddress() {
   return React.createElement(Container$O, null, React.createElement(Label$5, null, "Email Address"), React.createElement(Input$2, {
     style: {
@@ -4415,10 +4980,10 @@ function EmailAddress() {
     }
   }));
 }
-var Label$5 = /*#__PURE__*/styled.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.div(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$5 = /*#__PURE__*/styled.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.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.createElement(Container$P, null, React.createElement(Label$6, null, "Contact Phone"), React.createElement(Input$2, {
     style: {
@@ -4426,10 +4991,10 @@ function ContactPhone() {
     }
   }));
 }
-var Label$6 = /*#__PURE__*/styled.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.div(_templateObject2$S || (_templateObject2$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$6 = /*#__PURE__*/styled.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.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.createElement(Container$Q, null, React.createElement(Label$7, null, "Contact Work"), React.createElement(Input$2, {
     style: {
@@ -4437,10 +5002,10 @@ function ContactWork$1() {
     }
   }));
 }
-var Label$7 = /*#__PURE__*/styled.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.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$7 = /*#__PURE__*/styled.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.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.createElement(Container$R, null, React.createElement(Label$8, null, "Contact Mobile"), React.createElement(Input$2, {
     style: {
@@ -4448,8 +5013,8 @@ function ContactMobile$1() {
     }
   }));
 }
-var Label$8 = /*#__PURE__*/styled.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.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$8 = /*#__PURE__*/styled.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.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function ContactTypeDropdown() {
   var onSelect = function onSelect() {};
@@ -4497,7 +5062,7 @@ function ActionDropdown() {
   });
 }
 
-var _templateObject$1m, _templateObject2$V;
+var _templateObject$1q, _templateObject2$W;
 function DeliveryDate$1() {
   var onChange = function onChange() {};
   return React.createElement(Container$S, null, React.createElement(Label$9, null, "Delivery Date"), React.createElement(DatePicker, {
@@ -4507,8 +5072,8 @@ function DeliveryDate$1() {
     }
   }));
 }
-var Label$9 = /*#__PURE__*/styled.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.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.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.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() {};
@@ -4532,16 +5097,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.createElement(Container$T, null, React.createElement(Title$1, null, "Address"), React.createElement(AddressField, null, "34 NORTHFIELD AVENUE, PONTEFRACT, WF9 3TG"), React.createElement(Wrapper$e, null, React.createElement(EmailAddress, null), React.createElement(ContactPhone, null)), React.createElement(Wrapper$e, null, React.createElement(ContactWork$1, null), React.createElement(ContactMobile$1, null)), React.createElement(Wrapper$e, null, React.createElement(ContactTypeDropdown, null), React.createElement(ActionDropdown, null)), React.createElement(Wrapper$e, null, React.createElement(DeliveryDate$1, null), React.createElement(TimedServiceDropdown$1, null)));
 }
-var Wrapper$e = /*#__PURE__*/styled.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.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.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.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.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.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.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.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',
@@ -4581,10 +5146,10 @@ function ProductTable$1() {
     data: data
   }));
 }
-var Title$2 = /*#__PURE__*/styled.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.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.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.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',
@@ -4607,39 +5172,39 @@ function NotesTable() {
     data: data
   }));
 }
-var Title$3 = /*#__PURE__*/styled.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.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.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.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.createElement(Container$W, null, React.createElement(Label$a, null, "Notes"), React.createElement(TextArea, {
     rows: 5,
     placeholder: "Enter Notes"
   }));
 }
-var Label$a = /*#__PURE__*/styled.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.div(_templateObject2$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$a = /*#__PURE__*/styled.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.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.createElement(Container$X, null, React.createElement(Label$b, null, "Delivery Instructions"), React.createElement(TextArea, {
     rows: 5,
     placeholder: "Enter Delivery Instructions"
   }));
 }
-var Label$b = /*#__PURE__*/styled.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.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$b = /*#__PURE__*/styled.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.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.createElement(Container$Y, null, React.createElement(Slot, null, React.createElement(Title$4, null, "Slot"), React.createElement(Value, null, "07:00-10:00")), React.createElement(DeliveryInstructions$1, null), React.createElement(ConfirmationNotes, null));
 }
-var Value = /*#__PURE__*/styled.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.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
-var Title$4 = /*#__PURE__*/styled.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.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.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.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
+var Title$4 = /*#__PURE__*/styled.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.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(),
@@ -4662,21 +5227,21 @@ function ConfirmOrder() {
     showOkButton: false
   }), React.createElement(Wrapper$f, null, React.createElement(CustomerInformation, null), React.createElement(SlotAndInstructions, null)), React.createElement(ProductTable$1, null), React.createElement(NotesTable, null)));
 }
-var Wrapper$f = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
-var ContentContainer$5 = /*#__PURE__*/styled.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(Input$1)(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
-var StyledTextArea$1 = /*#__PURE__*/styled(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(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.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
-var SplitText = /*#__PURE__*/styled.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.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.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.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.div(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var ContentContainer$5 = /*#__PURE__*/styled.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(Input$1)(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
+var StyledTextArea$1 = /*#__PURE__*/styled(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(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.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
+var SplitText = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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.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.div(_templateObject15 || (_templateObject15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 15px;\n  align-self: stretch;\n"])));
@@ -4949,16 +5514,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.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.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(AntSelect)(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
+var FlexContainer = /*#__PURE__*/styled.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.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(AntSelect)(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
 var Dropdowns = function Dropdowns() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -5026,17 +5591,17 @@ var Dropdowns = function Dropdowns() {
   })));
 };
 
-var _templateObject$1v, _templateObject2$13;
+var _templateObject$1z, _templateObject2$14;
 var Notes$2 = function Notes() {
-  var StyledTextArea = styled(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.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(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.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.createElement("div", null, React.createElement(Label, null, "Note"), React.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');
@@ -5095,24 +5660,24 @@ var Upgrade = function Upgrade() {
     name: ''
   }))))), React.createElement(GiftWrapper, null, React.createElement(BJSGift, null, React.createElement(Box, null)), React.createElement(BJSGift, null, React.createElement(Box, null))));
 };
-var GiftWrapper = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
-var Box = /*#__PURE__*/styled.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.div(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var BJSGift = /*#__PURE__*/styled.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(Switch)(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
-var Heading$2 = /*#__PURE__*/styled.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.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.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.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 35px;\n"])));
+var GiftWrapper = /*#__PURE__*/styled.div(_templateObject$1A || (_templateObject$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
+var Box = /*#__PURE__*/styled.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.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var BJSGift = /*#__PURE__*/styled.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(Switch)(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var Heading$2 = /*#__PURE__*/styled.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.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.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.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 35px;\n"])));
 var StyledAntSelect$1 = /*#__PURE__*/styled(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.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.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.createElement(React.Fragment, null, React.createElement(Flex, null, React.createElement(Dropdowns, null), React.createElement(Notes$2, null), React.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 = useState(false),
     showContent = _useState[0],
@@ -5141,10 +5706,10 @@ var NewEscalation = function NewEscalation() {
     className: "checkmark"
   })))), React.createElement("td", null, "VIP4"), React.createElement("td", null, "B63015484248[Test] WAYVER"), React.createElement("td", null, "Allocated to Route"), React.createElement("td", null, "Revieved Picked"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Data"), React.createElement("td", null, "Done"), React.createElement("td", null, "Done"), React.createElement("td", null, "Status"))))));
 };
-var Component = /*#__PURE__*/styled.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.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.div(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
-var CancelButton = /*#__PURE__*/styled.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.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.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.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var CancelButton = /*#__PURE__*/styled.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(),
@@ -5431,7 +5996,7 @@ function ChargeLog() {
   })));
 }
 
-var _templateObject$1z;
+var _templateObject$1D;
 var UnholdOrder = function UnholdOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -5455,16 +6020,16 @@ var UnholdOrder = function UnholdOrder() {
     })
   });
 };
-var CustomCancelAndCompleteAction = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject$1z || (_templateObject$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var CustomCancelAndCompleteAction = /*#__PURE__*/styled(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.createElement(Table$3, null, products.length > 0 ? React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Select"), React.createElement("th", null, "ID"), React.createElement("th", null, "Name"), React.createElement("th", null, "Parts"))), React.createElement("tbody", null, products.map(function (product) {
+  return React.createElement(Table$5, null, products.length > 0 ? React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Select"), React.createElement("th", null, "ID"), React.createElement("th", null, "Name"), React.createElement("th", null, "Parts"))), React.createElement("tbody", null, products.map(function (product) {
     return React.createElement("tr", {
       key: product.id
     }, React.createElement("td", null, React.createElement(CustomCheckBox$1, null, React.createElement("label", {
@@ -5480,8 +6045,8 @@ var ProductData = function ProductData(_ref) {
     })))), React.createElement("td", null, product.id), React.createElement("td", null, product.name), React.createElement("td", null, product.parts));
   }))) : React.createElement(NoProductsMessage, null, "NO PRODUCTS TO RESTORE"));
 };
-var Table$3 = /*#__PURE__*/styled(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.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(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.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,
@@ -5602,7 +6167,7 @@ var RestoreProducts = function RestoreProducts() {
   })));
 };
 
-var _templateObject$1B, _templateObject2$17;
+var _templateObject$1F, _templateObject2$18;
 function AssigneeDropdown() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -5624,8 +6189,8 @@ function AssigneeDropdown() {
     }
   }));
 }
-var FormContainer$2 = /*#__PURE__*/styled.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(AntSelect)(_templateObject2$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var FormContainer$2 = /*#__PURE__*/styled.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(AntSelect)(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var DatePickerIcon = function DatePickerIcon() {
   return React.createElement("svg", {
@@ -5643,12 +6208,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.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.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.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(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.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.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.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.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(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.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.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(Input$1)(_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.div(_templateObject13$1 || (_templateObject13$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
@@ -5872,22 +6437,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.createElement(MainContainer$9, {
     id: "loder"
   }, React.createElement(Container$$, null, React.createElement(Spinner, null), React.createElement(Wrapper$h, null, React.createElement(Title$5, null, props.title || 'Loading...'), React.createElement(Subtitle, null, props.subtitle || "Sit tight - won't be long!"))));
 }
-var rotate = /*#__PURE__*/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__*/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.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.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.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.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.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
-var MainContainer$9 = /*#__PURE__*/styled.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.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.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.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.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.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+var MainContainer$9 = /*#__PURE__*/styled.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.createElement(Container$10, null, React.createElement(StatusCircleContainer, {
@@ -5898,14 +6463,14 @@ function StatusIndicator(props) {
     status: props.status
   }, props.text));
 }
-var StatusCircleContainer = /*#__PURE__*/styled.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.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.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.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.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.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.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.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';
 });
 
@@ -6067,7 +6632,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(),
@@ -6182,129 +6747,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.createElement(React.Fragment, null, reminderData && loading && React.createElement(Loader, null), React.createElement(OrderActionModal, {
-    headerTitle: "View Reminder",
-    onCloseHeader: closeModal,
-    onSubmit: handleEditReminder,
-    submitBtnTitle: "Save Details",
-    isSubmitDisabled: isDisabled,
-    showAdditionalInfo: true,
-    infoText: additional || 'NA',
-    headerActions: React.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.createElement(React.Fragment, null, React.createElement(StyledWrapper, null, React.createElement(StyledLabel, null, React.createElement(StyledCheckbox, null, React.createElement("input", {
-      type: "checkbox",
-      onChange: function onChange() {
-        return handleResolved(2);
-      }
-    }), React.createElement(RoundCheckbox, null)), React.createElement(StyledSpan, null, "Mark As Complete")))) : null)
-  }, React.createElement(ReferenceContainer, null, React.createElement(InnerContainer, null, React.createElement(MiniContainer, null, ' ', React.createElement(Label$c, null, "Reference ", " "), React.createElement(LabelText, null, (reminderData == null ? void 0 : reminderData.reference) || 'N/A')), React.createElement(MiniContainer, null, ' ', React.createElement(Label$c, null, "Status "), React.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.createElement(StatusIndicator, {
-    text: "Incomplete",
-    status: "AD"
-  }) : React.createElement(StatusIndicator, {
-    text: "Completed on " + (reminderData == null ? void 0 : reminderData.completed) + " by " + (reminderData == null ? void 0 : reminderData.completed_by),
-    status: "SD"
-  }))))), React.createElement(ContentsContainer, null, React.createElement(Left$1, null, React.createElement(AssigneeDropdown, null), React.createElement(DateTimeContainer, null, React.createElement(Label$c, null, "Due "), React.createElement(Row$5, null, (reminderPayload == null ? void 0 : reminderPayload.due_date) && React.createElement(StyledDateContainer, null, React.createElement(DatePicker$1, {
-    dateFormat: "EEE, dd MMM yyyy",
-    selected: reminderPayload != null && reminderPayload.due_date ? parse(reminderPayload.due_date, 'yyyy-MM-dd', new Date()) : null,
-    onChange: handleDateChange,
-    placeholderText: "Choose Due Date"
-  }), React.createElement(DatePickerIcon, null)), React.createElement(TimeWrapper, null, React.createElement(StyledTime, {
-    onChange: handleTime,
-    value: reminderPayload == null ? void 0 : reminderPayload.due_time,
-    type: "time"
-  }))))), React.createElement(Right$2, null, React.createElement(DetailedContainer, null, React.createElement(Label$c, null, "Details"), React.createElement(StyledText, {
-    name: "text",
-    required: true,
-    value: reminderPayload == null ? void 0 : reminderPayload.details,
-    onChange: onChangeDetails
-  }))))));
-};
-var StyledWrapper = /*#__PURE__*/styled.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.label(_templateObject2$1b || (_templateObject2$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
-var StyledSpan = /*#__PURE__*/styled.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.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.div(_templateObject5$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 33%;\n"])));
-var RoundCheckbox = /*#__PURE__*/styled.span(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelText = /*#__PURE__*/styled.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.createElement(React.Fragment, null, reminderData && loading && React.createElement(Loader, null), React.createElement(OrderActionModal, {
+    headerTitle: "View Reminder",
+    onCloseHeader: closeModal,
+    onSubmit: handleEditReminder,
+    submitBtnTitle: "Save Details",
+    isSubmitDisabled: isDisabled,
+    showAdditionalInfo: true,
+    infoText: additional || 'NA',
+    headerActions: React.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.createElement(React.Fragment, null, React.createElement(StyledWrapper, null, React.createElement(StyledLabel, null, React.createElement(StyledCheckbox, null, React.createElement("input", {
+      type: "checkbox",
+      onChange: function onChange() {
+        return handleResolved(2);
+      }
+    }), React.createElement(RoundCheckbox, null)), React.createElement(StyledSpan, null, "Mark As Complete")))) : null)
+  }, React.createElement(ReferenceContainer, null, React.createElement(InnerContainer, null, React.createElement(MiniContainer, null, ' ', React.createElement(Label$c, null, "Reference ", " "), React.createElement(LabelText, null, (reminderData == null ? void 0 : reminderData.reference) || 'N/A')), React.createElement(MiniContainer, null, ' ', React.createElement(Label$c, null, "Status "), React.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.createElement(StatusIndicator, {
+    text: "Incomplete",
+    status: "AD"
+  }) : React.createElement(StatusIndicator, {
+    text: "Completed on " + (reminderData == null ? void 0 : reminderData.completed) + " by " + (reminderData == null ? void 0 : reminderData.completed_by),
+    status: "SD"
+  }))))), React.createElement(ContentsContainer, null, React.createElement(Left$1, null, React.createElement(AssigneeDropdown, null), React.createElement(DateTimeContainer, null, React.createElement(Label$c, null, "Due "), React.createElement(Row$5, null, (reminderPayload == null ? void 0 : reminderPayload.due_date) && React.createElement(StyledDateContainer, null, React.createElement(DatePicker$1, {
+    dateFormat: "EEE, dd MMM yyyy",
+    selected: reminderPayload != null && reminderPayload.due_date ? parse(reminderPayload.due_date, 'yyyy-MM-dd', new Date()) : null,
+    onChange: handleDateChange,
+    placeholderText: "Choose Due Date"
+  }), React.createElement(DatePickerIcon, null)), React.createElement(TimeWrapper, null, React.createElement(StyledTime, {
+    onChange: handleTime,
+    value: reminderPayload == null ? void 0 : reminderPayload.due_time,
+    type: "time"
+  }))))), React.createElement(Right$2, null, React.createElement(DetailedContainer, null, React.createElement(Label$c, null, "Details"), React.createElement(StyledText, {
+    name: "text",
+    required: true,
+    value: reminderPayload == null ? void 0 : reminderPayload.details,
+    onChange: onChangeDetails
+  }))))));
+};
+var StyledWrapper = /*#__PURE__*/styled.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.label(_templateObject2$1c || (_templateObject2$1c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
+var StyledSpan = /*#__PURE__*/styled.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.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.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 33%;\n"])));
+var RoundCheckbox = /*#__PURE__*/styled.span(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelText = /*#__PURE__*/styled.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';
   });
@@ -6324,24 +6819,24 @@ var CustomSwitchSelector = function CustomSwitchSelector(_ref) {
   };
   return React.createElement(StyledSwitch, null, React.createElement(SwitchSelector, {
     onChange: handleSwitchChange,
-    options: options$1,
+    options: options,
     initialSelectedIndex: initialSelectedIndex,
     backgroundColor: '#cbc8c2',
     fontColor: '#f5f6fa',
     optionBorderRadius: 30
   }));
 };
-var StyledSwitch = /*#__PURE__*/styled.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.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.div(_templateObject$1H || (_templateObject$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
-var SplitContainer = /*#__PURE__*/styled.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(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.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.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.div(_templateObject8$6 || (_templateObject8$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var DoubleDropdownContainer = /*#__PURE__*/styled.div(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  width: 100%;\n"])));
+var Wrapper$i = /*#__PURE__*/styled.div(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
+var SplitContainer = /*#__PURE__*/styled.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(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.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.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.div(_templateObject8$7 || (_templateObject8$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var DoubleDropdownContainer = /*#__PURE__*/styled.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,
@@ -6355,7 +6850,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];
@@ -6538,13 +7033,13 @@ function CreateReminderModal() {
     onChange: handleChange
   })));
 }
-var StyleContainer = /*#__PURE__*/styled.div(_templateObject$1I || (_templateObject$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
-var Label$e = /*#__PURE__*/styled.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(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(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.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.div(_templateObject$1M || (_templateObject$1M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
+var Label$e = /*#__PURE__*/styled.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(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(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.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];
@@ -6730,10 +7225,10 @@ function CreateTaskModal() {
     value: createTask == null ? void 0 : createTask.description
   })));
 }
-var StyleContainer$1 = /*#__PURE__*/styled.div(_templateObject$1J || (_templateObject$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
-var StyledLink$1 = /*#__PURE__*/styled.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.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(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.div(_templateObject$1N || (_templateObject$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
+var StyledLink$1 = /*#__PURE__*/styled.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.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(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');
@@ -6976,7 +7471,7 @@ function useFetchUnresolvedTasks() {
   return perform;
 }
 
-var _templateObject$1K;
+var _templateObject$1O;
 function TaskReminderModal() {
   var createTaskAPI = useCreateTask();
   var createReminderAPI = useCreateReminder();
@@ -7146,80 +7641,9 @@ function TaskReminderModal() {
     onClose: function onClose() {}
   }) : '')));
 }
-var OrderModal = /*#__PURE__*/styled(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 = 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');
-            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');
-            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(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];
@@ -7272,8 +7696,8 @@ function OrderLock() {
     })
   });
 }
-var CustomCancelationModal = /*#__PURE__*/styled(CancelationModal)(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.8);\n"])));
-var CustomCancelAndCompleteAction$1 = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject2$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var CustomCancelationModal = /*#__PURE__*/styled(CancelationModal)(_templateObject$1P || (_templateObject$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: rgba(0, 0, 0, 0.8);\n"])));
+var CustomCancelAndCompleteAction$1 = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject2$1f || (_templateObject2$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 
 function useUpdateFlag() {
   var ssoToken = getCookie('id_token');
@@ -7343,7 +7767,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];
@@ -7413,14 +7837,14 @@ function HeaderSection() {
     })
   })));
 }
-var Header$1 = /*#__PURE__*/styled.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(CancelAndCompleteAction)(_templateObject2$1f || (_templateObject2$1f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
-var ResolveButton = /*#__PURE__*/styled.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.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.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.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n"])));
+var Header$1 = /*#__PURE__*/styled.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(CancelAndCompleteAction)(_templateObject2$1g || (_templateObject2$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var ResolveButton = /*#__PURE__*/styled.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.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.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.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],
@@ -7438,10 +7862,10 @@ function TextSection() {
     onChange: onChangeDetails
   }));
 }
-var TextField = /*#__PURE__*/styled(TextArea)(_templateObject$1N || (_templateObject$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 97% !important;\n"])));
-var Text$6 = /*#__PURE__*/styled.div(_templateObject2$1g || (_templateObject2$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  margin-top: 2%;\n"])));
+var TextField = /*#__PURE__*/styled(TextArea)(_templateObject$1R || (_templateObject$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 97% !important;\n"])));
+var Text$6 = /*#__PURE__*/styled.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],
@@ -7532,10 +7956,10 @@ function ButtonsSection() {
     status: "SD"
   }))));
 }
-var Buttons = /*#__PURE__*/styled.div(_templateObject$1O || (_templateObject$1O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
-var Flex$2 = /*#__PURE__*/styled.div(_templateObject2$1h || (_templateObject2$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var Buttons = /*#__PURE__*/styled.div(_templateObject$1S || (_templateObject$1S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
+var Flex$2 = /*#__PURE__*/styled.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];
@@ -7556,12 +7980,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();
@@ -7623,14 +8045,14 @@ function RadioButtonsSection() {
     required: false
   }));
 }
-var ButtonWrapper = /*#__PURE__*/styled.div(_templateObject$1P || (_templateObject$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
-var SaveButton = /*#__PURE__*/styled(Button$1)(_templateObject2$1i || (_templateObject2$1i = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var CancelButton$1 = /*#__PURE__*/styled(Button$1)(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var DropDowns = /*#__PURE__*/styled.div(_templateObject4$s || (_templateObject4$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
-var TooltipContent = /*#__PURE__*/styled.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.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ButtonWrapper = /*#__PURE__*/styled.div(_templateObject$1T || (_templateObject$1T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
+var SaveButton = /*#__PURE__*/styled(Button$1)(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var CancelButton$1 = /*#__PURE__*/styled(Button$1)(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var DropDowns = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 25px;\n"])));
+var TooltipContent = /*#__PURE__*/styled.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.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(),
@@ -7642,11 +8064,11 @@ function DetailSection() {
     label: "Order"
   }), React.createElement(Order$1, null, orderColumnData)));
 }
-var Detail = /*#__PURE__*/styled.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.div(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
-var Ref = /*#__PURE__*/styled.div(_templateObject3$K || (_templateObject3$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
-var Order$1 = /*#__PURE__*/styled.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(Label$h)(_templateObject5$h || (_templateObject5$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
+var Detail = /*#__PURE__*/styled.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.div(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
+var Ref = /*#__PURE__*/styled.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
+var Order$1 = /*#__PURE__*/styled.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(Label$h)(_templateObject5$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
 
 function useFetchSingleFlagsData() {
   var _useFlagRefId = useFlagRefId(),
@@ -7728,7 +8150,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],
@@ -7825,11 +8247,11 @@ function ViewFlag() {
   }, [dataArray]);
   return React.createElement(React.Fragment, null, React.createElement(BackgroundModals, null, dataArray && loading && React.createElement(Loader, null), React.createElement(MainContainer$a, null, React.createElement(HeaderSection, null), React.createElement(DetailSection, null), React.createElement(TextSection, null), React.createElement(ButtonsSection, null), React.createElement(SectionsContainer, null, React.createElement(ActionSection, null), React.createElement(RadioButtonsSection, null)))));
 }
-var SectionsContainer = /*#__PURE__*/styled.div(_templateObject$1R || (_templateObject$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: 6%;\n"])));
-var BackgroundModals = /*#__PURE__*/styled(BackgroundModal$1)(_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.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.div(_templateObject$1V || (_templateObject$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-top: 6%;\n"])));
+var BackgroundModals = /*#__PURE__*/styled(BackgroundModal$1)(_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.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];
@@ -7848,9 +8270,9 @@ function ReleaseOrder() {
     styleAlert: "rounded" // Set the style variant of the alert
   }));
 }
-var ReleaseContainer = /*#__PURE__*/styled.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.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];
@@ -7903,58 +8325,7 @@ function OrderActions() {
   };
   return React.createElement(Container$11, null, renderContent());
 }
-var Container$11 = /*#__PURE__*/styled.div(_templateObject$1T || (_templateObject$1T = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-
-var _templateObject$1U, _templateObject2$1l;
-var HeaderWrapper = /*#__PURE__*/styled.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.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.createElement(React.Fragment, null, React.createElement(Title$7, null, props.title));
-};
-var Title$7 = /*#__PURE__*/styled.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.createElement(BreadcrumbContainer, null, React.createElement(BreadcrumbList, null, props.title || ''), React.createElement(BreadcrumbList, null, props.subtitle || ''), props.subPart && React.createElement(React.Fragment, null, React.createElement(BreadcrumbList, null, props.subPart)));
-}
-var BreadcrumbContainer = /*#__PURE__*/styled.div(_templateObject$1W || (_templateObject$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var BreadcrumbList = /*#__PURE__*/styled.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.createElement(React.Fragment, null, React.createElement(HeaderWrapper, {
-    className: "headerWrap"
-  }, React.createElement(StyledFlex, null, React.createElement("div", null, React.createElement(HeaderTitle, {
-    title: 'Return'
-  }), React.createElement(Breadcrumb, {
-    title: breadcrumbTitle,
-    subtitle: breadcrumbSubtitle,
-    subPart: breadcrumbSubPart
-  })))));
-};
-
-var _templateObject$1X, _templateObject2$1n;
-var Details = function Details() {
-  return React.createElement(DetailsContainer, null, React.createElement(Typo, null, "CUSTOMER RETURN - BJS DEV TEST COMPANY, WS10 8RR"));
-};
-var DetailsContainer = /*#__PURE__*/styled.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.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.createElement(Flex$4, null, React.createElement(Details, null));
-};
-var Flex$4 = /*#__PURE__*/styled.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.div(_templateObject$1X || (_templateObject$1X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 function useSystemLogs() {
   var ssoToken = getCookie('id_token');
@@ -8047,11 +8418,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() {
+  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) {
@@ -8065,16 +8442,40 @@ function OrderView() {
     setOrderDetails = _useOrderDetails[1];
   var _usePrevOrderDetails = usePrevOrderDetails(),
     setPrevOrderDetails = _usePrevOrderDetails[1];
-  var _useLoading = useLoading(),
-    setLoading = _useLoading[1];
+  var _useState = 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 = 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 = useApiHook({
       endpoint: "orders/" + orderId,
       method: 'GET',
@@ -8082,7 +8483,7 @@ function OrderView() {
     }),
     fetchedData = _useApiHook.data,
     loading = _useApiHook.loading,
-    setShouldPerformAction = _useApiHook.setShouldPerformAction;
+    orderUpdate = _useApiHook.setShouldPerformAction;
   var _useApiHook2 = useApiHook({
       endpoint: "/orders/getStaticData/all/",
       method: 'GET'
@@ -8097,23 +8498,39 @@ function OrderView() {
     }),
     fetchedStatusData = _useApiHook3.data,
     statusDataLoading = _useApiHook3.loading,
-    setPerformAction = _useApiHook3.setShouldPerformAction;
+    setLivePerformAction = _useApiHook3.setShouldPerformAction;
   var _useApiHook4 = useApiHook({
       endpoint: "/depot/",
-      method: 'GET'
+      method: 'GET',
+      filters: [{
+        field: 'visibility',
+        op: '=',
+        value: true
+      }]
     }),
     fetchedDepotData = _useApiHook4.data,
     depotDataLoading = _useApiHook4.loading;
   useEffect(function () {
     if (orderId) {
-      setShouldPerformAction(true);
-      setPerformAction(true);
+      orderUpdate(true);
+      liveRecalling ? setLivePerformAction(false) : setLivePerformAction(true);
     }
-  }, [orderId]);
+  }, [orderId, liveRecalling]);
+  useEffect(function () {
+    if (apiCalling) {
+      orderUpdate(true);
+    } else {
+      orderUpdate(false);
+    }
+  }, [apiCalling]);
   useEffect(function () {
     if (paths.length > 1) {
       setOrderId(paths[1]);
     }
+    // for local
+    // if (paths.length >= 0) {
+    //   setOrderId(paths[0]);
+    // }
   }, [paths]);
   useEffect(function () {
     setLoading(staticDataLoading);
@@ -8125,8 +8542,20 @@ function OrderView() {
   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]);
@@ -8134,13 +8563,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]);
   useEffect(function () {
     setLoading(depotDataLoading);
     if (fetchedDepotData && fetchedDepotData.data) {
@@ -8157,9 +8587,90 @@ function OrderView() {
         setDepotOptions([]);
       }
     }
+    return function () {
+      setOrderId(null);
+    };
   }, [depotDataLoading]);
+  // Order resources
+  var _useApiHook5 = useApiHook({
+      endpoint: "/orders/" + orderId + "/order_resources/",
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedResourcesData = _useApiHook5.data,
+    setActions = _useApiHook5.setShouldPerformAction;
+  useEffect(function () {
+    if (orderId) {
+      setActions(true);
+    }
+  }, [orderId, setActions]);
+  useEffect(function () {
+    if (orderId) {
+      setOrderResources(fetchedResourcesData);
+    }
+    return function () {
+      setOrderId(null);
+    };
+  }, [fetchedResourcesData, orderResources, setOrderResources]);
+  // Toolbox resources
+  var _useApiHook6 = useApiHook({
+      endpoint: "/orders/" + orderId + "/toolbox_resources/",
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedToolboxData = _useApiHook6.data,
+    setAction = _useApiHook6.setShouldPerformAction;
+  useEffect(function () {
+    if (orderId) {
+      setAction(true);
+    }
+  }, [orderId, setAction]);
+  useEffect(function () {
+    if (orderId) {
+      setOrderToolbox(fetchedToolboxData);
+    }
+    return function () {
+      setOrderId(undefined);
+    };
+  }, [fetchedToolboxData, orderToolbox, setOrderToolbox]);
+  useEffect(function () {
+    if (GsitCUstomerId != null && GsitCUstomerId.id) {
+      shouldFetch(true);
+    } else {
+      shouldFetch(false);
+    }
+  }, [GsitCUstomerId]);
+  useEffect(function () {
+    return function () {
+      setGsitCUstomerId(function (prev) {
+        return _extends({}, prev, {
+          id: undefined
+        });
+      });
+    };
+  }, []);
+  var _useApiHook7 = 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;
+  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 () {
@@ -8184,36 +8695,26 @@ function OrderView() {
     };
   }();
   useEffect(function () {
-    if (gsitId) {
+    if (gsitOrderId) {
       fetchReminderData();
-      console.log('Setting filters for gsitId:', gsitId);
     }
+    return function () {
+      setGsitOrderId(undefined);
+    };
   }, [gsitId]);
-  return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper, null, React.createElement(RouterHeader, null), React.createElement("div", {
-    className: "Tableconatiner"
-  }, React.createElement(DetailsFilters, null), React.createElement(MainContainer$b, null, React.createElement(Section$1, null, React.createElement(GeneralHeader, null), React.createElement(NotifyContainer, null, React.createElement(Alert, {
-    type: "error",
-    title: "Outstanding",
-    description: "",
-    showOkButton: false,
-    onClose: function onClose() {}
-  })), React.createElement(OrderDetails$1, null)), React.createElement(ProductsInfo, null), React.createElement(SplitLayout$1, null, React.createElement(NotesContainer, null, React.createElement(Notes, null)), React.createElement(TablesContainer, null, React.createElement(Order, null), React.createElement(SystemLogs, null))), React.createElement(OrderActions, null)))));
-}
-var Section$1 = /*#__PURE__*/styled.div(_templateObject$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.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.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-left: 18px;\n"])));
-var MainContainer$b = /*#__PURE__*/styled.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.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.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
-var TablesContainer = /*#__PURE__*/styled.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.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.createElement(MainContainer$b, null, React.createElement(Loader, null), React.createElement(GeneralHeader, null), React.createElement(OrderDetails$1, null), React.createElement(ProductsInfo, null), React.createElement(SplitLayout$1, null, React.createElement(NotesContainer, null, React.createElement(Notes, null)), React.createElement(TablesContainer, null, React.createElement(Order, null), React.createElement(Toolbox, null), React.createElement(SystemLogs, null), React.createElement(TomTomLogs, null))), React.createElement(OrderActions, null));
+}
+var MainContainer$b = /*#__PURE__*/styled.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.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.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+var TablesContainer = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
 var LeftColumn = /*#__PURE__*/styled.div(_templateObject11$2 || (_templateObject11$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex-direction: row;\n  display: flex;\n"])));
 var ApplyButton = /*#__PURE__*/styled.button(_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"])));
@@ -8313,7 +8814,7 @@ var filtersReducerAtom = /*#__PURE__*/atom(function (get) {
   return set(filtersStateAtom, filterReducer(get(filtersStateAtom), action));
 });
 
-var _templateObject$1_;
+var _templateObject$1Z;
 function SelectionFilter() {
   var _useCustomerData = useCustomerData(),
     customers = _useCustomerData[0];
@@ -8539,7 +9040,7 @@ function SelectionFilter() {
     disabled: !isButtonEnabled
   }, "Apply"))));
 }
-var StyledAntSelect$5 = /*#__PURE__*/styled(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(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(),
@@ -8607,20 +9108,20 @@ function HeaderFilter() {
   return React.createElement(CoverPage, null, React.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.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.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.div(_templateObject4$v || (_templateObject4$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var StyledFiter = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var StyledFIlterELements = /*#__PURE__*/styled.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.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.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledTableFilter = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject2$1p;
-var StyledBulkItem = /*#__PURE__*/styled.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.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 = useState(''),
     searchText = _useState[0],
@@ -8635,8 +9136,8 @@ var SearchType = function SearchType() {
     onChange: handleInputChange
   }));
 };
-var Search = /*#__PURE__*/styled.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.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.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.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.createElement("svg", {
@@ -8656,7 +9157,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 = useAtom(countReducerAtom),
     dispatch = _useAtom[1];
@@ -8671,10 +9172,10 @@ var RightFilters = function RightFilters() {
     disabled: (selectedReturnOrder == null ? void 0 : selectedReturnOrder.length) === 0
   }, "Create Return"), React.createElement(StyledBulkItem, null, React.createElement(SearchType, null)), React.createElement(IconConatiner, null, React.createElement(Mid, null, React.createElement(IconText, null, "Export"), React.createElement(DownloadIcon, null))));
 };
-var Container$12 = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.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() {
@@ -8683,12 +9184,12 @@ var ReturnFilter = function ReturnFilter() {
   return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(Text$7, null, " ", clientName), React.createElement(StyledFIlterELements, null, React.createElement(StyledTableFilter, null)), React.createElement(RightFilters, null)));
 };
 
-var _templateObject$22, _templateObject2$1s, _templateObject3$P, _templateObject4$x, _templateObject34;
-var ColumStyle = /*#__PURE__*/styled.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.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.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.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.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.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.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.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.div(_templateObject34 || (_templateObject34 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
 
 var PrinterIcon = function PrinterIcon() {
@@ -8857,7 +9358,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';
@@ -8872,8 +9373,8 @@ var PrintDropDownReturn = function PrintDropDownReturn() {
     }, IconComponent && React.createElement(IconComponent, null), " ", item.label);
   }));
 };
-var OptionsList = /*#__PURE__*/styled.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.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.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.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 = useAtom(filtersReducerAtom),
@@ -9059,7 +9560,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
     var mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
-  return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper, null, React.createElement(StyledTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+  return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper, null, React.createElement(StyledTable$2, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React.createElement(Checkbox$1, {
     checked: selectAll,
@@ -9119,12 +9620,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.createElement(Container$13, null, React.createElement(Flex$5, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
+  return React.createElement(Container$13, null, React.createElement(Flex$4, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
     label: "What is the defect"
   }), React.createElement(StyledAntSelect$6, {
     options: TaskType,
@@ -9138,14 +9639,14 @@ var DefetcDetails = function DefetcDetails() {
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$5, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$4, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
     label: "Where is the primary defect located?"
   }), React.createElement(StyledAntSelect$6, {
     options: TaskType,
     placeholder: "Select located",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$5, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$4, null, React.createElement(LabelWrapper, null, React.createElement(Label$h, {
     label: "Where is the secondary defect located?"
   }), React.createElement(StyledAntSelect$6, {
     options: TaskType,
@@ -9161,12 +9662,12 @@ var DefetcDetails = function DefetcDetails() {
     selectWrapperClass: "rounded"
   }))));
 };
-var StyledAntSelect$6 = /*#__PURE__*/styled(AntSelect)(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$13 = /*#__PURE__*/styled.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.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.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$6 = /*#__PURE__*/styled(AntSelect)(_templateObject$23 || (_templateObject$23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$13 = /*#__PURE__*/styled.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.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.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',
@@ -9226,9 +9727,9 @@ var RepackProduct = function RepackProduct() {
     }
   })));
 };
-var GLobalPopupContent$3 = /*#__PURE__*/styled.div(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var GLobalPopupContent$3 = /*#__PURE__*/styled.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 = useState(false),
     isAdditionalBoxChecked = _useState[0],
@@ -9239,28 +9740,28 @@ var RepackDetails = function RepackDetails() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
   };
-  return React.createElement(React.Fragment, null, React.createElement(Container$14, null, React.createElement(Flex$6, null, React.createElement(Flex$6, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
+  return React.createElement(React.Fragment, null, React.createElement(Container$14, null, React.createElement(Flex$5, null, React.createElement(Flex$5, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
     label: "Who repacked it?"
   }), React.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$6, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$5, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
     label: "Packaging Type"
   }), React.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select located",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$6, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$5, null, React.createElement(LabelWrapper$1, null, React.createElement(Label$h, {
     label: "Repack Images"
   }), React.createElement(StyledAntSelect$7, {
     options: TaskType,
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  })))), React.createElement(Flex$6, null, React.createElement(CheckboxContainer$1, null, React.createElement(Checkbox$2, {
+  })))), React.createElement(Flex$5, null, React.createElement(CheckboxContainer$1, null, React.createElement(Checkbox$2, {
     onChange: function onChange(e) {
       return setIsAdditionalBoxChecked(e.target.checked);
     }
@@ -9275,19 +9776,19 @@ var RepackDetails = function RepackDetails() {
     }
   }, "Have any other boxes repacked into this one?"), isRepacked && React.createElement(RepackProduct, null)))));
 };
-var StyledAntSelect$7 = /*#__PURE__*/styled(AntSelect)(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var CheckboxContainer$1 = /*#__PURE__*/styled.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.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.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.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(AntSelect)(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var CheckboxContainer$1 = /*#__PURE__*/styled.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.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.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.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.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.createElement(Container$15, null, React.createElement(Flex$7, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
+  return React.createElement(Container$15, null, React.createElement(Flex$6, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
     label: "What is the primary defect?"
   }), React.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9301,7 +9802,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$7, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$6, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
     label: "What is the secondary defect?"
   }), React.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9315,7 +9816,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select Category",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$7, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$6, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
     label: "Where is the tertiary defect located?\n"
   }), React.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9329,7 +9830,7 @@ var OtherDamage = function OtherDamage() {
     placeholder: "Select secondary defect",
     onChange: handleSelectChange,
     selectWrapperClass: "rounded"
-  }))), React.createElement(Flex$7, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
+  }))), React.createElement(Flex$6, null, React.createElement(LabelWrapper$2, null, React.createElement(Label$h, {
     label: "What is the size of the defect?(cm)"
   }), React.createElement(StyledAntSelect$8, {
     options: TaskType,
@@ -9338,12 +9839,12 @@ var OtherDamage = function OtherDamage() {
     selectWrapperClass: "rounded"
   }))));
 };
-var StyledAntSelect$8 = /*#__PURE__*/styled(AntSelect)(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$15 = /*#__PURE__*/styled.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.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.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$8 = /*#__PURE__*/styled(AntSelect)(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$15 = /*#__PURE__*/styled.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.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.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 = useState({
       actionDuring: '',
@@ -9370,7 +9871,7 @@ var AddDefect = function AddDefect() {
       });
     });
   };
-  return React.createElement(React.Fragment, null, React.createElement(Container$16, null, React.createElement(Flex$8, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
+  return React.createElement(React.Fragment, null, React.createElement(Container$16, null, React.createElement(Flex$7, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
     label: "Does the packaging have any damage?"
   }), React.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9383,7 +9884,7 @@ var AddDefect = function AddDefect() {
     return React.createElement(DefetcDetails, {
       key: index
     });
-  })), React.createElement(Container$16, null, React.createElement(Flex$8, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
+  })), React.createElement(Container$16, null, React.createElement(Flex$7, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
     label: "Has the product been checked?"
   }), React.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9397,7 +9898,7 @@ var AddDefect = function AddDefect() {
     placeholder: "Select",
     onChange: handleChange('productDamage'),
     selectWrapperClass: "rounded"
-  }))), state.productDamage === 'yes' && state.productChecked === 'yes' && React.createElement(OtherDamage, null)), React.createElement(Container$16, null, React.createElement(Flex$8, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
+  }))), state.productDamage === 'yes' && state.productChecked === 'yes' && React.createElement(OtherDamage, null)), React.createElement(Container$16, null, React.createElement(Flex$7, null, React.createElement(LabelWrapper$3, null, React.createElement(Label$h, {
     label: "Has the product been repacked?"
   }), React.createElement(StyledAntSelect$9, {
     options: DefectConfirm,
@@ -9406,18 +9907,18 @@ var AddDefect = function AddDefect() {
     selectWrapperClass: "rounded"
   }))), state.productRepacked === 'yes' && React.createElement(RepackDetails, null)));
 };
-var StyledAntSelect$9 = /*#__PURE__*/styled(AntSelect)(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$16 = /*#__PURE__*/styled.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.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.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(AntSelect)(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$16 = /*#__PURE__*/styled.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.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.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(Button$1)(_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.createElement(Container$17, null, React.createElement(Flex$9, null, React.createElement(LabelWrapper$4, null, React.createElement(Label$h, {
+  return React.createElement(Container$17, null, React.createElement(Flex$8, null, React.createElement(LabelWrapper$4, null, React.createElement(Label$h, {
     label: "Action During"
   }), React.createElement(StyledAntSelect$a, {
     options: TaskType,
@@ -9433,12 +9934,12 @@ var QCLogs = function QCLogs() {
     selectWrapperClass: "rounded"
   }))), React.createElement(AddDefect, null));
 };
-var StyledAntSelect$a = /*#__PURE__*/styled(AntSelect)(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$17 = /*#__PURE__*/styled.div(_templateObject2$1y || (_templateObject2$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
-var Flex$9 = /*#__PURE__*/styled.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
-var LabelWrapper$4 = /*#__PURE__*/styled.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(AntSelect)(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
+var Container$17 = /*#__PURE__*/styled.div(_templateObject2$1w || (_templateObject2$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
+var Flex$8 = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
+var LabelWrapper$4 = /*#__PURE__*/styled.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 = useState(),
@@ -9535,13 +10036,13 @@ function UpdateProduct() {
     selectWrapperClass: "rounded"
   }))));
 }
-var CollectionBox = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
-var ReturnBox = /*#__PURE__*/styled.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.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelWrapper$5 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var CollectionBox = /*#__PURE__*/styled.div(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
+var ReturnBox = /*#__PURE__*/styled.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.div(_templateObject3$X || (_templateObject3$X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelWrapper$5 = /*#__PURE__*/styled.div(_templateObject4$F || (_templateObject4$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var StyledAntSelect$b = /*#__PURE__*/styled(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(),
@@ -9589,11 +10090,11 @@ function UnReceiveProduct() {
     onNotesChange: handleNotesChange
   })));
 }
-var Container$19 = /*#__PURE__*/styled.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelWrapper$6 = /*#__PURE__*/styled.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var StyledAntSelect$c = /*#__PURE__*/styled(AntSelect)(_templateObject3$W || (_templateObject3$W = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$19 = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var LabelWrapper$6 = /*#__PURE__*/styled.div(_templateObject2$1y || (_templateObject2$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var StyledAntSelect$c = /*#__PURE__*/styled(AntSelect)(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2c, _templateObject2$1B;
+var _templateObject$2b, _templateObject2$1z;
 var ProductAction = function ProductAction() {
   var _useAtom = useAtom(selectedTabKeyAtom),
     setSelectedTabKey = _useAtom[1];
@@ -9618,10 +10119,10 @@ var ProductAction = function ProductAction() {
     }]
   }))));
 };
-var GLobalPopupContent$4 = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$1a = /*#__PURE__*/styled.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.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$1a = /*#__PURE__*/styled.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',
@@ -9696,9 +10197,9 @@ var LogsTable = function LogsTable() {
     }
   })));
 };
-var GlobalPopupContent = /*#__PURE__*/styled.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var GlobalPopupContent = /*#__PURE__*/styled.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',
@@ -9750,10 +10251,10 @@ var DefectsModal = function DefectsModal() {
     }
   }))));
 };
-var StyledConatiner = /*#__PURE__*/styled.div(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* tex: nowrap; */\n"])));
-var GLobalPopupContent$5 = /*#__PURE__*/styled.div(_templateObject2$1C || (_templateObject2$1C = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledConatiner = /*#__PURE__*/styled.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* tex: nowrap; */\n"])));
+var GLobalPopupContent$5 = /*#__PURE__*/styled.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2f;
+var _templateObject$2e;
 var repackModal = function repackModal() {
   var columns = [{
     key: 'packaging_type',
@@ -9783,10 +10284,10 @@ var repackModal = function repackModal() {
     }
   }))));
 };
-var StyledConatiner$1 = /*#__PURE__*/styled.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* text-wrap: nowrap; */\n"])));
+var StyledConatiner$1 = /*#__PURE__*/styled.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],
@@ -9829,7 +10330,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);
@@ -9867,9 +10368,9 @@ var CreateReturnModal = function CreateReturnModal() {
     }, displayValueOrNA(returnLoc == null ? void 0 : returnLoc.new_location)));
   })))));
 };
-var StyledText$1 = /*#__PURE__*/styled.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.div(_templateObject2$1D || (_templateObject2$1D = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Wrapper$l = /*#__PURE__*/styled.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.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.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Wrapper$l = /*#__PURE__*/styled.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 = useAtom(countReducerAtom),
@@ -9888,7 +10389,7 @@ var ModalManager = function ModalManager() {
   var _useUpdateOrderProduc = useUpdateOrderProducts(),
     updateOrderProduct = _useUpdateOrderProduc[0],
     setUpdateOrderProduct = _useUpdateOrderProduc[1];
-  var _useAtom2 = useAtom(selectedProductIdAtom),
+  var _useAtom2 = useAtom(letselectedProductIdAtom),
     selectedProductId = _useAtom2[0];
   var _useAtom3 = useAtom(selectedTabKeyAtom),
     selectedTab = _useAtom3[0];
@@ -10212,14 +10713,14 @@ var ModalManager = function ModalManager() {
   }));
 };
 
-var _templateObject$2h, _templateObject2$1E;
+var _templateObject$2g, _templateObject2$1C;
 var ReturnTable = function ReturnTable() {
-  return React.createElement("div", null, React.createElement(DashBoardWrapper$1, null, React.createElement(RouterHeader, null), React.createElement("div", {
+  return React.createElement("div", null, React.createElement(DashBoardWrapper, null, React.createElement("div", {
     className: "Tableconatiner"
   }, React.createElement(HeaderFilter, null), React.createElement(Container$1c, null, React.createElement(ReturnFilter, null), React.createElement(ReturnOrderTable, null)))), React.createElement(ModalManager, null));
 };
-var Container$1c = /*#__PURE__*/styled.div(_templateObject$2h || (_templateObject$2h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$1 = /*#__PURE__*/styled.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.div(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var DashBoardWrapper = /*#__PURE__*/styled.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.createElement("svg", {
@@ -10347,7 +10848,7 @@ var OrderTable = function OrderTable(_ref) {
   console.log(id, 'idid');
   return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper, {
     id: "tableScrolling"
-  }, React.createElement(StyledTable, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
+  }, React.createElement(StyledTable$2, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React.createElement(Checkbox$1, {
     checked: selectAll,
@@ -10442,7 +10943,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.createElement(Container$1d, null, React.createElement(StyledBulkItem, null, React.createElement(SearchType, null)), React.createElement(IconConatiner$1, null, React.createElement(Mid$1, null, React.createElement(IconText$1, null, "Export"), React.createElement(DownloadIcon, null))));
   //   return (
@@ -10458,8 +10959,8 @@ var TableFilters = function TableFilters() {
   //     // </StyledBulkFilterCover>
   //   );
 };
-var Container$1d = /*#__PURE__*/styled.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.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.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.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;
@@ -10477,8 +10978,8 @@ var Mid$1 = /*#__PURE__*/styled.div(_templateObject2$1F || (_templateObject2$1F
 //   font-weight: 600;
 //   line-height: 20px;
 // `;
-var IconConatiner$1 = /*#__PURE__*/styled.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.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.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.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.createElement("svg", {
@@ -10663,7 +11164,7 @@ var AssigneIcon = function AssigneIcon() {
   }))));
 };
 
-var _templateObject$2j, _templateObject2$1G;
+var _templateObject$2i, _templateObject2$1E;
 var ReturnOrderFilter = function ReturnOrderFilter() {
   var _useAtom = useAtom(filtersReducerAtom$1),
     dispatch = _useAtom[1];
@@ -10778,11 +11279,11 @@ var ReturnOrderFilter = function ReturnOrderFilter() {
     className: "dateiconcontainer"
   }, React.createElement(AssigneIcon, null))))), React.createElement(TableFilters, null)));
 };
-var StyledDatePicker = /*#__PURE__*/styled.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-datepicker {\n    border: none;\n  }\n"])));
+var StyledDatePicker = /*#__PURE__*/styled.div(_templateObject$2i || (_templateObject$2i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .custom-datepicker {\n    border: none;\n  }\n"])));
 // const DropdownContainer = styled.div``;
-var StyledAntSelect$d = /*#__PURE__*/styled.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.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];
@@ -10804,12 +11305,12 @@ var ReturnAfterTable = function ReturnAfterTable() {
       setReturnOrderData(fetchedReturnOrderData == null ? void 0 : fetchedReturnOrderData.data);
     }
   }, [fetchedReturnOrderData, staticDataLoading]);
-  return React.createElement("div", null, React.createElement(DashBoardWrapper$2, null, React.createElement(RouterHeader, null), React.createElement("div", {
+  return React.createElement("div", null, React.createElement(DashBoardWrapper$1, null, React.createElement("div", {
     className: "Tableconatiner"
   }, React.createElement(HeaderFilter, null), React.createElement(Container$1e, null, React.createElement(ReturnOrderFilter, null), React.createElement(OrderTable, null)))));
 };
-var Container$1e = /*#__PURE__*/styled.div(_templateObject$2k || (_templateObject$2k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -30px;\n"])));
-var DashBoardWrapper$2 = /*#__PURE__*/styled.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.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -30px;\n"])));
+var DashBoardWrapper$1 = /*#__PURE__*/styled.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();
@@ -10838,7 +11339,7 @@ var BulkFilter = function BulkFilter() {
   );
 };
 
-var _excluded$3 = ["count"];
+var _excluded$4 = ["count"];
 // import { useAtom } from 'jotai';
 var Filters = function Filters() {
   var _useRoutesTable = useRoutesTable(),
@@ -10864,7 +11365,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 {
@@ -10906,7 +11407,7 @@ var ReturnTable$1 = function ReturnTable(_ref) {
   }, [staticDataLoading, fetchedStaticData]);
   return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
     id: "tableScrolling"
-  }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Trading Name"), React.createElement("th", null, "Client"), React.createElement("th", null, "Orders"), React.createElement("th", null, "Products"), React.createElement("th", null, "RTS"), React.createElement("th", null, "Pending"), React.createElement("th", null, "Dispose"), React.createElement("th", null, "Re-allocate"), React.createElement("th", null, "Re-Del"), React.createElement("th", null, "Recycle"), React.createElement("th", null, "Unknown"))), React.createElement("tbody", null, loadingskeleton ? React.createElement("tr", null, React.createElement("td", {
+  }, React.createElement(StyledTable$3, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Trading Name"), React.createElement("th", null, "Client"), React.createElement("th", null, "Orders"), React.createElement("th", null, "Products"), React.createElement("th", null, "RTS"), React.createElement("th", null, "Pending"), React.createElement("th", null, "Dispose"), React.createElement("th", null, "Re-allocate"), React.createElement("th", null, "Re-Del"), React.createElement("th", null, "Recycle"), React.createElement("th", null, "Unknown"))), React.createElement("tbody", null, loadingskeleton ? React.createElement("tr", null, React.createElement("td", {
     colSpan: 9
   }, React.createElement(Skeleton, {
     active: true
@@ -10930,7 +11431,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;
@@ -10973,15 +11474,52 @@ function ReturnMainTable() {
       setClientData(result);
     }
   }, [staticDataLoading]);
-  return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper$3, {
+  return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper$2, {
     className: " " + (isScrolled ? 'stickyTableHead' : '')
-  }, React.createElement(RouterHeader, null), React.createElement("div", {
+  }, React.createElement("div", {
     className: "Tableconatiner"
   }, React.createElement(HeaderFilter, null), React.createElement(Container$1f, null, React.createElement(Row$7, null, React.createElement(Text$7, null, "Client Return"), selectedClient ? React.createElement(ReturnFilter, null) : React.createElement(Filters, null)), React.createElement(ReturnTable$1, null)))));
 }
-var Row$7 = /*#__PURE__*/styled.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.div(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$3 = /*#__PURE__*/styled.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.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.div(_templateObject2$1G || (_templateObject2$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var DashBoardWrapper$2 = /*#__PURE__*/styled.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.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.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.createElement(React.Fragment, null, React.createElement(Title$7, null, props.title));
+};
+var Title$7 = /*#__PURE__*/styled.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.createElement(BreadcrumbContainer, null, React.createElement(BreadcrumbList, null, props.title || ''), React.createElement(BreadcrumbList, null, props.subtitle || ''), props.subPart && React.createElement(React.Fragment, null, React.createElement(BreadcrumbList, null, props.subPart)));
+}
+var BreadcrumbContainer = /*#__PURE__*/styled.div(_templateObject$2n || (_templateObject$2n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var BreadcrumbList = /*#__PURE__*/styled.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.createElement(React.Fragment, null, React.createElement(HeaderWrapper, {
+    className: "headerWrap"
+  }, React.createElement(StyledFlex, null, React.createElement("div", null, React.createElement(HeaderTitle, {
+    title: 'Return'
+  }), React.createElement(Breadcrumb, {
+    title: breadcrumbTitle,
+    subtitle: breadcrumbSubtitle,
+    subPart: breadcrumbSubPart
+  })))));
+};
 
 function ReturnClient() {
   var _selectedClientString;
@@ -11010,7 +11548,7 @@ function ReturnClient() {
       navigate("filter/" + _selectedClientString2);
     }
   }, [selectedClient]);
-  return React.createElement(Suspense, {
+  return React.createElement(React.Fragment, null, React.createElement(RouterHeader, null), React.createElement(Suspense, {
     fallback: React.createElement(LoadingMessage, null)
   }, React.createElement(Routes, null, React.createElement(Route, {
     path: "",
@@ -11024,7 +11562,7 @@ function ReturnClient() {
   }), React.createElement(Route, {
     path: "filter/:clientName",
     element: React.createElement(ReturnTable, null)
-  })));
+  }))));
 }
 
 export default ReturnClient;