@bjsdistribution/dms-client-return 0.0.25 → 0.0.26

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo, useCallback, useRef, Suspense } from 'react';
 import { useLocation, useParams, useNavigate, NavLink, Routes, Route } from 'react-router-dom';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { keyframes, css } 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, getBaseEndpoint, Button as Button$1, useApiHook, formatDateTime, Checkbox as Checkbox$1, AntSelect, SectionHeader, CrossIcon, Alert, CustomRating, AntTable, CancelationModal, CancelAndCompleteAction, filterDropdownStyles, BackgroundModal as BackgroundModal$1, AntModal } from '@bjsdistribution/dms-component-library';
 import { useAtom, atom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
@@ -1911,7 +1911,7 @@ function InstructionSection() {
 var FormInputs$2 = /*#__PURE__*/styled.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  flex: 1;\n"])));
 var CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n  padding: 10px !important;\n"])));
 
-var _templateObject$u;
+var _templateObject$u, _templateObject2$n;
 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),
@@ -1951,7 +1951,7 @@ function TimedServiceDropdown() {
   return React.createElement(Container$l, null, React.createElement(Label$h, {
     label: "Timed Service",
     htmlFor: "timedServiceDropdown"
-  }), React.createElement(SelectDropdown, {
+  }), React.createElement(StyledSelectDropdown, {
     placeholder: "Select Timed Service",
     options: timedServicesOptions || [],
     value: timedServicesOptions == null ? void 0 : timedServicesOptions.filter(function (f) {
@@ -1959,12 +1959,14 @@ function TimedServiceDropdown() {
     }),
     inputId: "timedServiceDropdown",
     onChange: onChange,
-    isDisabled: true
+    // isDisabled={isDisabled}
+    className:  'disabled' 
   }));
 }
 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"])));
+var StyledSelectDropdown = /*#__PURE__*/styled(SelectDropdown)(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &.disabled {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n"])));
 
-var _templateObject$v;
+var _templateObject$v, _templateObject2$o;
 function ServiceTypeDropdown() {
   var _orderStaticData$orde;
   var _useOrderStaticData = useOrderStaticData(),
@@ -1988,7 +1990,7 @@ function ServiceTypeDropdown() {
   return React.createElement(Container$m, null, React.createElement(Label$h, {
     label: "Service Type",
     htmlFor: "serviceTypeDropdown"
-  }), React.createElement(SelectDropdown, {
+  }), React.createElement(StyledSelectDropdown$1, {
     placeholder: "Select Service Type",
     options: serviceTypeOptions || [],
     value: serviceTypeOptions == null ? void 0 : serviceTypeOptions.filter(function (f) {
@@ -1997,12 +1999,14 @@ function ServiceTypeDropdown() {
     inputId: "serviceTypeDropdown",
     openMenuOnFocus: true,
     onChange: onChange,
-    isDisabled: true
+    isDisabled: true,
+    className:  'disabled' 
   }));
 }
 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"])));
+var StyledSelectDropdown$1 = /*#__PURE__*/styled(SelectDropdown)(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &.disabled {\n    cursor: not-allowed !important;\n    opacity: 0.7;\n  }\n"])));
 
-var _templateObject$w;
+var _templateObject$w, _templateObject2$p;
 function DeliveryPointDropdown() {
   var _orderData$order_serv, _orderStaticData$orde;
   var _useOrderStaticData = useOrderStaticData(),
@@ -2029,7 +2033,7 @@ function DeliveryPointDropdown() {
   return React.createElement(Container$n, null, React.createElement(Label$h, {
     label: "Delivery Point",
     htmlFor: "deliveryPointDropdown"
-  }), React.createElement(SelectDropdown, {
+  }), React.createElement(StyledSelectDropdown$2, {
     placeholder: "Select Delivery Point",
     options: deliveryPointOptions || [],
     inputId: "deliveryPointDropdown",
@@ -2038,10 +2042,12 @@ function DeliveryPointDropdown() {
     }),
     openMenuOnFocus: true,
     onChange: onChange,
-    isDisabled: true
+    // isDisabled={true}
+    className:  'disabled' 
   }));
 }
 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"])));
+var StyledSelectDropdown$2 = /*#__PURE__*/styled(SelectDropdown)(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &.disabled {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n"])));
 
 var _templateObject$x;
 function ServiceLevel() {
@@ -2067,16 +2073,22 @@ function ServiceLevel() {
     });
     setOrderData(newData);
   };
-  return React.createElement(Container$o, null, React.createElement(RadioButtonGroup$1, {
+  var isDisabled = true; // Example value
+  return React.createElement(Container$o, {
+    disabled: isDisabled
+  }, React.createElement(RadioButtonGroup$1, {
     selectedValue: (serviceLevelId == null ? void 0 : serviceLevelId.toString()) || '',
     heading: "Service Level",
     options: serviceLevelOptions || [],
     onChange: radioGroupHandler,
     required: true,
-    isDisabled: true
+    isDisabled: isDisabled
   }));
 }
-var Container$o = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\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"])));
+var Container$o = /*#__PURE__*/styled.div(_templateObject$x || (_templateObject$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n\n  ", "\n\n  > fieldset {\n    > div {\n      > div {\n        > label {\n          text-transform: capitalize;\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && "\n    cursor: not-allowed;\n    pointer-events: none;\n\n    > * {\n      cursor: not-allowed;\n    }\n  ";
+});
 
 var _templateObject$y;
 function AssemblyType() {
@@ -2193,7 +2205,7 @@ var getIcon = function getIcon(input) {
   return "" + baseURL + subPath;
 };
 
-var _templateObject$z, _templateObject2$n, _templateObject3$a;
+var _templateObject$z, _templateObject2$q, _templateObject3$a;
 function ServiceSlider(props) {
   // const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
   //   event.preventDefault();
@@ -2211,7 +2223,7 @@ function ServiceSlider(props) {
   })));
 }
 var ServiceName = /*#__PURE__*/styled.span(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  text-transform: capitalize;\n"])));
-var ServiceIcon = /*#__PURE__*/styled.img(_templateObject2$n || (_templateObject2$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-width: 28px;\n  height: 28px;\n"])));
+var ServiceIcon = /*#__PURE__*/styled.img(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  min-width: 28px;\n  height: 28px;\n"])));
 var Container$q = /*#__PURE__*/styled.div(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  cursor: not-allowed;\n  flex: 1;\n"])));
 
 var _templateObject$A;
@@ -2355,7 +2367,10 @@ function OrderServices() {
       setOrderDetails(_newData2);
     }
   };
-  return React.createElement(Container$r, null, orderServicesOptions == null ? void 0 : orderServicesOptions.map(function (service) {
+  var isDisabled = true;
+  return React.createElement(Container$r, {
+    disabled: isDisabled
+  }, orderServicesOptions == null ? void 0 : orderServicesOptions.map(function (service) {
     var _service$type;
     var selected = !!(orderServices != null && orderServices.find(function (s) {
       return (s == null ? void 0 : s.order_service_list_id) === (service == null ? void 0 : service.id) && s.is_deleted === false;
@@ -2370,21 +2385,24 @@ function OrderServices() {
     });
   }));
 }
-var Container$r = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  flex: 1;\n  @media screen and (max-width: 1170px) {\n    flex-wrap: wrap;\n  }\n"])));
+var Container$r = /*#__PURE__*/styled.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  flex: 1;\n  @media screen and (max-width: 1170px) {\n    flex-wrap: wrap;\n\n    ", "\n  }\n"])), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled && "\n    pointer-events: none;\n\n    > * {\n    pointer-events: none;\n    }\n  ";
+});
 
-var _templateObject$B, _templateObject2$o, _templateObject3$b, _templateObject4$4, _templateObject5$1;
+var _templateObject$B, _templateObject2$r, _templateObject3$b, _templateObject4$4, _templateObject5$1;
 function ServicesSection() {
   return React.createElement(CustomFormSection$3, null, React.createElement(Header, {
     label: "Services"
   }), React.createElement(Top, null, React.createElement(DropDownContainer, null, React.createElement(TimedServiceDropdown, null), React.createElement(ServiceTypeDropdown, null), React.createElement(DeliveryPointDropdown, null)), React.createElement(RadioContainer, null, React.createElement(ServiceLevel, null), React.createElement(AssemblyType, null))), React.createElement(Bottom, null, React.createElement(OrderServices, null)));
 }
 var Top = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n\n  @media screen and (max-width: 1280px) {\n    flex-direction: column;\n    gap: 20px;\n  }\n"])));
-var DropDownContainer = /*#__PURE__*/styled.div(_templateObject2$o || (_templateObject2$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: contents;\n  @media screen and (max-width: 1280px) {\n    display: flex;\n    gap: 15px;\n  }\n"])));
+var DropDownContainer = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: contents;\n  @media screen and (max-width: 1280px) {\n    display: flex;\n    gap: 15px;\n  }\n"])));
 var RadioContainer = /*#__PURE__*/styled.div(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: contents;\n  @media screen and (max-width: 1280px) {\n    display: flex;\n    gap: 15px;\n  }\n"])));
 var Bottom = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var CustomFormSection$3 = /*#__PURE__*/styled(FormSection)(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  flex-direction: column;\n  gap: 10px;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n"])));
+var CustomFormSection$3 = /*#__PURE__*/styled(FormSection)(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  flex-direction: column;\n  gap: 10px;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n  label,\n  input,\n  span {\n    cursor: default !important;\n  }\n"])));
 
-var _templateObject$C, _templateObject2$p, _templateObject3$c;
+var _templateObject$C, _templateObject2$s, _templateObject3$c;
 function AllowTracking() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0];
@@ -2393,7 +2411,7 @@ function AllowTracking() {
   return React.createElement(Container$s, null, React.createElement(CreatedBy, null, React.createElement(Text$1, null, "Created: "), " ", createdBy, ", ", createdAt));
 }
 var Text$1 = /*#__PURE__*/styled.span(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 16px;\n"])));
-var CreatedBy = /*#__PURE__*/styled.span(_templateObject2$p || (_templateObject2$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
+var CreatedBy = /*#__PURE__*/styled.span(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px;\n"])));
 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() {
@@ -2554,12 +2572,12 @@ function OrderDetailsFooter() {
 }
 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: 1px solid #edebe8;\n  background: #f8fafc;\n  margin: 0px;\n  border-radius: 0px 0px 8px 8px;\n"])));
 
-var _templateObject$E, _templateObject2$q, _templateObject3$d;
+var _templateObject$E, _templateObject2$t, _templateObject3$d;
 function ExpandedContent() {
   return React.createElement(MainContainer$3, null, React.createElement(Container$u, null, React.createElement(HalfWidth, null, React.createElement(CustomerSection, null)), React.createElement(HalfWidth, null, React.createElement(OrdersSection, null)), React.createElement(InstructionSection, null)), React.createElement(ServicesSection, null), React.createElement(OrderDetailsFooter, null));
 }
 var HalfWidth = /*#__PURE__*/styled.div(_templateObject$E || (_templateObject$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media (min-width: 769px) {\n    flex-direction: row; /* Change to row for large screens */\n    width: 50%;\n  }\n\n  @media (min-width: 1024px) {\n    width: auto;\n  }\n\n  @media (min-width: 1440px) {\n    width: 50%;\n  }\n"])));
-var Container$u = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  justify-content: space-between;\n\n  @media (min-width: 769px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 1024px) {\n    justify-content: flex-start;\n  }\n"])));
+var Container$u = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  justify-content: space-between;\n\n  @media (min-width: 769px) {\n    flex-direction: row;\n  }\n\n  @media (min-width: 1024px) {\n    justify-content: flex-start;\n  }\n"])));
 // const InstructionContainer = styled.div`
 //   display: flex;
 //   justify-content: center;
@@ -2605,7 +2623,7 @@ function OrderDetails$1() {
   return React.createElement(React.Fragment, null, React.createElement(ExpandedContent, null));
 }
 
-var _templateObject$F, _templateObject2$r, _templateObject3$e;
+var _templateObject$F, _templateObject2$u, _templateObject3$e;
 function AddNote() {
   var _useState = useState(''),
     noteText = _useState[0],
@@ -2733,7 +2751,7 @@ function AddNote() {
   }, "SAVE NOTE")));
 }
 var Container$v = /*#__PURE__*/styled.div(_templateObject$F || (_templateObject$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
-var SaveNoteContainer = /*#__PURE__*/styled.div(_templateObject2$r || (_templateObject2$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n  .disabled button {\n    opacity: 0.5;\n    cursor: default;\n  }\n"])));
+var SaveNoteContainer = /*#__PURE__*/styled.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n  .disabled button {\n    opacity: 0.5;\n    cursor: default;\n  }\n"])));
 var StyledTextArea = /*#__PURE__*/styled.textarea(_templateObject3$e || (_templateObject3$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 57px;\n  border-radius: 12px;\n  background: #fff;\n  resize: none;\n  border-radius: 8px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background: var(--Flowkit-White, #fff);\n  padding: 8px 12px;\n"])));
 
 var NotesTableData = [{
@@ -2749,13 +2767,13 @@ var NotesTableData = [{
   tableBody: []
 }];
 
-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 _templateObject2$v, _templateObject3$f, _templateObject4$5, _templateObject12;
+var Table = /*#__PURE__*/styled.table(_templateObject2$v || (_templateObject2$v = /*#__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 _templateObject$G, _templateObject2$w, _templateObject3$g, _templateObject4$6, _templateObject5$2, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 var GenericAuditLogsTable = function GenericAuditLogsTable() {
   var _getNotes$data, _getNotes$data2;
   var tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
@@ -2785,7 +2803,7 @@ var GenericAuditLogsTable = function GenericAuditLogsTable() {
   }, "No data found"))))));
 };
 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 DateTd = /*#__PURE__*/styled(Td)(_templateObject2$w || (_templateObject2$w = /*#__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"])));
@@ -2801,7 +2819,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$u, _templateObject3$h;
+var _templateObject$I, _templateObject2$x, _templateObject3$h;
 function Notes() {
   var _usemoduleIds = usemoduleIds(),
     moduleIds = _usemoduleIds[0],
@@ -2879,7 +2897,7 @@ function Notes() {
   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$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 CardHeader = /*#__PURE__*/styled.div(_templateObject2$x || (_templateObject2$x = /*#__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;
@@ -2905,7 +2923,7 @@ function ChevronUp(props) {
   }));
 }
 
-var _templateObject$K, _templateObject2$v, _templateObject3$i, _templateObject4$7, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
+var _templateObject$K, _templateObject2$y, _templateObject3$i, _templateObject4$7, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1;
 function CollapsableForm(props) {
   var _useState = useState(true),
     isExpanded = _useState[0],
@@ -2926,7 +2944,7 @@ function CollapsableForm(props) {
   }, 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: 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 CardHeader$1 = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__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"])));
@@ -2936,7 +2954,7 @@ var IconContainer$1 = /*#__PURE__*/styled.div(_templateObject6$1 || (_templateOb
 var ExpandedContent$1 = /*#__PURE__*/styled.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var CollapsedContent = /*#__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, _templateObject2$w, _templateObject3$j;
+var _templateObject$L, _templateObject2$z, _templateObject3$j;
 function CustomScrollBar(props) {
   var children = props.children,
     _props$thumbHeight = props.thumbHeight,
@@ -2955,10 +2973,10 @@ function CustomScrollBar(props) {
   }, children);
 }
 var ThumbVertical = /*#__PURE__*/styled.div(_templateObject$L || (_templateObject$L = /*#__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 View = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: hidden;\n"])));
 var TrackHorizontal = /*#__PURE__*/styled.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 
-var _templateObject$M, _templateObject2$x, _templateObject3$k, _templateObject4$8, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1;
+var _templateObject$M, _templateObject2$A, _templateObject3$k, _templateObject4$8, _templateObject5$4, _templateObject6$2, _templateObject7$2, _templateObject8$2, _templateObject9$1;
 function DynamicTable(_ref) {
   var columns = _ref.columns,
     data = _ref.data;
@@ -3005,7 +3023,7 @@ function DynamicTable(_ref) {
 //   cursor: pointer;
 // `;
 var Container$z = /*#__PURE__*/styled.div(_templateObject$M || (_templateObject$M = /*#__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 TableWrapper = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__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"])));
@@ -3014,7 +3032,7 @@ var TableHead = /*#__PURE__*/styled.thead(_templateObject7$2 || (_templateObject
 var Table$1 = /*#__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$N, _templateObject2$y;
+var _templateObject$N, _templateObject2$B;
 function Event(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.event_information_id;
@@ -3030,7 +3048,7 @@ function Event(props) {
   return React.createElement(RowContainer, null, React.createElement(Row, null, getDescription(data)));
 }
 var RowContainer = /*#__PURE__*/styled.div(_templateObject$N || (_templateObject$N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row = /*#__PURE__*/styled.div(_templateObject2$y || (_templateObject2$y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row = /*#__PURE__*/styled.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 //to change data into options
 var transformOption = function transformOption(option, key) {
@@ -3077,25 +3095,25 @@ var priorityData = [{
   color: '#E95252'
 }];
 
-var _templateObject$O, _templateObject2$z;
+var _templateObject$O, _templateObject2$C;
 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$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$1 = /*#__PURE__*/styled.div(_templateObject2$z || (_templateObject2$z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$1 = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$P, _templateObject2$A;
+var _templateObject$P, _templateObject2$D;
 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$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$2 = /*#__PURE__*/styled.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$2 = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$Q, _templateObject2$B;
+var _templateObject$Q, _templateObject2$E;
 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;
@@ -3104,7 +3122,7 @@ function Note(props) {
   }, React.createElement(Row$3, null, data));
 }
 var RowContainer$3 = /*#__PURE__*/styled.div(_templateObject$Q || (_templateObject$Q = /*#__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 Row$3 = /*#__PURE__*/styled.div(_templateObject2$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var tableColumns = [{
   header: 'Date',
@@ -3416,7 +3434,7 @@ function ConfirmedIcon() {
   }))));
 }
 
-var _templateObject$S, _templateObject2$C, _templateObject3$l, _templateObject4$9;
+var _templateObject$S, _templateObject2$F, _templateObject3$l, _templateObject4$9;
 function Status() {
   var _useStatusDetails = useStatusDetails(),
     orderStatus = _useStatusDetails[0];
@@ -3463,7 +3481,7 @@ var renderIcon = function renderIcon(value, orderStatus) {
   }
 };
 var BoxContainer = /*#__PURE__*/styled.div(_templateObject$S || (_templateObject$S = /*#__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 Heading = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__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  margin-top: 25px;\n"])));
 var TextContainer$1 = /*#__PURE__*/styled.div(_templateObject4$9 || (_templateObject4$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: flex;\n  align-items: center;\n"])));
 
@@ -3558,6 +3576,21 @@ function useFinalPayload() {
   return useAtom(_final);
 }
 
+var _templateObject$U, _templateObject2$G, _templateObject3$m, _templateObject4$a, _templateObject5$5, _templateObject6$3, _templateObject7$3;
+function Loader(props) {
+  return React.createElement(MainContainer$6, {
+    id: "loder"
+  }, React.createElement(Container$B, null, React.createElement(Spinner, null), React.createElement(Wrapper$b, null, React.createElement(Title, null, props.title || 'Loading...'), React.createElement(Subtitle, null, props.subtitle || "Sit tight - won't be long!"))));
+}
+var rotate = /*#__PURE__*/keyframes(_templateObject$U || (_templateObject$U = /*#__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$G || (_templateObject2$G = /*#__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$B = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__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$a || (_templateObject4$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
+var Title = /*#__PURE__*/styled.span(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: white;\n  font-size: 25px;\n  text-transform: capitalize;\n  font-weight: bold;\n"])));
+var Wrapper$b = /*#__PURE__*/styled.div(_templateObject6$3 || (_templateObject6$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+var MainContainer$6 = /*#__PURE__*/styled.div(_templateObject7$3 || (_templateObject7$3 = /*#__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 ReturnProductTable = function ReturnProductTable() {
   var _orderStaticData$retu;
   var _useSelectedOrders = useSelectedOrders(),
@@ -3586,9 +3619,16 @@ var ReturnProductTable = function ReturnProductTable() {
       performAction: false
     }),
     isresponse = _useApiHook.data,
-    setaction = _useApiHook.setShouldPerformAction;
+    setaction = _useApiHook.setShouldPerformAction,
+    loading = _useApiHook.loading;
   useEffect(function () {
     if (isresponse && isresponse.data) {
+      notification.success({
+        message: 'Success',
+        description:
+        //@ts-ignore
+        (isresponse == null ? void 0 : isresponse.message) || 'An error has occurred. Please try again later.'
+      });
       handleRemoveRow();
       setSelectedRowId(null);
     }
@@ -3625,7 +3665,9 @@ var ReturnProductTable = function ReturnProductTable() {
     });
     return matchedReason ? matchedReason.label : 'N/A'; // Return label or 'N/A' if no match found
   };
-  return React.createElement("div", null, React.createElement(StyledTableWrapper, {
+  return React.createElement("div", null, loading && React.createElement(Loader, {
+    title: "Deleting"
+  }), React.createElement(StyledTableWrapper, {
     id: "tableScrolling"
   }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", {
     className: "emailInvoiceCheckbox"
@@ -3663,20 +3705,20 @@ var ReturnProductTable = function ReturnProductTable() {
   }, "No records found"))))));
 };
 
-var _templateObject$U;
+var _templateObject$V;
 var ProductTable = function ProductTable() {
-  return React.createElement(Container$B, null, React.createElement(ReturnProductTable, null));
+  return React.createElement(Container$C, null, React.createElement(ReturnProductTable, null));
 };
-var Container$B = /*#__PURE__*/styled.div(_templateObject$U || (_templateObject$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* height: 230px;  */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
+var Container$C = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* height: 230px;  */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
 
-var _templateObject$V, _templateObject2$D;
+var _templateObject$W, _templateObject2$H;
 var NewReturnDropdown = function NewReturnDropdown() {
   var defaultSelectStyle = {
     width: '100%'
   };
   var defaultPopupClassName = 'dropDownStyle';
   var defaultSelectWrapperClass = 'rounded';
-  return React.createElement(Container$C, null, React.createElement(Text$3, null, "New Return Order:"), React.createElement(AntSelect, {
+  return React.createElement(Container$D, null, React.createElement(Text$3, null, "New Return Order:"), React.createElement(AntSelect, {
     options: [],
     placeholder: "Select",
     onChange: function onChange() {},
@@ -3689,10 +3731,10 @@ var NewReturnDropdown = function NewReturnDropdown() {
     selectWrapperClass: defaultSelectWrapperClass
   }));
 };
-var Container$C = /*#__PURE__*/styled.div(_templateObject$V || (_templateObject$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  align-self: stretch;\n"])));
-var Text$3 = /*#__PURE__*/styled.div(_templateObject2$D || (_templateObject2$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #000;\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"])));
+var Container$D = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  align-self: stretch;\n"])));
+var Text$3 = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #000;\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"])));
 
-var _templateObject$W, _templateObject2$E, _templateObject3$m;
+var _templateObject$X, _templateObject2$I, _templateObject3$n;
 // import { notification } from 'antd';
 function ExpandedContent$2() {
   // const SaveNote = () => {
@@ -3702,7 +3744,7 @@ function ExpandedContent$2() {
   //     description: ' Saved successfully.',
   //   });
   // };
-  return React.createElement(Container$D, null, React.createElement(ProductTable, null), React.createElement(MidConatiner, null, React.createElement(SaveNoteContainer$1, null, React.createElement(Button$1, {
+  return React.createElement(Container$E, null, React.createElement(ProductTable, null), React.createElement(MidConatiner, null, React.createElement(SaveNoteContainer$1, null, React.createElement(Button$1, {
     style: {
       borderRadius: '20px'
     },
@@ -3710,81 +3752,18 @@ function ExpandedContent$2() {
     disabled: true
   }, "Move Products"), React.createElement(NewReturnDropdown, null))));
 }
-var MidConatiner = /*#__PURE__*/styled.div(_templateObject$W || (_templateObject$W = /*#__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$E || (_templateObject2$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
-var Container$D = /*#__PURE__*/styled.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+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$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  gap: 10px;\n"])));
+var Container$E = /*#__PURE__*/styled.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$X;
-// import ModalManager from '../../modalsPopup/ModalManager';
-// import { countReducerAtom, useProductDetails } from '../../store';
-// import { useAtom } from 'jotai';
+var _templateObject$Y, _templateObject2$J;
 function CollapsedContent$1() {
-  // const [, dispatch] = useAtom(countReducerAtom);
-  // const [productdata] = useProductDetails();
-  // const totalItems = productdata?.length;
-  // const totalCube = () => {
-  //   let cubeData = 0;
-  //   for (let i = 0; i < productdata?.length; i++) {
-  //     cubeData += parseFloat(productdata[i].cube);
-  //   }
-  //   return `${cubeData.toFixed(2)}m³`;
-  // };
-  // const totalWeight = () => {
-  //   let weightData = 0;
-  //   for (let i = 0; i < productdata?.length; i++) {
-  //     weightData += parseFloat(productdata[i].weight);
-  //   }
-  //   return `${weightData.toFixed(2)} KG`;
-  // };
-  return React.createElement(Container$E, null, React.createElement(SectionHeader, {
+  return React.createElement(Container$F, null, React.createElement(SectionHeader, {
     label: "Products"
-  }));
+  }), React.createElement(Dimensions, null, "Products to be Returned"));
 }
-// const Dimensions = styled.span`
-//   font-family: 'Lato', sans-serif;
-//   font-size: 13px;
-//   font-weight: 500;
-//   line-height: 16px;
-//   color: #8e8a85;
-// `;
-// const Right = styled.div`
-//   margin-left: auto;
-//   display: flex;
-//   gap: 10px;
-//   margin-right: 10px;
-// `;
-// const Action = styled.span`
-//   color: #3a3630;
-//   font-family: 'Lato', sans-serif;
-//   font-size: 12px;
-//   font-style: normal;
-//   font-weight: 600;
-//   line-height: 20px;
-//   text-transform: uppercase;
-// `;
-// const ActionContainer = styled.div`
-//   padding: 5px 10px;
-//   border-radius: 4px;
-//   border: 1px solid #edebe8;
-//   background: #edebe8;
-//   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-//   cursor: pointer;
-// `;
-// const Items = styled.span`
-//   font-family: 'Roboto', sans-serif;
-//   font-size: 14px;
-//   font-weight: 500;
-//   line-height: 24px;
-//   color: #8e8a85;
-//   text-transform: capitalize;
-//   color: #aea9a1;
-// `;
-// const Left = styled.div`
-//   display: flex;
-//   align-items: center;
-//   gap: 30px;
-// `;
-var Container$E = /*#__PURE__*/styled.div(_templateObject$X || (_templateObject$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  gap: 30px;\n"])));
+var Dimensions = /*#__PURE__*/styled.span(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 24px; /* 171.429% */\n"])));
+var Container$F = /*#__PURE__*/styled.div(_templateObject2$J || (_templateObject2$J = /*#__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);
@@ -3895,22 +3874,22 @@ function ProductsInfo() {
   }, React.createElement(ExpandedContent$2, null));
 }
 
-var _templateObject$Y;
+var _templateObject$Z;
 function BackgroundModal(props) {
-  return createPortal(React.createElement(Container$F, Object.assign({}, props), props.children), document.body);
+  return createPortal(React.createElement(Container$G, Object.assign({}, props), props.children), document.body);
 }
-var Container$F = /*#__PURE__*/styled.div(_templateObject$Y || (_templateObject$Y = /*#__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$G = /*#__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 _templateObject$Z, _templateObject2$F, _templateObject3$n, _templateObject4$a;
+var _templateObject$_, _templateObject2$K, _templateObject3$o, _templateObject4$b;
 function AdditionalInformation(props) {
-  return React.createElement(Container$G, null, React.createElement(Rect, null), React.createElement(AdditionalInfo, null, React.createElement(Text$4, null, props.info)));
+  return React.createElement(Container$H, null, React.createElement(Rect, null), React.createElement(AdditionalInfo, null, React.createElement(Text$4, null, props.info)));
 }
-var Text$4 = /*#__PURE__*/styled.p(_templateObject$Z || (_templateObject$Z = /*#__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$G = /*#__PURE__*/styled.div(_templateObject2$F || (_templateObject2$F = /*#__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 Text$4 = /*#__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$H = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n"])));
+var Rect = /*#__PURE__*/styled.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 9px;\n  height: 45px;\n  background: #3a3630;\n"])));
+var AdditionalInfo = /*#__PURE__*/styled.div(_templateObject4$b || (_templateObject4$b = /*#__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$G, _templateObject3$o, _templateObject4$b;
+var _templateObject$$, _templateObject2$L, _templateObject3$p, _templateObject4$c;
 function OrderActionHeader(props) {
   var title = props.title,
     actions = props.actions,
@@ -3919,33 +3898,33 @@ function OrderActionHeader(props) {
     _props$infoText = props.infoText,
     infoText = _props$infoText === void 0 ? ' ' : _props$infoText,
     onClose = props.onClose;
-  return React.createElement(Container$H, null, React.createElement(Wrapper$b, null, React.createElement(Title, null, title), showInformation && React.createElement(AdditionalInformation, {
+  return React.createElement(Container$I, null, React.createElement(Wrapper$c, null, React.createElement(Title$1, null, title), showInformation && React.createElement(AdditionalInformation, {
     info: infoText
   }), actions), React.createElement(IconContainer$2, {
     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$G || (_templateObject2$G = /*#__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$H = /*#__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 Wrapper$c = /*#__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$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg > path {\n    fill: #ffffff;\n  }\n  cursor: pointer;\n"])));
+var Title$1 = /*#__PURE__*/styled.h3(_templateObject3$p || (_templateObject3$p = /*#__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$I = /*#__PURE__*/styled.div(_templateObject4$c || (_templateObject4$c = /*#__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$$, _templateObject2$H;
+var _templateObject$10, _templateObject2$M;
 function OrderActionFooter(props) {
   var isSubmitDisabled = props.isSubmitDisabled;
-  return React.createElement(Container$I, null, React.createElement(SubmitButton, {
+  return React.createElement(Container$J, null, React.createElement(SubmitButton, {
     shape: "rounded",
     colors: "primary",
     onClick: props.onSubmit,
     disabled: isSubmitDisabled
   }, props.submitButtonTitle || 'submit'), props.actions);
 }
-var SubmitButton = /*#__PURE__*/styled(Button$1)(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$I = /*#__PURE__*/styled.div(_templateObject2$H || (_templateObject2$H = /*#__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$10 || (_templateObject$10 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$J = /*#__PURE__*/styled.div(_templateObject2$M || (_templateObject2$M = /*#__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$10;
+var _templateObject$11;
 function OrderActionModal(props) {
-  return React.createElement(BackgroundModal, null, React.createElement(MainContainer$6, null, React.createElement(OrderActionHeader, {
+  return React.createElement(BackgroundModal, null, React.createElement(MainContainer$7, null, React.createElement(OrderActionHeader, {
     title: props.headerTitle,
     onClose: props.onCloseHeader,
     showInformation: props.showAdditionalInfo,
@@ -3958,11 +3937,11 @@ function OrderActionModal(props) {
     isSubmitDisabled: props.isSubmitDisabled
   })));
 }
-var MainContainer$6 = /*#__PURE__*/styled.div(_templateObject$10 || (_templateObject$10 = /*#__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  max-width: 75vw;\n  min-width: 30vw;\n"])));
+var MainContainer$7 = /*#__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  max-width: 75vw;\n  min-width: 30vw;\n"])));
 
-var _templateObject$11, _templateObject2$I;
+var _templateObject$12, _templateObject2$N;
 function OrderActionsDropdown(props) {
-  return React.createElement(Container$J, {
+  return React.createElement(Container$K, {
     className: props.className
   }, React.createElement(Label, null, props.label), React.createElement(AntSelect, {
     options: props.options,
@@ -3979,8 +3958,8 @@ function OrderActionsDropdown(props) {
     defaultValue: props.value
   }));
 }
-var Label = /*#__PURE__*/styled.label(_templateObject$11 || (_templateObject$11 = /*#__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$J = /*#__PURE__*/styled.div(_templateObject2$I || (_templateObject2$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+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$K = /*#__PURE__*/styled.div(_templateObject2$N || (_templateObject2$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
 function DocumentTypeDropdown() {
   var onSelect = function onSelect() {};
@@ -4060,7 +4039,7 @@ function UploadIcon(props) {
   })));
 }
 
-var _templateObject$12, _templateObject2$J, _templateObject3$p, _templateObject4$c, _templateObject5$5, _templateObject6$3, _templateObject7$3;
+var _templateObject$13, _templateObject2$O, _templateObject3$q, _templateObject4$d, _templateObject5$6, _templateObject6$4, _templateObject7$4;
 var Dragger = Upload.Dragger;
 var props = {
   name: 'file',
@@ -4082,20 +4061,20 @@ var props = {
   }
 };
 function DocFileUpload() {
-  return React.createElement(MainContainer$7, null, React.createElement(Dragger, Object.assign({}, props), React.createElement(Container$K, null, React.createElement(UploadButton, {
+  return React.createElement(MainContainer$8, null, React.createElement(Dragger, Object.assign({}, props), React.createElement(Container$L, null, React.createElement(UploadButton, {
     colors: 'secondary',
     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$12 || (_templateObject$12 = /*#__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$J || (_templateObject2$J = /*#__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$K = /*#__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 MainContainer$8 = /*#__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$O || (_templateObject2$O = /*#__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$q || (_templateObject3$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Text1 = /*#__PURE__*/styled.p(_templateObject4$d || (_templateObject4$d = /*#__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$6 || (_templateObject5$6 = /*#__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$4 || (_templateObject6$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 16px;\n  font-size: 14px;\n  padding: 7px 20px;\n"])));
+var Container$L = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__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$13, _templateObject2$K, _templateObject3$q, _templateObject4$d;
+var _templateObject$14, _templateObject2$P, _templateObject3$r, _templateObject4$e;
 // import DocFileUpload from './DocFileUpload';
 function AddResources() {
   var _useCurrentAction = useCurrentAction(),
@@ -4111,10 +4090,10 @@ 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$13 || (_templateObject$13 = /*#__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$K || (_templateObject2$K = /*#__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 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$P || (_templateObject2$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Top$1 = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  > div {\n    min-width: 240px;\n  }\n"])));
+var ContentContainer = /*#__PURE__*/styled.div(_templateObject4$e || (_templateObject4$e = /*#__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 initialValue = {
   due: undefined,
@@ -4252,24 +4231,24 @@ function useUpdateReminderData() {
   return useAtom(reminderUpdatePayload);
 }
 
-var _templateObject$14, _templateObject2$L, _templateObject3$r;
+var _templateObject$15, _templateObject2$Q, _templateObject3$s;
 // Styled components
-var StyledTableWrapper$1 = /*#__PURE__*/styled.div(_templateObject$14 || (_templateObject$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 290px);\n  scrollbar-width: none;\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
-var StyledTable$2 = /*#__PURE__*/styled.table(_templateObject2$L || (_templateObject2$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  padding: 10px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      th {\n        color: #3a3630;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: normal;\n        padding: 5px 15px;\n        background: #f0f2f2;\n        border-right: none;\n        border-left: none;\n        text-align: left;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-width: 1px 0;\n        text-transform: capitalize;\n        &:first-child {\n          border-radius: 100px 0 0 100px;\n          border-left: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        &:last-child {\n          border-radius: 0px 100px 100px 0;\n          border-right: 1px solid rgba(0, 0, 0, 0.08);\n        }\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        color: #3a3630;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: normal;\n        padding: 12px 15px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-right: none;\n        border-left: none;\n      }\n      .link {\n        color: #09f;\n        font-family: Roboto;\n        font-weight: 400;\n        cursor: pointer;\n      }\n      td {\n        .flex {\n          display: flex;\n          gap: 4px;\n          align-items: center;\n        }\n        .overDue {\n          border-radius: 20px;\n          border: 1px solid #edebe8;\n          background: #fff;\n          padding: 4px 8px;\n          color: #e95252;\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 16px;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .emptyTd {\n        border-radius: 100px !important;\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
-var EmptyDataContainer = /*#__PURE__*/styled.div(_templateObject3$r || (_templateObject3$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
-
-var _templateObject2$M, _templateObject3$s, _templateObject4$e, _templateObject5$6, _templateObject6$4, _templateObject7$4, _templateObject8$3, _templateObject9$2, _templateObject10, _templateObject11, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject18, _templateObject19$1, _templateObject24, _templateObject26;
-var StyledInput = /*#__PURE__*/styled(Input$1)(_templateObject2$M || (_templateObject2$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
-var StyledTextArea$1 = /*#__PURE__*/styled(TextArea)(_templateObject3$s || (_templateObject3$s = /*#__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$e || (_templateObject4$e = /*#__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$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
-var SplitText = /*#__PURE__*/styled.div(_templateObject6$4 || (_templateObject6$4 = /*#__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$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 0 0;\n  display: grid;\n  gap: 5px;\n  justify-content: center;\n"])));
+var StyledTableWrapper$1 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  max-height: calc(100vh - 290px);\n  scrollbar-width: none;\n  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */\n  &::-webkit-scrollbar {\n    width: 5px;\n    border-radius: 100px;\n    height: 5px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #777;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #7b61ff;\n    border-radius: 100px;\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background: #7b61ff;\n  }\n"])));
+var StyledTable$2 = /*#__PURE__*/styled.table(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-spacing: 0 10px;\n  width: 100%;\n  padding: 10px;\n  thead {\n    tr {\n      border-radius: 40px;\n      border-spacing: 0 10px;\n      th {\n        color: #3a3630;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: normal;\n        padding: 5px 15px;\n        background: #f0f2f2;\n        border-right: none;\n        border-left: none;\n        text-align: left;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-width: 1px 0;\n        text-transform: capitalize;\n        &:first-child {\n          border-radius: 100px 0 0 100px;\n          border-left: 1px solid rgba(0, 0, 0, 0.08);\n        }\n        &:last-child {\n          border-radius: 0px 100px 100px 0;\n          border-right: 1px solid rgba(0, 0, 0, 0.08);\n        }\n      }\n    }\n  }\n  tbody {\n    tr {\n      td {\n        color: #3a3630;\n        font-size: 13px;\n        font-style: normal;\n        font-weight: 400;\n        line-height: normal;\n        padding: 12px 15px;\n        background: #fff;\n        border: 1px solid rgba(0, 0, 0, 0.08);\n        border-right: none;\n        border-left: none;\n      }\n      .link {\n        color: #09f;\n        font-family: Roboto;\n        font-weight: 400;\n        cursor: pointer;\n      }\n      td {\n        .flex {\n          display: flex;\n          gap: 4px;\n          align-items: center;\n        }\n        .overDue {\n          border-radius: 20px;\n          border: 1px solid #edebe8;\n          background: #fff;\n          padding: 4px 8px;\n          color: #e95252;\n          font-size: 12px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 16px;\n        }\n      }\n      &:nth-child(even) td {\n        background: #f6fbff;\n      }\n      td:first-child {\n        border-radius: 100px 0 0 100px;\n        border-left: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      td:last-child {\n        border-radius: 0px 100px 100px 0;\n        border-right: 1px solid rgba(0, 0, 0, 0.08);\n      }\n      .emptyTd {\n        border-radius: 100px !important;\n      }\n      .flex {\n        display: flex;\n        flex-direction: row;\n        gap: 5px;\n        height: 29px;\n        align-items: center;\n      }\n\n      &.insideTable {\n        td {\n          border-radius: 0;\n          border: none;\n          &:last-child {\n            border-radius: 0;\n            border-right: none;\n          }\n        }\n        table {\n          border-spacing: 0;\n          width: 100%;\n          border-radius: 5px;\n          border: 1px solid rgba(0, 0, 0, 0.08);\n          overflow: hidden;\n          border-top-left-radius: 15px;\n          border-top-right-radius: 15px;\n          thead {\n            tr {\n              border-bottom: none;\n              th {\n                padding: 14px 20px;\n                text-align: left;\n                border-top: 0;\n                border-right: 0;\n                border-left: 0;\n                background: #f8fafc;\n                &:first-child {\n                  border-radius: 0;\n                  border-left: 1px solid rgba(0, 0, 0, 0.08);\n                  border-top-left-radius: 15px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                }\n              }\n            }\n          }\n          tbody {\n            tr {\n              td {\n                padding: 14px 20px;\n                text-align: left;\n                border-bottom: 1px solid rgba(58, 54, 48, 0.15);\n                background: #fff;\n                > svg {\n                  transform: scale(1.5);\n                  background-color: #edebe8;\n                  border-radius: 20px;\n                  padding: 5px;\n                }\n                &:last-child {\n                  border-radius: 0;\n                  border-right: none;\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  .actions {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    > svg {\n      transform: scale(1.5);\n      background-color: #edebe8;\n      border-radius: 20px;\n      padding: 5px;\n    }\n\n    .close-icon {\n      transform: scale(1.3);\n      background-color: transparent;\n      border-radius: 0;\n      padding: 0;\n    }\n  }\n"])));
+var EmptyDataContainer = /*#__PURE__*/styled.div(_templateObject3$s || (_templateObject3$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n"])));
+
+var _templateObject2$R, _templateObject3$t, _templateObject4$f, _templateObject5$7, _templateObject6$5, _templateObject7$5, _templateObject8$3, _templateObject9$2, _templateObject10, _templateObject11, _templateObject12$1, _templateObject13, _templateObject14, _templateObject15, _templateObject18, _templateObject19$1, _templateObject24, _templateObject26;
+var StyledInput = /*#__PURE__*/styled(Input$1)(_templateObject2$R || (_templateObject2$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
+var StyledTextArea$1 = /*#__PURE__*/styled(TextArea)(_templateObject3$t || (_templateObject3$t = /*#__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$f || (_templateObject4$f = /*#__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$7 || (_templateObject5$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
+var SplitText = /*#__PURE__*/styled.div(_templateObject6$5 || (_templateObject6$5 = /*#__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$5 || (_templateObject7$5 = /*#__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$2 = /*#__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$1 = /*#__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$L = /*#__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 Container$M = /*#__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"])));
@@ -4358,7 +4337,7 @@ function SplitOrderTable() {
   }))));
 }
 
-var _templateObject$15;
+var _templateObject$16;
 function SplitOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -4406,7 +4385,7 @@ function SplitOrder() {
     isSubmitDisabled: isSubmitDisabled()
   }, React.createElement(ContentContainer$2, null, React.createElement(SplitOrderTable, null)));
 }
-var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject$15 || (_templateObject$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n  scrollbar-width: thin;\n"])));
+var ContentContainer$2 = /*#__PURE__*/styled.div(_templateObject$16 || (_templateObject$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n  scrollbar-width: thin;\n"])));
 
 function RadioButtonCheckIcon(props) {
   return React.createElement("svg", Object.assign({
@@ -4437,7 +4416,7 @@ var fonts = {
   secondary: "'Lato', sans-serif"
 };
 
-var _templateObject$16, _templateObject2$N, _templateObject3$t;
+var _templateObject$17, _templateObject2$S, _templateObject3$u;
 function RadioButton(props) {
   return React.createElement(RadioContainer$1, null, props.checked && React.createElement(RadioButtonCheckIcon, {
     color: props.color
@@ -4448,15 +4427,15 @@ function RadioButton(props) {
     htmlFor: props.id
   }, props.label));
 }
-var Label$3 = /*#__PURE__*/styled.label(_templateObject$16 || (_templateObject$16 = /*#__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$N || (_templateObject2$N = /*#__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$3, function (props) {
+var Label$3 = /*#__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$S || (_templateObject2$S = /*#__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$3, function (props) {
   return props.color || '#6396e5';
 }, function (props) {
   return props.color || '#6396e5';
 });
-var RadioContainer$1 = /*#__PURE__*/styled.div(_templateObject3$t || (_templateObject3$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  align-items: center;\n"])));
+var RadioContainer$1 = /*#__PURE__*/styled.div(_templateObject3$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  align-items: center;\n"])));
 
-var _templateObject$17, _templateObject2$O, _templateObject3$u, _templateObject4$f, _templateObject5$7, _templateObject6$5, _templateObject7$5;
+var _templateObject$18, _templateObject2$T, _templateObject3$v, _templateObject4$g, _templateObject5$8, _templateObject6$6, _templateObject7$6;
 function RadioButtonGroup(props) {
   var heading = props.heading,
     _props$direction = props.direction,
@@ -4486,24 +4465,24 @@ function RadioButtonGroup(props) {
   }
   return React.createElement(Fieldset, null, React.createElement(LegendContainer, null, React.createElement(Legend, null, heading), required && React.createElement(RequiredText, {
     "$required": required || false
-  }, "*")), React.createElement(Wrapper$c, {
+  }, "*")), React.createElement(Wrapper$d, {
     "$direction": direction,
     className: "custom-wrapper"
   }, renderOptions()));
 }
-var Separator = /*#__PURE__*/styled.div(_templateObject$17 || (_templateObject$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
-var labelStyles = /*#__PURE__*/css(_templateObject2$O || (_templateObject2$O = /*#__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$u || (_templateObject3$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
+var Separator = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 1px;\n  background: #e0e2e7;\n"])));
+var labelStyles = /*#__PURE__*/css(_templateObject2$T || (_templateObject2$T = /*#__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$v || (_templateObject3$v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), function (props) {
   return !props.$required && 'visibility: hidden;';
 }, labelStyles);
-var LegendContainer = /*#__PURE__*/styled.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
-var Legend = /*#__PURE__*/styled.legend(_templateObject5$7 || (_templateObject5$7 = /*#__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$5 || (_templateObject6$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
-var Wrapper$c = /*#__PURE__*/styled.div(_templateObject7$5 || (_templateObject7$5 = /*#__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$g || (_templateObject4$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  margin-bottom: 7px;\n"])));
+var Legend = /*#__PURE__*/styled.legend(_templateObject5$8 || (_templateObject5$8 = /*#__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$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  padding: 0px;\n"])));
+var Wrapper$d = /*#__PURE__*/styled.div(_templateObject7$6 || (_templateObject7$6 = /*#__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$18;
+var _templateObject$19;
 var deliveryPoints = [{
   label: 'Hallway',
   value: 'hallway'
@@ -4525,7 +4504,7 @@ function DeliveryPoint() {
   var _React$useState = React.useState(deliveryPoints[0].value),
     selectedValue = _React$useState[0],
     setSelectedValue = _React$useState[1];
-  return React.createElement(Container$M, null, React.createElement(RadioButtonGroup, {
+  return React.createElement(Container$N, null, React.createElement(RadioButtonGroup, {
     heading: "Delivery Point",
     options: deliveryPoints || [],
     onChange: radioGroupHandler,
@@ -4534,16 +4513,16 @@ function DeliveryPoint() {
     required: false
   }));
 }
-var Container$M = /*#__PURE__*/styled.div(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  /* height: 30px; */\n  padding: 1px;\n  align-items: flex-start;\n  align-self: stretch;\n"])));
+var Container$N = /*#__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 _templateObject$19, _templateObject2$P, _templateObject3$v, _templateObject4$g, _templateObject5$8, _templateObject6$6, _templateObject7$6, _templateObject8$4;
+var _templateObject$1a, _templateObject2$U, _templateObject3$w, _templateObject4$h, _templateObject5$9, _templateObject6$7, _templateObject7$7, _templateObject8$4;
 var _excluded$2 = ["imageSrc", "label", "checked"];
 function Checkbox(props) {
   var imageSrc = props.imageSrc,
     label = props.label,
     checked = props.checked,
     rest = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return React.createElement(MainContainer$8, {
+  return React.createElement(MainContainer$9, {
     "$checked": checked
   }, React.createElement(CheckboxContainer, null, React.createElement(HiddenCheckbox, Object.assign({
     type: "checkbox"
@@ -4557,20 +4536,20 @@ function Checkbox(props) {
     "$checked": checked
   }, label)));
 }
-var Image = /*#__PURE__*/styled.img(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: 20px;\n  filter: ", ";\n"])), function (props) {
+var Image = /*#__PURE__*/styled.img(_templateObject$1a || (_templateObject$1a = /*#__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$P || (_templateObject2$P = /*#__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$v || (_templateObject3$v = /*#__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$U || (_templateObject2$U = /*#__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$w || (_templateObject3$w = /*#__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$5 = /*#__PURE__*/styled.span(_templateObject4$g || (_templateObject4$g = /*#__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$5 = /*#__PURE__*/styled.span(_templateObject4$h || (_templateObject4$h = /*#__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$8 || (_templateObject5$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n"])));
-var CheckboxContainer = /*#__PURE__*/styled.div(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var HiddenCheckbox = /*#__PURE__*/styled.input(_templateObject7$6 || (_templateObject7$6 = /*#__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$4 || (_templateObject8$4 = /*#__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$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n"])));
+var CheckboxContainer = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var HiddenCheckbox = /*#__PURE__*/styled.input(_templateObject7$7 || (_templateObject7$7 = /*#__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$9 = /*#__PURE__*/styled.div(_templateObject8$4 || (_templateObject8$4 = /*#__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';
 });
 
@@ -4597,10 +4576,10 @@ var getIcon$1 = function getIcon(input) {
   return "" + baseURL$1 + subPath;
 };
 
-var _templateObject$1a;
+var _templateObject$1b;
 function OrderServices$1() {
   // TO DO -> get services from static data
-  return React.createElement(Container$N, null, React.createElement(Checkbox, {
+  return React.createElement(Container$O, null, React.createElement(Checkbox, {
     checked: false,
     label: "Assemble",
     imageSrc: getIcon$1(1)
@@ -4622,23 +4601,23 @@ function OrderServices$1() {
     imageSrc: getIcon$1(4)
   }));
 }
-var Container$N = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n"])));
+var Container$O = /*#__PURE__*/styled.div(_templateObject$1b || (_templateObject$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-wrap: wrap;\n"])));
 
-var _templateObject$1b, _templateObject2$Q;
+var _templateObject$1c, _templateObject2$V;
 function Notes$1(_ref) {
   var onNotesChange = _ref.onNotesChange;
   var handleTextChange = function handleTextChange(event) {
     onNotesChange(event.target.value);
   };
-  return React.createElement(Container$O, null, React.createElement(Label$4, null, "Notes"), React.createElement(TextArea, {
+  return React.createElement(Container$P, null, React.createElement(Label$4, null, "Notes"), React.createElement(TextArea, {
     rows: 15,
     onChange: handleTextChange
   }));
 }
-var Label$4 = /*#__PURE__*/styled.span(_templateObject$1b || (_templateObject$1b = /*#__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$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n"])));
+var Label$4 = /*#__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$P = /*#__PURE__*/styled.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  flex-direction: column;\n  width: 100%;\n"])));
 
-var _templateObject$1c, _templateObject2$R, _templateObject3$w;
+var _templateObject$1d, _templateObject2$W, _templateObject3$x;
 function LogServiceRefusal() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -4658,9 +4637,9 @@ function LogServiceRefusal() {
     }
   }))));
 }
-var ContentContainer$3 = /*#__PURE__*/styled.div(_templateObject$1c || (_templateObject$1c = /*#__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$R || (_templateObject2$R = /*#__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$w || (_templateObject3$w = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var ContentContainer$3 = /*#__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$W || (_templateObject2$W = /*#__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$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 function ReturnAction() {
   var onSelect = function onSelect() {};
@@ -4686,7 +4665,7 @@ function ReturnReason() {
   });
 }
 
-var _templateObject$1d, _templateObject2$S, _templateObject3$x, _templateObject4$h, _templateObject5$9, _templateObject6$7, _templateObject7$7;
+var _templateObject$1e, _templateObject2$X, _templateObject3$y, _templateObject4$i, _templateObject5$a, _templateObject6$8, _templateObject7$8;
 function CancelOrder() {
   var _orderStaticData$canc;
   var _useOrderId = useOrderId(),
@@ -4790,27 +4769,27 @@ function CancelOrder() {
     options: cancelReasonOptions || [],
     onSelect: onSelectCancelReason,
     value: cancelReason
-  }), React.createElement(Wrapper$d, null, React.createElement(ReturnAction, null), React.createElement(ReturnReason, null))), React.createElement(TopRight, null, React.createElement(Container$P, null, React.createElement(Label$5, null, "Cancelation Note"), React.createElement(TextArea, {
+  }), React.createElement(Wrapper$e, null, React.createElement(ReturnAction, null), React.createElement(ReturnReason, null))), React.createElement(TopRight, null, React.createElement(Container$Q, null, React.createElement(Label$5, null, "Cancelation Note"), React.createElement(TextArea, {
     rows: 5,
     onChange: onChangeNotes,
     value: cancelNotes,
     placeholder: "Reason for Cancel  Order"
   }))))));
 }
-var Label$5 = /*#__PURE__*/styled.label(_templateObject$1d || (_templateObject$1d = /*#__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 Wrapper$d = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  > div {\n    width: 50%;\n  }\n"])));
-var TopLeft = /*#__PURE__*/styled.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  width: 50%;\n"])));
-var TopRight = /*#__PURE__*/styled.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
-var Top$2 = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
+var Label$5 = /*#__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$Q = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Wrapper$e = /*#__PURE__*/styled.div(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n  > div {\n    width: 50%;\n  }\n"])));
+var TopLeft = /*#__PURE__*/styled.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  width: 50%;\n"])));
+var TopRight = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 50%;\n"])));
+var Top$2 = /*#__PURE__*/styled.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 30px;\n  width: 100%;\n"])));
 // const Bottom = styled.div``;
-var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  flex-direction: column;\n"])));
+var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 0px 15px;\n  align-items: flex-start;\n  gap: 10px;\n  flex-direction: column;\n"])));
 
-var _templateObject$1e, _templateObject5$a, _templateObject6$8, _templateObject7$8;
-var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject$1e || (_templateObject$1e = /*#__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 = /*#__PURE__*/styled.div(_templateObject5$a || (_templateObject5$a = /*#__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(_templateObject6$8 || (_templateObject6$8 = /*#__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 = /*#__PURE__*/styled.div(_templateObject7$8 || (_templateObject7$8 = /*#__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$1f, _templateObject5$b, _templateObject6$9, _templateObject7$9;
+var ContentContainer$5 = /*#__PURE__*/styled.div(_templateObject$1f || (_templateObject$1f = /*#__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 = /*#__PURE__*/styled.div(_templateObject5$b || (_templateObject5$b = /*#__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(_templateObject6$9 || (_templateObject6$9 = /*#__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 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__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 = [{
   value: 'bjsCouriers',
@@ -5107,7 +5086,7 @@ var UpdateProductType = function UpdateProductType() {
   );
 };
 
-var _templateObject$1f, _templateObject2$T, _templateObject3$y;
+var _templateObject$1g, _templateObject2$Y, _templateObject3$z;
 function EmailAddress() {
   var emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
@@ -5139,7 +5118,7 @@ function EmailAddress() {
       });
     });
   };
-  return React.createElement(Container$Q, null, React.createElement(Label$6, null, "Email Address"), React.createElement(Input$2, {
+  return React.createElement(Container$R, null, React.createElement(Label$6, null, "Email Address"), React.createElement(Input$2, {
     style: {
       borderRadius: '15px'
     },
@@ -5148,11 +5127,11 @@ function EmailAddress() {
     onChange: onChange
   }), errors.emailError && React.createElement(ErrorText$2, null, errors.emailError));
 }
-var Label$6 = /*#__PURE__*/styled.label(_templateObject$1f || (_templateObject$1f = /*#__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 ErrorText$2 = /*#__PURE__*/styled.span(_templateObject3$y || (_templateObject3$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
+var Label$6 = /*#__PURE__*/styled.label(_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$R = /*#__PURE__*/styled.div(_templateObject2$Y || (_templateObject2$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var ErrorText$2 = /*#__PURE__*/styled.span(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
-var _templateObject$1g, _templateObject2$U, _templateObject3$z;
+var _templateObject$1h, _templateObject2$Z, _templateObject3$A;
 function ContactPhone() {
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0],
@@ -5201,7 +5180,7 @@ function ContactPhone() {
       });
     }
   };
-  return React.createElement(Container$R, null, React.createElement(Label$7, null, "Contact Phone"), React.createElement(Input$2, {
+  return React.createElement(Container$S, null, React.createElement(Label$7, null, "Contact Phone"), React.createElement(Input$2, {
     name: "contact-home",
     type: "text",
     placeholder: "Home Number",
@@ -5213,11 +5192,11 @@ function ContactPhone() {
     onChange: onChange
   }), errors.homeContactError && React.createElement(ErrorText$3, null, errors.homeContactError));
 }
-var Label$7 = /*#__PURE__*/styled.label(_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$R = /*#__PURE__*/styled.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
-var ErrorText$3 = /*#__PURE__*/styled.span(_templateObject3$z || (_templateObject3$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
+var Label$7 = /*#__PURE__*/styled.label(_templateObject$1h || (_templateObject$1h = /*#__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$Z || (_templateObject2$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var ErrorText$3 = /*#__PURE__*/styled.span(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
-var _templateObject$1h, _templateObject2$V, _templateObject3$A;
+var _templateObject$1i, _templateObject2$_, _templateObject3$B;
 function ContactWork$1() {
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0],
@@ -5266,7 +5245,7 @@ function ContactWork$1() {
       });
     }
   };
-  return React.createElement(Container$S, null, React.createElement(Label$8, null, "Contact Work"), React.createElement(Input$2, {
+  return React.createElement(Container$T, null, React.createElement(Label$8, null, "Contact Work"), React.createElement(Input$2, {
     name: "contact-work",
     type: "text",
     placeholder: "Work Number",
@@ -5278,11 +5257,11 @@ function ContactWork$1() {
     onChange: onChange
   }), errors.workContactError && React.createElement(ErrorText$4, null, errors.workContactError));
 }
-var Label$8 = /*#__PURE__*/styled.label(_templateObject$1h || (_templateObject$1h = /*#__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"])));
-var ErrorText$4 = /*#__PURE__*/styled.span(_templateObject3$A || (_templateObject3$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
+var Label$8 = /*#__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$T = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var ErrorText$4 = /*#__PURE__*/styled.span(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
-var _templateObject$1i, _templateObject2$W, _templateObject3$B;
+var _templateObject$1j, _templateObject2$$, _templateObject3$C;
 function ContactMobile$1() {
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0],
@@ -5331,7 +5310,7 @@ function ContactMobile$1() {
       });
     }
   };
-  return React.createElement(Container$T, null, React.createElement(Label$9, null, "Contact Mobile"), React.createElement(Input$2, {
+  return React.createElement(Container$U, null, React.createElement(Label$9, null, "Contact Mobile"), React.createElement(Input$2, {
     name: "contact-work",
     type: "text",
     placeholder: "Mobile Number",
@@ -5343,9 +5322,9 @@ function ContactMobile$1() {
     onChange: onChange
   }), errors.mobileError && React.createElement(ErrorText$5, null, errors.mobileError));
 }
-var Label$9 = /*#__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$T = /*#__PURE__*/styled.div(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
-var ErrorText$5 = /*#__PURE__*/styled.span(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
+var Label$9 = /*#__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$U = /*#__PURE__*/styled.div(_templateObject2$$ || (_templateObject2$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var ErrorText$5 = /*#__PURE__*/styled.span(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
 function ContactTypeDropdown() {
   var _useOrderStaticData = useOrderStaticData(),
@@ -5411,7 +5390,7 @@ function ActionDropdown() {
   });
 }
 
-var _templateObject$1j, _templateObject2$X;
+var _templateObject$1k, _templateObject2$10;
 function DeliveryDate$1() {
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0];
@@ -5435,7 +5414,7 @@ function DeliveryDate$1() {
   var today = new Date();
   var tomorrow = new Date(today);
   tomorrow.setDate(today.getDate() + 1);
-  return React.createElement(Container$U, null, React.createElement(Label$a, null, "Delivery Date"), React.createElement(DatePicker, {
+  return React.createElement(Container$V, null, React.createElement(Label$a, null, "Delivery Date"), React.createElement(DatePicker, {
     onChange: handleDateChange,
     format: "DD/MM/YYYY",
     value: deliveryDate ? dayjs(deliveryDate) : null,
@@ -5445,8 +5424,8 @@ function DeliveryDate$1() {
     minDate: dayjs(tomorrow)
   }));
 }
-var Label$a = /*#__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$U = /*#__PURE__*/styled.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n"])));
+var Label$a = /*#__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$V = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  white-space: nowrap;\n"])));
 
 function convertTo12HourFormat$1(time24) {
   var _time24$split, _minutes$toString;
@@ -5495,19 +5474,19 @@ function TimedServiceDropdown$1() {
   });
 }
 
-var _templateObject$1k, _templateObject2$Y, _templateObject3$C, _templateObject4$i;
+var _templateObject$1l, _templateObject2$11, _templateObject3$D, _templateObject4$j;
 function CustomerInformation() {
   var _orderDetails$order_r;
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0];
-  return React.createElement(Container$V, null, React.createElement(Title$1, null, "Address"), React.createElement(AddressField, null, orderDetails == null || (_orderDetails$order_r = orderDetails.order_recipient) == null ? void 0 : _orderDetails$order_r.address), 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)));
+  return React.createElement(Container$W, null, React.createElement(Title$2, null, "Address"), React.createElement(AddressField, null, orderDetails == null || (_orderDetails$order_r = orderDetails.order_recipient) == null ? void 0 : _orderDetails$order_r.address), React.createElement(Wrapper$f, null, React.createElement(EmailAddress, null), React.createElement(ContactPhone, null)), React.createElement(Wrapper$f, null, React.createElement(ContactWork$1, null), React.createElement(ContactMobile$1, null)), React.createElement(Wrapper$f, null, React.createElement(ContactTypeDropdown, null), React.createElement(ActionDropdown, null)), React.createElement(Wrapper$f, null, React.createElement(DeliveryDate$1, null), React.createElement(TimedServiceDropdown$1, null)));
 }
-var Wrapper$e = /*#__PURE__*/styled.div(_templateObject$1k || (_templateObject$1k = /*#__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$Y || (_templateObject2$Y = /*#__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$C || (_templateObject3$C = /*#__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$V = /*#__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 Wrapper$f = /*#__PURE__*/styled.div(_templateObject$1l || (_templateObject$1l = /*#__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$11 || (_templateObject2$11 = /*#__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$2 = /*#__PURE__*/styled.span(_templateObject3$D || (_templateObject3$D = /*#__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$W = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__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$1l, _templateObject2$Z;
+var _templateObject$1m, _templateObject2$12;
 function ProductTable$1() {
   var _useProductDetails = useProductDetails(),
     orderProductDetails = _useProductDetails[0];
@@ -5516,7 +5495,7 @@ function ProductTable$1() {
   if (!orderProductDetails) {
     return null;
   }
-  return React.createElement(Container$W, null, React.createElement(Title$2, null, "Products (", orderProductDetails == null ? void 0 : orderProductDetails.length, ")"), React.createElement(StyledTableWrapper$1, null, React.createElement(StyledTable$2, {
+  return React.createElement(Container$X, null, React.createElement(Title$3, null, "Products (", orderProductDetails == null ? void 0 : orderProductDetails.length, ")"), React.createElement(StyledTableWrapper$1, null, React.createElement(StyledTable$2, {
     className: "scrollClass"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Action"), React.createElement("th", null, "Code"), React.createElement("th", null, "Description"), React.createElement("th", null, "Parts"))), React.createElement("tbody", null, loading ? React.createElement("tr", null, React.createElement("td", {
     colSpan: 6
@@ -5534,10 +5513,10 @@ function ProductTable$1() {
     }, React.createElement("td", null, order == null || (_order$order_product_ = order.order_product_type) == null ? void 0 : _order$order_product_.type), React.createElement("td", null, order == null ? void 0 : order.code), React.createElement("td", null, order == null ? void 0 : order.description), React.createElement("td", null, order == null ? void 0 : order.sku));
   })))));
 }
-var Title$2 = /*#__PURE__*/styled.h2(_templateObject$1l || (_templateObject$1l = /*#__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$W = /*#__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 Title$3 = /*#__PURE__*/styled.h2(_templateObject$1m || (_templateObject$1m = /*#__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$X = /*#__PURE__*/styled.div(_templateObject2$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
 
-var _templateObject$1m, _templateObject2$_;
+var _templateObject$1n, _templateObject2$13;
 function NotesTable() {
   var _useState = useState(null),
     moduleIds = _useState[0],
@@ -5605,7 +5584,7 @@ function NotesTable() {
   if ((notes == null ? void 0 : notes.length) === 0) {
     return null;
   }
-  return React.createElement(Container$X, null, React.createElement(Title$3, null, "Notes (", notes == null ? void 0 : notes.length, ")"), React.createElement(StyledTableWrapper$1, null, React.createElement(StyledTable$2, {
+  return React.createElement(Container$Y, null, React.createElement(Title$4, null, "Notes (", notes == null ? void 0 : notes.length, ")"), React.createElement(StyledTableWrapper$1, null, React.createElement(StyledTable$2, {
     className: "scrollClass"
   }, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null, "Created"), React.createElement("th", null, "Notes"))), React.createElement("tbody", null, loading ? React.createElement("tr", null, React.createElement("td", {
     colSpan: 6
@@ -5627,53 +5606,53 @@ function NotesTable() {
     }, order == null ? void 0 : order.created_by), React.createElement("div", null, format(new Date(order == null ? void 0 : order.created_at), "dd/MM/yyyy '@' HH:mm"))), React.createElement("td", null, order == null ? void 0 : order.description));
   })))));
 }
-var Title$3 = /*#__PURE__*/styled.h2(_templateObject$1m || (_templateObject$1m = /*#__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$X = /*#__PURE__*/styled.div(_templateObject2$_ || (_templateObject2$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
+var Title$4 = /*#__PURE__*/styled.h2(_templateObject$1n || (_templateObject$1n = /*#__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$Y = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  > div {\n    min-height: 165px;\n  }\n"])));
 
-var _templateObject$1n, _templateObject2$$;
+var _templateObject$1o, _templateObject2$14;
 function ConfirmationNotes() {
-  return React.createElement(Container$Y, null, React.createElement(Label$b, null, "Notes"), React.createElement(TextArea, {
+  return React.createElement(Container$Z, null, React.createElement(Label$b, null, "Notes"), React.createElement(TextArea, {
     rows: 5,
     placeholder: "Enter Notes"
   }));
 }
-var Label$b = /*#__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$Y = /*#__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$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$Z = /*#__PURE__*/styled.div(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1o, _templateObject2$10;
+var _templateObject$1p, _templateObject2$15;
 function DeliveryInstructions$1() {
-  return React.createElement(Container$Z, null, React.createElement(Label$c, null, "Delivery Instructions"), React.createElement(TextArea, {
+  return React.createElement(Container$_, null, React.createElement(Label$c, null, "Delivery Instructions"), React.createElement(TextArea, {
     rows: 5,
     placeholder: "Enter Delivery Instructions"
   }));
 }
-var Label$c = /*#__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$Z = /*#__PURE__*/styled.div(_templateObject2$10 || (_templateObject2$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$c = /*#__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$_ = /*#__PURE__*/styled.div(_templateObject2$15 || (_templateObject2$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1p, _templateObject2$11;
+var _templateObject$1q, _templateObject2$16;
 function ContactWith() {
-  return React.createElement(Container$_, null, React.createElement(Label$d, null, "Contact With"), React.createElement(Input$2, {
+  return React.createElement(Container$$, null, React.createElement(Label$d, null, "Contact With"), React.createElement(Input$2, {
     style: {
       borderRadius: '15px'
     }
   }));
 }
-var Label$d = /*#__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$_ = /*#__PURE__*/styled.div(_templateObject2$11 || (_templateObject2$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
+var Label$d = /*#__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$$ = /*#__PURE__*/styled.div(_templateObject2$16 || (_templateObject2$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
 
-var _templateObject$1q, _templateObject2$12, _templateObject3$D, _templateObject4$j;
+var _templateObject$1r, _templateObject2$17, _templateObject3$E, _templateObject4$k;
 function SlotAndInstructions() {
   var _orderDetails$order_r;
   var _useOrderDetailsConfi = useOrderDetailsConfirmOrder(),
     orderDetails = _useOrderDetailsConfi[0];
-  return React.createElement(Container$$, null, React.createElement(Slot, null, React.createElement(Title$4, null, "Slot"), React.createElement(Value, null, orderDetails == null || (_orderDetails$order_r = orderDetails.order_routes) == null ? void 0 : _orderDetails$order_r.slot)), React.createElement(ContactWith, null), React.createElement(DeliveryInstructions$1, null), React.createElement(ConfirmationNotes, null));
+  return React.createElement(Container$10, null, React.createElement(Slot, null, React.createElement(Title$5, null, "Slot"), React.createElement(Value, null, orderDetails == null || (_orderDetails$order_r = orderDetails.order_routes) == null ? void 0 : _orderDetails$order_r.slot)), React.createElement(ContactWith, null), React.createElement(DeliveryInstructions$1, null), React.createElement(ConfirmationNotes, null));
 }
-var Value = /*#__PURE__*/styled.span(_templateObject$1q || (_templateObject$1q = /*#__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$12 || (_templateObject2$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
-var Title$4 = /*#__PURE__*/styled.span(_templateObject3$D || (_templateObject3$D = /*#__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$$ = /*#__PURE__*/styled.div(_templateObject4$j || (_templateObject4$j = /*#__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$1r || (_templateObject$1r = /*#__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$17 || (_templateObject2$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n"])));
+var Title$5 = /*#__PURE__*/styled.span(_templateObject3$E || (_templateObject3$E = /*#__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$10 = /*#__PURE__*/styled.div(_templateObject4$k || (_templateObject4$k = /*#__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$1r, _templateObject2$13;
+var _templateObject$1s, _templateObject2$18;
 // import { filterObject } from '../../../utils';
 function ConfirmOrder() {
   var _useCurrentAction = useCurrentAction(),
@@ -5852,10 +5831,10 @@ function ConfirmOrder() {
     title: "There is Orders with identical postcodes that are yet to be delivered.View Orders",
     showOkButton: false,
     showCloseIcon: false
-  }), React.createElement(Wrapper$f, null, React.createElement(CustomerInformation, null), React.createElement(SlotAndInstructions, null)), React.createElement(ProductTable$1, null), React.createElement(NotesTable, null)));
+  }), React.createElement(Wrapper$g, 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$1r || (_templateObject$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
-var ContentContainer$6 = /*#__PURE__*/styled.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n  scrollbar-width: thin;\n"])));
+var Wrapper$g = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var ContentContainer$6 = /*#__PURE__*/styled.div(_templateObject2$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* display: flex; */\n  padding: 15px 12px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: white;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  overflow: auto;\n  min-height: 500px;\n  overflow-x: hidden;\n  max-height: 500px;\n  scrollbar-width: thin;\n"])));
 
 function SendSmsModal() {
   var _useCurrentAction = useCurrentAction(),
@@ -6142,16 +6121,16 @@ function HoldOrderModal() {
   })))));
 }
 
-var _templateObject$1s, _templateObject2$14, _templateObject3$E;
+var _templateObject$1t, _templateObject2$19, _templateObject3$F;
 // import {
 //   EscalationCategory,
 //   EscalationLevel,
 //   EscalationReason,
 //   EscalationStatus,
 // } from '../../utils';
-var FlexContainer = /*#__PURE__*/styled.div(_templateObject$1s || (_templateObject$1s = /*#__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$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
-var StyledAntSelect = /*#__PURE__*/styled(AntSelect)(_templateObject3$E || (_templateObject3$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
+var FlexContainer = /*#__PURE__*/styled.div(_templateObject$1t || (_templateObject$1t = /*#__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$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  flex: 1;\n"])));
+var StyledAntSelect = /*#__PURE__*/styled(AntSelect)(_templateObject3$F || (_templateObject3$F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 40px;\n"])));
 var Dropdowns = function Dropdowns() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -6219,17 +6198,17 @@ var Dropdowns = function Dropdowns() {
   })));
 };
 
-var _templateObject$1t, _templateObject2$15;
+var _templateObject$1u, _templateObject2$1a;
 var Notes$2 = function Notes() {
-  var StyledTextArea = styled(TextArea)(_templateObject$1t || (_templateObject$1t = _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$15 || (_templateObject2$15 = _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$1u || (_templateObject$1u = _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$1a || (_templateObject2$1a = _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$1u, _templateObject2$16, _templateObject3$F, _templateObject4$k, _templateObject5$b, _templateObject6$9, _templateObject7$9, _templateObject8$5, _templateObject9$3, _templateObject10$1;
+var _templateObject$1v, _templateObject2$1b, _templateObject3$G, _templateObject4$l, _templateObject5$c, _templateObject6$a, _templateObject7$a, _templateObject8$5, _templateObject9$3, _templateObject10$1;
 var Upgrade = function Upgrade() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -6238,7 +6217,7 @@ var Upgrade = function Upgrade() {
       description: 'Upgrade successfully.'
     });
   };
-  return React.createElement(React.Fragment, null, React.createElement(Wrapper$g, null, React.createElement(Heading$2, null, "Upgrade"), React.createElement(Container$10, null, React.createElement(Top$3, null, React.createElement(InnerCont$1, null, React.createElement(Toggle, {
+  return React.createElement(React.Fragment, null, React.createElement(Wrapper$h, null, React.createElement(Heading$2, null, "Upgrade"), React.createElement(Container$11, null, React.createElement(Top$3, null, React.createElement(InnerCont$1, null, React.createElement(Toggle, {
     label: 'Timed Service',
     checked: true,
     onChange: function onChange(_event) {
@@ -6288,24 +6267,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$1u || (_templateObject$1u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
-var Box = /*#__PURE__*/styled.div(_templateObject2$16 || (_templateObject2$16 = /*#__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$F || (_templateObject3$F = /*#__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$10 = /*#__PURE__*/styled.div(_templateObject7$9 || (_templateObject7$9 = /*#__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 GiftWrapper = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  padding-top: 45px;\n"])));
+var Box = /*#__PURE__*/styled.div(_templateObject2$1b || (_templateObject2$1b = /*#__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$h = /*#__PURE__*/styled.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var BJSGift = /*#__PURE__*/styled.div(_templateObject4$l || (_templateObject4$l = /*#__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$c || (_templateObject5$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 15px;\n"])));
+var Heading$2 = /*#__PURE__*/styled.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #3a3630;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 16px;\n"])));
+var Container$11 = /*#__PURE__*/styled.div(_templateObject7$a || (_templateObject7$a = /*#__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$1v;
-var Flex = /*#__PURE__*/styled.div(_templateObject$1v || (_templateObject$1v = /*#__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$1w;
+var Flex = /*#__PURE__*/styled.div(_templateObject$1w || (_templateObject$1w = /*#__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$1w, _templateObject2$17, _templateObject3$G, _templateObject4$l;
+var _templateObject$1x, _templateObject2$1c, _templateObject3$H, _templateObject4$m;
 var NewEscalation = function NewEscalation() {
   var _useState = useState(false),
     showContent = _useState[0],
@@ -6334,10 +6313,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$1w || (_templateObject$1w = /*#__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$17 || (_templateObject2$17 = /*#__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$G || (_templateObject3$G = /*#__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 Component = /*#__PURE__*/styled.div(_templateObject$1x || (_templateObject$1x = /*#__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$1c || (_templateObject2$1c = /*#__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$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 10px;\n"])));
+var CancelButton = /*#__PURE__*/styled.button(_templateObject4$m || (_templateObject4$m = /*#__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(),
@@ -6497,7 +6476,7 @@ var GrowthImg = function GrowthImg() {
 var FeedbackItem = function FeedbackItem(_ref) {
   var Icon = _ref.icon,
     question = _ref.question;
-  return React.createElement(Row$4, null, React.createElement(Container$L, null, React.createElement(ImageRow, null, React.createElement(ImageCircle, null, React.createElement(Icon, null)), React.createElement(StaticText, null, question)), React.createElement(CustomRating, {
+  return React.createElement(Row$4, null, React.createElement(Container$M, null, React.createElement(ImageRow, null, React.createElement(ImageCircle, null, React.createElement(Icon, null)), React.createElement(StaticText, null, question)), React.createElement(CustomRating, {
     showText: true
   })));
 };
@@ -6530,7 +6509,7 @@ function LogFeedback() {
   })), React.createElement(SplitLayout, null, React.createElement(FeedbackItem, {
     icon: GrowthImg,
     question: 'How would you rate the overall performance during the delivery process?'
-  }), React.createElement(Row$4, null, React.createElement(Container$L, null, React.createElement(StaticText, null, "Anything below 3 needs to be investigated"), React.createElement(StyledTextAreas, {
+  }), React.createElement(Row$4, null, React.createElement(Container$M, null, React.createElement(StaticText, null, "Anything below 3 needs to be investigated"), React.createElement(StyledTextAreas, {
     name: "note",
     placeholder: "Write here..."
   }))))));
@@ -6692,7 +6671,7 @@ function ChargeLog() {
   })));
 }
 
-var _templateObject$1x;
+var _templateObject$1y;
 var UnholdOrder = function UnholdOrder() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -6716,9 +6695,9 @@ var UnholdOrder = function UnholdOrder() {
     })
   });
 };
-var CustomCancelAndCompleteAction = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject$1x || (_templateObject$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var CustomCancelAndCompleteAction = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject$1y || (_templateObject$1y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 
-var _templateObject$1y, _templateObject2$18;
+var _templateObject$1z, _templateObject2$1d;
 var ProductData = function ProductData(_ref) {
   var products = _ref.products,
     handleCheckboxChange = _ref.handleCheckboxChange;
@@ -6741,8 +6720,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)(_templateObject$1y || (_templateObject$1y = /*#__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$18 || (_templateObject2$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 18px;\n  padding: 20px;\n  color: #888;\n"])));
+var Table$3 = /*#__PURE__*/styled(TableSkelton)(_templateObject$1z || (_templateObject$1z = /*#__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$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 18px;\n  padding: 20px;\n  color: #888;\n"])));
 
 var initialProducts = [{
   id: 1458784,
@@ -6863,7 +6842,7 @@ var RestoreProducts = function RestoreProducts() {
   })));
 };
 
-var _templateObject$1z, _templateObject2$19;
+var _templateObject$1A, _templateObject2$1e;
 function AssigneeDropdown() {
   var handleSelectChange = function handleSelectChange() {
     // alert('hello');
@@ -6885,8 +6864,8 @@ function AssigneeDropdown() {
     }
   }));
 }
-var FormContainer$2 = /*#__PURE__*/styled.div(_templateObject$1z || (_templateObject$1z = /*#__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$19 || (_templateObject2$19 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var FormContainer$2 = /*#__PURE__*/styled.div(_templateObject$1A || (_templateObject$1A = /*#__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$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var DatePickerIcon = function DatePickerIcon() {
   return React.createElement("svg", {
@@ -6904,11 +6883,11 @@ var DatePickerIcon = function DatePickerIcon() {
   }));
 };
 
-var _templateObject$1A, _templateObject2$1a, _templateObject3$H, _templateObject4$m, _templateObject8$6, _templateObject10$2, _templateObject11$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject19$2, _templateObject20$1;
-var ReferenceContainer = /*#__PURE__*/styled.div(_templateObject$1A || (_templateObject$1A = /*#__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$1a || (_templateObject2$1a = /*#__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$H || (_templateObject3$H = /*#__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 _templateObject$1B, _templateObject2$1f, _templateObject3$I, _templateObject4$n, _templateObject8$6, _templateObject10$2, _templateObject11$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject19$2, _templateObject20$1;
+var ReferenceContainer = /*#__PURE__*/styled.div(_templateObject$1B || (_templateObject$1B = /*#__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$1f || (_templateObject2$1f = /*#__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$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  flex: 1;\n"])));
+var StyledText = /*#__PURE__*/styled(TextArea)(_templateObject4$n || (_templateObject4$n = /*#__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"])));
@@ -6999,22 +6978,7 @@ function useFetchSingleReminderData() {
   return res;
 }
 
-var _templateObject$1B, _templateObject2$1b, _templateObject3$I, _templateObject4$n, _templateObject5$c, _templateObject6$a, _templateObject7$a;
-function Loader(props) {
-  return React.createElement(MainContainer$9, {
-    id: "loder"
-  }, React.createElement(Container$11, 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$1B || (_templateObject$1B = /*#__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$1b || (_templateObject2$1b = /*#__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$11 = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__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$a || (_templateObject7$a = /*#__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$1C, _templateObject2$1c, _templateObject3$J, _templateObject4$o;
+var _templateObject$1C, _templateObject2$1g, _templateObject3$J, _templateObject4$o;
 function StatusIndicator(props) {
   var statusColor = getStatusColor(props.status);
   return React.createElement(Container$12, null, React.createElement(StatusCircleContainer, {
@@ -7028,7 +6992,7 @@ function StatusIndicator(props) {
 var StatusCircleContainer = /*#__PURE__*/styled.span(_templateObject$1C || (_templateObject$1C = /*#__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$1c || (_templateObject2$1c = /*#__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$1g || (_templateObject2$1g = /*#__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$12 = /*#__PURE__*/styled.div(_templateObject3$J || (_templateObject3$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  height: 22px;\n"])));
@@ -7194,7 +7158,7 @@ function useFetchReminders() {
   return perform;
 }
 
-var _templateObject$1D, _templateObject2$1d, _templateObject3$K, _templateObject4$p, _templateObject5$d, _templateObject6$b, _templateObject7$b;
+var _templateObject$1D, _templateObject2$1h, _templateObject3$K, _templateObject4$p, _templateObject5$d, _templateObject6$b, _templateObject7$b;
 var ViewReminderModal = function ViewReminderModal() {
   var _reminderData$reminde, _reminderData$order_d, _reminderData$order_d2, _reminderData$reminde2, _reminderData$reminde3, _reminderData$reminde4, _reminderData$reminde5;
   var _useCurrentAction = useCurrentAction(),
@@ -7351,7 +7315,7 @@ var ViewReminderModal = function ViewReminderModal() {
   }))))));
 };
 var StyledWrapper = /*#__PURE__*/styled.div(_templateObject$1D || (_templateObject$1D = /*#__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$1d || (_templateObject2$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
+var StyledLabel = /*#__PURE__*/styled.label(_templateObject2$1h || (_templateObject2$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n"])));
 var StyledSpan = /*#__PURE__*/styled.span(_templateObject3$K || (_templateObject3$K = /*#__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"])));
@@ -7379,7 +7343,7 @@ var FormRow = function FormRow(_ref) {
   }, " * ")), children);
 };
 
-var _templateObject$1F, _templateObject2$1e, _templateObject3$M, _templateObject4$q, _templateObject5$f;
+var _templateObject$1F, _templateObject2$1i, _templateObject3$M, _templateObject4$q, _templateObject5$f;
 dayjs.extend(utc);
 dayjs.extend(isValid);
 function CreateReminderModal() {
@@ -7603,7 +7567,7 @@ function CreateReminderModal() {
   })));
 }
 var StyleContainer = /*#__PURE__*/styled.div(_templateObject$1F || (_templateObject$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  background: var(--Flowkit-White, #fff);\n"])));
-var Label$f = /*#__PURE__*/styled.label(_templateObject2$1e || (_templateObject2$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
+var Label$f = /*#__PURE__*/styled.label(_templateObject2$1i || (_templateObject2$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: 'Lato', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n"])));
 var StyledAntSelect$3 = /*#__PURE__*/styled(Select)(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-select-selector {\n    width: 20vw;\n    border-radius: 22px;\n  }\n"])));
 var StyledTextArea$2 = /*#__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: 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"])));
@@ -7877,7 +7841,7 @@ function TaskReminderModal() {
 }
 var OrderModal = /*#__PURE__*/styled(OrderActionModal)(_templateObject$1G || (_templateObject$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70%;\n"])));
 
-var _templateObject$1H, _templateObject2$1f;
+var _templateObject$1H, _templateObject2$1j;
 function OrderLock() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -7931,7 +7895,7 @@ function OrderLock() {
   });
 }
 var CustomCancelationModal = /*#__PURE__*/styled(CancelationModal)(_templateObject$1H || (_templateObject$1H = /*#__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"])));
+var CustomCancelAndCompleteAction$1 = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 
 function useUpdateFlag() {
   var ssoToken = getCookie('id_token');
@@ -8001,7 +7965,7 @@ function useUpdateFlag() {
   return create;
 }
 
-var _templateObject$1I, _templateObject2$1g, _templateObject3$N, _templateObject4$r, _templateObject5$g, _templateObject6$c;
+var _templateObject$1I, _templateObject2$1k, _templateObject3$N, _templateObject4$r, _templateObject5$g, _templateObject6$c;
 function HeaderSection() {
   var _useSingleFlagData = useSingleFlagData(),
     dataArray = _useSingleFlagData[0];
@@ -8072,13 +8036,13 @@ function HeaderSection() {
   })));
 }
 var Header$1 = /*#__PURE__*/styled.div(_templateObject$1I || (_templateObject$1I = /*#__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 CustomCancelAndCompleteAction$2 = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject2$1k || (_templateObject2$1k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
 var ResolveButton = /*#__PURE__*/styled.button(_templateObject3$N || (_templateObject3$N = /*#__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$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$1J, _templateObject2$1h;
+var _templateObject$1J, _templateObject2$1l;
 function TextSection() {
   var _useSinglePayload = useSinglePayload(),
     payload = _useSinglePayload[0],
@@ -8097,9 +8061,9 @@ function TextSection() {
   }));
 }
 var TextField = /*#__PURE__*/styled(TextArea)(_templateObject$1J || (_templateObject$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 97% !important;\n"])));
-var Text$7 = /*#__PURE__*/styled.div(_templateObject2$1h || (_templateObject2$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  margin-top: 2%;\n"])));
+var Text$7 = /*#__PURE__*/styled.div(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  margin-top: 2%;\n"])));
 
-var _templateObject$1K, _templateObject2$1i;
+var _templateObject$1K, _templateObject2$1m;
 function ButtonsSection() {
   var _useSinglePayload = useSinglePayload(),
     payload = _useSinglePayload[0],
@@ -8191,9 +8155,9 @@ function ButtonsSection() {
   }))));
 }
 var Buttons = /*#__PURE__*/styled.div(_templateObject$1K || (_templateObject$1K = /*#__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 Flex$2 = /*#__PURE__*/styled.div(_templateObject2$1m || (_templateObject2$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
 
-var _templateObject$1L, _templateObject2$1j, _templateObject3$O, _templateObject4$s, _templateObject5$h, _templateObject6$d;
+var _templateObject$1L, _templateObject2$1n, _templateObject3$O, _templateObject4$s, _templateObject5$h, _templateObject6$d;
 function ActionSection() {
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -8280,13 +8244,13 @@ function RadioButtonsSection() {
   }));
 }
 var ButtonWrapper = /*#__PURE__*/styled.div(_templateObject$1L || (_templateObject$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n"])));
-var SaveButton = /*#__PURE__*/styled(Button$1)(_templateObject2$1j || (_templateObject2$1j = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var SaveButton = /*#__PURE__*/styled(Button$1)(_templateObject2$1n || (_templateObject2$1n = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var CancelButton$1 = /*#__PURE__*/styled(Button$1)(_templateObject3$O || (_templateObject3$O = /*#__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$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$1M, _templateObject2$1k, _templateObject3$P, _templateObject4$t, _templateObject5$i;
+var _templateObject$1M, _templateObject2$1o, _templateObject3$P, _templateObject4$t, _templateObject5$i;
 function DetailSection() {
   var _dataArray$order_data, _dataArray$order_data2;
   var _useSingleFlagData = useSingleFlagData(),
@@ -8299,7 +8263,7 @@ function DetailSection() {
   }), React.createElement(Order, null, orderColumnData)));
 }
 var Detail = /*#__PURE__*/styled.div(_templateObject$1M || (_templateObject$1M = /*#__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 Flex$3 = /*#__PURE__*/styled.div(_templateObject2$1o || (_templateObject2$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
 var Ref = /*#__PURE__*/styled.div(_templateObject3$P || (_templateObject3$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
 var Order = /*#__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$i || (_templateObject5$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
@@ -8384,7 +8348,7 @@ function useFetchSingleFlagsData() {
   return res;
 }
 
-var _templateObject$1N, _templateObject2$1l, _templateObject3$Q;
+var _templateObject$1N, _templateObject2$1p, _templateObject3$Q;
 function ViewFlag() {
   var _useSingleFlagData = useSingleFlagData(),
     dataArray = _useSingleFlagData[0],
@@ -8482,7 +8446,7 @@ function ViewFlag() {
   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$1N || (_templateObject$1N = /*#__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 BackgroundModals = /*#__PURE__*/styled(BackgroundModal$1)(_templateObject2$1p || (_templateObject2$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(1px);\n"])));
 var MainContainer$a = /*#__PURE__*/styled.div(_templateObject3$Q || (_templateObject3$Q = /*#__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$1O;
@@ -8646,8 +8610,7 @@ function useSystemLogs() {
               'Content-Type': 'application/json',
               Authorization: "Bearer " + ssoToken,
               'x-pagination': JSON.stringify({
-                page: 1,
-                per_page: 100
+                is_pagination: false
               }),
               'x-filters': JSON.stringify([{
                 field: 'object_id',
@@ -8717,7 +8680,7 @@ function useSystemLogs() {
   return perform;
 }
 
-var _templateObject$1Q, _templateObject2$1m;
+var _templateObject$1Q, _templateObject2$1q;
 var Details = function Details() {
   var _orderDetails$order_r, _orderDetails$order_r2;
   var _useOrderDetails = useOrderDetails(),
@@ -8727,7 +8690,7 @@ var Details = function Details() {
   return React.createElement(DetailsContainer, null, React.createElement(Typo, null, "CUSTOMER RETURN - ", recipient, " , ", postcodeShow));
 };
 var DetailsContainer = /*#__PURE__*/styled.div(_templateObject$1Q || (_templateObject$1Q = /*#__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$1m || (_templateObject2$1m = /*#__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 Typo = /*#__PURE__*/styled.div(_templateObject2$1q || (_templateObject2$1q = /*#__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$1R;
 var DropDownContainer$1 = /*#__PURE__*/styled.div(_templateObject$1R || (_templateObject$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n  border-right: 1px solid #d0d5dd;\n  padding: 4px;\n  @media screen and (max-width: 1220px) {\n    font-size: 12px;\n  }\n"])));
@@ -8994,7 +8957,7 @@ var DetailsFilters = function DetailsFilters() {
 };
 var Flex$6 = /*#__PURE__*/styled.div(_templateObject$1W || (_templateObject$1W = /*#__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: -132px;\n  justify-content: space-between;\n"])));
 
-var _templateObject$1X, _templateObject2$1n, _templateObject3$R, _templateObject4$u;
+var _templateObject$1X, _templateObject2$1r, _templateObject3$R, _templateObject4$u;
 function OrderView() {
   notification.config({
     top: 150
@@ -9100,13 +9063,13 @@ function OrderView() {
     }
   }, [apiCalling]);
   useEffect(function () {
-    // if (paths.length > 1) {
-    //   setOrderId(paths[2]);
-    // }
-    // for local
-    if (paths.length >= 0) {
-      setOrderId(paths[1]);
+    if (paths.length > 1) {
+      setOrderId(paths[2]);
     }
+    // for local
+    // if (paths.length >= 0) {
+    //   setOrderId(paths[1]);
+    // }
   }, [paths]);
   useEffect(function () {
     setLoading(staticDataLoading);
@@ -9281,7 +9244,7 @@ function OrderView() {
   return React.createElement(MainContainer$b, null, React.createElement(GeneralHeader, null), React.createElement(DetailsFilters, 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(SystemLogs, null))), React.createElement(OrderActions, null));
 }
 var MainContainer$b = /*#__PURE__*/styled.div(_templateObject$1X || (_templateObject$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n  border-radius: 25px;\n  border: 1px solid #e3e3e3;\n"])));
-var SplitLayout$1 = /*#__PURE__*/styled.div(_templateObject2$1n || (_templateObject2$1n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
+var SplitLayout$1 = /*#__PURE__*/styled.div(_templateObject2$1r || (_templateObject2$1r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
 var NotesContainer = /*#__PURE__*/styled.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
 var TablesContainer = /*#__PURE__*/styled.div(_templateObject4$u || (_templateObject4$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
 
@@ -9735,7 +9698,7 @@ var Text$8 = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e =
 // Right side filter
 var StyledTableFilter = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$1_, _templateObject2$1o;
+var _templateObject$1_, _templateObject2$1s;
 // import { StyledBulkItem } from '../../filters/BulkFilterStyle';
 // import SearchType from '../../header/route-header/search/SearchType';
 // import DownloadIcon from '../../../../assets/icons/DownloadIcon';
@@ -9762,7 +9725,7 @@ var Container$14 = /*#__PURE__*/styled.div(_templateObject$1_ || (_templateObjec
 //   align-self: stretch;
 //   border-radius: 15px 0px 0px 15px;
 // `;
-var ButtonText = /*#__PURE__*/styled.button(_templateObject2$1o || (_templateObject2$1o = /*#__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 ButtonText = /*#__PURE__*/styled.button(_templateObject2$1s || (_templateObject2$1s = /*#__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 ReturnFilter = function ReturnFilter() {
   var _useParams = useParams(),
@@ -9770,9 +9733,9 @@ var ReturnFilter = function ReturnFilter() {
   return React.createElement(React.Fragment, null, React.createElement(StyledFiter, null, React.createElement(Text$8, null, " ", clientName), React.createElement(StyledFIlterELements, null, React.createElement(StyledTableFilter, null)), React.createElement(RightFilters, null)));
 };
 
-var _templateObject$1$, _templateObject2$1p, _templateObject3$T, _templateObject4$w, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
+var _templateObject$1$, _templateObject2$1t, _templateObject3$T, _templateObject4$w, _templateObject34, _templateObject35, _templateObject36, _templateObject37;
 var ColumStyle = /*#__PURE__*/styled.div(_templateObject$1$ || (_templateObject$1$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 67px;\n  align-items: center;\n  gap: 7px;\n"])));
-var GreyBox = /*#__PURE__*/styled.div(_templateObject2$1p || (_templateObject2$1p = /*#__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 GreyBox = /*#__PURE__*/styled.div(_templateObject2$1t || (_templateObject2$1t = /*#__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$2 = /*#__PURE__*/styled.div(_templateObject3$T || (_templateObject3$T = /*#__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$4 = /*#__PURE__*/styled.table(_templateObject4$w || (_templateObject4$w = /*#__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"])));
@@ -9929,7 +9892,7 @@ var formatDate$1 = function formatDate(date) {
   // const hours = padZero(date.getHours());
   // const minutes = padZero(date.getMinutes());
   // const seconds = padZero(date.getSeconds());
-  return year + "-" + month + "-" + day;
+  return "\n  " + day + "/" + month + "/" + year + "\n  ";
 };
 var displayValueOrNA = function displayValueOrNA(value) {
   var isBlankArray = Array.isArray(value) && value.length === 0;
@@ -9963,7 +9926,7 @@ var optionsForReturnPrint = [{
   label: 'Print Return Labels'
 }];
 
-var _templateObject$20, _templateObject2$1q;
+var _templateObject$20, _templateObject2$1u;
 var options$1 = optionsForReturnPrint;
 var PrintDropDownReturn = function PrintDropDownReturn(_ref) {
   var legacyProductId = _ref.legacyProductId;
@@ -9981,7 +9944,7 @@ var PrintDropDownReturn = function PrintDropDownReturn(_ref) {
   }));
 };
 var OptionsList = /*#__PURE__*/styled.ul(_templateObject$20 || (_templateObject$20 = /*#__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$1q || (_templateObject2$1q = /*#__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 OptionsListLi = /*#__PURE__*/styled.li(_templateObject2$1u || (_templateObject2$1u = /*#__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 _excluded$3 = ["count"];
 var ReturnOrderTable = function ReturnOrderTable() {
@@ -10315,7 +10278,7 @@ var DefectConfirm = [{
   value: 'no'
 }];
 
-var _templateObject$21, _templateObject2$1r, _templateObject3$U, _templateObject4$x;
+var _templateObject$21, _templateObject2$1v, _templateObject3$U, _templateObject4$x;
 var DefetcDetails = function DefetcDetails() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
@@ -10358,7 +10321,7 @@ var DefetcDetails = function DefetcDetails() {
   }))));
 };
 var StyledAntSelect$5 = /*#__PURE__*/styled(AntSelect)(_templateObject$21 || (_templateObject$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$15 = /*#__PURE__*/styled.div(_templateObject2$1r || (_templateObject2$1r = /*#__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 Container$15 = /*#__PURE__*/styled.div(_templateObject2$1v || (_templateObject2$1v = /*#__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$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 = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 
@@ -10424,7 +10387,7 @@ var RepackProduct = function RepackProduct() {
 };
 var GLobalPopupContent$1 = /*#__PURE__*/styled.div(_templateObject$22 || (_templateObject$22 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$23, _templateObject2$1s, _templateObject3$V, _templateObject4$y, _templateObject5$l, _templateObject6$e;
+var _templateObject$23, _templateObject2$1w, _templateObject3$V, _templateObject4$y, _templateObject5$l, _templateObject6$e;
 var RepackDetails = function RepackDetails() {
   var _useState = useState(false),
     isAdditionalBoxChecked = _useState[0],
@@ -10472,13 +10435,13 @@ var RepackDetails = function RepackDetails() {
   }, "Have any other boxes repacked into this one?"), isRepacked && React.createElement(RepackProduct, null)))));
 };
 var StyledAntSelect$6 = /*#__PURE__*/styled(AntSelect)(_templateObject$23 || (_templateObject$23 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var CheckboxContainer$1 = /*#__PURE__*/styled.div(_templateObject2$1s || (_templateObject2$1s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 10px;\n"])));
+var CheckboxContainer$1 = /*#__PURE__*/styled.div(_templateObject2$1w || (_templateObject2$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  margin-top: 10px;\n"])));
 var InputWrapper = /*#__PURE__*/styled.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  margin-left: 24px; // Indent input field to align with the checkbox\n"])));
 var Container$16 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__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$8 = /*#__PURE__*/styled.div(_templateObject5$l || (_templateObject5$l = /*#__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$24, _templateObject2$1t, _templateObject3$W, _templateObject4$z;
+var _templateObject$24, _templateObject2$1x, _templateObject3$W, _templateObject4$z;
 var OtherDamage = function OtherDamage() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
@@ -10535,11 +10498,11 @@ var OtherDamage = function OtherDamage() {
   }))));
 };
 var StyledAntSelect$7 = /*#__PURE__*/styled(AntSelect)(_templateObject$24 || (_templateObject$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$17 = /*#__PURE__*/styled.div(_templateObject2$1t || (_templateObject2$1t = /*#__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 Container$17 = /*#__PURE__*/styled.div(_templateObject2$1x || (_templateObject2$1x = /*#__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$9 = /*#__PURE__*/styled.div(_templateObject3$W || (_templateObject3$W = /*#__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$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 
-var _templateObject$25, _templateObject2$1u, _templateObject3$X, _templateObject4$A, _templateObject5$m;
+var _templateObject$25, _templateObject2$1y, _templateObject3$X, _templateObject4$A, _templateObject5$m;
 var AddDefect = function AddDefect() {
   var _useState = useState({
       actionDuring: '',
@@ -10603,12 +10566,12 @@ var AddDefect = function AddDefect() {
   }))), state.productRepacked === 'yes' && React.createElement(RepackDetails, null)));
 };
 var StyledAntSelect$8 = /*#__PURE__*/styled(AntSelect)(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$18 = /*#__PURE__*/styled.div(_templateObject2$1u || (_templateObject2$1u = /*#__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 Container$18 = /*#__PURE__*/styled.div(_templateObject2$1y || (_templateObject2$1y = /*#__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$a = /*#__PURE__*/styled.div(_templateObject3$X || (_templateObject3$X = /*#__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$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
 var AddButton = /*#__PURE__*/styled(Button$1)(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  border-radius: 30px;\n"])));
 
-var _templateObject$26, _templateObject2$1v, _templateObject3$Y, _templateObject4$B;
+var _templateObject$26, _templateObject2$1z, _templateObject3$Y, _templateObject4$B;
 var QCLogs = function QCLogs() {
   var handleSelectChange = function handleSelectChange() {
     console.log('Option selected');
@@ -10630,11 +10593,11 @@ var QCLogs = function QCLogs() {
   }))), React.createElement(AddDefect, null));
 };
 var StyledAntSelect$9 = /*#__PURE__*/styled(AntSelect)(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20vw;\n"])));
-var Container$19 = /*#__PURE__*/styled.div(_templateObject2$1v || (_templateObject2$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
+var Container$19 = /*#__PURE__*/styled.div(_templateObject2$1z || (_templateObject2$1z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  flex-direction: column;\n"])));
 var Flex$b = /*#__PURE__*/styled.div(_templateObject3$Y || (_templateObject3$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n"])));
 var LabelWrapper$4 = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 20vw;\n"])));
 
-var _templateObject$27, _templateObject2$1w, _templateObject3$Z, _templateObject4$C, _templateObject5$n;
+var _templateObject$27, _templateObject2$1A, _templateObject3$Z, _templateObject4$C, _templateObject5$n;
 function UpdateProduct() {
   var _orderStaticData$coll, _orderStaticData$orde, _orderStaticData$retu, _orderStaticData$orde2;
   var _useState = useState(),
@@ -10732,12 +10695,12 @@ function UpdateProduct() {
   }))));
 }
 var CollectionBox = /*#__PURE__*/styled.div(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 32px;\n"])));
-var ReturnBox = /*#__PURE__*/styled.div(_templateObject2$1w || (_templateObject2$1w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  margin-top: 32px;\n  justify-content: space-between;\n"])));
+var ReturnBox = /*#__PURE__*/styled.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  margin-top: 32px;\n  justify-content: space-between;\n"])));
 var Container$1a = /*#__PURE__*/styled.div(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var LabelWrapper$5 = /*#__PURE__*/styled.div(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var StyledAntSelect$a = /*#__PURE__*/styled(AntSelect)(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$28, _templateObject2$1x, _templateObject3$_;
+var _templateObject$28, _templateObject2$1B, _templateObject3$_;
 function UnReceiveProduct() {
   var _orderStaticData$unre;
   var _useRecieveOrderProdu = useRecieveOrderProducts(),
@@ -10786,10 +10749,10 @@ function UnReceiveProduct() {
   })));
 }
 var Container$1b = /*#__PURE__*/styled.div(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var LabelWrapper$6 = /*#__PURE__*/styled.div(_templateObject2$1x || (_templateObject2$1x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var LabelWrapper$6 = /*#__PURE__*/styled.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var StyledAntSelect$b = /*#__PURE__*/styled(AntSelect)(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$29, _templateObject2$1y;
+var _templateObject$29, _templateObject2$1C;
 var ProductAction = function ProductAction() {
   var _useAtom = useAtom(selectedTabKeyAtom),
     setSelectedTabKey = _useAtom[1];
@@ -10815,7 +10778,7 @@ var ProductAction = function ProductAction() {
   }))));
 };
 var GLobalPopupContent$2 = /*#__PURE__*/styled.div(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Container$1c = /*#__PURE__*/styled.div(_templateObject2$1y || (_templateObject2$1y = /*#__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 Container$1c = /*#__PURE__*/styled.div(_templateObject2$1C || (_templateObject2$1C = /*#__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$2a;
 var LogsTable = function LogsTable() {
@@ -10894,7 +10857,7 @@ var LogsTable = function LogsTable() {
 };
 var GlobalPopupContent = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2b, _templateObject2$1z;
+var _templateObject$2b, _templateObject2$1D;
 var DefectsModal = function DefectsModal() {
   var options = [{
     value: 'bjsCouriers',
@@ -10947,7 +10910,7 @@ var DefectsModal = function DefectsModal() {
   }))));
 };
 var StyledConatiner = /*#__PURE__*/styled.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* tex: nowrap; */\n"])));
-var GLobalPopupContent$3 = /*#__PURE__*/styled.div(_templateObject2$1z || (_templateObject2$1z = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var GLobalPopupContent$3 = /*#__PURE__*/styled.div(_templateObject2$1D || (_templateObject2$1D = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var _templateObject$2c;
 var repackModal = function repackModal() {
@@ -10981,7 +10944,7 @@ var repackModal = function repackModal() {
 };
 var StyledConatiner$1 = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* text-wrap: nowrap; */\n"])));
 
-var _templateObject$2d, _templateObject2$1A, _templateObject3$$;
+var _templateObject$2d, _templateObject2$1E, _templateObject3$$;
 var _excluded$4 = ["id"];
 var CreateReturnModal = function CreateReturnModal() {
   var _useSelectedConfirmLo = useSelectedConfirmLoc(),
@@ -11060,7 +11023,7 @@ var CreateReturnModal = function CreateReturnModal() {
   })))));
 };
 var StyledText$1 = /*#__PURE__*/styled.div(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8d8f90;\n  font-family: Poppins;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n"])));
-var Container$1d = /*#__PURE__*/styled.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$1d = /*#__PURE__*/styled.div(_templateObject2$1E || (_templateObject2$1E = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Wrapper$l = /*#__PURE__*/styled.div(_templateObject3$$ || (_templateObject3$$ = /*#__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() {
@@ -11356,9 +11319,9 @@ var ModalManager = function ModalManager() {
   }));
 };
 
-var _templateObject$2e, _templateObject2$1B, _templateObject3$10, _templateObject4$D, _templateObject6$f, _templateObject7$f;
+var _templateObject$2e, _templateObject2$1F, _templateObject3$10, _templateObject4$D, _templateObject6$f, _templateObject7$f;
 var StyledContainer = /*#__PURE__*/styled.div(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  padding: 0;\n  max-width: 100%;\n  margin-top: 11px;\n  margin-bottom: 0;\n"])));
-var StyledContentWrapper = /*#__PURE__*/styled.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n"])));
+var StyledContentWrapper = /*#__PURE__*/styled.div(_templateObject2$1F || (_templateObject2$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 12px;\n"])));
 var StyledInfoBox = /*#__PURE__*/styled.div(_templateObject3$10 || (_templateObject3$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e2e0db;\n  background: #fff;\n  color: #8e8a85;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px;\n  letter-spacing: 0.07px;\n  padding: 6px 10px;\n"])));
 var StyledLabel$2 = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #8e8a85;\n\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n  display: flex;\n  align-items: center;\n"])));
 var StyledPaginationWrapper = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 0;\n  background-color: white;\n  border: 1px solid rgba(208, 213, 221, 0.5);\n  border-radius: 9999px;\n"])));
@@ -11480,7 +11443,7 @@ var Pagination = function Pagination(_ref) {
   }, React.createElement(NextIcon, null)))));
 };
 
-var _templateObject$2f, _templateObject2$1C;
+var _templateObject$2f, _templateObject2$1G;
 var ReturnTable = function ReturnTable() {
   var _UsePaginationData = UsePaginationData(),
     paginationObj = _UsePaginationData[0];
@@ -11508,7 +11471,7 @@ var ReturnTable = function ReturnTable() {
   })))), React.createElement(ModalManager, null));
 };
 var Container$1e = /*#__PURE__*/styled.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$1 = /*#__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"])));
+var DashBoardWrapper$1 = /*#__PURE__*/styled.section(_templateObject2$1G || (_templateObject2$1G = /*#__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", {
@@ -11526,7 +11489,7 @@ function LoadIcon() {
   }));
 }
 
-var _templateObject$2g, _templateObject2$1D;
+var _templateObject$2g, _templateObject2$1H;
 var PrintDropDown = function PrintDropDown(_ref) {
   var legacyProductId = _ref.legacyProductId;
   var downloadFiles = function downloadFiles(label) {
@@ -11554,7 +11517,7 @@ var PrintDropDown = function PrintDropDown(_ref) {
   }));
 };
 var OptionsList$1 = /*#__PURE__*/styled.ul(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  box-sizing: border-box;\n  border-radius: 6px;\n  border: 1px solid rgba(224, 226, 231, 0.5);\n  background: #fff;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  width: 177px;\n  padding: 5px 1px 3px 1px;\n  position: absolute;\n  top: 34px;\n  right: 0;\n  z-index: 99;\n  min-width: 194px;\n"])));
-var OptionsListLi$1 = /*#__PURE__*/styled.li(_templateObject2$1D || (_templateObject2$1D = /*#__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: ", ";\n  color: ", ";\n  &:last-child {\n    border: none;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref2) {
+var OptionsListLi$1 = /*#__PURE__*/styled.li(_templateObject2$1H || (_templateObject2$1H = /*#__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: ", ";\n  color: ", ";\n  &:last-child {\n    border: none;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref2) {
   var disabled = _ref2.disabled;
   return disabled ? 'not-allowed' : 'pointer';
 }, function (_ref3) {
@@ -11963,7 +11926,7 @@ var filtersReducerReturnAtom = /*#__PURE__*/atom(function (get) {
   return set(filtersStateAtom$1, filterReducer$1(get(filtersStateAtom$1), action));
 });
 
-var _templateObject$2i, _templateObject2$1E;
+var _templateObject$2i, _templateObject2$1I;
 var ReturnOrderFilter = function ReturnOrderFilter() {
   var _useAtom = useAtom(filtersReducerReturnAtom),
     dispatch = _useAtom[1];
@@ -12141,7 +12104,7 @@ var ReturnOrderFilter = function ReturnOrderFilter() {
 };
 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$c = /*#__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  :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$c = /*#__PURE__*/styled.div(_templateObject2$1I || (_templateObject2$1I = /*#__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  :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 PAGE_SIZE_OPTIONS$1 = [50, 100, 150];
 var MAX_PAGES_TO_SHOW$1 = 5;
@@ -12227,7 +12190,7 @@ var ReturnPagination = function ReturnPagination(_ref) {
   }, React.createElement(NextIcon, null)))));
 };
 
-var _templateObject$2j, _templateObject2$1F;
+var _templateObject$2j, _templateObject2$1J;
 var _excluded$5 = ["count"];
 var ReturnAfterTable = function ReturnAfterTable() {
   var _useReturnAfterOrderD = useReturnAfterOrderData(),
@@ -12300,12 +12263,12 @@ var ReturnAfterTable = function ReturnAfterTable() {
   })))));
 };
 var Container$1g = /*#__PURE__*/styled.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  /* top: -30px; */\n"])));
-var DashBoardWrapper$2 = /*#__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 DashBoardWrapper$2 = /*#__PURE__*/styled.section(_templateObject2$1J || (_templateObject2$1J = /*#__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 _templateObject2$1G;
-var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject2$1G || (_templateObject2$1G = /*#__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$1K;
+var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject2$1K || (_templateObject2$1K = /*#__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$2k, _templateObject2$1H;
+var _templateObject$2k, _templateObject2$1L;
 var SearchType = function SearchType() {
   var _useState = useState(''),
     searchText = _useState[0],
@@ -12321,7 +12284,7 @@ var SearchType = function SearchType() {
   }));
 };
 var Search = /*#__PURE__*/styled.div(_templateObject$2k || (_templateObject$2k = /*#__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$1H || (_templateObject2$1H = /*#__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 SearchInput = /*#__PURE__*/styled.input(_templateObject2$1L || (_templateObject2$1L = /*#__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 BulkFilter = function BulkFilter() {
   // const [printToogle, setPrintToggle] = useMenuDropDown();
@@ -12442,7 +12405,7 @@ var ReturnTable$1 = function ReturnTable(_ref) {
   })))));
 };
 
-var _templateObject$2l, _templateObject2$1I, _templateObject3$11;
+var _templateObject$2l, _templateObject2$1M, _templateObject3$11;
 // import Pagination from './table-view/Pagination';
 // import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
 function ReturnMainTable() {
@@ -12502,12 +12465,12 @@ function ReturnMainTable() {
   }, React.createElement(HeaderFilter, null), React.createElement(Container$1h, null, React.createElement(Row$7, null, React.createElement(Text$8, null, "Client Return"), getClient ? 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$1h = /*#__PURE__*/styled.div(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var Container$1h = /*#__PURE__*/styled.div(_templateObject2$1M || (_templateObject2$1M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
 var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject3$11 || (_templateObject3$11 = /*#__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$2m, _templateObject2$1J;
+var _templateObject$2m, _templateObject2$1N;
 var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject$2m || (_templateObject$2m = /*#__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$1J || (_templateObject2$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var StyledFlex = /*#__PURE__*/styled.div(_templateObject2$1N || (_templateObject2$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
 
 var _templateObject$2n;
 var HeaderTitle = function HeaderTitle(props) {
@@ -12515,12 +12478,12 @@ var HeaderTitle = function HeaderTitle(props) {
 };
 var Title$7 = /*#__PURE__*/styled.h2(_templateObject$2n || (_templateObject$2n = /*#__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$2o, _templateObject2$1K;
+var _templateObject$2o, _templateObject2$1O;
 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$2o || (_templateObject$2o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var BreadcrumbList = /*#__PURE__*/styled.span(_templateObject2$1K || (_templateObject2$1K = /*#__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 BreadcrumbList = /*#__PURE__*/styled.span(_templateObject2$1O || (_templateObject2$1O = /*#__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,