@bjsdistribution/dms-client-return 0.1.7-prod → 0.1.8-prod

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

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo, Suspense } from 'react';
 import { useSearchParams, useNavigate, useParams, NavLink, useLocation, Routes, Route, Navigate } from 'react-router-dom';
 import styled, { css } from 'styled-components';
-import { Select, notification, Skeleton, Empty, DatePicker, Input as Input$2, Dropdown, Space } from 'antd';
+import { Select, notification, Skeleton, Empty, DatePicker, Input as Input$3, Dropdown, Space } from 'antd';
 import { useAtom, atom } from 'jotai';
 import dayjs from 'dayjs';
-import { format, isValid } from 'date-fns';
+import { format, isValid, parseISO } from 'date-fns';
 import { atomWithReducer } from 'jotai/utils';
-import { useAxios, CountItem, device, ExportButton, useApiHook, Checkbox as Checkbox$1, AntTable, Alert, AntModal, Label as Label$j, Input as Input$1, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, dropdownStyles, SelectDropdown, RadioButtonGroup as RadioButtonGroup$1, Switch, formatUtcToLocal, Button, PrivateIcon, SectionHeader, CrossIcon, AntSelect, CancelationModal, CancelAndCompleteAction, BackgroundModal as BackgroundModal$1, getBaseEndpoint, FlagAlert, ViewIcon, SearchIcon as SearchIcon$1 } from '@bjsdistribution/dms-component-library';
+import { useAxios, CountItem, device, ExportButton, useApiHook, Checkbox as Checkbox$1, AntTable, Alert, AntModal, Label as Label$k, Input as Input$2, TextArea, FormSection, displayValueOrNA as displayValueOrNA$1, dropdownStyles, SelectDropdown, RadioButtonGroup as RadioButtonGroup$1, Switch, formatUtcToLocal, Button, PrivateIcon, SectionHeader, CrossIcon, AntSelect, CancelationModal, CancelAndCompleteAction, BackgroundModal as BackgroundModal$1, CalendarIcon, FlagAlert, WarningIcon, getBaseEndpoint, ViewIcon, SearchIcon as SearchIcon$1 } from '@bjsdistribution/dms-component-library';
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';
 import Scrollbars from 'react-custom-scrollbars-2';
 import { createPortal } from 'react-dom';
@@ -14,6 +14,8 @@ import 'tippy.js/dist/tippy.css';
 import Tippy from '@tippyjs/react';
 import 'react-datepicker/dist/react-datepicker.css';
 import utc from 'dayjs/plugin/utc';
+import SwitchSelector from 'react-switch-selector';
+import { v4 } from 'uuid';
 
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
@@ -784,7 +786,45 @@ var ordersInitialValue = {
   order_communications: [],
   id: null,
   name: '',
-  carrier_id: null
+  carrier_id: null,
+  order_type: {
+    type: null
+  }
+};
+//force debrief
+var chargesIntialValue = {
+  base_charge_type: 1,
+  base_charge: 0,
+  weight: 0,
+  drop_time: 0,
+  timed_service: 0,
+  wait_time: 0,
+  extra_floor: 0,
+  bulky_items: 0,
+  re_label: 0,
+  extra_cube: 0,
+  additional_box: 0,
+  additional_item: 0,
+  weekend: 0,
+  re_allocation: 0,
+  pre_dated: 0,
+  re_package: 0,
+  disassemble: 0,
+  qc: 0,
+  collection_qc: 0,
+  return_to_client: 0,
+  roc: 0,
+  unpack: 0,
+  packaging_disposal: 0,
+  assembly: 0,
+  debrief_notes: '',
+  recycle: 0,
+  admin: 0,
+  disposal: 0,
+  disposal_recycling: 0,
+  debrief_status: '',
+  new_order_status: '',
+  adhoc_charges: []
 };
 function useTabType() {
   return useAtom(activeTabAtom);
@@ -846,6 +886,10 @@ var orderAlertsData = /*#__PURE__*/atom({});
 function useOrderAlertsData() {
   return useAtom(orderAlertsData);
 }
+var customerList = /*#__PURE__*/atom([]);
+function useOrderCustomersList() {
+  return useAtom(customerList);
+}
 // Remainder count
 var OrderDetails = /*#__PURE__*/atom(ordersInitialValue);
 function useOrderDetails() {
@@ -972,6 +1016,51 @@ var globalOrderGetApi = /*#__PURE__*/atom(true);
 function useGlobalStateHitOrder() {
   return useAtom(globalOrderGetApi);
 }
+//force debrief states
+var globalEscData = /*#__PURE__*/atom([]);
+function useGlobalEscData() {
+  return useAtom(globalEscData);
+}
+var activeTab = /*#__PURE__*/atom('success');
+function useActiveTab() {
+  return useAtom(activeTab);
+}
+var chargesStateAtom = /*#__PURE__*/atom(chargesIntialValue);
+function useChargesState() {
+  return useAtom(chargesStateAtom);
+}
+var failureReasonAtom = /*#__PURE__*/atom('');
+function useFailureReason() {
+  return useAtom(failureReasonAtom);
+}
+var escalationCategoryAtom = /*#__PURE__*/atom('');
+function useEscalationCategory() {
+  return useAtom(escalationCategoryAtom);
+}
+var escalationLevelAtom = /*#__PURE__*/atom('');
+function useEscalationLevel() {
+  return useAtom(escalationLevelAtom);
+}
+var escalationReasonAtom = /*#__PURE__*/atom('');
+function useEscalationReason() {
+  return useAtom(escalationReasonAtom);
+}
+var newStatusAtom = /*#__PURE__*/atom('');
+function useNewStatus() {
+  return useAtom(newStatusAtom);
+}
+var orderCancelReasonAtom = /*#__PURE__*/atom('');
+function useOrderCancelReason() {
+  return useAtom(orderCancelReasonAtom);
+}
+var orderHoldReasonAtom = /*#__PURE__*/atom('');
+function useOrderHoldReason() {
+  return useAtom(orderHoldReasonAtom);
+}
+var isFailureReasonChangedAtom = /*#__PURE__*/atom(false);
+function useIsFailureReasonChanged() {
+  return useAtom(isFailureReasonChangedAtom);
+}
 // Popup state Manage
 var initialState$1 = null;
 var popupReducer = function popupReducer(state, action) {
@@ -1040,7 +1129,8 @@ var countReducerAtom = /*#__PURE__*/atomWithReducer(initialState$1, popupReducer
 var _templateObject;
 function SelectionFilter() {
   var _useCustomerData = useCustomerData(),
-    customers = _useCustomerData[0];
+    customers = _useCustomerData[0],
+    setCustomers = _useCustomerData[1];
   var _useSelectedAction = useSelectedAction(),
     selectedFilterValue = _useSelectedAction[0],
     setSelectedFilterValue = _useSelectedAction[1];
@@ -1071,6 +1161,26 @@ function SelectionFilter() {
   var _useSearchParams = useSearchParams(),
     searchParams = _useSearchParams[0];
   var navigate = useNavigate();
+  //API for client data
+  var _useAxios = useAxios({
+      endpoint: "/v1/return/product/customers/",
+      method: 'GET',
+      //@ts-ignore
+      pagination: {
+        is_pagination: false
+      }
+    }),
+    fetchedCustomerData = _useAxios.data,
+    loading = _useAxios.loading,
+    fetchData = _useAxios.fetchData;
+  useEffect(function () {
+    fetchData();
+  }, []);
+  useEffect(function () {
+    if (fetchedCustomerData && fetchedCustomerData != null && fetchedCustomerData.data) {
+      setCustomers(fetchedCustomerData == null ? void 0 : fetchedCustomerData.data);
+    }
+  }, [loading]);
   //new codee
   var urlCustomerId = searchParams.get('customerId');
   var urlActiontype = searchParams.get('type');
@@ -1099,7 +1209,7 @@ function SelectionFilter() {
       return (client == null ? void 0 : client.value) == value;
     });
     if (filteredClient) {
-      var _filteredClient$actio, _filteredClient$retur;
+      var _filteredClient$actio;
       var mappedActions = Array.isArray(filteredClient == null ? void 0 : filteredClient.actions) ? filteredClient == null || (_filteredClient$actio = filteredClient.actions) == null ? void 0 : _filteredClient$actio.map(function (action) {
         return {
           label: action,
@@ -1107,10 +1217,12 @@ function SelectionFilter() {
         };
       }) : [];
       setActionTypeOptions(mappedActions);
-      var mappedLocations = Array.isArray(filteredClient == null ? void 0 : filteredClient.return_locations) ? filteredClient == null || (_filteredClient$retur = filteredClient.return_locations) == null ? void 0 : _filteredClient$retur.map(function (location) {
+      var mappedLocations = Array.isArray(filteredClient == null ? void 0 : filteredClient.return_locations) ? filteredClient.return_locations.filter(function (location) {
+        return (location == null ? void 0 : location.location_name) && (location == null ? void 0 : location.token);
+      }).map(function (location) {
         return {
-          label: location == null ? void 0 : location.location_name,
-          value: location == null ? void 0 : location.token
+          label: location.location_name,
+          value: location.token
         };
       }) : [];
       setLocationOptions(mappedLocations);
@@ -1139,7 +1251,7 @@ function SelectionFilter() {
         return (client == null ? void 0 : client.value) == urlCustomerId;
       });
       if (filteredClient) {
-        var _filteredClient$actio2, _filteredClient$retur2;
+        var _filteredClient$actio2;
         var mappedActions = Array.isArray(filteredClient == null ? void 0 : filteredClient.actions) ? filteredClient == null || (_filteredClient$actio2 = filteredClient.actions) == null ? void 0 : _filteredClient$actio2.map(function (action) {
           return {
             label: action,
@@ -1147,7 +1259,11 @@ function SelectionFilter() {
           };
         }) : [];
         setActionTypeOptions(mappedActions);
-        var mappedLocations = Array.isArray(filteredClient == null ? void 0 : filteredClient.return_locations) ? filteredClient == null || (_filteredClient$retur2 = filteredClient.return_locations) == null ? void 0 : _filteredClient$retur2.map(function (location) {
+        var mappedLocations = Array.isArray(filteredClient == null ? void 0 : filteredClient.return_locations) ? filteredClient.return_locations.filter(function (location) {
+          var name = location == null ? void 0 : location.location_name;
+          var token = location == null ? void 0 : location.token;
+          return name && name !== 'null' && token && token !== 'null';
+        }).map(function (location) {
           return {
             label: location == null ? void 0 : location.location_name,
             value: location == null ? void 0 : location.token
@@ -1174,9 +1290,7 @@ function SelectionFilter() {
       var currentSearch = window.location.search;
       console.log(currentSearch, 'currentSearch');
       if (!currentSearch.includes('filter')) {
-        console.log('inside include');
         // for dev
-        //navigate(`filter?${queryParams.toString()}`);
         navigate("/orders/view/return/filter?" + queryParams.toString());
         // for local
         //navigate(`/filter?${queryParams.toString()}`);
@@ -1316,7 +1430,7 @@ function SelectionFilter() {
     placeholder: "Select Client Name",
     onChange: handleClientChange,
     style: {
-      minWidth: '150px'
+      minWidth: '250px'
     },
     value: selectedClient,
     allowClear: true,
@@ -1332,7 +1446,7 @@ function SelectionFilter() {
     value: selectedFilterValue,
     onChange: handleActionClick,
     style: {
-      minWidth: '150px'
+      minWidth: '200px'
     },
     allowClear: true,
     onClear: handleClearAction
@@ -1342,7 +1456,7 @@ function SelectionFilter() {
     placeholder: "Select Location",
     onChange: handleLocationChange,
     style: {
-      minWidth: '150px'
+      minWidth: '200px'
     },
     allowClear: true,
     mode: "multiple"
@@ -2279,7 +2393,6 @@ var ReturnOrderTable = function ReturnOrderTable() {
     printToogle = _usePrintOptionTOggle[0],
     setPrintToggle = _usePrintOptionTOggle[1];
   var _useReturnPayload = useReturnPayload(),
-    createReturn = _useReturnPayload[0],
     setReturnPayload = _useReturnPayload[1];
   var _useNewReturnPayload = useNewReturnPayload(),
     newpayload = _useNewReturnPayload[0],
@@ -2292,6 +2405,9 @@ var ReturnOrderTable = function ReturnOrderTable() {
     setPaginationObject = _UsePaginationData[1];
   var _usefetchAgain = usefetchAgain(),
     callForFetch = _usefetchAgain[0];
+  var _useSearchParams = useSearchParams(),
+    searchParams = _useSearchParams[0];
+  var urlCustomerId = searchParams.get('customerId');
   //sorting
   var _useState = useState(null),
     sortConfig = _useState[0],
@@ -2401,6 +2517,15 @@ var ReturnOrderTable = function ReturnOrderTable() {
     }
     // setShouldPerformAction(false);
   }, [fetchedOrderData, returnDataLoad, locationData, state, callForFetch]);
+  var _useCustomerData = useCustomerData(),
+    customers = _useCustomerData[0];
+  var selectedCustomer = customers == null ? void 0 : customers.find(function (customer) {
+    var _customer$customer_id;
+    var customerId = customer == null || (_customer$customer_id = customer.customer_id) == null ? void 0 : _customer$customer_id.toString();
+    return customerId && customerId === urlCustomerId;
+  });
+  var accountNumber = selectedCustomer == null ? void 0 : selectedCustomer.account_number;
+  console.log(selectedCustomer, 'selectedCustomer');
   var handleSelectAll = function handleSelectAll(e) {
     var isChecked = e.target.checked;
     setSelectAll(isChecked);
@@ -2421,8 +2546,8 @@ var ReturnOrderTable = function ReturnOrderTable() {
       var newPayload = filteredData.map(function (loc) {
         return {
           id: loc.id,
-          account_number: createReturn == null ? void 0 : createReturn.account_number,
-          customer_id: +(createReturn == null ? void 0 : createReturn.customer_id),
+          account_number: accountNumber,
+          customer_id: Number(urlCustomerId),
           products: [loc == null ? void 0 : loc.legacy_product_id],
           return_action: loc == null ? void 0 : loc.product_return_action,
           return_location_token: (loc == null ? void 0 : loc.return_location) || null
@@ -2463,8 +2588,8 @@ var ReturnOrderTable = function ReturnOrderTable() {
         var _returnData$filter;
         var newReturnPayload = {
           id: id,
-          account_number: createReturn == null ? void 0 : createReturn.account_number,
-          customer_id: +(createReturn == null ? void 0 : createReturn.customer_id),
+          account_number: accountNumber,
+          customer_id: Number(urlCustomerId),
           products: [legacy_product_id],
           return_action: product_return_action || null,
           return_location_token: return_location || null
@@ -2509,7 +2634,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
   return React.createElement(React.Fragment, null, React.createElement(StyledTableWrapper$1, {
     className: "fortables"
   }, React.createElement(StyledTable$1, null, React.createElement("thead", null, React.createElement("tr", null, returnData != null && returnData.some(function (item) {
-    return (item == null ? void 0 : item.product_return_action) === 'RTS';
+    return (item == null ? void 0 : item.product_return_action) === 'RTS' && (item == null ? void 0 : item.return_location) !== 'null' && (item == null ? void 0 : item.return_location) !== null;
   }) ? React.createElement("th", {
     className: "emailInvoiceCheckbox"
   }, React.createElement(Checkbox$1, {
@@ -2562,7 +2687,7 @@ var ReturnOrderTable = function ReturnOrderTable() {
   }, React.createElement(EmptyDataContainer, null, React.createElement(Empty, null)))) : sortedData == null ? void 0 : sortedData.map(function (item, index) {
     return React.createElement("tr", {
       key: item.id
-    }, React.createElement("td", null, (item == null ? void 0 : item.product_return_action) === 'RTS' ? React.createElement(Checkbox$1, {
+    }, React.createElement("td", null, (item == null ? void 0 : item.product_return_action) === 'RTS' && (item == null ? void 0 : item.return_location) !== 'null' && (item == null ? void 0 : item.return_location) !== null ? React.createElement(Checkbox$1, {
       className: "custom-check",
       checked: selectedReturnOrder.some(function (selectedInvoice) {
         return (selectedInvoice == null ? void 0 : selectedInvoice.id) === (item == null ? void 0 : item.id);
@@ -2619,6 +2744,26 @@ var capitalize = function capitalize(input) {
     return _char.toUpperCase();
   });
 };
+var getBaseUrlSymbol = function getBaseUrlSymbol() {
+  var storedSymbol = localStorage.getItem('baseUrlSymbol');
+  if (!storedSymbol) {
+    localStorage.setItem('baseUrlSymbol', '£');
+    return '£';
+  }
+  return storedSymbol;
+};
+var handleKeyDownDebrief = function handleKeyDownDebrief(e) {
+  // Allowed keys: numbers (0-9), '.'
+  var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', 'ArrowLeft', 'ArrowRight'];
+  // Allow backspace, delete and Tab keys
+  if (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Tab') {
+    return;
+  }
+  // Prevent input if key is not in allowedKeys
+  if (!allowedKeys.includes(e.key)) {
+    e.preventDefault();
+  }
+};
 var DefectsData = [{
   action: 'Route',
   type: 'Product',
@@ -4350,7 +4495,7 @@ function RecipientName() {
       });
     });
   };
-  return React.createElement(Container$6, null, React.createElement(Wrapper$2, null, React.createElement(Label$j, {
+  return React.createElement(Container$6, null, React.createElement(Wrapper$2, null, React.createElement(Label$k, {
     label: "Recipient Name",
     htmlFor: "recipient-name"
   }), showCopyIcon && React.createElement(CopyText, {
@@ -4366,7 +4511,7 @@ function RecipientName() {
 }
 var Wrapper$2 = /*#__PURE__*/styled.div(_templateObject$i || (_templateObject$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
 var Container$6 = /*#__PURE__*/styled.div(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n"])));
-var InputStyled = /*#__PURE__*/styled(Input$1)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* Hide autofill suggestions in Safari */\n  border-radius: 25px;\n  &:-webkit-autofill {\n    -webkit-box-shadow: 0 0 0 100px white inset;\n    -webkit-text-fill-color: black;\n  }\n\n  &:-webkit-autofill::first-line {\n    font-family: 'inherit';\n    font-size: inherit;\n  }\n"])));
+var InputStyled = /*#__PURE__*/styled(Input$2)(_templateObject3$5 || (_templateObject3$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* Hide autofill suggestions in Safari */\n  border-radius: 25px;\n  &:-webkit-autofill {\n    -webkit-box-shadow: 0 0 0 100px white inset;\n    -webkit-text-fill-color: black;\n  }\n\n  &:-webkit-autofill::first-line {\n    font-family: 'inherit';\n    font-size: inherit;\n  }\n"])));
 
 var _templateObject$j, _templateObject2$e, _templateObject3$6;
 function Address() {
@@ -4390,7 +4535,7 @@ function Address() {
       });
     });
   };
-  return React.createElement(Container$7, null, React.createElement(Wrapper$3, null, React.createElement(Label$j, {
+  return React.createElement(Container$7, null, React.createElement(Wrapper$3, null, React.createElement(Label$k, {
     label: "Address",
     htmlFor: "address"
   }), showCopyIcon && React.createElement(CopyText, {
@@ -4429,12 +4574,12 @@ function Postcode() {
       });
     });
   };
-  return React.createElement(Container$8, null, React.createElement(Wrapper$4, null, React.createElement(Label$j, {
+  return React.createElement(Container$8, null, React.createElement(Wrapper$4, null, React.createElement(Label$k, {
     label: "Postcode",
     htmlFor: "postcode"
   }), showCopyIcon && React.createElement(CopyText, {
     text: orderRecipient == null ? void 0 : orderRecipient.postcode
-  })), React.createElement(Input$1, {
+  })), React.createElement(Input$2, {
     name: "postcode",
     type: "text",
     placeholder: "Enter Postcode",
@@ -4468,7 +4613,7 @@ function Latitude() {
       });
     });
   };
-  return React.createElement(Container$9, null, React.createElement(Label$j, {
+  return React.createElement(Container$9, null, React.createElement(Label$k, {
     label: "Latitude",
     htmlFor: "lat"
   }), React.createElement(CustomInput, {
@@ -4481,7 +4626,7 @@ function Latitude() {
     readOnly: true
   }));
 }
-var CustomInput = /*#__PURE__*/styled(Input$1)(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n"])));
+var CustomInput = /*#__PURE__*/styled(Input$2)(_templateObject$l || (_templateObject$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n"])));
 var Container$9 = /*#__PURE__*/styled.div(_templateObject2$g || (_templateObject2$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 var _templateObject$m, _templateObject2$h;
@@ -4503,7 +4648,7 @@ function Longitude() {
       });
     });
   };
-  return React.createElement(Container$a, null, React.createElement(Label$j, {
+  return React.createElement(Container$a, null, React.createElement(Label$k, {
     label: "Longitude",
     htmlFor: "long"
   }), React.createElement(CustomInput$1, {
@@ -4516,7 +4661,7 @@ function Longitude() {
     readOnly: true
   }));
 }
-var CustomInput$1 = /*#__PURE__*/styled(Input$1)(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n"])));
+var CustomInput$1 = /*#__PURE__*/styled(Input$2)(_templateObject$m || (_templateObject$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n"])));
 var Container$a = /*#__PURE__*/styled.div(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 var _templateObject$n, _templateObject2$i, _templateObject3$7, _templateObject4$3, _templateObject5$2;
@@ -4559,7 +4704,7 @@ function What3words() {
       });
     }
   };
-  return React.createElement(Container$b, null, React.createElement(Label$j, {
+  return React.createElement(Container$b, null, React.createElement(Label$k, {
     label: "What3Words Address",
     htmlFor: "w3w"
   }), React.createElement(Wrapper$5, null, React.createElement(What3wordsPrefix, null, React.createElement(What3WordsIcon, null)), React.createElement(CustomInput$2, {
@@ -4572,7 +4717,7 @@ function What3words() {
 }
 var What3wordsPrefix = /*#__PURE__*/styled.div(_templateObject$n || (_templateObject$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 13px;\n  left: 12px;\n"])));
 var Wrapper$5 = /*#__PURE__*/styled.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var CustomInput$2 = /*#__PURE__*/styled(Input$1)(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  padding-left: 40px;\n"])));
+var CustomInput$2 = /*#__PURE__*/styled(Input$2)(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 25px;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  padding-left: 40px;\n"])));
 var Container$b = /*#__PURE__*/styled.div(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var ErrorText = /*#__PURE__*/styled.span(_templateObject5$2 || (_templateObject5$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
@@ -4636,7 +4781,7 @@ function ContactHome() {
       });
     }
   };
-  return React.createElement(MainContainer, null, React.createElement(Wrapper$6, null, React.createElement(Label$j, {
+  return React.createElement(MainContainer, null, React.createElement(Wrapper$6, null, React.createElement(Label$k, {
     label: "Contact Home",
     htmlFor: "contact-home"
   })), React.createElement(InputContainer, null, React.createElement(CustomInput$3, {
@@ -4651,7 +4796,7 @@ function ContactHome() {
   })), errors.homeContactError && React.createElement(ErrorText$1, null, errors.homeContactError));
 }
 var Wrapper$6 = /*#__PURE__*/styled.div(_templateObject$p || (_templateObject$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$3 = /*#__PURE__*/styled(Input$1)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n  // @media (max-width: 1024px) {\n  //   width: 80%;\n  // }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$3 = /*#__PURE__*/styled(Input$2)(_templateObject2$k || (_templateObject2$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n  // @media (max-width: 1024px) {\n  //   width: 80%;\n  // }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled.div(_templateObject3$9 || (_templateObject3$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var MainContainer = /*#__PURE__*/styled.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var ErrorText$1 = /*#__PURE__*/styled.span(_templateObject5$3 || (_templateObject5$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
@@ -4706,7 +4851,7 @@ function ContactWork() {
       });
     }
   };
-  return React.createElement(Container$d, null, React.createElement(Wrapper$7, null, React.createElement(Label$j, {
+  return React.createElement(Container$d, null, React.createElement(Wrapper$7, null, React.createElement(Label$k, {
     label: "Contact Work",
     htmlFor: "contact-work"
   })), React.createElement(InputContainer$1, null, React.createElement(CustomInput$4, {
@@ -4722,7 +4867,7 @@ function ContactWork() {
 }
 var InputContainer$1 = /*#__PURE__*/styled.div(_templateObject$q || (_templateObject$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var Wrapper$7 = /*#__PURE__*/styled.div(_templateObject2$l || (_templateObject2$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$4 = /*#__PURE__*/styled(Input$1)(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$4 = /*#__PURE__*/styled(Input$2)(_templateObject3$a || (_templateObject3$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$d = /*#__PURE__*/styled.div(_templateObject4$5 || (_templateObject4$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var ErrorText$2 = /*#__PURE__*/styled.span(_templateObject5$4 || (_templateObject5$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
@@ -4786,7 +4931,7 @@ function ContactMobile() {
       });
     }
   };
-  return React.createElement(Container$f, null, React.createElement(Wrapper$8, null, React.createElement(Label$j, {
+  return React.createElement(Container$f, null, React.createElement(Wrapper$8, null, React.createElement(Label$k, {
     label: "Contact Mobile",
     htmlFor: "contact-work"
   }), showCopyIcon && React.createElement(CopyText, {
@@ -4804,7 +4949,7 @@ function ContactMobile() {
 }
 var InputContainer$2 = /*#__PURE__*/styled.div(_templateObject$s || (_templateObject$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n  align-items: center;\n"])));
 var Wrapper$8 = /*#__PURE__*/styled.div(_templateObject2$m || (_templateObject2$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n"])));
-var CustomInput$5 = /*#__PURE__*/styled(Input$1)(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$5 = /*#__PURE__*/styled(Input$2)(_templateObject3$b || (_templateObject3$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 80%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$f = /*#__PURE__*/styled.div(_templateObject4$6 || (_templateObject4$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 var ErrorText$3 = /*#__PURE__*/styled.span(_templateObject5$5 || (_templateObject5$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n"])));
 
@@ -4840,10 +4985,10 @@ function ContactEmail() {
       });
     });
   };
-  return React.createElement(Container$g, null, React.createElement(Wrapper$9, null, React.createElement(Label$j, {
+  return React.createElement(Container$g, null, React.createElement(Wrapper$9, null, React.createElement(Label$k, {
     label: "Email",
     htmlFor: "email-id"
-  })), React.createElement(Input$1, {
+  })), React.createElement(Input$2, {
     name: "email-id",
     type: "email",
     placeholder: "Email",
@@ -4875,7 +5020,7 @@ var _templateObject$w, _templateObject2$q, _templateObject3$d;
 function ConsignmentNumber() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0];
-  return React.createElement(Container$i, null, React.createElement(Wrapper$a, null, React.createElement(Label$j, {
+  return React.createElement(Container$i, null, React.createElement(Wrapper$a, null, React.createElement(Label$k, {
     label: "Consignment Number"
   }), React.createElement(CopyText, {
     text: displayValueOrNA$1(orderDetails.consignment)
@@ -4899,12 +5044,12 @@ function RecipientReference() {
       });
     });
   };
-  return React.createElement(Container$j, null, React.createElement(Wrapper$b, null, React.createElement(Label$j, {
+  return React.createElement(Container$j, null, React.createElement(Wrapper$b, null, React.createElement(Label$k, {
     label: "Recipient Reference",
     htmlFor: "recipient-reference"
   }), showCopyIcon && React.createElement(CopyText, {
     text: orderRecipient
-  })), React.createElement(Input$1, {
+  })), React.createElement(Input$2, {
     name: "recipient-reference",
     type: "text",
     placeholder: "Enter Recipient Reference",
@@ -4932,7 +5077,7 @@ function DepotDropdown() {
       });
     });
   };
-  return React.createElement(FormContainer, null, React.createElement(Label$j, {
+  return React.createElement(FormContainer, null, React.createElement(Label$k, {
     label: "Depot",
     htmlFor: "depotDropdown"
   }), React.createElement(StyledSelectDropdown, {
@@ -4969,7 +5114,7 @@ function Droptime() {
       });
     });
   };
-  return React.createElement(Container$k, null, React.createElement(Label$j, {
+  return React.createElement(Container$k, null, React.createElement(Label$k, {
     label: "Droptime",
     htmlFor: "droptime"
   }), React.createElement(CustomInput$6, {
@@ -4981,7 +5126,7 @@ function Droptime() {
     onChange: onChange
   }));
 }
-var CustomInput$6 = /*#__PURE__*/styled(Input$1)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
+var CustomInput$6 = /*#__PURE__*/styled(Input$2)(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n"])));
 var Container$k = /*#__PURE__*/styled.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
 
 var _templateObject$A;
@@ -5023,7 +5168,7 @@ function DeliveryDate() {
       });
     }
   };
-  return React.createElement(MainContainer$1, null, React.createElement(Label$j, {
+  return React.createElement(MainContainer$1, null, React.createElement(Label$k, {
     label: "Delivery Date"
   }), React.createElement(DatePicker, {
     onChange: onChange,
@@ -5081,7 +5226,7 @@ function Carrier() {
       });
     });
   };
-  return React.createElement(FormContainer$1, null, React.createElement(Label$j, {
+  return React.createElement(FormContainer$1, null, React.createElement(Label$k, {
     label: "Carrier",
     htmlFor: "CarrierDropdown"
   }), React.createElement(SelectDropdown, {
@@ -5110,12 +5255,12 @@ function OrderNumber() {
       });
     });
   };
-  return React.createElement(Container$l, null, React.createElement(Wrapper$c, null, React.createElement(Label$j, {
+  return React.createElement(Container$l, null, React.createElement(Wrapper$c, null, React.createElement(Label$k, {
     label: "Order Number",
     htmlFor: "order-number"
   }), showCopyIcon && React.createElement(CopyText, {
     text: orderDetails == null ? void 0 : orderDetails.order_number
-  })), React.createElement(Input$1, {
+  })), React.createElement(Input$2, {
     name: "order-number",
     type: "text",
     placeholder: "Order Number",
@@ -5161,7 +5306,7 @@ function ScheduleAfter() {
       });
     }
   };
-  return React.createElement(MainContainer$2, null, React.createElement(Label$j, {
+  return React.createElement(MainContainer$2, null, React.createElement(Label$k, {
     label: "Schedule After"
   }), React.createElement(DatePicker, {
     onChange: onChange,
@@ -5195,7 +5340,7 @@ function VehicleTypeDropdown() {
       });
     });
   };
-  return React.createElement(FormContainer$2, null, React.createElement(Label$j, {
+  return React.createElement(FormContainer$2, null, React.createElement(Label$k, {
     label: "Vehicle Type",
     htmlFor: "vehicleType"
   }), React.createElement(StyledSelectDropdown, {
@@ -5233,7 +5378,7 @@ function OrderStatusNote() {
       });
     });
   };
-  return React.createElement(Container$m, null, React.createElement(Label$j, {
+  return React.createElement(Container$m, null, React.createElement(Label$k, {
     label: "Order Status Note"
   }), React.createElement(CustomTextArea, {
     value: (orderDetails == null ? void 0 : orderDetails.order_status_note) || '',
@@ -5256,7 +5401,7 @@ function DeliveryInstructions() {
       });
     });
   };
-  return React.createElement(Container$n, null, React.createElement(Label$j, {
+  return React.createElement(Container$n, null, React.createElement(Label$k, {
     label: "Delivery Instructions"
   }), React.createElement(CustomTextArea$1, {
     value: (orderDetails == null ? void 0 : orderDetails.delivery_instructions) || '',
@@ -5279,7 +5424,7 @@ function OtherInstructions() {
       });
     });
   };
-  return React.createElement(Container$o, null, React.createElement(Label$j, {
+  return React.createElement(Container$o, null, React.createElement(Label$k, {
     label: "Other Instructions (simple instructions)"
   }), React.createElement(CustomTextArea$2, {
     value: (orderDetails == null ? void 0 : orderDetails.other_instructions) || '',
@@ -5297,7 +5442,7 @@ function InstructionSection() {
   }), React.createElement(FormInputs$2, null, React.createElement(OrderStatusNote, null), React.createElement(DeliveryInstructions, null), React.createElement(OtherInstructions, null)));
 }
 var FormInputs$2 = /*#__PURE__*/styled.div(_templateObject$J || (_templateObject$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  flex: 1;\n"])));
-var CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$z || (_templateObject2$z = /*#__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 CustomFormSection$2 = /*#__PURE__*/styled(FormSection)(_templateObject2$z || (_templateObject2$z = /*#__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: 24px !important;\n"])));
 
 var _templateObject$K, _templateObject2$A;
 function convertTo12HourFormat(time24) {
@@ -5336,7 +5481,7 @@ function TimedServiceDropdown() {
     });
     setOrderData(newData);
   };
-  return React.createElement(Container$p, null, React.createElement(Label$j, {
+  return React.createElement(Container$p, null, React.createElement(Label$k, {
     label: "Timed Service"
   }), React.createElement(StyledSelectDropdown$1, {
     styles: _extends({}, dropdownStyles, {
@@ -5381,7 +5526,7 @@ function ServiceTypeDropdown() {
     });
     setOrderData(newData);
   };
-  return React.createElement(Container$q, null, React.createElement(Label$j, {
+  return React.createElement(Container$q, null, React.createElement(Label$k, {
     label: "Service Type",
     htmlFor: "serviceTypeDropdown"
   }), React.createElement(StyledSelectDropdown$2, {
@@ -5424,7 +5569,7 @@ function DeliveryPointDropdown() {
     });
     setOrderData(newData);
   };
-  return React.createElement(Container$r, null, React.createElement(Label$j, {
+  return React.createElement(Container$r, null, React.createElement(Label$k, {
     label: "Delivery Point"
   }), React.createElement(StyledSelectDropdown$3, {
     placeholder: "Select Delivery Point",
@@ -6068,7 +6213,6 @@ function AddNote() {
     }),
     getNoteType = _useAxios.fetchData,
     fetchedData = _useAxios.data;
-  console.log(selectedNoteType, 'selectedNoteType');
   useEffect(function () {
     getNoteType();
   }, []);
@@ -6099,12 +6243,16 @@ function AddNote() {
       method: 'POST'
     }),
     callAuditLogs = _useAxios2.fetchData;
-  var isValidFormat = function isValidFormat() {
-    var lines = noteText.split('\n');
-    if (lines.length < 3) return false;
-    return lines[0].startsWith('REASON-') && lines[1].startsWith('STC-') && lines[2].startsWith('ACTION-');
-  };
-  var isDisabled = !noteText.trim() || !isValidFormat() || !selectedAssignee;
+  // `const isValidFormat = () => {
+  // const lines = noteText.split('\n');
+  // if (lines.length < 3) return false;
+  // return (
+  // lines[0].startsWith('REASON-') &&
+  // lines[1].startsWith('STC-') &&
+  // lines[2].startsWith('ACTION-')
+  // );
+  // };
+  var isDisabled = !noteText.trim() || !selectedAssignee;
   var saveNote = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var payload, response;
@@ -6176,26 +6324,9 @@ function AddNote() {
     };
   }();
   var handleChange = function handleChange(e) {
-    var val = e.target.value;
-    var lines = val.split('\n');
-    while (lines.length < 3) {
-      if (lines.length === 0) lines.push('REASON- ');else if (lines.length === 1) lines.push('STC- ');else if (lines.length === 2) lines.push('ACTION- ');
-    }
-    var enforcedLines = lines.map(function (line, idx) {
-      if (idx === 0) {
-        if (!line.startsWith('REASON-')) return 'REASON- ';
-      }
-      if (idx === 1) {
-        if (!line.startsWith('STC-')) return 'STC- ';
-      }
-      if (idx === 2) {
-        if (!line.startsWith('ACTION-')) return 'ACTION- ';
-      }
-      return line;
-    });
-    setNoteText(enforcedLines.join('\n'));
+    setNoteText(e.target.value);
   };
-  return React.createElement(Container$A, null, React.createElement(Label$j, {
+  return React.createElement(Container$A, null, React.createElement(Label$k, {
     label: "Add New Note",
     required: true,
     style: {
@@ -6845,7 +6976,7 @@ var ActionIcon = function ActionIcon() {
 };
 
 var _templateObject$19;
-var ReturnProductTable = function ReturnProductTable() {
+var ReturnProductTable = function ReturnProductTable(props) {
   var _useSelectedProducts = useSelectedProducts(),
     selectedProducts = _useSelectedProducts[0],
     setSelectedProducts = _useSelectedProducts[1];
@@ -6862,20 +6993,19 @@ var ReturnProductTable = function ReturnProductTable() {
     orderId = _useOrderId[0];
   var _useNewReturnOrderDat = useNewReturnOrderData(),
     returnOrderData = _useNewReturnOrderDat[0];
-  var handleActionClick = function handleActionClick(id) {
-    setSelectedRowId(id);
-  };
-  var _useApiHook = useApiHook({
-      endpoint: "order/order_products/delete/",
-      method: 'DELETE',
-      body: [{
-        id: selectedRowId,
-        order_id: orderId
-      }],
-      performAction: false
+  // const handleActionClick = (id: number) => {
+  //   setSelectedRowId(id);
+  // };
+  var _useAxios = useAxios({
+      endpoint: "v1/return/product/remove/",
+      method: 'POST',
+      body: {
+        return_order_product_id: selectedRowId,
+        return_order_id: +orderId
+      }
     }),
-    isresponse = _useApiHook.data,
-    setAction = _useApiHook.setShouldPerformAction;
+    isresponse = _useAxios.data,
+    callDeleteProduct = _useAxios.fetchData;
   useEffect(function () {
     if (isresponse && isresponse.data) {
       notification.success({
@@ -6895,9 +7025,9 @@ var ReturnProductTable = function ReturnProductTable() {
       });
     }
   };
-  var onDeleteProducts = function onDeleteProducts() {
-    setAction(true);
-  };
+  // const onDeleteProducts = () => {
+  //   callDeleteProduct();
+  // };
   var handleSelectAll = function handleSelectAll() {
     if (selectAll) {
       setSelectedProducts([]);
@@ -6916,6 +7046,56 @@ var ReturnProductTable = function ReturnProductTable() {
       }) : [].concat(prevSelected, [id]);
     });
   };
+  //delete product API
+  var deleteProduct = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(selectedProductId) {
+      var response;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return callDeleteProduct({
+              payload: {
+                return_order_product_id: selectedProductId,
+                return_order_id: +orderId
+              }
+            });
+          case 3:
+            response = _context.sent;
+            if ((response == null ? void 0 : response.code) === 200) {
+              notification.success({
+                message: 'Success',
+                description: (response == null ? void 0 : response.message) || 'Product deleted successfully.'
+              });
+              props == null || props.callReturnProducts();
+            } else {
+              notification.error({
+                message: 'Deletion Failed',
+                description: (response == null ? void 0 : response.message) || 'Could not delete the product.'
+              });
+            }
+            _context.next = 11;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+            console.error('Error deleting product:', _context.t0);
+            notification.error({
+              message: 'Error',
+              //@ts-ignore
+              description: (_context.t0 == null ? void 0 : _context.t0.message) || 'An unexpected error occurred.'
+            });
+          case 11:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function deleteProduct(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var disableCheckbox = (productData == null ? void 0 : productData.length) == 0 || (returnOrderData == null ? void 0 : returnOrderData.length) == 0;
   return React.createElement("div", null, React.createElement(StyledTableWrapper$1, {
     id: "tableScrolling",
@@ -6954,8 +7134,7 @@ var ReturnProductTable = function ReturnProductTable() {
       }
     }, displayValueOrNA$1(product == null ? void 0 : product.postcode)))), React.createElement("td", null, product == null ? void 0 : product.code), React.createElement("td", null, product == null ? void 0 : product.description), React.createElement("td", null, product == null ? void 0 : product.return_reason), React.createElement("td", null, product == null ? void 0 : product.part), React.createElement("td", null, React.createElement("div", {
       onClick: function onClick() {
-        handleActionClick(product == null ? void 0 : product.id);
-        onDeleteProducts();
+        deleteProduct(product == null ? void 0 : product.id);
       },
       style: {
         cursor: 'pointer'
@@ -6971,13 +7150,16 @@ var ReturnProductTable = function ReturnProductTable() {
 var StyleCheckbox = /*#__PURE__*/styled(Checkbox$1)(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  &:disabled {\n    background-color: gray;\n    cursor: not-allowed;\n    opacity: -0.4;\n  }\n"])));
 
 var _templateObject$1a;
-var ProductTable = function ProductTable() {
-  return React.createElement(Container$G, null, React.createElement(ReturnProductTable, null));
+var ProductTable = function ProductTable(props) {
+  return React.createElement(Container$G, null, React.createElement(ReturnProductTable, {
+    callReturnProducts: props == null ? void 0 : props.callReturnProducts
+  }));
 };
 var Container$G = /*#__PURE__*/styled.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* height: 230px;  */\n  overflow: auto; /* Enable scrolling */\n  scrollbar-width: thin;\n"])));
 
 var _templateObject$1b, _templateObject2$S, _templateObject3$p;
 var payloadAtom = /*#__PURE__*/atom(null);
+var selectedOrderId = /*#__PURE__*/atom(null);
 var NewReturnDropdown = function NewReturnDropdown() {
   var defaultSelectStyle = {
     width: '100%'
@@ -6986,20 +7168,20 @@ var NewReturnDropdown = function NewReturnDropdown() {
   var _useNewReturnOrderDat = useNewReturnOrderData(),
     returnOrderData = _useNewReturnOrderDat[0],
     setReturnOrderData = _useNewReturnOrderDat[1];
-  var _useState = useState(null),
-    selectedOrderId = _useState[0],
-    setSelectedOrderId = _useState[1];
+  var _useAtom = useAtom(selectedOrderId),
+    selectedId = _useAtom[0],
+    setSelectedOrderId = _useAtom[1];
   var _useSelectedProducts = useSelectedProducts(),
     selectedProducts = _useSelectedProducts[0];
   var _useOrderDetails = useOrderDetails(),
     orderData = _useOrderDetails[0];
-  var _useAtom = useAtom(payloadAtom),
-    setPayload = _useAtom[1];
+  var _useAtom2 = useAtom(payloadAtom),
+    setPayload = _useAtom2[1];
   var _useProductDetails = useProductDetails(),
     productData = _useProductDetails[0];
-  var _useState2 = useState(),
-    idProduct = _useState2[0],
-    setId = _useState2[1];
+  var _useState = useState(),
+    idProduct = _useState[0],
+    setId = _useState[1];
   var _useOrderId = useOrderId(),
     orderId = _useOrderId[0];
   var id = orderData == null ? void 0 : orderData.customer_id;
@@ -7056,14 +7238,14 @@ var NewReturnDropdown = function NewReturnDropdown() {
     }
   }, [fetchedReturnOrderData, id]);
   useEffect(function () {
-    if (selectedOrderId && (selectedProducts == null ? void 0 : selectedProducts.length) > 0) {
+    if (selectedId && (selectedProducts == null ? void 0 : selectedProducts.length) > 0) {
       var newPayload = {
-        new_return_order: selectedOrderId,
+        new_return_order: selectedId,
         products: selectedProducts
       };
       setPayload(newPayload);
     }
-  }, [selectedOrderId, selectedProducts, setPayload]);
+  }, [selectedId, selectedProducts, setPayload]);
   var handleDropdownChange = function handleDropdownChange(value) {
     setSelectedOrderId(value);
   };
@@ -7075,18 +7257,17 @@ var NewReturnDropdown = function NewReturnDropdown() {
   });
   return React.createElement(Container$H, null, React.createElement(Text$5, null, "New Return Order:"), React.createElement(StyledAntSelect$4, {
     options: dropdownOptions,
-    value: selectedOrderId,
+    value: selectedId,
     placeholder: "Select",
     // @ts-ignore
     onChange: handleDropdownChange,
     style: defaultSelectStyle,
     showSearch: true,
     dropdownStyle: {
-      minWidth: '150px',
-      width: 'auto'
+      width: '250px'
     },
     popupClassName: defaultPopupClassName,
-    status: dropdownOptions.length === 0 ? '' : selectedOrderId ? '' : 'error',
+    status: dropdownOptions.length === 0 ? '' : selectedId ? '' : 'error',
     notFoundContent: "No orders found with a similar postcode"
   }));
 };
@@ -7095,7 +7276,7 @@ var Container$H = /*#__PURE__*/styled.div(_templateObject2$S || (_templateObject
 var Text$5 = /*#__PURE__*/styled.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #000;\n  font-family: 'Lato';\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 16px;\n"])));
 
 var _templateObject$1c, _templateObject2$T, _templateObject3$q;
-function ExpandedContent$2() {
+function ExpandedContent$2(props) {
   var _response$data, _response$data2;
   var _useAtom = useAtom(payloadAtom),
     payload = _useAtom[0];
@@ -7109,15 +7290,16 @@ function ExpandedContent$2() {
   var navigate = useNavigate();
   var _useSelectedProducts = useSelectedProducts(),
     setSelectedProducts = _useSelectedProducts[1];
-  var _useApiHook = useApiHook({
+  var _useAtom2 = useAtom(selectedOrderId),
+    setSelectedOrderId = _useAtom2[1];
+  var _useAxios = useAxios({
       endpoint: "/v1/return/product/move/?return_order_id=" + orderId,
       method: 'POST',
-      body: payload,
-      performAction: false
+      body: payload
     }),
-    response = _useApiHook.data,
-    setShouldPerformAction = _useApiHook.setShouldPerformAction,
-    confirmLoading = _useApiHook.loading;
+    response = _useAxios.data,
+    confirmLoading = _useAxios.loading,
+    callMoveProducts = _useAxios.fetchData;
   useEffect(function () {
     setPostLoading(confirmLoading);
   }, [confirmLoading, setPostLoading]);
@@ -7129,14 +7311,48 @@ function ExpandedContent$2() {
       setIsButtonDisabled(true);
     }
   }, [payload]);
-  var handleConfirmReturn = function handleConfirmReturn() {
-    if (!isButtonDisabled) {
-      setShouldPerformAction(true);
-      setPostLoading(confirmLoading);
-    } else {
-      console.error('Payload is incomplete:', payload);
-    }
+  var sleep = function sleep(ms) {
+    return new Promise(function (res) {
+      return setTimeout(res, ms);
+    });
   };
+  var handleConfirmReturn = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var response;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!isButtonDisabled) {
+              _context.next = 3;
+              break;
+            }
+            console.error('Payload is incomplete:', payload);
+            return _context.abrupt("return");
+          case 3:
+            setPostLoading(true);
+            _context.next = 6;
+            return callMoveProducts();
+          case 6:
+            response = _context.sent;
+            if (!((response == null ? void 0 : response.code) === 200)) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 10;
+            return sleep(2000);
+          case 10:
+            props == null || props.callReturnProducts();
+            setSelectedOrderId(null);
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleConfirmReturn() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var newId = Array.isArray(response == null ? void 0 : response.data) ? //@ts-ignore
   response == null || (_response$data = response.data) == null || (_response$data = _response$data[0]) == null ? void 0 : _response$data.id : //@ts-ignore
   response == null || (_response$data2 = response.data) == null ? void 0 : _response$data2.id;
@@ -7163,7 +7379,9 @@ function ExpandedContent$2() {
       setSelectedProducts([]);
     }
   }, [response, newId, navigate, setSelectedProducts]);
-  return React.createElement(Container$I, null, React.createElement(ProductTable, null), React.createElement(MidContainer, null, React.createElement(SaveNoteContainer$1, null, React.createElement(Button, {
+  return React.createElement(Container$I, null, React.createElement(ProductTable, {
+    callReturnProducts: props == null ? void 0 : props.callReturnProducts
+  }), React.createElement(MidContainer, null, React.createElement(SaveNoteContainer$1, null, React.createElement(Button, {
     style: {
       borderRadius: '20px'
     },
@@ -7190,7 +7408,7 @@ function ProductsInfo() {
   var returnOrder = data;
   // For API Call
   var _useProductDetails = useProductDetails(),
-    setAPidata = _useProductDetails[1];
+    setProductsData = _useProductDetails[1];
   var _useLoading = useLoading(),
     setLoading = _useLoading[1];
   var _useAxios = useAxios({
@@ -7210,15 +7428,17 @@ function ProductsInfo() {
     if (returnOrdersData && returnOrdersData.data) {
       var requiredData = returnOrdersData.data;
       if (requiredData.length > 0) {
-        setAPidata(requiredData);
+        setProductsData(requiredData);
       } else {
-        setAPidata(null);
+        setProductsData(null);
       }
     }
   }, [returnOrdersData, loading]);
   return React.createElement(CollapsableForm, {
     collapsedContent: React.createElement(CollapsedContent$1, null)
-  }, React.createElement(ExpandedContent$2, null));
+  }, React.createElement(ExpandedContent$2, {
+    callReturnProducts: callReturnProducts
+  }));
 }
 
 var _templateObject$1e;
@@ -8900,7 +9120,7 @@ function EmailAddress() {
       });
     });
   };
-  return React.createElement(Container$U, null, React.createElement(Label$6, null, "Email Address"), React.createElement(Input$2, {
+  return React.createElement(Container$U, null, React.createElement(Label$6, null, "Email Address"), React.createElement(Input$3, {
     style: {
       borderRadius: '15px'
     },
@@ -8962,7 +9182,7 @@ function ContactPhone() {
       });
     }
   };
-  return React.createElement(Container$V, null, React.createElement(Label$7, null, "Contact Phone"), React.createElement(Input$2, {
+  return React.createElement(Container$V, null, React.createElement(Label$7, null, "Contact Phone"), React.createElement(Input$3, {
     name: "contact-home",
     type: "text",
     placeholder: "Home Number",
@@ -9027,7 +9247,7 @@ function ContactWork$1() {
       });
     }
   };
-  return React.createElement(Container$W, null, React.createElement(Label$8, null, "Contact Work"), React.createElement(Input$2, {
+  return React.createElement(Container$W, null, React.createElement(Label$8, null, "Contact Work"), React.createElement(Input$3, {
     name: "contact-work",
     type: "text",
     placeholder: "Work Number",
@@ -9092,7 +9312,7 @@ function ContactMobile$1() {
       });
     }
   };
-  return React.createElement(Container$X, null, React.createElement(Label$9, null, "Contact Mobile"), React.createElement(Input$2, {
+  return React.createElement(Container$X, null, React.createElement(Label$9, null, "Contact Mobile"), React.createElement(Input$3, {
     name: "contact-work",
     type: "text",
     placeholder: "Mobile Number",
@@ -9169,7 +9389,7 @@ function ActionDropdown() {
   var onSelect = function onSelect(value) {
     setSelectedAction(value);
   };
-  return React.createElement(Container$Y, null, React.createElement(Label$j, {
+  return React.createElement(Container$Y, null, React.createElement(Label$k, {
     label: "Action"
   }), React.createElement(Select, {
     style: {
@@ -9444,7 +9664,7 @@ var Container$12 = /*#__PURE__*/styled.div(_templateObject2$1h || (_templateObje
 
 var _templateObject$1J, _templateObject2$1i;
 function ContactWith() {
-  return React.createElement(Container$13, null, React.createElement(Label$d, null, "Contact With"), React.createElement(Input$2, {
+  return React.createElement(Container$13, null, React.createElement(Label$d, null, "Contact With"), React.createElement(Input$3, {
     style: {
       borderRadius: '15px'
     }
@@ -9845,7 +10065,7 @@ var Wrapper$h = /*#__PURE__*/styled.div(_templateObject$1L || (_templateObject$1
 var ContentContainer$4 = /*#__PURE__*/styled.div(_templateObject2$1k || (_templateObject2$1k = /*#__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 _templateObject2$1l, _templateObject3$L, _templateObject5$f, _templateObject6$7, _templateObject7$9, _templateObject8$7, _templateObject9$5, _templateObject10$3, _templateObject11$2, _templateObject18$1, _templateObject19$1;
-var StyledInput = /*#__PURE__*/styled(Input$1)(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
+var StyledInput = /*#__PURE__*/styled(Input$2)(_templateObject2$1l || (_templateObject2$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 66px;\n  min-width: 700px;\n"])));
 var StyledTextArea$1 = /*#__PURE__*/styled(TextArea)(_templateObject3$L || (_templateObject3$L = /*#__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 SplitLayout = /*#__PURE__*/styled.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n"])));
 var SplitText = /*#__PURE__*/styled.div(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  gap: 10px;\n  flex-direction: column;\n  margin-bottom: 4px;\n"])));
@@ -10109,7 +10329,7 @@ function SendEmailModal() {
     onSubmit: handleSubmit,
     submitBtnTitle: loading ? 'Sending...' : 'Send Email',
     isSubmitDisabled: isDisabled
-  }, React.createElement(ContentContainer$5, null, React.createElement(Label$j, {
+  }, React.createElement(ContentContainer$5, null, React.createElement(Label$k, {
     label: "To",
     required: true
   }), React.createElement(StyledInput, {
@@ -10126,7 +10346,7 @@ function SendEmailModal() {
     style: {
       color: 'red'
     }
-  }, emailError), React.createElement(Label$j, {
+  }, emailError), React.createElement(Label$k, {
     label: "Subject",
     required: true
   }), React.createElement(StyledInput, {
@@ -10135,7 +10355,7 @@ function SendEmailModal() {
     required: true,
     value: formData.subject,
     onChange: handleChange
-  }), React.createElement(Label$j, {
+  }), React.createElement(Label$k, {
     label: "Body",
     required: true
   }), React.createElement(StyledTextArea$1, {
@@ -10267,7 +10487,7 @@ function ChangeCustomerAccModal(props) {
     popupClassName: "dropDownStyle",
     selectWrapperClass: "rounded",
     defaultValue: selectedCustomerId
-  })), React.createElement(Row$4, null, React.createElement(Label$e, null, "New Trading Name"), React.createElement(Input$2, {
+  })), React.createElement(Row$4, null, React.createElement(Label$e, null, "New Trading Name"), React.createElement(Input$3, {
     style: {
       borderRadius: '15px',
       minWidth: '22vw'
@@ -10409,7 +10629,7 @@ function HoldOrderModal(props) {
     infoText: infoText,
     submitBtnTitle: "Save Details",
     isSubmitDisabled: !showSubmitBtn
-  }, React.createElement(HoldContentContainer, null, React.createElement(SplitText, null, React.createElement(HoldRow, null, React.createElement(Label$j, {
+  }, React.createElement(HoldContentContainer, null, React.createElement(SplitText, null, React.createElement(HoldRow, null, React.createElement(Label$k, {
     label: "Hold Until (leave blank for indefinite)"
   }), React.createElement(HoldDatePickerWrap, null, React.createElement(DatePicker, {
     needConfirm: true,
@@ -10419,7 +10639,7 @@ function HoldOrderModal(props) {
     disabledDate: function disabledDate(current) {
       return current && current < dayjs().startOf('day');
     }
-  }))), React.createElement(HoldRow, null, React.createElement(Label$j, {
+  }))), React.createElement(HoldRow, null, React.createElement(Label$k, {
     label: "Hold Reason",
     required: true
   }), React.createElement(AntSelect, {
@@ -10712,7 +10932,7 @@ function AssigneeDropdown() {
       value: user == null ? void 0 : user.id
     };
   });
-  return React.createElement(FormContainer$3, null, React.createElement(Label$j, {
+  return React.createElement(FormContainer$3, null, React.createElement(Label$k, {
     label: "Department",
     required: true
   }), React.createElement(StyledAntSelect$5, {
@@ -10726,7 +10946,7 @@ function AssigneeDropdown() {
     value: (reminderPayload == null ? void 0 : reminderPayload.department) || undefined,
     showSearch: true,
     dis: true
-  }), React.createElement(Label$j, {
+  }), React.createElement(Label$k, {
     label: "Assigned To",
     required: true,
     htmlFor: "assigneDropdown"
@@ -11000,10 +11220,10 @@ var ViewReminderModal = function ViewReminderModal(props) {
       checked: (reminderPayload == null ? void 0 : reminderPayload.status) || false,
       disabled: disabled
     }), React.createElement(RoundCheckbox, null)), React.createElement(StyledSpan, null, "Mark As Complete"))))
-  }, React.createElement(ReferenceContainer, null, React.createElement(InnerContainer, null, React.createElement(MiniContainer, null, React.createElement(Label$j, {
+  }, React.createElement(ReferenceContainer, null, React.createElement(InnerContainer, null, React.createElement(MiniContainer, null, React.createElement(Label$k, {
     label: "Reference",
     required: true
-  }), React.createElement(LabelText, null, (reminderDataById == null ? void 0 : reminderDataById.reference) || 'N/A')), React.createElement(MiniContainer, null, React.createElement(Label$j, {
+  }), React.createElement(LabelText, null, (reminderDataById == null ? void 0 : reminderDataById.reference) || 'N/A')), React.createElement(MiniContainer, null, React.createElement(Label$k, {
     label: "Status"
   }), React.createElement(LabelText, null, (reminderDataById == null ? void 0 : reminderDataById.status) === false ? React.createElement(StatusIndicator, {
     text: "Incomplete",
@@ -11011,7 +11231,7 @@ var ViewReminderModal = function ViewReminderModal(props) {
   }) : React.createElement(StatusIndicator, {
     text: "Completed on " + (reminderDataById == null ? void 0 : reminderDataById.completed_at) + " by " + (reminderDataById == null ? void 0 : reminderDataById.completed_by),
     status: "SD"
-  }))))), React.createElement(ContentsContainer, null, React.createElement(Left$1, null, React.createElement(AssigneeDropdown, null), React.createElement(DateTimeContainer, null, React.createElement(Label$j, {
+  }))))), React.createElement(ContentsContainer, null, React.createElement(Left$1, null, React.createElement(AssigneeDropdown, null), React.createElement(DateTimeContainer, null, React.createElement(Label$k, {
     label: "Due Date & Time",
     required: true
   }), React.createElement(Row$5, null, React.createElement(StyleContainer, null, React.createElement(DatePickerWrap, null, React.createElement(DatePicker, {
@@ -11029,7 +11249,7 @@ var ViewReminderModal = function ViewReminderModal(props) {
       return getDisabledTime(date);
     },
     disabled: disabled
-  })))))), React.createElement(Right$2, null, React.createElement(Label$j, {
+  })))))), React.createElement(Right$2, null, React.createElement(Label$k, {
     label: "Details",
     required: true
   }), React.createElement(DetailedContainer, {
@@ -11199,7 +11419,7 @@ function TextSection() {
       description: event.target.value
     }));
   };
-  return React.createElement(Text$9, null, React.createElement(Label$j, {
+  return React.createElement(Text$9, null, React.createElement(Label$k, {
     label: "Details"
   }), React.createElement(TextField, {
     placeholder: "Type here....",
@@ -11269,21 +11489,21 @@ function ButtonsSection() {
   }, [orderFlagTypes, taskPayload, flagById]);
   var isResolved = (flagById == null ? void 0 : flagById.status) !== 'AD';
   var resolvedText = "Resolved on " + formatDate$1((flagById == null ? void 0 : flagById.resolved_at) || 'N/A') + " by " + ((flagById == null ? void 0 : flagById.resolved_by) || 'N/A');
-  return React.createElement(Buttons, null, React.createElement(Flex, null, React.createElement(Label$j, {
+  return React.createElement(Buttons, null, React.createElement(Flex, null, React.createElement(Label$k, {
     label: "Type"
   }), React.createElement(StyledAntSelect$6, {
     options: taskTypeOptions,
     placeholder: "Select Type",
     onChange: handleTaskTypeChange,
     value: selectedTypeId
-  })), React.createElement(Flex, null, React.createElement(Label$j, {
+  })), React.createElement(Flex, null, React.createElement(Label$k, {
     label: "Priority"
   }), React.createElement(StyledAntSelect$6, {
     options: priorityOptions,
     placeholder: "Select Type",
     onChange: handlePriorityChange,
     value: (taskPayload == null ? void 0 : taskPayload.priority) || (flagById == null ? void 0 : flagById.priority)
-  })), React.createElement(Flex, null, React.createElement(Label$j, {
+  })), React.createElement(Flex, null, React.createElement(Label$k, {
     label: "Status"
   }), isResolved ? React.createElement(StatusIndicator, {
     text: resolvedText,
@@ -11441,7 +11661,7 @@ var Detail = /*#__PURE__*/styled.div(_templateObject$1W || (_templateObject$1W =
 var Flex$1 = /*#__PURE__*/styled.div(_templateObject2$1v || (_templateObject2$1v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 20px;\n"])));
 var Ref = /*#__PURE__*/styled.div(_templateObject3$S || (_templateObject3$S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  font-family: 'Lato', sans-serif;\n"])));
 var Order = /*#__PURE__*/styled.div(_templateObject4$r || (_templateObject4$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #7b7874;\n  text-decoration: underline;\n  font-family: 'Lato', sans-serif;\n"])));
-var StyledLabel$2 = /*#__PURE__*/styled(Label$j)(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
+var StyledLabel$2 = /*#__PURE__*/styled(Label$k)(_templateObject5$j || (_templateObject5$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-right: 10px;\n  font-weight: bold;\n"])));
 
 var _templateObject$1X, _templateObject2$1w, _templateObject3$T;
 function ViewFlag() {
@@ -12923,71 +13143,2160 @@ function TaskModal(props) {
 }
 var OrderModal$1 = /*#__PURE__*/styled(OrderActionModal)(_templateObject$25 || (_templateObject$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70%;\n"])));
 
-var _templateObject$26;
-function OrderActions() {
-  var _useCurrentAction = useCurrentAction(),
-    currentAction = _useCurrentAction[0],
-    setCurrentAction = _useCurrentAction[1];
-  var _useOrderId = useOrderId(),
-    orderId = _useOrderId[0];
+var _templateObject$26, _templateObject2$1B, _templateObject3$Z, _templateObject4$w, _templateObject5$n, _templateObject6$b, _templateObject7$c;
+var Title$6 = /*#__PURE__*/styled.span(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Lato', sans-serif;\n  font-size: 16px;\n  font-weight: 600;\n  color: #6a7378;\n"])));
+var Container$17 = /*#__PURE__*/styled.div(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var FieldRow = /*#__PURE__*/styled.div(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 300px;\n  justify-content: space-between;\n"])));
+var Label$i = /*#__PURE__*/styled.label(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: #7b7874;\n"])));
+var Input$1 = /*#__PURE__*/styled.input(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 70px;\n  padding: 6px;\n  font-size: 14px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  &::-webkit-inner-spin-button,\n  &::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0;\n  }\n"])));
+var MainContainer$b = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n"])));
+var CurrencySymbol = /*#__PURE__*/styled.span(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #858d9d;\n"])));
+
+var _templateObject$27;
+var fields = [{
+  label: 'Weight',
+  value: 'weight'
+}, {
+  label: 'Drop Time',
+  value: 'drop_time'
+}, {
+  label: 'Timed Services',
+  value: 'timed_service'
+}, {
+  label: 'Wait Time',
+  value: 'wait_time'
+}, {
+  label: 'Extra Floor',
+  value: 'extra_floor'
+}, {
+  label: 'Bulk Items',
+  value: 'bulky_items'
+}, {
+  label: 'Relabel (Pre-del)',
+  value: 're_label'
+}, {
+  label: 'Extra CBM',
+  value: 'extra_cube'
+}, {
+  label: 'Additional Box',
+  value: 'additional_box'
+}, {
+  label: 'Additional Item',
+  value: 'additional_item'
+}];
+function OrderCharges(props) {
+  var _orderDetails$order_s, _orderStaticData$orde;
+  var _useChargesState = useChargesState(),
+    setCharges = _useChargesState[1];
   var _useOrderDetails = useOrderDetails(),
-    setOrderDetails = _useOrderDetails[1];
-  var _usePrevOrderDetails = usePrevOrderDetails(),
-    setPrevOrderDetails = _usePrevOrderDetails[1];
-  var _useStatusDetails = useStatusDetails(),
-    setOrderStatus = _useStatusDetails[1];
-  var _useOrderAlertsData = useOrderAlertsData(),
-    setOrderAlertsData = _useOrderAlertsData[1];
-  var _useProductDetails = useProductDetails(),
-    setProductDetails = _useProductDetails[1];
-  var _useProductDetailsCop = useProductDetailsCopy(),
-    setProductDetailsCopy = _useProductDetailsCop[1];
-  var _useLoading = useLoading(),
-    setLoading = _useLoading[1];
-  var _useTasksData = useTasksData(),
-    setTasksData = _useTasksData[1];
-  var _useReminderNotiData = useReminderNotiData(),
-    setReminderNotifyData = _useReminderNotiData[1];
-  // call orders api
-  var _useAxios = useAxios({
-      endpoint: "/orders/" + orderId,
-      method: 'GET'
-    }),
-    callOrdersApi = _useAxios.fetchData,
-    loading = _useAxios.loading,
-    fetchedData = _useAxios.data;
-  useEffect(function () {
-    var _fetchedData$data;
-    setLoading(loading);
-    if (fetchedData && fetchedData != null && fetchedData.data) {
-      var requiredData = fetchedData == null ? void 0 : fetchedData.data;
-      setOrderDetails(requiredData[0]);
-      setPrevOrderDetails(requiredData[0]);
-      setCurrentAction(undefined);
-    }
-    if (fetchedData && (fetchedData == null ? void 0 : fetchedData.data) === null || (fetchedData == null || (_fetchedData$data = fetchedData.data) == null ? void 0 : _fetchedData$data.length) === 0) {
-      setCurrentAction(undefined);
+    orderDetails = _useOrderDetails[0];
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var weightVal = orderDetails == null ? void 0 : orderDetails.weight;
+  var dropTime = orderDetails == null ? void 0 : orderDetails.drop_time;
+  var cbm = orderDetails == null ? void 0 : orderDetails.cube;
+  var timesServiceId = orderDetails == null || (_orderDetails$order_s = orderDetails.order_services_detail) == null ? void 0 : _orderDetails$order_s.timed_service_id;
+  var selectedTimedService = orderStaticData == null || (_orderStaticData$orde = orderStaticData.order_timed_services) == null ? void 0 : _orderStaticData$orde.find(function (x) {
+    return (x == null ? void 0 : x.id) === timesServiceId;
+  });
+  var showSelectedTimedService = selectedTimedService !== null && selectedTimedService !== undefined;
+  var showCbm = cbm !== undefined && cbm !== null && cbm > 0;
+  var showDropTime = dropTime !== undefined && dropTime !== null;
+  var showWeight = weightVal !== null && weightVal > 0;
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var handleChange = function handleChange(field, value) {
+    props == null || props.setInputValue(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[field] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (value === '') {
+      setCharges(function (prev) {
+        var _extends3;
+        return _extends({}, prev, (_extends3 = {}, _extends3[field] = 0, _extends3));
+      });
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        var _extends4;
+        return _extends({}, prev, (_extends4 = {}, _extends4[field] = val, _extends4));
+      });
     }
-  }, [loading]);
-  // orders api ends
-  // call order products api start
-  var _useAxios2 = useAxios({
-      endpoint: "/order/order_products/" + orderId,
-      method: 'GET'
-    }),
-    productsData = _useAxios2.data,
-    orderProductsLoading = _useAxios2.loading,
-    callOrderProductsApi = _useAxios2.fetchData;
-  useEffect(function () {
-    var _productsData$data;
-    if (productsData && (productsData == null || (_productsData$data = productsData.data) == null ? void 0 : _productsData$data.length) > 0) {
-      setProductDetails(productsData == null ? void 0 : productsData.data);
-      setProductDetailsCopy(productsData == null ? void 0 : productsData.data);
+  };
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Order Charges"), React.createElement(Container$17, null, fields == null ? void 0 : fields.map(function (item) {
+    var _selectedTimedService, _props$inputValue$ite;
+    return React.createElement(FieldRow, {
+      key: item.value
+    }, React.createElement(Label$i, {
+      style: {
+        minWidth: '100px'
+      }
+    }, item.label), showWeight && (item == null ? void 0 : item.value) === 'weight' && React.createElement(OrderValue, null, weightVal, " Kg"), showDropTime && (item == null ? void 0 : item.value) === 'drop_time' && React.createElement(OrderValue, null, dropTime, " mins"), showCbm && (item == null ? void 0 : item.value) === 'extra_cube' && React.createElement(OrderValue, null, cbm, " (m", React.createElement("sup", null, "3"), ")"), showSelectedTimedService && (item == null ? void 0 : item.value) === 'timed_service' && React.createElement(OrderValue, null, selectedTimedService == null || (_selectedTimedService = selectedTimedService.type) == null ? void 0 : _selectedTimedService.replaceAll('_', '')), React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '3px',
+        alignItems: 'center'
+      }
+    }, React.createElement(CurrencySymbol, null, baseUrlSymbol), React.createElement(Input$1, {
+      min: 0,
+      max: 10000,
+      type: "number",
+      placeholder: "0.00",
+      onWheel: function onWheel(e) {
+        return e.target.blur();
+      },
+      value: (_props$inputValue$ite = props == null ? void 0 : props.inputValue[item.value]) != null ? _props$inputValue$ite : '',
+      onChange: function onChange(e) {
+        return handleChange(item.value, e.target.value);
+      },
+      onKeyDown: handleKeyDownDebrief
+    })));
+  })));
+}
+var OrderValue = /*#__PURE__*/styled.span(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6396e5;\n"])));
+
+var fields$1 = [{
+  label: 'Repackage',
+  value: 're_package'
+}, {
+  label: 'Disassemble',
+  value: 'disassemble'
+}, {
+  label: 'QC',
+  value: 'collection_qc'
+}, {
+  label: 'Return to Client',
+  value: 'return_to_client'
+}];
+function CollectionAddOns(props) {
+  var _useChargesState = useChargesState(),
+    setCharges = _useChargesState[1];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var handleChange = function handleChange(field, value) {
+    props == null || props.setInputValue(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[field] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(function (prev) {
+        var _extends3;
+        return _extends({}, prev, (_extends3 = {}, _extends3[field] = 0, _extends3));
+      });
     } else {
-      setProductDetails(null);
-      setProductDetailsCopy(null);
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        var _extends4;
+        return _extends({}, prev, (_extends4 = {}, _extends4[field] = val, _extends4));
+      });
     }
-  }, [orderProductsLoading]);
+  };
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Collection Add-Ons"), React.createElement(Container$17, null, fields$1.map(function (item) {
+    var _props$inputValue$ite;
+    return React.createElement(FieldRow, {
+      key: item.value
+    }, React.createElement(Label$i, null, item.label), React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '3px',
+        alignItems: 'center'
+      }
+    }, React.createElement(CurrencySymbol, null, baseUrlSymbol), React.createElement(Input$1, {
+      min: 0,
+      max: 10000,
+      type: "number",
+      placeholder: "0.00",
+      onWheel: function onWheel(e) {
+        return e.target.blur();
+      },
+      value: (_props$inputValue$ite = props == null ? void 0 : props.inputValue[item.value]) != null ? _props$inputValue$ite : '',
+      onChange: function onChange(e) {
+        return handleChange(item.value, e.target.value);
+      },
+      onKeyDown: handleKeyDownDebrief
+    })));
+  })));
+}
+
+var fields$2 = [{
+  label: 'Disposal & Recycling',
+  value: 'disposal_recycling'
+}, {
+  label: 'Disposal Only',
+  value: 'disposal'
+}, {
+  label: 'Recycle Only',
+  value: 'recycle'
+}, {
+  label: 'Admin',
+  value: 'admin'
+}];
+function DisposalCharge(props) {
+  var _useChargesState = useChargesState(),
+    setCharges = _useChargesState[1];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var handleChange = function handleChange(field, value) {
+    props == null || props.setInputValue(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[field] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(function (prev) {
+        var _extends3;
+        return _extends({}, prev, (_extends3 = {}, _extends3[field] = 0, _extends3));
+      });
+    } else {
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        var _extends4;
+        return _extends({}, prev, (_extends4 = {}, _extends4[field] = val, _extends4));
+      });
+    }
+  };
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Disposal Charges"), React.createElement(Container$17, null, fields$2.map(function (item) {
+    var _props$inputValue$ite;
+    return React.createElement(FieldRow, {
+      key: item.value
+    }, React.createElement(Label$i, null, item.label), React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '3px',
+        alignItems: 'center'
+      }
+    }, React.createElement(CurrencySymbol, null, baseUrlSymbol), React.createElement(Input$1, {
+      min: 0,
+      max: 10000,
+      type: "number",
+      placeholder: "0.00",
+      onWheel: function onWheel(e) {
+        return e.target.blur();
+      },
+      value: (_props$inputValue$ite = props == null ? void 0 : props.inputValue[item.value]) != null ? _props$inputValue$ite : '',
+      onChange: function onChange(e) {
+        return handleChange(item.value, e.target.value);
+      },
+      onKeyDown: handleKeyDownDebrief
+    })));
+  })));
+}
+
+var _templateObject$28, _templateObject2$1C;
+function BaseCharges(props) {
+  var _props$staticData, _props$inputValue$bas;
+  var _useChargesState = useChargesState(),
+    chargesState = _useChargesState[0],
+    setCharges = _useChargesState[1];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  // const [inputValue, setInputValue] = useState<Record<string, string>>({});
+  var handleChange = function handleChange(field, value) {
+    props == null || props.setInputValue(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[field] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (value === '') {
+      setCharges(function (prev) {
+        var _extends3;
+        return _extends({}, prev, (_extends3 = {}, _extends3[field] = 0, _extends3));
+      });
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        var _extends4;
+        return _extends({}, prev, (_extends4 = {}, _extends4[field] = val, _extends4));
+      });
+    }
+  };
+  var onChange = function onChange(val) {
+    setCharges(function (charge) {
+      return _extends({}, charge, {
+        base_charge_type: +val
+      });
+    });
+  };
+  var baseChargeOptions = props == null || (_props$staticData = props.staticData) == null || (_props$staticData = _props$staticData.base_charges) == null ? void 0 : _props$staticData.map(function (x) {
+    return {
+      label: x == null ? void 0 : x.type,
+      value: x == null ? void 0 : x.id
+    };
+  });
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Base Charge"), React.createElement(Wrapper$k, null, React.createElement(FieldRow, null, React.createElement(Label$i, {
+    style: {
+      width: '90px'
+    }
+  }, "Base Charge"), React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '3px',
+      alignItems: 'center'
+    }
+  }, React.createElement(AntSelect, {
+    onChange: onChange,
+    options: baseChargeOptions || [],
+    placeholder: "Base charge type",
+    defaultValue: baseChargeOptions == null ? void 0 : baseChargeOptions.filter(function (x) {
+      return (x == null ? void 0 : x.value) === (chargesState == null ? void 0 : chargesState.base_charge_type);
+    }),
+    style: {
+      width: 100
+    }
+  }), React.createElement(CurrencyWrapper, null, baseUrlSymbol), React.createElement(Input$1, {
+    min: 0,
+    max: 10000,
+    type: "number",
+    placeholder: "0.00",
+    onWheel: function onWheel(e) {
+      return e.target.blur();
+    },
+    value: (_props$inputValue$bas = props == null ? void 0 : props.inputValue['base_charge']) != null ? _props$inputValue$bas : '',
+    onChange: function onChange(e) {
+      return handleChange('base_charge', e.target.value);
+    },
+    onKeyDown: handleKeyDownDebrief
+  })))));
+}
+var Wrapper$k = /*#__PURE__*/styled.div(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
+var CurrencyWrapper = /*#__PURE__*/styled.div(_templateObject2$1C || (_templateObject2$1C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: #999;\n"])));
+
+var fields$3 = ['ROC', 'Unpack', 'Packaging Disposal', 'Assembly', 'QC'];
+function DeliveryAddOns(props) {
+  var _useChargesState = useChargesState(),
+    setCharges = _useChargesState[1];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var fieldsInLabelValueFormat = fields$3.map(function (field) {
+    return {
+      label: field,
+      value: field.toLowerCase().replace(/ /g, '_')
+    };
+  });
+  var handleChange = function handleChange(field, value) {
+    props == null || props.setInputValue(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[field] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (isNaN(val)) {
+      setCharges(function (prev) {
+        var _extends3;
+        return _extends({}, prev, (_extends3 = {}, _extends3[field] = 0, _extends3));
+      });
+    } else {
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        var _extends4;
+        return _extends({}, prev, (_extends4 = {}, _extends4[field] = val, _extends4));
+      });
+    }
+  };
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Delivery Add-Ons"), React.createElement(Container$17, null, fieldsInLabelValueFormat.map(function (item) {
+    var _props$inputValue$ite;
+    return React.createElement(FieldRow, {
+      key: item.value
+    }, React.createElement(Label$i, null, item.label), React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '3px',
+        alignItems: 'center'
+      }
+    }, React.createElement(CurrencySymbol, null, baseUrlSymbol), React.createElement(Input$1, {
+      min: 0,
+      max: 10000,
+      type: "number",
+      placeholder: "0.00",
+      onWheel: function onWheel(e) {
+        return e.target.blur();
+      },
+      value: (_props$inputValue$ite = props == null ? void 0 : props.inputValue[item.value]) != null ? _props$inputValue$ite : '',
+      onKeyDown: handleKeyDownDebrief,
+      onChange: function onChange(e) {
+        return handleChange(item.value, e.target.value);
+      }
+    })));
+  })));
+}
+
+function AdhocSection() {
+  var _charges$adhoc_charge;
+  var _useChargesState = useChargesState(),
+    charges = _useChargesState[0],
+    setCharges = _useChargesState[1];
+  var _useState = useState(charges == null ? void 0 : charges.adhoc_charges),
+    inputValues = _useState[0],
+    setInputValues = _useState[1];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var handleLabelChange = function handleLabelChange(id, newLabel) {
+    setCharges(function (prev) {
+      return _extends({}, prev, {
+        adhoc_charges: prev.adhoc_charges.map(function (charge) {
+          return charge.id === id ? _extends({}, charge, {
+            adhoc_charges_description: newLabel
+          }) : charge;
+        })
+      });
+    });
+  };
+  var handleValueChange = function handleValueChange(id, value) {
+    setInputValues(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[id] = value, _extends2));
+    });
+    var val = parseFloat(value);
+    if (value === '') {
+      setCharges(function (prev) {
+        return _extends({}, prev, {
+          adhoc_charges: prev.adhoc_charges.map(function (charge) {
+            return charge.id === id ? _extends({}, charge, {
+              adhoc_charges: 0
+            }) : charge;
+          })
+        });
+      });
+    } else if (!isNaN(val)) {
+      val = val >= 0 ? val : 0;
+      setCharges(function (prev) {
+        return _extends({}, prev, {
+          adhoc_charges: prev.adhoc_charges.map(function (charge) {
+            return charge.id === id ? _extends({}, charge, {
+              adhoc_charges: val
+            }) : charge;
+          })
+        });
+      });
+    }
+  };
+  return React.createElement(MainContainer$b, null, React.createElement(Title$6, null, "Adhoc"), React.createElement(Container$17, null, charges == null || (_charges$adhoc_charge = charges.adhoc_charges) == null ? void 0 : _charges$adhoc_charge.map(function (item) {
+    var _inputValues$item$id;
+    return React.createElement(FieldRow, {
+      key: item.id
+    }, React.createElement(Input$1, {
+      placeholder: "",
+      value: item.adhoc_charges_description,
+      onChange: function onChange(e) {
+        return handleLabelChange(item.id, e.target.value);
+      },
+      style: {
+        marginRight: '8px',
+        flex: 1
+      }
+    }), React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '3px',
+        alignItems: 'center'
+      }
+    }, React.createElement(CurrencySymbol, null, baseUrlSymbol), React.createElement(Input$1, {
+      type: "number",
+      min: 0,
+      max: 10000,
+      placeholder: "0.00",
+      onWheel: function onWheel(e) {
+        return e.target.blur();
+      },
+      value: (_inputValues$item$id = inputValues[item.id]) != null ? _inputValues$item$id : '',
+      onChange: function onChange(e) {
+        return handleValueChange(item.id, e.target.value);
+      },
+      style: {
+        flex: 1
+      },
+      onKeyDown: handleKeyDownDebrief
+    })));
+  })));
+}
+
+var _templateObject$29;
+function FailureReasonDropdown() {
+  var _escalationCategory$f, _escalationCategory$f2, _escalationTypes$filt, _escalationTypes$filt2;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useFailureReason = useFailureReason(),
+    failureReasonState = _useFailureReason[0],
+    setFailureReason = _useFailureReason[1];
+  var _useIsFailureReasonCh = useIsFailureReasonChanged(),
+    setIsFailureReasonChanged = _useIsFailureReasonCh[1]; // to map esc reason properly
+  var failureReasons = orderStaticData == null ? void 0 : orderStaticData.failure_reasons;
+  var escalationCategory = orderStaticData == null ? void 0 : orderStaticData.escalation_category;
+  var escalationTypes = orderStaticData == null ? void 0 : orderStaticData.escalation_types;
+  var faultNonFaultReasons = orderStaticData == null ? void 0 : orderStaticData.fault_non_fault_reasons;
+  // Step 1: Get IDs of "Failure-Non_Fault" and "Failure-Fault"
+  var failureNonFaultId = escalationCategory == null || (_escalationCategory$f = escalationCategory.find(function (category) {
+    return (category == null ? void 0 : category.type) === 'Failure - Non Fault';
+  })) == null ? void 0 : _escalationCategory$f.id;
+  var failureFaultId = escalationCategory == null || (_escalationCategory$f2 = escalationCategory.find(function (category) {
+    return (category == null ? void 0 : category.type) === 'Failure - Fault';
+  })) == null ? void 0 : _escalationCategory$f2.id;
+  // Step 2: Map to get escalation type IDs
+  var failureNonFaultEscTypeId = escalationTypes == null || (_escalationTypes$filt = escalationTypes.filter(function (type) {
+    return (type == null ? void 0 : type.escalation_category_id) === failureNonFaultId;
+  })[0]) == null ? void 0 : _escalationTypes$filt.id;
+  var failureFaultEscTypeId = escalationTypes == null || (_escalationTypes$filt2 = escalationTypes.filter(function (type) {
+    return (type == null ? void 0 : type.escalation_category_id) === failureFaultId;
+  })[0]) == null ? void 0 : _escalationTypes$filt2.id;
+  // Step 3: Separate fault and non-fault reasons
+  var nonFaultReasons = faultNonFaultReasons == null ? void 0 : faultNonFaultReasons.filter(function (reason) {
+    return (reason == null ? void 0 : reason.escalation_type_id) === failureNonFaultEscTypeId;
+  });
+  var faultReasons = faultNonFaultReasons == null ? void 0 : faultNonFaultReasons.filter(function (reason) {
+    return (reason == null ? void 0 : reason.escalation_type_id) === failureFaultEscTypeId;
+  });
+  // Step 4: Simplified mapping to failureReasons
+  var mapReasonsToFailures = function mapReasonsToFailures(reasons) {
+    var _failureReasons$filte;
+    var reasonIds = new Set(reasons == null ? void 0 : reasons.map(function (reason) {
+      return reason == null ? void 0 : reason.order_reason_id;
+    }));
+    return failureReasons == null || (_failureReasons$filte = failureReasons.filter(function (failure) {
+      return reasonIds == null ? void 0 : reasonIds.has(failure == null ? void 0 : failure.id);
+    })) == null ? void 0 : _failureReasons$filte.map(function (failure) {
+      return {
+        value: failure == null ? void 0 : failure.reason,
+        label: failure == null ? void 0 : failure.title,
+        id: failure == null ? void 0 : failure.id
+      };
+    });
+  };
+  var faultReasonOptions = mapReasonsToFailures(faultReasons);
+  var nonFaultReasonOptions = mapReasonsToFailures(nonFaultReasons);
+  var groupedOptions = [{
+    label: 'Fault Reasons',
+    options: faultReasonOptions
+  }, {
+    label: 'Non-Fault Reasons',
+    options: nonFaultReasonOptions
+  }];
+  var onChangeOption = function onChangeOption(option) {
+    setFailureReason(option);
+    setIsFailureReasonChanged(true);
+  };
+  var formatGroupLabel = function formatGroupLabel(data) {
+    return React.createElement("div", {
+      style: {
+        color: 'rgba(0,0,0,0.8)'
+      }
+    }, React.createElement("span", null, data == null ? void 0 : data.label));
+  };
+  return React.createElement(Container$18, null, React.createElement(Label$k, {
+    label: "Failure Reason",
+    htmlFor: "failurereasondropdown",
+    required: true
+  }), React.createElement(SelectDropdown, {
+    placeholder: "Select Reason",
+    options: groupedOptions || [],
+    inputId: "failurereasondropdown",
+    openMenuOnFocus: true,
+    value: failureReasonState,
+    onChange: onChangeOption,
+    formatGroupLabel: formatGroupLabel,
+    isDisabled: false
+  }));
+}
+var Container$18 = /*#__PURE__*/styled.div(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
+
+var _templateObject$2a;
+function StatusDropdown() {
+  var _orderStaticData$new_;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useNewStatus = useNewStatus(),
+    newStatus = _useNewStatus[0],
+    setNewStatus = _useNewStatus[1];
+  var _useChargesState = useChargesState(),
+    setCharges = _useChargesState[1];
+  var newStatusOptions = orderStaticData == null || (_orderStaticData$new_ = orderStaticData.new_status) == null ? void 0 : _orderStaticData$new_.map(function (x) {
+    return {
+      label: x.type,
+      value: x.id
+    };
+  });
+  var selectedOption = (newStatusOptions == null ? void 0 : newStatusOptions.find(function (option) {
+    return option.label === newStatus;
+  })) || null;
+  var onChange = function onChange(option) {
+    setNewStatus(option == null ? void 0 : option.label);
+    setCharges(function (prev) {
+      return _extends({}, prev, {
+        new_order_status: option == null ? void 0 : option.label
+      });
+    });
+  };
+  return React.createElement(Container$19, null, React.createElement(Label$k, {
+    label: "New Status",
+    htmlFor: "statusdropdown",
+    required: true
+  }), React.createElement(SelectDropdown, {
+    placeholder: "Select Status",
+    options: newStatusOptions || [],
+    inputId: "statusdropdown",
+    value: selectedOption,
+    openMenuOnFocus: true,
+    onChange: onChange,
+    isDisabled: false
+  }));
+}
+var Container$19 = /*#__PURE__*/styled.div(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
+
+var _templateObject$2b;
+function CancellationReasonDropdown() {
+  var _orderStaticData$canc;
+  var _useOrderCancelReason = useOrderCancelReason(),
+    cancelationReason = _useOrderCancelReason[0],
+    setCancelationReason = _useOrderCancelReason[1];
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var cancellationReasonOptions = (orderStaticData == null || (_orderStaticData$canc = orderStaticData.cancellation_reasons) == null ? void 0 : _orderStaticData$canc.map(function (x) {
+    return {
+      label: x.reason,
+      value: x.id
+    };
+  })) || [];
+  return React.createElement(Container$1a, null, React.createElement(Label$k, {
+    label: "Cancellation Reason",
+    htmlFor: "cancellationreasondropdown",
+    required: true
+  }), React.createElement(SelectDropdown, {
+    placeholder: "Select Reason",
+    options: cancellationReasonOptions || [],
+    inputId: "cancellationreasondropdown",
+    openMenuOnFocus: true,
+    value: cancelationReason,
+    onChange: function onChange(selectedOption) {
+      return setCancelationReason(selectedOption);
+    }
+  }));
+}
+var Container$1a = /*#__PURE__*/styled.div(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
+
+var _templateObject$2c;
+function OrderHoldReasonDropdown() {
+  var _orderStaticData$onho;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useOrderHoldReason = useOrderHoldReason(),
+    orderHold = _useOrderHoldReason[0],
+    setOrderHold = _useOrderHoldReason[1];
+  var holdReasonOptions = (orderStaticData == null || (_orderStaticData$onho = orderStaticData.onhold_reasons) == null ? void 0 : _orderStaticData$onho.map(function (x) {
+    return {
+      label: x.reason,
+      value: x.id
+    };
+  })) || [];
+  return React.createElement(Container$1b, null, React.createElement(Label$k, {
+    label: "Hold Reason",
+    htmlFor: "holdreasondropdown",
+    required: true
+  }), React.createElement(SelectDropdown, {
+    placeholder: "Select Reason",
+    options: holdReasonOptions || [],
+    inputId: "holdreasondropdown",
+    openMenuOnFocus: true,
+    value: orderHold,
+    onChange: function onChange(selectedOption) {
+      return setOrderHold(selectedOption);
+    }
+  }));
+}
+var Container$1b = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n"])));
+
+var _templateObject$2d, _templateObject2$1D, _templateObject3$_, _templateObject4$x, _templateObject5$o, _templateObject6$c, _templateObject7$d, _templateObject8$a, _templateObject9$8, _templateObject10$4;
+function FailureContent() {
+  var _chargesState$adhoc_c, _chargesState$adhoc_c2;
+  var _useNewStatus = useNewStatus(),
+    newStatus = _useNewStatus[0];
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0];
+  var _useChargesState = useChargesState(),
+    chargesState = _useChargesState[0];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var _useProductDetails = useProductDetails(),
+    productdata = _useProductDetails[0];
+  var sortedProductData = productdata == null ? void 0 : productdata.sort(function (a, b) {
+    return (a == null ? void 0 : a.status) === (b == null ? void 0 : b.status) ? 0 : a != null && a.status ? -1 : 1;
+  });
+  var products = Array.isArray(sortedProductData) ? sortedProductData == null ? void 0 : sortedProductData.filter(function (item) {
+    return (item == null ? void 0 : item.status) === true;
+  }) : [];
+  var excludedFields = ['debrief_notes', 'new_order_status', 'base_charge_type', 'adhoc_charges', 'debrief_status']; // Fields to exclude
+  var totalChargesAmount = 0;
+  for (var _i = 0, _Object$entries = Object.entries(chargesState); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _Object$entries[_i],
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (!excludedFields.includes(key) && typeof value === 'number') {
+      totalChargesAmount += value;
+    }
+  }
+  var adhocTotalCharges = (chargesState == null || (_chargesState$adhoc_c = chargesState.adhoc_charges) == null ? void 0 : _chargesState$adhoc_c.length) > 0 ? chargesState == null || (_chargesState$adhoc_c2 = chargesState.adhoc_charges) == null ? void 0 : _chargesState$adhoc_c2.reduce(function (acc, item) {
+    return acc + item.adhoc_charges;
+  }, 0) : 0;
+  return React.createElement(React.Fragment, null, React.createElement(DropdownGrid, null, React.createElement(DropdownGroup, null, React.createElement(FailureReasonDropdown, null)), React.createElement(DropdownGroup, null, React.createElement(StatusDropdown, null)), newStatus === 'Cancelled' && React.createElement(DropdownGroup, null, React.createElement(CancellationReasonDropdown, null)), newStatus === 'On Hold' && React.createElement(DropdownGroup, null, React.createElement(OrderHoldReasonDropdown, null)), React.createElement(GroupedFields, null, React.createElement(PairGroup, null, React.createElement(SmallGroup, null, React.createElement(Label$k, {
+    label: "Items",
+    htmlFor: "items"
+  }), React.createElement(Text$a, null, products == null ? void 0 : products.length)), React.createElement(SmallGroup, null, React.createElement(Label$k, {
+    label: "Total Charge",
+    htmlFor: "totalCharge"
+  }), React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '4px',
+      alignItems: 'center'
+    }
+  }, React.createElement(CurrencyWrapper$1, null, baseUrlSymbol), React.createElement(Text$a, null, totalChargesAmount + adhocTotalCharges)))), React.createElement(PairGroup, null, React.createElement(SmallGroup, null, React.createElement(Label$k, {
+    label: "Weight",
+    htmlFor: "weight"
+  }), React.createElement(Text$a, null, orderDetails == null ? void 0 : orderDetails.weight, "Kg"))))), React.createElement(ContDropdownGrid, null, React.createElement(FieldGroup, {
+    wide: true
+  }, React.createElement(Label$k, {
+    label: "Order Status Notes",
+    htmlFor: "notes"
+  }), React.createElement(TextInput, {
+    id: "notes",
+    placeholder: "Type notes here...",
+    value: (orderDetails == null ? void 0 : orderDetails.order_status_note) || '',
+    readOnly: true
+  })), React.createElement(FieldGroup, {
+    wide: true
+  }, React.createElement(Label$k, {
+    label: "Charge Description",
+    htmlFor: "chargedescription"
+  }), React.createElement(TextInput, {
+    id: "chargedescription",
+    placeholder: "Type charge description here...",
+    onChange: function onChange() {}
+  }))));
+}
+var CurrencyWrapper$1 = /*#__PURE__*/styled.span(_templateObject$2d || (_templateObject$2d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: #999;\n"])));
+var Text$a = /*#__PURE__*/styled.div(_templateObject2$1D || (_templateObject2$1D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #363a30;\n  font-size: 14px;\n"])));
+var GroupedFields = /*#__PURE__*/styled.div(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n"])));
+var PairGroup = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var SmallGroup = /*#__PURE__*/styled.div(_templateObject5$o || (_templateObject5$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  min-width: 140px;\n  flex: 1;\n"])));
+var FieldGroup = /*#__PURE__*/styled.div(_templateObject6$c || (_templateObject6$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: ", ";\n  min-width: ", ";\n"])), function (props) {
+  return props.wide ? 2 : 1;
+}, function (props) {
+  return props.wide ? '300px' : '220px';
+});
+var TextInput = /*#__PURE__*/styled(TextArea)(_templateObject7$d || (_templateObject7$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  resize: none;\n  width: 100%;\n  min-height: 180px;\n"])));
+var DropdownGrid = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
+var ContDropdownGrid = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 20px;\n"])));
+var DropdownGroup = /*#__PURE__*/styled.div(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1 1 calc(50% - 10px);\n\n  @media (max-width: 768px) {\n    flex: 1 1 100%;\n  }\n"])));
+
+var _templateObject$2e, _templateObject2$1E, _templateObject3$$, _templateObject4$y, _templateObject5$p, _templateObject6$d, _templateObject7$e, _templateObject8$b, _templateObject9$9, _templateObject10$5, _templateObject11$3;
+var formatDate$2 = function formatDate(date) {
+  var padZero = function padZero(num) {
+    return num.toString().padStart(2, '0');
+  };
+  var year = new Date(date).getFullYear();
+  var month = padZero(new Date(date).getMonth() + 1);
+  var day = padZero(new Date(date).getDate());
+  return day + "/" + month + "/" + year;
+};
+function SuccessContent() {
+  var _chargesState$adhoc_c, _chargesState$adhoc_c2, _orderDetails$order_r;
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0];
+  var _useChargesState = useChargesState(),
+    chargesState = _useChargesState[0];
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var _useProductDetails = useProductDetails(),
+    productdata = _useProductDetails[0];
+  var sortedProductData = productdata == null ? void 0 : productdata.sort(function (a, b) {
+    return (a == null ? void 0 : a.status) === (b == null ? void 0 : b.status) ? 0 : a != null && a.status ? -1 : 1;
+  });
+  var products = Array.isArray(sortedProductData) ? sortedProductData == null ? void 0 : sortedProductData.filter(function (item) {
+    return (item == null ? void 0 : item.status) === true;
+  }) : [];
+  var excludedFields = ['debrief_notes', 'new_order_status', 'base_charge_type', 'adhoc_charges', 'debrief_status']; // Fields to exclude
+  var totalChargesAmount = 0;
+  for (var _i = 0, _Object$entries = Object.entries(chargesState); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _Object$entries[_i],
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    if (!excludedFields.includes(key) && typeof value === 'number') {
+      totalChargesAmount += value;
+    }
+  }
+  var formattedDate = (orderDetails == null ? void 0 : orderDetails.action_date) === null ? ' ' : formatDate$2(orderDetails == null ? void 0 : orderDetails.action_date);
+  var adhocTotalCharges = (chargesState == null || (_chargesState$adhoc_c = chargesState.adhoc_charges) == null ? void 0 : _chargesState$adhoc_c.length) > 0 ? chargesState == null || (_chargesState$adhoc_c2 = chargesState.adhoc_charges) == null ? void 0 : _chargesState$adhoc_c2.reduce(function (acc, item) {
+    return acc + item.adhoc_charges;
+  }, 0) : 0;
+  return React.createElement(Wrapper$l, null, React.createElement(FieldGroup$1, null, React.createElement(Label$k, {
+    label: "Signed By",
+    htmlFor: "signedby"
+  }), React.createElement(StyledInput$1, {
+    id: "signedby",
+    placeholder: "",
+    value: (orderDetails == null || (_orderDetails$order_r = orderDetails.order_recipient) == null ? void 0 : _orderDetails$order_r.recipient_name) || '',
+    onChange: function onChange() {},
+    disabled: true
+  }), React.createElement(Label$k, {
+    label: "Date",
+    htmlFor: "datefield"
+  }), React.createElement(DateInput, null, React.createElement(Text$b, null, formattedDate), React.createElement(CalendarIcon, null)), React.createElement(GroupedFields$1, null, React.createElement(PairGroup$1, null, React.createElement(SmallGroup$1, null, React.createElement(Label$k, {
+    label: "Items",
+    htmlFor: "items"
+  }), React.createElement(Text$b, null, products == null ? void 0 : products.length)), React.createElement(SmallGroup$1, null, React.createElement(Label$k, {
+    label: "Zone",
+    htmlFor: "zone"
+  }), React.createElement(Text$b, null, orderDetails == null ? void 0 : orderDetails.zone_code))), React.createElement(PairGroup$1, null, React.createElement(SmallGroup$1, null, React.createElement(Label$k, {
+    label: "Weight",
+    htmlFor: "weight"
+  }), React.createElement(Text$b, null, orderDetails == null ? void 0 : orderDetails.weight, "Kg")), React.createElement(SmallGroup$1, null, React.createElement(Label$k, {
+    label: "Total Charge",
+    htmlFor: "totalCharge"
+  }), React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '4px',
+      alignItems: 'center'
+    }
+  }, React.createElement(CurrencyWrapper$2, null, baseUrlSymbol), React.createElement(Text$b, null, totalChargesAmount + adhocTotalCharges)))))), React.createElement(DropdownGrid$1, null, React.createElement(FieldGroup$1, {
+    wide: true
+  }, React.createElement(Label$k, {
+    label: "Order Status Notes",
+    htmlFor: "notes"
+  }), React.createElement(TextInput$1, {
+    id: "notes",
+    placeholder: "Type notes here...",
+    value: (orderDetails == null ? void 0 : orderDetails.order_status_note) || '',
+    readOnly: true
+  })), React.createElement(FieldGroup$1, {
+    wide: true
+  }, React.createElement(Label$k, {
+    label: "Charge Description",
+    htmlFor: "chargedescription"
+  }), React.createElement(TextInput$1, {
+    id: "chargedescription",
+    placeholder: "Type charge description here...",
+    onChange: function onChange() {}
+  }))));
+}
+var CurrencyWrapper$2 = /*#__PURE__*/styled.span(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  color: #999;\n"])));
+var DropdownGrid$1 = /*#__PURE__*/styled.div(_templateObject2$1E || (_templateObject2$1E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  width: 48%;\n"])));
+var GroupedFields$1 = /*#__PURE__*/styled.div(_templateObject3$$ || (_templateObject3$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n"])));
+var PairGroup$1 = /*#__PURE__*/styled.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n\n  @media (max-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var SmallGroup$1 = /*#__PURE__*/styled.div(_templateObject5$p || (_templateObject5$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n  width: 48%;\n"])));
+var Wrapper$l = /*#__PURE__*/styled.div(_templateObject6$d || (_templateObject6$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px;\n  width: 100%;\n  padding: 10px 0;\n"])));
+var FieldGroup$1 = /*#__PURE__*/styled.div(_templateObject7$e || (_templateObject7$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: ", ";\n"])), function (props) {
+  return props.wide ? 2 : 1;
+});
+var TextInput$1 = /*#__PURE__*/styled(TextArea)(_templateObject8$b || (_templateObject8$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  resize: none;\n  width: 100%;\n  min-height: 180px;\n"])));
+var StyledInput$1 = /*#__PURE__*/styled(Input$1)(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 38px;\n"])));
+var DateInput = /*#__PURE__*/styled.div(_templateObject10$5 || (_templateObject10$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 12px;\n  border-radius: 6px;\n  border: 1px solid #e0e2e7;\n  background-color: #fff;\n  color: #363a30;\n  height: 38px;\n  font-size: 14px;\n  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);\n"])));
+var Text$b = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #363a30;\n  font-size: 14px;\n"])));
+
+var _templateObject$2f, _templateObject2$1F;
+var radioButtonFilterOptions = [{
+  label: 'Yes',
+  value: 'true'
+}, {
+  label: 'No',
+  value: 'false'
+}];
+function RadioButtonGroups() {
+  var _orderStaticData$orde, _orderStaticData$orde2, _orderStaticData$orde3, _orderDetails$order_s, _orderDetails$order_s2, _orderDetails$order_t;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0],
+    setOrderDetails = _useOrderDetails[1];
+  var serviceLevelOptions = orderStaticData == null || (_orderStaticData$orde = orderStaticData.order_service_levels) == null ? void 0 : _orderStaticData$orde.map(function (x) {
+    return {
+      label: capitalize(x.type.replaceAll('_', ' ')),
+      value: x.id.toString()
+    };
+  });
+  var deliveryPointOptions = orderStaticData == null || (_orderStaticData$orde2 = orderStaticData.order_delivery_point) == null ? void 0 : _orderStaticData$orde2.map(function (x) {
+    return {
+      label: capitalize(x.type.replaceAll('_', ' ')),
+      value: x.id.toString()
+    };
+  });
+  var serviceTypeOptions = orderStaticData == null || (_orderStaticData$orde3 = orderStaticData.order_type) == null ? void 0 : _orderStaticData$orde3.map(function (option) {
+    return {
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      value: option.id.toString()
+    };
+  });
+  var orderServicesOptions = orderStaticData == null ? void 0 : orderStaticData.order_service_list;
+  var orderServices = orderDetails == null ? void 0 : orderDetails.order_services;
+  var deliveryPointId = orderDetails == null || (_orderDetails$order_s = orderDetails.order_services_detail) == null || (_orderDetails$order_s = _orderDetails$order_s.order_delivery_point_id) == null ? void 0 : _orderDetails$order_s.toString();
+  var serviceLevelId = orderDetails == null || (_orderDetails$order_s2 = orderDetails.order_services_detail) == null || (_orderDetails$order_s2 = _orderDetails$order_s2.order_service_level_id) == null ? void 0 : _orderDetails$order_s2.toString();
+  var orderTypeId = orderDetails == null || (_orderDetails$order_t = orderDetails.order_type_id) == null ? void 0 : _orderDetails$order_t.toString();
+  // ON CHANGE HANDLERS
+  var onChangeDeliveryPoint = function onChangeDeliveryPoint(event) {
+    var updatedServices = _extends({}, orderDetails == null ? void 0 : orderDetails.order_services_detail, {
+      order_delivery_point_id: +event.target.value
+    });
+    var newData = _extends({}, orderDetails, {
+      order_services_detail: updatedServices
+    });
+    setOrderDetails(newData);
+  };
+  var onChangeServiceLevel = function onChangeServiceLevel(event) {
+    var updatedServices = _extends({}, orderDetails == null ? void 0 : orderDetails.order_services_detail, {
+      order_service_level_id: +event.target.value
+    });
+    var newData = _extends({}, orderDetails, {
+      order_services_detail: updatedServices
+    });
+    setOrderDetails(newData);
+  };
+  var onChangeServiceType = function onChangeServiceType(event) {
+    var newData = _extends({}, orderDetails, {
+      order_type_id: +event.target.value
+    });
+    setOrderDetails(newData);
+  };
+  var onChangeServices = function onChangeServices(id) {
+    var clone = [].concat(orderServices);
+    // Check if the service already exists in the order
+    var selectedService = clone.find(function (s) {
+      return s.order_service_list_id === id;
+    });
+    if (selectedService !== undefined) {
+      if (selectedService.new_id) {
+        // It's a newly added service, just remove it
+        var updatedOrderServices = clone.filter(function (service) {
+          return service.id !== selectedService.id;
+        });
+        var newData = _extends({}, orderDetails, {
+          order_services: updatedOrderServices
+        });
+        setOrderDetails(newData);
+      } else {
+        // It's an existing (persisted) service, toggle its `is_deleted` flag
+        var updatedSelectedService = _extends({}, selectedService, {
+          is_deleted: !selectedService.is_deleted
+        });
+        var _updatedOrderServices = clone.filter(function (service) {
+          return service.id !== selectedService.id;
+        }).concat(updatedSelectedService);
+        var _newData = _extends({}, orderDetails, {
+          order_services: _updatedOrderServices
+        });
+        setOrderDetails(_newData);
+      }
+    } else {
+      // Case 2: Service doesn't exist — add it as a new one
+      var newService = {
+        is_deleted: false,
+        order_service_list_id: id,
+        new_id: id,
+        id: id
+      };
+      clone.push(newService);
+      var _newData2 = _extends({}, orderDetails, {
+        order_services: clone
+      });
+      setOrderDetails(_newData2);
+    }
+  };
+  return React.createElement(Container$1c, null, React.createElement(Group, null, React.createElement(RadioButtonGroup$1, {
+    heading: "Service Type",
+    onChange: onChangeServiceType,
+    options: serviceTypeOptions || [],
+    selectedValue: orderTypeId || '',
+    direction: "vertical",
+    required: false,
+    isDisabled: true
+  })), React.createElement(Group, null, React.createElement(RadioButtonGroup$1, {
+    heading: "Service Level",
+    onChange: onChangeServiceLevel,
+    options: serviceLevelOptions || [],
+    selectedValue: serviceLevelId || '',
+    direction: "vertical",
+    required: false,
+    isDisabled: true
+  })), React.createElement(Group, null, React.createElement(RadioButtonGroup$1, {
+    heading: "Delivery Point",
+    onChange: onChangeDeliveryPoint,
+    options: deliveryPointOptions || [],
+    selectedValue: deliveryPointId || '',
+    direction: "vertical",
+    required: false,
+    isDisabled: true
+  })), 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;
+    }));
+    return React.createElement(Group, null, React.createElement(RadioButtonGroup$1, {
+      heading: service == null || (_service$type = service.type) == null ? void 0 : _service$type.replaceAll('_', ' '),
+      onChange: function onChange() {
+        return onChangeServices(service == null ? void 0 : service.id);
+      },
+      options: radioButtonFilterOptions || [],
+      selectedValue: selected === false ? 'false' : 'true',
+      direction: "vertical",
+      required: false,
+      isDisabled: true
+    }));
+  }));
+}
+var Container$1c = /*#__PURE__*/styled.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n  padding: 8px;\n  width: 100%;\n  align-items: flex-start;\n  pointer-events: none;\n"])));
+var Group = /*#__PURE__*/styled.div(_templateObject2$1F || (_templateObject2$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+
+var _templateObject$2g, _templateObject2$1G, _templateObject3$10;
+function OrderInfo() {
+  var _useActiveTab = useActiveTab(),
+    activeTab = _useActiveTab[0];
+  return React.createElement(Container$1d, null, React.createElement(Top$3, null, activeTab === 'success' ? React.createElement(SuccessContent, null) : React.createElement(FailureContent, null)), React.createElement(Middle, null, React.createElement(RadioButtonGroups, null)));
+}
+// const DescriptionWrapper = styled.div`
+//   display: flex;
+//   gap: 20px;
+//   width: 100%;
+// `;
+var Middle = /*#__PURE__*/styled.div(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n"])));
+// const Bottom = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   gap: 20px;
+// `;
+var Top$3 = /*#__PURE__*/styled.div(_templateObject2$1G || (_templateObject2$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  width: 100%;\n"])));
+var Container$1d = /*#__PURE__*/styled.div(_templateObject3$10 || (_templateObject3$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  width: 100%;\n"])));
+var OrderInfo$1 = /*#__PURE__*/React.memo(OrderInfo);
+
+var _templateObject$2h;
+var Options = [{
+  label: 'Success',
+  value: 'success',
+  selectedBackgroundColor: '#57DB7A'
+}, {
+  label: 'Failure',
+  value: 'failure',
+  selectedBackgroundColor: '#E95252'
+}];
+var ForceDebriefSelector = function ForceDebriefSelector(_ref) {
+  var onSwitchChange = _ref.onSwitchChange;
+  var initialSelectedIndex = Options == null ? void 0 : Options.findIndex(function (_ref2) {
+    var value = _ref2.value;
+    return value === 'success';
+  });
+  var handleSwitchChange = function handleSwitchChange(selectedOptionValue) {
+    if (typeof selectedOptionValue === 'string') {
+      onSwitchChange(selectedOptionValue);
+    } else {
+      notification.error({
+        message: 'Error',
+        description: typeof selectedOptionValue || 'Unexpected type for selectedOptionValue:'
+      });
+    }
+  };
+  return React.createElement(StyledSwitch, null, React.createElement(SwitchSelector, {
+    onChange: handleSwitchChange,
+    options: Options,
+    initialSelectedIndex: initialSelectedIndex,
+    backgroundColor: '#cbc8c2',
+    fontColor: '#f5f6fa',
+    optionBorderRadius: 30
+  }));
+};
+var StyledSwitch = /*#__PURE__*/styled.div(_templateObject$2h || (_templateObject$2h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 25%;\n  height: 40px;\n  .react-switch-selector-wrapper {\n    background: #777777;\n  }\n"])));
+
+var _templateObject$2i;
+function EscalationCategory() {
+  var _orderStaticData$esca;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useEscalationCategor = useEscalationCategory(),
+    escalationCategory = _useEscalationCategor[0],
+    setEscalationCategory = _useEscalationCategor[1];
+  var _useFailureReason = useFailureReason(),
+    failureReason = _useFailureReason[0];
+  var faultNonFaultReasons = orderStaticData == null ? void 0 : orderStaticData.fault_non_fault_reasons;
+  var escalationTypes = orderStaticData == null ? void 0 : orderStaticData.escalation_types;
+  var escalationCategoryOptions = orderStaticData == null || (_orderStaticData$esca = orderStaticData.escalation_category) == null ? void 0 : _orderStaticData$esca.map(function (category) {
+    return {
+      label: category == null ? void 0 : category.type,
+      value: category == null ? void 0 : category.id
+    };
+  });
+  useEffect(function () {
+    var _faultNonFaultReasons, _escalationTypes$find;
+    var escTypeId = faultNonFaultReasons == null || (_faultNonFaultReasons = faultNonFaultReasons.find(function (x) {
+      return (x == null ? void 0 : x.order_reason_id) === (failureReason == null ? void 0 : failureReason.id);
+    })) == null ? void 0 : _faultNonFaultReasons.escalation_type_id;
+    var escCategoryId = escalationTypes == null || (_escalationTypes$find = escalationTypes.find(function (x) {
+      return (x == null ? void 0 : x.id) === escTypeId;
+    })) == null ? void 0 : _escalationTypes$find.escalation_category_id;
+    var selectedOption = escalationCategoryOptions == null ? void 0 : escalationCategoryOptions.find(function (option) {
+      return (option == null ? void 0 : option.value) === escCategoryId;
+    });
+    setEscalationCategory(selectedOption);
+  }, [failureReason]);
+  return React.createElement(Container$1e, null, React.createElement(Label$k, {
+    label: "Escalation Category"
+  }), React.createElement(SelectDropdown, {
+    options: escalationCategoryOptions || [],
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles, state) {
+        return _extends({}, styles, {
+          border: '1px solid #D0D5DD',
+          cursor: 'pointer',
+          borderRadius: "" + (state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'),
+          boxShadow: '0px 3px 22px #00000014',
+          minHeight: '40px',
+          '&:hover': {
+            borderColor: '#D0D5DD',
+            boxShadow: '0px 3px 22px #00000014'
+          }
+        });
+      },
+      menu: function menu(styles) {
+        return _extends({}, styles, {
+          marginBottom: '0px',
+          borderRadius: '6px 6px 0px 0px',
+          boxShadow: '0px 3px 22px #00000014',
+          border: '1px solid #D0D5DD',
+          borderBottom: '0px'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator(styles, state) {
+        return _extends({}, styles, {
+          transition: 'all 0.3s ease-in-out',
+          transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null'
+        });
+      }
+    }),
+    placeholder: "Select Category",
+    menuPlacement: "top",
+    value: escalationCategory,
+    onChange: function onChange(selectedOption) {
+      return setEscalationCategory(selectedOption);
+    }
+  }));
+}
+var Container$1e = /*#__PURE__*/styled.div(_templateObject$2i || (_templateObject$2i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n"])));
+
+var _templateObject$2j;
+function EscalationLevel() {
+  var _orderStaticData$esca;
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useEscalationCategor = useEscalationCategory(),
+    escalationCategory = _useEscalationCategor[0];
+  var _useEscalationLevel = useEscalationLevel(),
+    escalationLevel = _useEscalationLevel[0],
+    setEscalationLevel = _useEscalationLevel[1];
+  var escalationLevelOptions = orderStaticData == null || (_orderStaticData$esca = orderStaticData.escalation_levels) == null ? void 0 : _orderStaticData$esca.map(function (escalation) {
+    return {
+      label: escalation == null ? void 0 : escalation.type,
+      value: escalation == null ? void 0 : escalation.id
+    };
+  });
+  var escalationTypes = orderStaticData == null ? void 0 : orderStaticData.escalation_types;
+  useEffect(function () {
+    var _escalationTypes$find;
+    var selectedEscalationLevelId = escalationTypes == null || (_escalationTypes$find = escalationTypes.find(function (item) {
+      return (item == null ? void 0 : item.escalation_category_id) === (escalationCategory == null ? void 0 : escalationCategory.value);
+    })) == null ? void 0 : _escalationTypes$find.escalation_level_id;
+    var defaultLevel = escalationLevelOptions == null ? void 0 : escalationLevelOptions.find(function (item) {
+      return item.value === selectedEscalationLevelId;
+    });
+    setEscalationLevel(defaultLevel);
+  }, [escalationCategory]);
+  return React.createElement(Container$1f, null, React.createElement(Label$k, {
+    label: "Escalation Level"
+  }), React.createElement(SelectDropdown, {
+    options: escalationLevelOptions || [],
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles, state) {
+        return _extends({}, styles, {
+          border: '1px solid #D0D5DD',
+          cursor: 'pointer',
+          borderRadius: "" + (state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'),
+          boxShadow: '0px 3px 22px #00000014',
+          minHeight: '40px',
+          '&:hover': {
+            borderColor: '#D0D5DD',
+            boxShadow: '0px 3px 22px #00000014'
+          }
+        });
+      },
+      menu: function menu(styles) {
+        return _extends({}, styles, {
+          marginBottom: '0px',
+          borderRadius: '6px 6px 0px 0px',
+          boxShadow: '0px 3px 22px #00000014',
+          border: '1px solid #D0D5DD',
+          borderBottom: '0px'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator(styles, state) {
+        return _extends({}, styles, {
+          transition: 'all 0.3s ease-in-out',
+          transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null'
+        });
+      }
+    }),
+    placeholder: "Select Level",
+    menuPlacement: "top",
+    value: escalationLevel,
+    onChange: function onChange(selectedOption) {
+      return setEscalationLevel(selectedOption);
+    }
+  }));
+}
+var Container$1f = /*#__PURE__*/styled.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n"])));
+
+var _templateObject$2k;
+function EscalationReason() {
+  var _escalationTypes$find, _orderStaticData$esca;
+  var _useEscalationReason = useEscalationReason(),
+    escalationReasonState = _useEscalationReason[0],
+    setEscalationReasonState = _useEscalationReason[1];
+  var _useOrderStaticData = useOrderStaticData(),
+    orderStaticData = _useOrderStaticData[0];
+  var _useEscalationCategor = useEscalationCategory(),
+    escalationCategory = _useEscalationCategor[0];
+  var _useFailureReason = useFailureReason(),
+    failureReason = _useFailureReason[0];
+  var _useIsFailureReasonCh = useIsFailureReasonChanged(),
+    isFailureReasonChanged = _useIsFailureReasonCh[0],
+    setIsFailureReasonChanged = _useIsFailureReasonCh[1];
+  var escalationTypes = orderStaticData == null ? void 0 : orderStaticData.escalation_types;
+  var escalationTypeId = escalationTypes == null || (_escalationTypes$find = escalationTypes.find(function (item) {
+    return (item == null ? void 0 : item.escalation_category_id) === (escalationCategory == null ? void 0 : escalationCategory.value);
+  })) == null ? void 0 : _escalationTypes$find.id;
+  var escalationReasons = orderStaticData == null || (_orderStaticData$esca = orderStaticData.escalation_reasons) == null ? void 0 : _orderStaticData$esca.filter(function (x) {
+    return (x == null ? void 0 : x.escalation_type_id) === escalationTypeId;
+  });
+  var escalationReasonsOptions = escalationReasons == null ? void 0 : escalationReasons.map(function (item) {
+    var _orderStaticData$orde;
+    var matchedItem = orderStaticData == null || (_orderStaticData$orde = orderStaticData.order_escalation_reasons) == null ? void 0 : _orderStaticData$orde.find(function (x) {
+      return (x == null ? void 0 : x.id) === (item == null ? void 0 : item.order_reason_id);
+    });
+    if (matchedItem !== undefined) {
+      return {
+        label: matchedItem == null ? void 0 : matchedItem.reason,
+        value: matchedItem == null ? void 0 : matchedItem.id
+      };
+    } else {
+      return;
+    }
+  });
+  var filteredEscReasonOptions = escalationReasonsOptions == null ? void 0 : escalationReasonsOptions.filter(function (option) {
+    return option !== undefined;
+  });
+  useEffect(function () {
+    if (isFailureReasonChanged && (filteredEscReasonOptions == null ? void 0 : filteredEscReasonOptions.length) > 0) {
+      // ids of both esc reason options and failure reason not matched but their labels matched
+      var reason = filteredEscReasonOptions == null ? void 0 : filteredEscReasonOptions.find(function (option) {
+        return (option == null ? void 0 : option.label) === (failureReason == null ? void 0 : failureReason.label);
+      });
+      setEscalationReasonState(reason);
+      setIsFailureReasonChanged(false);
+    }
+    if (!isFailureReasonChanged && (filteredEscReasonOptions == null ? void 0 : filteredEscReasonOptions.length) > 0) {
+      setEscalationReasonState(filteredEscReasonOptions[0]);
+    }
+  }, [escalationCategory]);
+  return React.createElement(Container$1g, null, React.createElement(Label$k, {
+    label: "Escalation Reason"
+  }), React.createElement(SelectDropdown, {
+    options: filteredEscReasonOptions || [],
+    styles: _extends({}, dropdownStyles, {
+      control: function control(styles, state) {
+        return _extends({}, styles, {
+          border: '1px solid #D0D5DD',
+          cursor: 'pointer',
+          borderRadius: "" + (state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'),
+          boxShadow: '0px 3px 22px #00000014',
+          minHeight: '40px',
+          '&:hover': {
+            borderColor: '#D0D5DD',
+            boxShadow: '0px 3px 22px #00000014'
+          }
+        });
+      },
+      menu: function menu(styles) {
+        return _extends({}, styles, {
+          marginBottom: '0px',
+          borderRadius: '6px 6px 0px 0px',
+          boxShadow: '0px 3px 22px #00000014',
+          border: '1px solid #D0D5DD',
+          borderBottom: '0px'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator(styles, state) {
+        return _extends({}, styles, {
+          transition: 'all 0.3s ease-in-out',
+          transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null'
+        });
+      }
+    }),
+    placeholder: "Select Reason",
+    menuPlacement: "top",
+    value: escalationReasonState,
+    onChange: function onChange(selectedOption) {
+      return setEscalationReasonState(selectedOption);
+    }
+  }));
+}
+var Container$1g = /*#__PURE__*/styled.div(_templateObject$2k || (_templateObject$2k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  flex: 1;\n"])));
+
+function Escalation() {
+  return React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '15px',
+      width: '100%'
+    }
+  }, React.createElement(EscalationCategory, null), React.createElement(EscalationLevel, null), React.createElement(EscalationReason, null));
+}
+
+var _templateObject$2l, _templateObject2$1H, _templateObject3$11;
+function OrderTemplate() {
+  var _orderDetails$order_r, _routesDetails$route_;
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0];
+  var _useRouteDetails = useRouteDetails(),
+    routesDetails = _useRouteDetails[0];
+  var _useState = useState({
+      isAllocated: true,
+      isOrderStatusNote: true
+    }),
+    alertVisibility = _useState[0],
+    setAlertVisibility = _useState[1];
+  var isRouteId = (orderDetails == null || (_orderDetails$order_r = orderDetails.order_routes) == null ? void 0 : _orderDetails$order_r.route_id) != null;
+  //on close alert functionality
+  var onCloseAlert = function onCloseAlert(alertType) {
+    setAlertVisibility(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[alertType] = false, _extends2));
+    });
+  };
+  return React.createElement(StyledAlert, null, React.createElement(React.Fragment, null, alertVisibility.isAllocated && React.createElement(React.Fragment, null, isRouteId ? React.createElement(FlagAlert, {
+    type: "info",
+    title: "",
+    description: React.createElement(React.Fragment, null, React.createElement(Title$7, null, "Allocated To Route :"), (routesDetails == null ? void 0 : routesDetails.route_name) || '', routesDetails != null && routesDetails.route_lock ? "*Locked* on " + (routesDetails == null || (_routesDetails$route_ = routesDetails.route_detail) == null ? void 0 : _routesDetails$route_.vehicle_number) + " " : '', ' ', "| Crew:", (routesDetails == null ? void 0 : routesDetails.crew1) || 'N/A', " &", ' ', (routesDetails == null ? void 0 : routesDetails.crew2) || 'N/A', " |", ' ', routesDetails != null && routesDetails.route_date ? format(parseISO(routesDetails == null ? void 0 : routesDetails.route_date), 'dd/MM/yyyy') : ''),
+    showOkButton: false,
+    onClose: function onClose() {
+      return onCloseAlert('isAllocated');
+    }
+  }) : React.createElement(FlagAlert, {
+    type: "info",
+    title: "",
+    description: React.createElement(React.Fragment, null, React.createElement(Title$7, null, "Allocated To Route :"), ' ', React.createElement(Info, null, "Route not allocated")),
+    showOkButton: false,
+    onClose: function onClose() {
+      return onCloseAlert('isAllocated');
+    }
+  }))), alertVisibility.isOrderStatusNote && React.createElement(React.Fragment, null, (orderDetails == null ? void 0 : orderDetails.order_status_note) && React.createElement(React.Fragment, null, React.createElement(FlagAlert, {
+    type: "info",
+    title: "",
+    description: React.createElement(React.Fragment, null, React.createElement(Title$7, null, "Order Status Note : "), orderDetails == null ? void 0 : orderDetails.order_status_note),
+    showOkButton: false,
+    onClose: function onClose() {
+      return onCloseAlert('isOrderStatusNote');
+    }
+  }))));
+}
+var StyledAlert = /*#__PURE__*/styled.div(_templateObject$2l || (_templateObject$2l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: contents;\n  gap: 15px;\n"])));
+var Title$7 = /*#__PURE__*/styled.span(_templateObject2$1H || (_templateObject2$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6396e5;\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+var Info = /*#__PURE__*/styled.span(_templateObject3$11 || (_templateObject3$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+
+var _templateObject$2m, _templateObject2$1I, _templateObject3$12;
+function FlagTemplate(_ref) {
+  var data = _ref.data,
+    dismissFlags = _ref.dismissFlags;
+  var _useFlagRefId = useFlagRefId(),
+    setSelectedFlag = _useFlagRefId[1];
+  var _useCurrentAction = useCurrentAction(),
+    setCurrentAction = _useCurrentAction[1];
+  var openModal = function openModal() {
+    setCurrentAction('view-flag');
+  };
+  var handleClick = function handleClick(Id) {
+    setSelectedFlag(Id);
+    openModal();
+  };
+  var titleColor = (data == null ? void 0 : data.status) === 'SD' ? '#36A053' : '#3a3630';
+  return React.createElement(StyledAlert$1, null, React.createElement(FlagAlert, {
+    type: (data == null ? void 0 : data.status) === 'AD' ? 'info' : 'success',
+    title: React.createElement(React.Fragment, null, React.createElement(StyledTitle, {
+      color: titleColor
+    }, "Flag : ", data != null && data.is_private ? 'Private' : '', ' ', React.createElement(StyledLink$1, {
+      onClick: function onClick() {
+        return handleClick(data.id);
+      }
+    }, data == null ? void 0 : data.id, " - ", data == null ? void 0 : data.flag_type, ' '), ' ', (data == null ? void 0 : data.status) === 'AD' ? 'Unresolved' : 'Resolved on', ' ', (data == null ? void 0 : data.status) == 'SD' ? React.createElement(React.Fragment, null, formatDate$1(data == null ? void 0 : data.resolved_at), " by ", data == null ? void 0 : data.resolved_by, ' ') : null)),
+    subtitle: "",
+    description: "" + (data == null ? void 0 : data.description),
+    showOkButton: false,
+    onClose: function onClose() {
+      return dismissFlags(data == null ? void 0 : data.id);
+    }
+  }));
+}
+var StyledAlert$1 = /*#__PURE__*/styled.div(_templateObject$2m || (_templateObject$2m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 10px;\n"])));
+var StyledLink$1 = /*#__PURE__*/styled.span(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+var StyledTitle = /*#__PURE__*/styled.span(_templateObject3$12 || (_templateObject3$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (_ref2) {
+  var color = _ref2.color;
+  return color;
+});
+
+var _templateObject$2n, _templateObject2$1J;
+function Tabs(_ref) {
+  var dismissFlags = _ref.dismissFlags;
+  var _useTasksData = useTasksData(),
+    taskData = _useTasksData[0];
+  return React.createElement(React.Fragment, null, React.createElement(Content, null, React.createElement(Container$1h, {
+    className: "tab-content"
+  }, React.createElement(OrderTemplate, null), taskData == null ? void 0 : taskData.map(function (item, index) {
+    return React.createElement(FlagTemplate, {
+      key: index,
+      data: item,
+      dismissFlags: dismissFlags
+    });
+  }))));
+}
+var Container$1h = /*#__PURE__*/styled.div(_templateObject$2n || (_templateObject$2n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 15px;\n  display: grid;\n"])));
+var Content = /*#__PURE__*/styled.div(_templateObject2$1J || (_templateObject2$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+
+var _templateObject$2o, _templateObject2$1K, _templateObject3$13, _templateObject4$z, _templateObject5$q;
+function FDNotification() {
+  var _orderData$order_rout;
+  var _useTasksData = useTasksData(),
+    taskData = _useTasksData[0],
+    setTasksData = _useTasksData[1];
+  var _useOrderDetails = useOrderDetails(),
+    orderData = _useOrderDetails[0];
+  var routeId = orderData == null || (_orderData$order_rout = orderData.order_routes) == null ? void 0 : _orderData$order_rout.route_id;
+  var _useRouteDetails = useRouteDetails(),
+    setRouteDetails = _useRouteDetails[1];
+  //Unresolved API
+  var _useAxios = useAxios({
+      endpoint: "/v1/task/",
+      method: 'GET',
+      pagination: {
+        is_pagination: false
+      },
+      filters: [{
+        field: 'department',
+        op: '=',
+        value: 'debrief'
+      }, {
+        field: 'order_id',
+        op: '=',
+        value: "" + (orderData == null ? void 0 : orderData.id)
+      }]
+    }),
+    fetchedUnresolvedData = _useAxios.data,
+    unresolvedLoading = _useAxios.loading,
+    callUnresolvedTaskApi = _useAxios.fetchData;
+  //flags data set
+  useEffect(function () {
+    if (fetchedUnresolvedData && fetchedUnresolvedData != null && fetchedUnresolvedData.data) {
+      setTasksData(fetchedUnresolvedData == null ? void 0 : fetchedUnresolvedData.data);
+    }
+  }, [unresolvedLoading, fetchedUnresolvedData]);
+  useEffect(function () {
+    var fetchData = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!((orderData == null ? void 0 : orderData.id) == null)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              _context.prev = 2;
+              _context.next = 5;
+              return callUnresolvedTaskApi();
+            case 5:
+              _context.next = 10;
+              break;
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](2);
+              console.error('Error while fetching order-related data:', _context.t0);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[2, 7]]);
+      }));
+      return function fetchData() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    fetchData();
+  }, [orderData == null ? void 0 : orderData.id]);
+  var _useAxios2 = useAxios({
+      endpoint: "/route/debrief/",
+      method: 'GET'
+    }),
+    fetchRouteDetails = _useAxios2.fetchData,
+    routesData = _useAxios2.data,
+    routesDataLoading = _useAxios2.loading;
+  useEffect(function () {
+    if (routeId !== undefined && routeId !== null) {
+      fetchRouteDetails({
+        endPointQuery: routeId
+      });
+    } else {
+      setRouteDetails([]);
+    }
+  }, [routeId]);
+  useEffect(function () {
+    var _routesData$data;
+    if ((routesData == null || (_routesData$data = routesData.data) == null ? void 0 : _routesData$data.length) > 0) {
+      var routeData = routesData == null ? void 0 : routesData.data[0];
+      setRouteDetails(routeData);
+    }
+  }, [routesDataLoading]);
+  return React.createElement(React.Fragment, null, React.createElement(Section$1, null, unresolvedLoading ? React.createElement(Loader, null, React.createElement(Spinner, null), React.createElement(Text$c, null, "Fetching Notifications...")) : (taskData == null ? void 0 : taskData.length) > 0 || orderData ? React.createElement(TabsWrapper, null, React.createElement(Tabs, null)) : 'No Notifications Found'));
+}
+var Loader = /*#__PURE__*/styled.div(_templateObject$2o || (_templateObject$2o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Spinner = /*#__PURE__*/styled.div(_templateObject2$1K || (_templateObject2$1K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: #3a3630;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  animation: spin 1s linear infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var Section$1 = /*#__PURE__*/styled.div(_templateObject3$13 || (_templateObject3$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 10px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0;\n"])));
+var TabsWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* min-height: 200px; */\n  max-height: 350px;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &:hover {\n    scrollbar-width: thin;\n  }\n\n  &::-webkit-scrollbar {\n    width: 0;\n  }\n\n  &:hover::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n"])));
+var Text$c = /*#__PURE__*/styled.div(_templateObject5$q || (_templateObject5$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--tonal-brown-651, #6a7378);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+
+var _templateObject$2p, _templateObject2$1L, _templateObject3$14, _templateObject4$A, _templateObject5$r;
+var BaseChargeConfirmationModal = function BaseChargeConfirmationModal(props) {
+  var baseUrlSymbol = getBaseUrlSymbol();
+  var onCancel = function onCancel() {
+    // window.scrollTo({ top: 0, behavior: 'smooth' });
+    props == null || props.setConfirmationModal(false);
+  };
+  var onComplete = function onComplete() {
+    props == null || props.setConfirmationModal(false);
+    props == null || props.onProceed();
+  };
+  return React.createElement(BackgroundModal$1, Object.assign({}, props), React.createElement(MainContainer$c, null, React.createElement(Container$1i, null, React.createElement(IconContainer$4, null, React.createElement(WarningIcon, null)), React.createElement(Title$8, null, "Base Charge Exceeds " + baseUrlSymbol + "200")), React.createElement(CustomCancelAndCompleteAction$5, {
+    cancelLabel: "Amend",
+    completeLabel: "Proceed",
+    onCancel: onCancel,
+    onComplete: onComplete
+  })));
+};
+var CustomCancelAndCompleteAction$5 = /*#__PURE__*/styled(CancelAndCompleteAction)(_templateObject$2p || (_templateObject$2p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  justify-content: center;\n"])));
+var Container$1i = /*#__PURE__*/styled.div(_templateObject2$1L || (_templateObject2$1L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 20px;\n"])));
+var Title$8 = /*#__PURE__*/styled.span(_templateObject3$14 || (_templateObject3$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-weight: 900;\n  line-height: 32px;\n  margin: 0;\n  padding: 0;\n  text-transform: uppercase;\n"])));
+var IconContainer$4 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 54px;\n  height: 54px;\n  padding: 14px;\n  border-radius: 50%;\n  background: #feba301a;\n  border: 10px solid #feba305e;\n"])));
+var MainContainer$c = /*#__PURE__*/styled.div(_templateObject5$r || (_templateObject5$r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 400px;\n  min-height: 248px;\n  padding: 24px;\n  border-radius: 12px;\n  background: #ffffff;\n  box-shadow: 0px 20px 24px -4px #10182814;\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n  align-items: center;\n"])));
+
+var _templateObject$2q, _templateObject2$1M, _templateObject3$15, _templateObject4$B, _templateObject5$s, _templateObject6$e, _templateObject7$f, _templateObject8$c;
+function ForceDebriefModal(props) {
+  var _useCustomerInfo = useCustomerInfo(),
+    customerInfo = _useCustomerInfo[0],
+    setCustomerInfo = _useCustomerInfo[1];
+  var _useOrderCustomersLis = useOrderCustomersList(),
+    allCustomers = _useOrderCustomersLis[0],
+    setAllCustomers = _useOrderCustomersLis[1];
+  var infoText = (customerInfo == null ? void 0 : customerInfo.recipient_name) + ", " + (customerInfo == null ? void 0 : customerInfo.postcode);
+  var _useCurrentAction = useCurrentAction(),
+    setCurrentAction = _useCurrentAction[1];
+  var _useActiveTab = useActiveTab(),
+    activeTab = _useActiveTab[0],
+    setActiveTab = _useActiveTab[1];
+  var handleSwitchChange = function handleSwitchChange(newValue) {
+    return setActiveTab(newValue);
+  };
+  var _useChargesState = useChargesState(),
+    chargesState = _useChargesState[0],
+    setCharges = _useChargesState[1];
+  var _useState = useState({}),
+    inputValue = _useState[0],
+    setInputValue = _useState[1]; // only for UI purpose
+  var _useState2 = useState([]),
+    staticData = _useState2[0],
+    setDebriefStaticData = _useState2[1];
+  var _useOrderDetails = useOrderDetails(),
+    orderDetails = _useOrderDetails[0],
+    setOrderDetails = _useOrderDetails[1];
+  var _usePrevOrderDetails = usePrevOrderDetails(),
+    prevOrderDetails = _usePrevOrderDetails[0],
+    setPrevOrderDetails = _usePrevOrderDetails[1];
+  var _useState3 = useState(true),
+    isEscalationEnabled = _useState3[0],
+    setIsEscalationEnabled = _useState3[1];
+  var _useNewStatus = useNewStatus(),
+    newStatus = _useNewStatus[0],
+    setNewStatus = _useNewStatus[1];
+  var _useOrderCancelReason = useOrderCancelReason(),
+    cancellationReason = _useOrderCancelReason[0],
+    setCancellationReason = _useOrderCancelReason[1];
+  var _useOrderHoldReason = useOrderHoldReason(),
+    orderHold = _useOrderHoldReason[0],
+    setOrderHold = _useOrderHoldReason[1];
+  var _useFailureReason = useFailureReason(),
+    failureReason = _useFailureReason[0],
+    setFailureReason = _useFailureReason[1];
+  var _useEscalationCategor = useEscalationCategory(),
+    escalationCategory = _useEscalationCategor[0],
+    setEscalationCategory = _useEscalationCategor[1];
+  var _useEscalationLevel = useEscalationLevel(),
+    escalationLevel = _useEscalationLevel[0],
+    setEscalationLevel = _useEscalationLevel[1];
+  var _useEscalationReason = useEscalationReason(),
+    escalationReason = _useEscalationReason[0],
+    setEscalationReason = _useEscalationReason[1];
+  var _useGlobalStateHitOrd = useGlobalStateHitOrder(),
+    setRecallOrders = _useGlobalStateHitOrd[1];
+  var _useGlobalStateHitAud = useGlobalStateHitAuditLog(),
+    setRecallAuditLog = _useGlobalStateHitAud[1];
+  var _useGlobalEscData = useGlobalEscData(),
+    setGlobalEscData = _useGlobalEscData[1];
+  var _useState4 = useState(false),
+    showAmountConfirmModal = _useState4[0],
+    setShowAmountConfirmModal = _useState4[1];
+  var _useProductDetails = useProductDetails(),
+    productdata = _useProductDetails[0];
+  var sortedProductData = productdata == null ? void 0 : productdata.sort(function (a, b) {
+    return (a == null ? void 0 : a.status) === (b == null ? void 0 : b.status) ? 0 : a != null && a.status ? -1 : 1;
+  });
+  var isDeleted = Array.isArray(sortedProductData) ? sortedProductData == null ? void 0 : sortedProductData.filter(function (item) {
+    return (item == null ? void 0 : item.status) === true;
+  }) : [];
+  //customers API
+  var _useOrderDetails2 = useOrderDetails(),
+    orderData = _useOrderDetails2[0];
+  var customersData = orderData;
+  var id = customersData == null ? void 0 : customersData.customer_id;
+  //Customers list API call
+  var _useAxios = useAxios({
+      endpoint: "/v1/customer/list",
+      method: 'GET',
+      pagination: {
+        is_pagination: false
+      },
+      filters: [{
+        field: 'status',
+        op: '=',
+        value: '1'
+      }]
+    }),
+    fetchCustomerData = _useAxios.data,
+    customerLoading = _useAxios.loading,
+    fetchData = _useAxios.fetchData;
+  useEffect(function () {
+    if (fetchCustomerData && fetchCustomerData != null && fetchCustomerData.data) {
+      var res = fetchCustomerData == null ? void 0 : fetchCustomerData.data;
+      setAllCustomers(res);
+    }
+  }, [fetchCustomerData, customerLoading]);
+  useEffect(function () {
+    fetchData();
+  }, []);
+  // For API Call
+  var _useCustomerDetails = useCustomerDetails(),
+    customerData = _useCustomerDetails[0],
+    setCustomerData = _useCustomerDetails[1];
+  var _useApiHook = useApiHook({
+      endpoint: "customers/" + id,
+      method: 'GET',
+      performAction: false
+    }),
+    fetchedData = _useApiHook.data,
+    loading = _useApiHook.loading,
+    setShouldPerformAction = _useApiHook.setShouldPerformAction;
+  useEffect(function () {
+    if (id) {
+      setShouldPerformAction(true);
+    }
+  }, [id]);
+  useEffect(function () {
+    if (fetchedData && fetchedData != null && fetchedData.data) {
+      var requiredData = fetchedData == null ? void 0 : fetchedData.data;
+      setCustomerData(requiredData);
+    }
+  }, [fetchedData, loading]);
+  var selectedCustomer = allCustomers == null ? void 0 : allCustomers.find(function (customer) {
+    return (customer == null ? void 0 : customer.id) === (customerData == null ? void 0 : customerData.id);
+  });
+  var adhocChargesFields = Array.from({
+    length: 9
+  }, function () {
+    return {
+      id: v4(),
+      adhoc_charges_description: '',
+      adhoc_charges: 0
+    };
+  });
+  var _useAxios2 = useAxios({
+      endpoint: "/finance/debrief/getData/all/",
+      method: 'GET'
+    }),
+    fetchAllDebriefStaticData = _useAxios2.fetchData,
+    debriefStaticData = _useAxios2.data,
+    debriefLoading = _useAxios2.loading;
+  useEffect(function () {
+    setCharges(function (prev) {
+      return _extends({}, prev, {
+        adhoc_charges: adhocChargesFields
+      });
+    });
+    // call debrief static api for getting base charges type
+    fetchAllDebriefStaticData();
+  }, []);
+  useEffect(function () {
+    if (debriefStaticData != null && debriefStaticData.data) {
+      setDebriefStaticData(debriefStaticData == null ? void 0 : debriefStaticData.data[0]);
+    }
+  }, [debriefLoading]);
+  var _useAxios3 = useAxios({
+      endpoint: "/orders/update/",
+      method: 'PUT'
+    }),
+    callUpdateOrderAPI = _useAxios3.fetchData;
+  var _useAxios4 = useAxios({
+      endpoint: "/invoices/force-debrief/",
+      method: 'POST'
+    }),
+    callForceDebriefApi = _useAxios4.fetchData;
+  var _useAxios5 = useAxios({
+      endpoint: "/orders/escalations/create/",
+      method: 'POST'
+    }),
+    createEscalation = _useAxios5.fetchData;
+  var initialValues = function initialValues() {
+    setOrderDetails(prevOrderDetails);
+    setNewStatus('');
+    setCancellationReason('');
+    setOrderHold('');
+    setFailureReason('');
+    setEscalationCategory('');
+    setEscalationLevel('');
+    setEscalationReason('');
+    setActiveTab('success');
+  };
+  var closeModal = function closeModal() {
+    initialValues();
+    setCurrentAction(undefined);
+  };
+  var isDifferent = function isDifferent() {
+    var _orderDetails$order_s, _orderDetails$order_s2, _prevOrderDetails$ord;
+    var keysToRemovefromOrders = ['order_locked', 'order_communications', 'updated_at', 'updated_by', 'order_services'];
+    var filteredOrderDetails = filterObject(orderDetails, keysToRemovefromOrders);
+    var filteredPrevOrderDetails = filterObject(prevOrderDetails, keysToRemovefromOrders);
+    var newOrderServices = (orderDetails == null || (_orderDetails$order_s = orderDetails.order_services) == null ? void 0 : _orderDetails$order_s.length) > 0 && (orderDetails == null || (_orderDetails$order_s2 = orderDetails.order_services) == null ? void 0 : _orderDetails$order_s2.sort(function (a, b) {
+      return a.id - b.id;
+    }));
+    var prevOrderServices = (prevOrderDetails == null || (_prevOrderDetails$ord = prevOrderDetails.order_services) == null ? void 0 : _prevOrderDetails$ord.length) > 0 && (prevOrderDetails == null ? void 0 : prevOrderDetails.order_services.sort(function (a, b) {
+      return a.id - b.id;
+    }));
+    var newOrderServicesSorted = JSON.stringify(newOrderServices);
+    var prevOrderServicesSorted = JSON.stringify(prevOrderServices);
+    var orderDetailsSorted = JSON.stringify(filteredOrderDetails);
+    var prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
+    var isSame = orderDetailsSorted === prevOrderDetailsSorted && newOrderServicesSorted === prevOrderServicesSorted;
+    return !isSame;
+  };
+  var debriefchargesApi = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(finalPayload, failurePayload) {
+      var responseForceDebrief;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return callForceDebriefApi({
+              payload: _extends({
+                debrief_data: finalPayload
+              }, activeTab === 'failure' ? {
+                failure_data: failurePayload
+              } : {
+                failure_data: {}
+              })
+            });
+          case 3:
+            responseForceDebrief = _context.sent;
+            if (responseForceDebrief.code === 200) {
+              notification.success({
+                message: 'Success',
+                description: "" + (responseForceDebrief == null ? void 0 : responseForceDebrief.message)
+              });
+            }
+            _context.next = 9;
+            break;
+          case 7:
+            _context.prev = 7;
+            _context.t0 = _context["catch"](0);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+    return function debriefchargesApi(_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var ordersUpdateApi = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var ordersApiPayload, _response$data, response, _response$data$, _response$data$2;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            ordersApiPayload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
+            _context2.prev = 1;
+            _context2.next = 4;
+            return callUpdateOrderAPI({
+              payload: [ordersApiPayload]
+            });
+          case 4:
+            response = _context2.sent;
+            if (!(response.code === 200 && (response == null || (_response$data = response.data) == null ? void 0 : _response$data.length) > 0)) {
+              _context2.next = 12;
+              break;
+            }
+            notification.success({
+              message: 'Success',
+              description: "" + (response == null ? void 0 : response.message)
+            });
+            setOrderDetails(response == null ? void 0 : response.data[0]);
+            setPrevOrderDetails(response == null ? void 0 : response.data[0]);
+            setCustomerInfo({
+              recipient_name: response == null || (_response$data$ = response.data[0]) == null || (_response$data$ = _response$data$.order_recipient) == null ? void 0 : _response$data$.recipient_name,
+              postcode: response == null || (_response$data$2 = response.data[0]) == null || (_response$data$2 = _response$data$2.order_recipient) == null ? void 0 : _response$data$2.postcode
+            });
+            _context2.next = 12;
+            return setRecallOrders(true);
+          case 12:
+            _context2.next = 17;
+            break;
+          case 14:
+            _context2.prev = 14;
+            _context2.t0 = _context2["catch"](1);
+            setOrderDetails(prevOrderDetails);
+          case 17:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[1, 14]]);
+    }));
+    return function ordersUpdateApi() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var escalationCreateApi = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(escalationPayload) {
+      var apiResponse;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return createEscalation({
+              payload: escalationPayload
+            });
+          case 3:
+            apiResponse = _context3.sent;
+            if ((apiResponse == null ? void 0 : apiResponse.code) === 200) {
+              notification.success({
+                message: 'Success',
+                description: "" + (apiResponse == null ? void 0 : apiResponse.message)
+              });
+              setGlobalEscData(apiResponse == null ? void 0 : apiResponse.data);
+            }
+            _context3.next = 9;
+            break;
+          case 7:
+            _context3.prev = 7;
+            _context3.t0 = _context3["catch"](0);
+          case 9:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3, null, [[0, 7]]);
+    }));
+    return function escalationCreateApi(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var onSubmit = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      var _orderDetails$order_r, _orderDetails$order_t, _orderDetails$order_r2, _chargesState$adhoc_c;
+      var ordersPayload, adhocCharges, chargesPayload, failurePayload, finalPayload, _orderDetails$order_r3, escalationPayload;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            setRecallOrders(false);
+            ordersPayload = _extends({
+              consignment: orderDetails == null ? void 0 : orderDetails.consignment,
+              order_number: orderDetails == null ? void 0 : orderDetails.order_number,
+              customer_id: customerData == null ? void 0 : customerData.id,
+              customer_name: customerData == null ? void 0 : customerData.customer_name,
+              client_name: selectedCustomer == null ? void 0 : selectedCustomer.client_name,
+              recipient_name: orderDetails == null || (_orderDetails$order_r = orderDetails.order_recipient) == null ? void 0 : _orderDetails$order_r.recipient_name,
+              order_id: orderDetails == null ? void 0 : orderDetails.id,
+              order_type: orderDetails == null || (_orderDetails$order_t = orderDetails.order_type) == null ? void 0 : _orderDetails$order_t.type,
+              legacy_order_id: orderDetails == null ? void 0 : orderDetails.gsit_order_id,
+              postcode: orderDetails == null || (_orderDetails$order_r2 = orderDetails.order_recipient) == null ? void 0 : _orderDetails$order_r2.postcode
+            }, activeTab === 'failure' && {
+              failure_new_status: newStatus
+            });
+            adhocCharges = chargesState == null || (_chargesState$adhoc_c = chargesState.adhoc_charges) == null ? void 0 : _chargesState$adhoc_c.filter(function (item) {
+              return !(item.adhoc_charges === 0 && item.adhoc_charges_description === '');
+            }).map(function (_ref5) {
+              var adhoc_charges_description = _ref5.adhoc_charges_description,
+                adhoc_charges = _ref5.adhoc_charges;
+              return {
+                adhoc_charges_description: adhoc_charges_description,
+                adhoc_charges: adhoc_charges
+              };
+            });
+            chargesPayload = _extends({}, chargesState);
+            chargesPayload.adhoc_charges = adhocCharges;
+            chargesPayload.debrief_status = activeTab;
+            if (activeTab === 'success') {
+              delete chargesPayload.new_order_status;
+            }
+            failurePayload = _extends({
+              failure_reason_id: failureReason == null ? void 0 : failureReason.id
+            }, newStatus === 'Cancelled' && {
+              cancelled_reason_id: cancellationReason == null ? void 0 : cancellationReason.value
+            }, newStatus === 'On Hold' && {
+              hold_reason_id: orderHold == null ? void 0 : orderHold.value
+            }, {
+              failure_order_status: newStatus,
+              status: activeTab
+            });
+            finalPayload = _extends({}, ordersPayload, {
+              status: activeTab,
+              charges: [chargesPayload]
+            }, activeTab === 'failure' && {
+              failureData: failurePayload
+            }); // check adhoc charges if 0 and description is empty then
+            // APPLY ALL VALIDATIONS HERE BEFORE CALLING ANY API
+            if (!(activeTab === 'failure')) {
+              _context4.next = 22;
+              break;
+            }
+            if (failureReason != null && failureReason.id) {
+              _context4.next = 13;
+              break;
+            }
+            notification.error({
+              message: 'Error',
+              description: 'Failure reason is mandatory'
+            });
+            return _context4.abrupt("return");
+          case 13:
+            if (!((newStatus == null ? void 0 : newStatus.length) === 0)) {
+              _context4.next = 16;
+              break;
+            }
+            notification.error({
+              message: 'Error',
+              description: 'New status is mandatory'
+            });
+            return _context4.abrupt("return");
+          case 16:
+            if (!(newStatus === 'On Hold' && (orderHold == null ? void 0 : orderHold.length) === 0)) {
+              _context4.next = 19;
+              break;
+            }
+            notification.error({
+              message: 'Error',
+              description: 'Hold reason is mandatory'
+            });
+            return _context4.abrupt("return");
+          case 19:
+            if (!(newStatus === 'Cancelled' && (cancellationReason == null ? void 0 : cancellationReason.length) === 0)) {
+              _context4.next = 22;
+              break;
+            }
+            notification.error({
+              message: 'Error',
+              description: 'Cancel reason is mandatory'
+            });
+            return _context4.abrupt("return");
+          case 22:
+            if (!isDifferent()) {
+              _context4.next = 25;
+              break;
+            }
+            _context4.next = 25;
+            return ordersUpdateApi();
+          case 25:
+            if (!(activeTab === 'failure' && isEscalationEnabled)) {
+              _context4.next = 29;
+              break;
+            }
+            escalationPayload = [{
+              order_id: orderDetails == null ? void 0 : orderDetails.id,
+              escalation_reason_id: escalationReason == null ? void 0 : escalationReason.value,
+              escalation_category_id: escalationCategory == null ? void 0 : escalationCategory.value,
+              escalation_level_id: escalationLevel == null ? void 0 : escalationLevel.value,
+              is_deleted: false,
+              route_id: orderDetails == null || (_orderDetails$order_r3 = orderDetails.order_routes) == null ? void 0 : _orderDetails$order_r3.route_id
+            }];
+            _context4.next = 29;
+            return escalationCreateApi(escalationPayload);
+          case 29:
+            _context4.next = 31;
+            return debriefchargesApi(finalPayload, failurePayload);
+          case 31:
+            _context4.next = 33;
+            return setRecallAuditLog(true);
+          case 33:
+            // call status api and alerts api
+            initialValues();
+            _context4.next = 36;
+            return props == null ? void 0 : props.callOrderStatusApi();
+          case 36:
+            _context4.next = 38;
+            return props == null ? void 0 : props.callOrderAlertsApi();
+          case 38:
+            _context4.next = 40;
+            return props == null ? void 0 : props.callOrdersApi();
+          case 40:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function onSubmit() {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var onForceDebrief = function onForceDebrief() {
+    if ((chargesState == null ? void 0 : chargesState.base_charge) > 200) {
+      setShowAmountConfirmModal(true);
+    } else {
+      onSubmit();
+    }
+  };
+  return React.createElement(OrderActionModal, {
+    headerTitle: "Order Debrief",
+    onCloseHeader: closeModal,
+    infoText: infoText,
+    onSubmit: onForceDebrief,
+    submitBtnTitle: 'Complete Order',
+    // isSubmitDisabled={true}
+    maxWidth: "95vw",
+    headerActions: React.createElement(ForceDebriefSelector, {
+      onSwitchChange: handleSwitchChange
+    })
+  }, React.createElement(MainContainer$d, null, React.createElement(FDNotification, null), React.createElement(ContentContainer$7, null, React.createElement(OrderInfo$1, null)), React.createElement(ContentContainer$7, null, React.createElement(Container$1j, null, React.createElement(Label$k, {
+    label: "Delivery Instructions",
+    htmlFor: "deliveryInstruction"
+  }), React.createElement(Text$d, null, (orderDetails == null ? void 0 : orderDetails.delivery_instructions) || 'N/A')), React.createElement(Container$1j, null, React.createElement(Label$k, {
+    label: "Other Instructions",
+    htmlFor: "otherInstruction"
+  }), React.createElement(Text$d, null, (orderDetails == null ? void 0 : orderDetails.other_instructions) || 'N/A'))), (isDeleted == null ? void 0 : isDeleted.length) > 0 && React.createElement(ProductDiv, null, React.createElement(Container$1j, null, isDeleted == null ? void 0 : isDeleted.map(function (item, index) {
+    var _item$order_product_t;
+    return React.createElement(ProductContainer, {
+      key: index
+    }, React.createElement(Status$1, null, '*'), React.createElement(Status$1, null, (item == null ? void 0 : item.status_value) || 'N/A'), React.createElement(Status$1, null, (item == null || (_item$order_product_t = item.order_product_type) == null ? void 0 : _item$order_product_t.type) || 'N/A'), React.createElement(Status$1, null, (item == null ? void 0 : item.sku) || 'N/A'), React.createElement(Status$1, null, "Part 1 of 1"), React.createElement(Status$1, null, 'Weight' + ':' + (item == null ? void 0 : item.weight) || 'N/A'), React.createElement(Status$1, null, 'Cube' + ':' + (item == null ? void 0 : item.cube) || 'N/A'));
+  }))), React.createElement(ContentContainer$7, null, React.createElement(ContainerInner, null, React.createElement(BaseCharges, {
+    inputValue: inputValue,
+    setInputValue: setInputValue,
+    staticData: staticData
+  }), React.createElement(DeliveryAddOns, {
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  })), React.createElement(ContainerInner, null, React.createElement(CollectionAddOns, {
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  }), React.createElement(DisposalCharge, {
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  })), React.createElement(OrderCharges, {
+    inputValue: inputValue,
+    setInputValue: setInputValue
+  }), React.createElement(AdhocSection, null)), activeTab === 'failure' && React.createElement(ContentContainer$7, {
+    style: {
+      flexDirection: 'column',
+      gap: '10px'
+    }
+  }, React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '10px'
+    }
+  }, "Escalation", React.createElement(Checkbox$1, {
+    checked: isEscalationEnabled,
+    onChange: function onChange(event) {
+      return setIsEscalationEnabled(event.target.checked);
+    }
+  })), React.createElement(Escalation, null))), showAmountConfirmModal && React.createElement(BaseChargeConfirmationModal, {
+    setConfirmationModal: setShowAmountConfirmModal,
+    onProceed: onSubmit
+  }));
+}
+var Status$1 = /*#__PURE__*/styled.span(_templateObject$2q || (_templateObject$2q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  text-transform: capitalize;\n  color: #3a3630;\n"])));
+var ProductContainer = /*#__PURE__*/styled.div(_templateObject2$1M || (_templateObject2$1M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 16px;\n"])));
+var MainContainer$d = /*#__PURE__*/styled.div(_templateObject3$15 || (_templateObject3$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 10px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var ContainerInner = /*#__PURE__*/styled.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n"])));
+var Container$1j = /*#__PURE__*/styled.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Text$d = /*#__PURE__*/styled.div(_templateObject6$e || (_templateObject6$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #363a30;\n  font-size: 14px;\n  white-space: break-spaces;\n"])));
+var ContentContainer$7 = /*#__PURE__*/styled.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 40px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  width: 100%;\n  white-space: nowrap;\n"])));
+var ProductDiv = /*#__PURE__*/styled.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 12px;\n  flex-direction: row;\n  align-items: flex-start;\n  gap: 40px;\n  flex: 1 0 0;\n  border-radius: 15px;\n  background: #f8fafc;\n  width: 100%;\n  white-space: nowrap;\n  min-height: 60px;\n  overflow: scroll;\n  max-height: 150px;\n"])));
+var ForceDebriefModal$1 = /*#__PURE__*/React.memo(ForceDebriefModal);
+
+var _templateObject$2r;
+function OrderActions() {
+  var _useCurrentAction = useCurrentAction(),
+    currentAction = _useCurrentAction[0],
+    setCurrentAction = _useCurrentAction[1];
+  var _useOrderId = useOrderId(),
+    orderId = _useOrderId[0];
+  var _useOrderDetails = useOrderDetails(),
+    setOrderDetails = _useOrderDetails[1];
+  var _usePrevOrderDetails = usePrevOrderDetails(),
+    setPrevOrderDetails = _usePrevOrderDetails[1];
+  var _useStatusDetails = useStatusDetails(),
+    setOrderStatus = _useStatusDetails[1];
+  var _useOrderAlertsData = useOrderAlertsData(),
+    setOrderAlertsData = _useOrderAlertsData[1];
+  var _useProductDetails = useProductDetails(),
+    setProductDetails = _useProductDetails[1];
+  var _useProductDetailsCop = useProductDetailsCopy(),
+    setProductDetailsCopy = _useProductDetailsCop[1];
+  var _useLoading = useLoading(),
+    setLoading = _useLoading[1];
+  var _useTasksData = useTasksData(),
+    setTasksData = _useTasksData[1];
+  var _useReminderNotiData = useReminderNotiData(),
+    setReminderNotifyData = _useReminderNotiData[1];
+  // call orders api
+  var _useAxios = useAxios({
+      endpoint: "/orders/" + orderId,
+      method: 'GET'
+    }),
+    callOrdersApi = _useAxios.fetchData,
+    loading = _useAxios.loading,
+    fetchedData = _useAxios.data;
+  useEffect(function () {
+    var _fetchedData$data;
+    setLoading(loading);
+    if (fetchedData && fetchedData != null && fetchedData.data) {
+      var requiredData = fetchedData == null ? void 0 : fetchedData.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+      setCurrentAction(undefined);
+    }
+    if (fetchedData && (fetchedData == null ? void 0 : fetchedData.data) === null || (fetchedData == null || (_fetchedData$data = fetchedData.data) == null ? void 0 : _fetchedData$data.length) === 0) {
+      setCurrentAction(undefined);
+    }
+  }, [loading]);
+  // orders api ends
+  // call order products api start
+  var _useAxios2 = useAxios({
+      endpoint: "/order/order_products/" + orderId,
+      method: 'GET'
+    }),
+    productsData = _useAxios2.data,
+    orderProductsLoading = _useAxios2.loading,
+    callOrderProductsApi = _useAxios2.fetchData;
+  useEffect(function () {
+    var _productsData$data;
+    if (productsData && (productsData == null || (_productsData$data = productsData.data) == null ? void 0 : _productsData$data.length) > 0) {
+      setProductDetails(productsData == null ? void 0 : productsData.data);
+      setProductDetailsCopy(productsData == null ? void 0 : productsData.data);
+    } else {
+      setProductDetails(null);
+      setProductDetailsCopy(null);
+    }
+  }, [orderProductsLoading]);
   // call order products api end
   // call alerts api
   var _useAxios3 = useAxios({
@@ -13104,6 +15413,12 @@ function OrderActions() {
         });
       case 'send-sms':
         return React.createElement(SendSmsModal, null);
+      case 'force-debrief':
+        return React.createElement(ForceDebriefModal$1, {
+          callOrdersApi: callOrdersApi,
+          callOrderStatusApi: fetchStatusData,
+          callOrderAlertsApi: callOrderAlertsApi
+        });
       case 'send-email':
         return React.createElement(SendEmailModal, null);
       case 'change-customer-account':
@@ -13156,21 +15471,26 @@ function OrderActions() {
         return null;
     }
   };
-  return React.createElement(Container$17, null, renderContent());
+  return React.createElement(Container$1k, null, renderContent());
 }
-var Container$17 = /*#__PURE__*/styled.div(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Container$1k = /*#__PURE__*/styled.div(_templateObject$2r || (_templateObject$2r = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$27, _templateObject2$1B;
+var _templateObject$2s, _templateObject2$1N, _templateObject3$16, _templateObject4$C;
 var Details = function Details() {
+  var _globalEscData$, _globalEscData$2;
   // const [orderDetails] = useOrderDetails();
   var _useCustomerInfo = useCustomerInfo(),
     customerInfo = _useCustomerInfo[0];
   var recipient = (customerInfo == null ? void 0 : customerInfo.recipient_name) || '';
   var postcodeShow = (customerInfo == null ? void 0 : customerInfo.postcode) || '';
-  return React.createElement(DetailsContainer, null, React.createElement(Typo, null, "CUSTOMER RETURN - ", recipient, " , ", postcodeShow));
+  var _useGlobalEscData = useGlobalEscData(),
+    globalEscData = _useGlobalEscData[0];
+  return React.createElement(DetailsContainer, null, React.createElement(Typo, null, "CUSTOMER RETURN - ", recipient, " , ", postcodeShow, " ", (globalEscData == null ? void 0 : globalEscData.length) > 0 && React.createElement(EscInfo, null, ((_globalEscData$ = globalEscData[0]) == null || (_globalEscData$ = _globalEscData$.escalation_type) == null ? void 0 : _globalEscData$.level) + " (" + ((_globalEscData$2 = globalEscData[0]) == null || (_globalEscData$2 = _globalEscData$2.escalation_type) == null ? void 0 : _globalEscData$2.name) + ")")));
 };
-var DetailsContainer = /*#__PURE__*/styled.div(_templateObject$27 || (_templateObject$27 = /*#__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$1B || (_templateObject2$1B = /*#__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 DetailsContainer = /*#__PURE__*/styled.div(_templateObject$2s || (_templateObject$2s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  > svg {\n    transform: scale(0.6);\n  }\n"])));
+var Typo = /*#__PURE__*/styled.div(_templateObject2$1N || (_templateObject2$1N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 15px;\n  align-items: center;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px;\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 Name = /*#__PURE__*/styled.div(_templateObject3$16 || (_templateObject3$16 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* heading/h3-subHeader */\n  font-family: 'Roboto', sans-serif;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 900;\n  line-height: 32px; /* 160% */\n  text-transform: uppercase;\n"])));
+var EscInfo = /*#__PURE__*/styled(Name)(_templateObject4$C || (_templateObject4$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6396e5;\n  font-size: 16px;\n"])));
 
 var bjsMenu = [{
   label: 'Add Order Resources',
@@ -13246,8 +15566,8 @@ var ArrowDownIcon = function ArrowDownIcon(_ref) {
   }));
 };
 
-var _templateObject$28, _templateObject2$1C;
-function Options() {
+var _templateObject$2t, _templateObject2$1O;
+function Options$1() {
   var _orderStatus$, _orderStatus$2, _orderDetails$order_r;
   var _useCurrentAction = useCurrentAction(),
     setCurrentAction = _useCurrentAction[1];
@@ -13338,10 +15658,10 @@ function Options() {
     fill: '#f0f2f2'
   })))));
 }
-var Option = /*#__PURE__*/styled.div(_templateObject$28 || (_templateObject$28 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var StyledSpace = /*#__PURE__*/styled(Space)(_templateObject2$1C || (_templateObject2$1C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
+var Option = /*#__PURE__*/styled.div(_templateObject$2t || (_templateObject$2t = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledSpace = /*#__PURE__*/styled(Space)(_templateObject2$1O || (_templateObject2$1O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
 
-var _templateObject$29, _templateObject2$1D;
+var _templateObject$2u, _templateObject2$1P;
 function Print() {
   var _useOrderDetails = useOrderDetails(),
     orderDetails = _useOrderDetails[0];
@@ -13461,7 +15781,7 @@ function Print() {
       };
     })
   };
-  return React.createElement(Container$18, null, React.createElement(Dropdown, {
+  return React.createElement(Container$1l, null, React.createElement(Dropdown, {
     menu: menuItems,
     trigger: ['hover']
   }, React.createElement("a", {
@@ -13475,10 +15795,10 @@ function Print() {
     fill: '#f0f2f2'
   })))));
 }
-var Container$18 = /*#__PURE__*/styled.div(_templateObject$29 || (_templateObject$29 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var StyledSpace$1 = /*#__PURE__*/styled(Space)(_templateObject2$1D || (_templateObject2$1D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
+var Container$1l = /*#__PURE__*/styled.div(_templateObject$2u || (_templateObject$2u = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var StyledSpace$1 = /*#__PURE__*/styled(Space)(_templateObject2$1P || (_templateObject2$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
 
-var _templateObject$2a;
+var _templateObject$2v;
 function BjsMenuDropDown() {
   var _orderStatus$;
   var _useCurrentAction = useCurrentAction(),
@@ -13522,9 +15842,9 @@ function BjsMenuDropDown() {
     fill: '#f0f2f2'
   }))));
 }
-var StyledSpace$2 = /*#__PURE__*/styled(Space)(_templateObject$2a || (_templateObject$2a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
+var StyledSpace$2 = /*#__PURE__*/styled(Space)(_templateObject$2v || (_templateObject$2v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .ant-space-item {\n    color: #6a7378;\n    text-align: center;\n    font-family: Lato;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 500;\n  }\n"])));
 
-var _templateObject$2b, _templateObject2$1E;
+var _templateObject$2w, _templateObject2$1Q;
 // components
 function DropDowns$1() {
   var _orderDetails$order_r, _orderDetails$order_r2;
@@ -13551,7 +15871,7 @@ function DropDowns$1() {
       }
     });
   }
-  return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper$2, null, React.createElement(BjsMenuDropDown, null), React.createElement(Options, null), React.createElement(Print, null), actions == null ? void 0 : actions.map(function (action, index) {
+  return React.createElement(React.Fragment, null, React.createElement(DashBoardWrapper$2, null, React.createElement(BjsMenuDropDown, null), React.createElement(Options$1, null), React.createElement(Print, null), actions == null ? void 0 : actions.map(function (action, index) {
     return React.createElement(FontContainer, {
       key: index,
       onClick: action.onClick,
@@ -13561,25 +15881,25 @@ function DropDowns$1() {
     }, action.label);
   })));
 }
-var DashBoardWrapper$2 = /*#__PURE__*/styled.section(_templateObject$2b || (_templateObject$2b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 5px;\n  display: flex;\n  align-self: center;\n  gap: 10px;\n  align-items: center;\n"])));
-var FontContainer = /*#__PURE__*/styled.div(_templateObject2$1E || (_templateObject2$1E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  text-align: center;\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n  text-transform: uppercase;\n  cursor: ", ";\n  @media screen and (max-width: 1210px) {\n    font-size: 11px;\n    line-height: 12px;\n  }\n"])), function (props) {
+var DashBoardWrapper$2 = /*#__PURE__*/styled.section(_templateObject$2w || (_templateObject$2w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0 5px;\n  display: flex;\n  align-self: center;\n  gap: 10px;\n  align-items: center;\n"])));
+var FontContainer = /*#__PURE__*/styled.div(_templateObject2$1Q || (_templateObject2$1Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #6a7378;\n  text-align: center;\n  font-family: 'lato', sans-serif;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 18px;\n  text-transform: uppercase;\n  cursor: ", ";\n  @media screen and (max-width: 1210px) {\n    font-size: 11px;\n    line-height: 12px;\n  }\n"])), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 });
 
-var _templateObject$2c;
+var _templateObject$2x;
 var ActionsMenu = function ActionsMenu() {
   return React.createElement(Flex$2, null, React.createElement(DropDowns$1, null));
 };
-var Flex$2 = /*#__PURE__*/styled.div(_templateObject$2c || (_templateObject$2c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n"])));
+var Flex$2 = /*#__PURE__*/styled.div(_templateObject$2x || (_templateObject$2x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  height: 34px;\n  padding: 1px;\n  align-items: flex-start;\n  border-radius: 20px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  background: #f0f2f2;\n  cursor: pointer;\n"])));
 
-var _templateObject$2d;
+var _templateObject$2y;
 var DetailsFilters = function DetailsFilters() {
   return React.createElement(Flex$3, null, React.createElement(Details, null), React.createElement(ActionsMenu, null));
 };
-var Flex$3 = /*#__PURE__*/styled.div(_templateObject$2d || (_templateObject$2d = /*#__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 Flex$3 = /*#__PURE__*/styled.div(_templateObject$2y || (_templateObject$2y = /*#__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$2e, _templateObject2$1F;
-function OrderTemplate(_ref) {
+var _templateObject$2z, _templateObject2$1R;
+function OrderTemplate$1(_ref) {
   var _orderStaticData$canc, _orderDetails$order_c, _routeInfoData$order_, _routeInfoData$order_2, _routeInfoData$order_3;
   var orderDetails = _ref.orderDetails,
     routeInfoData = _ref.routeInfoData;
@@ -13653,7 +15973,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isPostcode');
     }
-  }), statusVal == 'on hold' && (alertVisibility == null ? void 0 : alertVisibility.isHoldVisible) && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  }), statusVal == 'on hold' && (alertVisibility == null ? void 0 : alertVisibility.isHoldVisible) && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "warn",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13665,7 +15985,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isHoldVisible');
     }
-  })), statusVal == 'complete' && alertVisibility.isCompleted && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'complete' && alertVisibility.isCompleted && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "success",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13677,7 +15997,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isCompleted');
     }
-  })), statusVal == 'outstanding' && alertVisibility.isOutstanding && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'outstanding' && alertVisibility.isOutstanding && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "release",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13689,7 +16009,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isOutstanding');
     }
-  })), statusVal == 'awaiting confirmation' && alertVisibility.isAwaitingConfirmation && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'awaiting confirmation' && alertVisibility.isAwaitingConfirmation && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13701,7 +16021,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isAwaitingConfirmation');
     }
-  })), statusVal == 'awaiting route' && alertVisibility.isAwaitingRoute && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'awaiting route' && alertVisibility.isAwaitingRoute && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13713,7 +16033,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isAwaitingRoute');
     }
-  })), statusVal == 'cancelled' && alertVisibility.isCancelled && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'cancelled' && alertVisibility.isCancelled && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13725,7 +16045,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isCancelled');
     }
-  })), statusVal == 'confirmed' && alertVisibility.isConfirmed && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'confirmed' && alertVisibility.isConfirmed && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13737,7 +16057,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isConfirmed');
     }
-  })), statusVal == 'subcontracted' && alertVisibility.isSubcontracted && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'subcontracted' && alertVisibility.isSubcontracted && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13749,7 +16069,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isRouted');
     }
-  })), statusVal == 'enroute' && alertVisibility.isEnroute && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'enroute' && alertVisibility.isEnroute && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13761,7 +16081,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isEnroute');
     }
-  })), statusVal == 'routed' && alertVisibility.isRouted && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'routed' && alertVisibility.isRouted && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13773,7 +16093,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isRouted');
     }
-  })), statusVal == 'precalled' && alertVisibility.isPreCall && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'precalled' && alertVisibility.isPreCall && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13785,7 +16105,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isPreCall');
     }
-  })), statusVal == 'on site' && alertVisibility.isOnSite && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'on site' && alertVisibility.isOnSite && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13797,7 +16117,7 @@ function OrderTemplate(_ref) {
     onClose: function onClose() {
       return onCloseAlert('isOnSite');
     }
-  })), statusVal == 'failed' && alertVisibility.isFailed && React.createElement(StyledAlert, null, React.createElement(FlagAlert, {
+  })), statusVal == 'failed' && alertVisibility.isFailed && React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
     type: "info",
     title: React.createElement("div", {
       dangerouslySetInnerHTML: {
@@ -13853,50 +16173,10 @@ function OrderTemplate(_ref) {
     }
   }));
 }
-var FlagsStyle = /*#__PURE__*/styled.div(_templateObject$2e || (_templateObject$2e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .redCross {\n    font-size: 13px;\n    margin-top: 4px;\n  }\n  .postcode-alert-content {\n    > div {\n      > h4 {\n        color: #3a3630;\n        font-family: Lato;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 500;\n        line-height: 18px;\n      }\n    }\n    ul {\n      margin-bottom: 0;\n    }\n\n    li {\n      border-radius: 6px;\n      list-style-type: none;\n      > a {\n        color: #6396e5;\n        font-family: Roboto;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n        text-decoration: none;\n      }\n      > strong {\n        > a {\n          color: #6396e5;\n\n          font-family: Roboto;\n          font-size: 14px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 24px;\n          text-decoration: none;\n        }\n      }\n    }\n\n    li.outstanding strong,\n    li.awaiting_confirmation strong,\n    li.awaiting_route strong {\n      font-family: Roboto, sans-serif;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 24px;\n      font-style: normal;\n    }\n    li.routed strong {\n      margin-left: 5px;\n      color: #3a3630;\n      font-family: Lato;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 18px;\n    }\n\n    li.outstanding strong {\n      color: #e95252;\n    }\n    li.awaiting_confirmation strong {\n      color: #6396e5;\n    }\n    li.awaiting_route strong {\n      color: #36a053;\n    }\n    li.confirmed strong {\n      color: #36a053;\n    }\n    li.enroute strong {\n      color: #36a053;\n    }\n    li.cancelled strong {\n      color: #e95252;\n    }\n    li.complete strong {\n      color: #36a053;\n    }\n    li.on_hold strong {\n      color: #feba30;\n    }\n    li.routed strong {\n      color: #3a3630;\n    }\n    span {\n      margin-left: 5px;\n      color: #3a3630;\n      font-family: Lato;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 18px;\n    }\n  }\n"])));
-var StyledAlert = /*#__PURE__*/styled.div(_templateObject2$1F || (_templateObject2$1F = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 5px;\n"])));
-
-var _templateObject$2f, _templateObject2$1G, _templateObject3$Z;
-function FlagTemplate(_ref) {
-  var data = _ref.data,
-    dismissFlags = _ref.dismissFlags;
-  var _useFlagRefId = useFlagRefId(),
-    setSelectedFlag = _useFlagRefId[1];
-  var _useCurrentAction = useCurrentAction(),
-    setCurrentAction = _useCurrentAction[1];
-  var openModal = function openModal() {
-    setCurrentAction('view-flag');
-  };
-  var handleClick = function handleClick(Id) {
-    setSelectedFlag(Id);
-    openModal();
-  };
-  var titleColor = (data == null ? void 0 : data.status) === 'SD' ? '#36A053' : '#3a3630';
-  return React.createElement(StyledAlert$1, null, React.createElement(FlagAlert, {
-    type: (data == null ? void 0 : data.status) === 'AD' ? 'info' : 'success',
-    title: React.createElement(React.Fragment, null, React.createElement(StyledTitle, {
-      color: titleColor
-    }, "Flag : ", data != null && data.is_private ? 'Private' : '', ' ', React.createElement(StyledLink$1, {
-      onClick: function onClick() {
-        return handleClick(data.id);
-      }
-    }, data == null ? void 0 : data.id, " - ", data == null ? void 0 : data.flag_type, ' '), ' ', (data == null ? void 0 : data.status) === 'AD' ? 'Unresolved' : 'Resolved on', ' ', (data == null ? void 0 : data.status) == 'SD' ? React.createElement(React.Fragment, null, formatDate$1(data == null ? void 0 : data.resolved_at), " by ", data == null ? void 0 : data.resolved_by, ' ') : null)),
-    subtitle: "",
-    description: "" + (data == null ? void 0 : data.description),
-    showOkButton: false,
-    onClose: function onClose() {
-      return dismissFlags(data == null ? void 0 : data.id);
-    }
-  }));
-}
-var StyledAlert$1 = /*#__PURE__*/styled.div(_templateObject$2f || (_templateObject$2f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 10px;\n"])));
-var StyledLink$1 = /*#__PURE__*/styled.span(_templateObject2$1G || (_templateObject2$1G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
-var StyledTitle = /*#__PURE__*/styled.span(_templateObject3$Z || (_templateObject3$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (_ref2) {
-  var color = _ref2.color;
-  return color;
-});
+var FlagsStyle = /*#__PURE__*/styled.div(_templateObject$2z || (_templateObject$2z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .redCross {\n    font-size: 13px;\n    margin-top: 4px;\n  }\n  .postcode-alert-content {\n    > div {\n      > h4 {\n        color: #3a3630;\n        font-family: Lato;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 500;\n        line-height: 18px;\n      }\n    }\n    ul {\n      margin-bottom: 0;\n    }\n\n    li {\n      border-radius: 6px;\n      list-style-type: none;\n      > a {\n        color: #6396e5;\n        font-family: Roboto;\n        font-size: 14px;\n        font-style: normal;\n        font-weight: 600;\n        line-height: 24px;\n        text-decoration: none;\n      }\n      > strong {\n        > a {\n          color: #6396e5;\n\n          font-family: Roboto;\n          font-size: 14px;\n          font-style: normal;\n          font-weight: 600;\n          line-height: 24px;\n          text-decoration: none;\n        }\n      }\n    }\n\n    li.outstanding strong,\n    li.awaiting_confirmation strong,\n    li.awaiting_route strong {\n      font-family: Roboto, sans-serif;\n      font-size: 14px;\n      font-weight: 600;\n      line-height: 24px;\n      font-style: normal;\n    }\n    li.routed strong {\n      margin-left: 5px;\n      color: #3a3630;\n      font-family: Lato;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 18px;\n    }\n\n    li.outstanding strong {\n      color: #e95252;\n    }\n    li.awaiting_confirmation strong {\n      color: #6396e5;\n    }\n    li.awaiting_route strong {\n      color: #36a053;\n    }\n    li.confirmed strong {\n      color: #36a053;\n    }\n    li.enroute strong {\n      color: #36a053;\n    }\n    li.cancelled strong {\n      color: #e95252;\n    }\n    li.complete strong {\n      color: #36a053;\n    }\n    li.on_hold strong {\n      color: #feba30;\n    }\n    li.routed strong {\n      color: #3a3630;\n    }\n    span {\n      margin-left: 5px;\n      color: #3a3630;\n      font-family: Lato;\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 500;\n      line-height: 18px;\n    }\n  }\n"])));
+var StyledAlert$2 = /*#__PURE__*/styled.div(_templateObject2$1R || (_templateObject2$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 5px;\n"])));
 
-var _templateObject$2g, _templateObject2$1H, _templateObject3$_;
+var _templateObject$2A, _templateObject2$1S, _templateObject3$17;
 function ReminderTemplate(_ref) {
   var data = _ref.data,
     dismissReminder = _ref.dismissReminder;
@@ -13914,7 +16194,7 @@ function ReminderTemplate(_ref) {
   };
   var type = (data == null ? void 0 : data.status) === true ? 'success' : (data == null ? void 0 : data.status) === false ? 'warn' : 'info';
   var titleColor = (data == null ? void 0 : data.status) === true ? '#36A053' : (data == null ? void 0 : data.staus) === false ? '#FEBA30' : '#3A3630';
-  return React.createElement("div", null, React.createElement(StyledAlert$2, null, React.createElement(FlagAlert, {
+  return React.createElement("div", null, React.createElement(StyledAlert$3, null, React.createElement(FlagAlert, {
     type: type,
     title: React.createElement(React.Fragment, null, React.createElement(StyledTitle$1, {
       color: titleColor
@@ -13930,15 +16210,15 @@ function ReminderTemplate(_ref) {
     }
   })));
 }
-var StyledAlert$2 = /*#__PURE__*/styled.div(_templateObject$2g || (_templateObject$2g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 10px;\n"])));
-var StyledTitle$1 = /*#__PURE__*/styled.span(_templateObject2$1H || (_templateObject2$1H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (_ref2) {
+var StyledAlert$3 = /*#__PURE__*/styled.div(_templateObject$2A || (_templateObject$2A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 10px;\n"])));
+var StyledTitle$1 = /*#__PURE__*/styled.span(_templateObject2$1S || (_templateObject2$1S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])), function (_ref2) {
   var color = _ref2.color;
   return color;
 });
-var StyledLink$2 = /*#__PURE__*/styled.span(_templateObject3$_ || (_templateObject3$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+var StyledLink$2 = /*#__PURE__*/styled.span(_templateObject3$17 || (_templateObject3$17 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--contextual-blue, #6396e5);\n  font-family: Roboto;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n"])));
 
-var _templateObject$2h, _templateObject2$1I;
-function Tabs(_ref) {
+var _templateObject$2B, _templateObject2$1T;
+function Tabs$1(_ref) {
   var activeTasks = _ref.activeTasks,
     closedTasks = _ref.closedTasks,
     activeReminders = _ref.activeReminders,
@@ -13954,9 +16234,9 @@ function Tabs(_ref) {
   var additionalNotifications = activeTasks == null ? void 0 : activeTasks.slice(3);
   var initialReminders = activeReminders == null ? void 0 : activeReminders.slice(0, 3);
   var additionalReminders = activeReminders == null ? void 0 : activeReminders.slice(3);
-  return React.createElement(React.Fragment, null, React.createElement(Content, null, React.createElement(Container$19, {
+  return React.createElement(React.Fragment, null, React.createElement(Content$1, null, React.createElement(Container$1m, {
     className: "tab-content"
-  }, activeTab === 'active' && React.createElement(React.Fragment, null, React.createElement(OrderTemplate, {
+  }, activeTab === 'active' && React.createElement(React.Fragment, null, React.createElement(OrderTemplate$1, {
     orderDetails: orderDetails,
     routeInfoData: routeInfoData
   }), initialReminders == null ? void 0 : initialReminders.map(function (item, index) {
@@ -13997,8 +16277,8 @@ function Tabs(_ref) {
     });
   })))));
 }
-var Container$19 = /*#__PURE__*/styled.div(_templateObject$2h || (_templateObject$2h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: grid;\n"])));
-var Content = /*#__PURE__*/styled.div(_templateObject2$1I || (_templateObject2$1I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
+var Container$1m = /*#__PURE__*/styled.div(_templateObject$2B || (_templateObject$2B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  display: grid;\n"])));
+var Content$1 = /*#__PURE__*/styled.div(_templateObject2$1T || (_templateObject2$1T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
 
 var NotifyFlag = function NotifyFlag() {
   return React.createElement("svg", {
@@ -14016,7 +16296,7 @@ var NotifyFlag = function NotifyFlag() {
   }));
 };
 
-var _templateObject$2i, _templateObject2$1J, _templateObject3$$, _templateObject4$w, _templateObject5$n, _templateObject6$b, _templateObject7$c, _templateObject8$a, _templateObject9$8, _templateObject10$4, _templateObject11$3, _templateObject12$1;
+var _templateObject$2C, _templateObject2$1U, _templateObject3$18, _templateObject4$D, _templateObject5$t, _templateObject6$f, _templateObject7$g, _templateObject8$d, _templateObject9$a, _templateObject10$6, _templateObject11$4, _templateObject12$1;
 function Notification() {
   var _orderData$order_rout, _activeTasks$filter, _closedTasks$filter;
   var _useTabType = useTabType(),
@@ -14253,9 +16533,9 @@ function Notification() {
   var totalClosedCount = (closedTasks == null || (_closedTasks$filter = closedTasks.filter(function (item) {
     return item.status === 'SD';
   })) == null ? void 0 : _closedTasks$filter.length) + (closedReminders == null ? void 0 : closedReminders.length);
-  return React.createElement(React.Fragment, null, React.createElement(Section$1, null, React.createElement(Container$1a, {
+  return React.createElement(React.Fragment, null, React.createElement(Section$2, null, React.createElement(Container$1n, {
     className: "notification-header"
-  }, React.createElement(FlagContainer, null, React.createElement(NotifyFlag, null)), React.createElement(Label$i, {
+  }, React.createElement(FlagContainer, null, React.createElement(NotifyFlag, null)), React.createElement(Label$j, {
     label: "NOTIFICATIONS"
   }), React.createElement(TabsData, {
     className: "tab-buttons"
@@ -14269,7 +16549,7 @@ function Notification() {
     onClick: function onClick() {
       return handleTabChange('closed');
     }
-  }, "Closed", React.createElement(ClosedCount, null, totalClosedCount)))), unresolvedLoading || reminderLoading ? React.createElement(Loader, null, React.createElement(Spinner, null), React.createElement(Text$a, null, "Fetching Notifications...")) : (taskData == null ? void 0 : taskData.length) > 0 || (reminderNotifyData == null ? void 0 : reminderNotifyData.length) > 0 || orderData ? React.createElement(TabsWrapper, null, React.createElement(Tabs, {
+  }, "Closed", React.createElement(ClosedCount, null, totalClosedCount)))), unresolvedLoading || reminderLoading ? React.createElement(Loader$1, null, React.createElement(Spinner$1, null), React.createElement(Text$e, null, "Fetching Notifications...")) : (taskData == null ? void 0 : taskData.length) > 0 || (reminderNotifyData == null ? void 0 : reminderNotifyData.length) > 0 || orderData ? React.createElement(TabsWrapper$1, null, React.createElement(Tabs$1, {
     activeTasks: activeTasks,
     closedTasks: closedTasks,
     activeReminders: activeReminders,
@@ -14279,64 +16559,64 @@ function Notification() {
     routeInfoData: orderAlertsData
   })) : 'No Notifications Found'));
 }
-var Container$1a = /*#__PURE__*/styled.div(_templateObject$2i || (_templateObject$2i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n"])));
-var Loader = /*#__PURE__*/styled.div(_templateObject2$1J || (_templateObject2$1J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
-var Spinner = /*#__PURE__*/styled.div(_templateObject3$$ || (_templateObject3$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: #3a3630;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  animation: spin 1s linear infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
-var FlagContainer = /*#__PURE__*/styled.div(_templateObject4$w || (_templateObject4$w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px;\n  background-color: #3a3630;\n  border-radius: 10px;\n"])));
-var TabsData = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 10px;\n"])));
-var ActiveCount = /*#__PURE__*/styled.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  padding: 1px 5px;\n  background-color: #6396e5;\n  border-radius: 6px;\n"])));
-var ClosedCount = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  padding: 1px 5px;\n  background-color: #e95252;\n  border-radius: 6px;\n"])));
-var StyledTab = /*#__PURE__*/styled.div(_templateObject8$a || (_templateObject8$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  cursor: pointer;\n  color: ", ";\n  border-bottom: ", ";\n  transition: border-bottom 0.3s ease;\n  font-family: 'Roboto', sans-serif;\n  padding-bottom: 5px;\n  align-items: center;\n"])), function (props) {
+var Container$1n = /*#__PURE__*/styled.div(_templateObject$2C || (_templateObject$2C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 10px;\n  border-bottom: 1px solid #ccc;\n"])));
+var Loader$1 = /*#__PURE__*/styled.div(_templateObject2$1U || (_templateObject2$1U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
+var Spinner$1 = /*#__PURE__*/styled.div(_templateObject3$18 || (_templateObject3$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 4px solid rgba(0, 0, 0, 0.1);\n  border-left-color: #3a3630;\n  border-radius: 50%;\n  width: 40px;\n  height: 40px;\n  animation: spin 1s linear infinite;\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])));
+var FlagContainer = /*#__PURE__*/styled.div(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px;\n  background-color: #3a3630;\n  border-radius: 10px;\n"])));
+var TabsData = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  padding: 10px;\n"])));
+var ActiveCount = /*#__PURE__*/styled.div(_templateObject6$f || (_templateObject6$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  padding: 1px 5px;\n  background-color: #6396e5;\n  border-radius: 6px;\n"])));
+var ClosedCount = /*#__PURE__*/styled.div(_templateObject7$g || (_templateObject7$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: #ffffff;\n  padding: 1px 5px;\n  background-color: #e95252;\n  border-radius: 6px;\n"])));
+var StyledTab = /*#__PURE__*/styled.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 5px;\n  cursor: pointer;\n  color: ", ";\n  border-bottom: ", ";\n  transition: border-bottom 0.3s ease;\n  font-family: 'Roboto', sans-serif;\n  padding-bottom: 5px;\n  align-items: center;\n"])), function (props) {
   return props.active ? '#3a3630' : '#AEA9A1';
 }, function (props) {
   return props.active ? '2px solid #feba30' : '2px solid #eeeeee';
 });
-var Section$1 = /*#__PURE__*/styled.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 10px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0;\n"])));
-var Label$i = /*#__PURE__*/styled(SectionHeader)(_templateObject10$4 || (_templateObject10$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid #ccc;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n  text-transform: uppercase;\n"])));
-var TabsWrapper = /*#__PURE__*/styled.div(_templateObject11$3 || (_templateObject11$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* min-height: 200px; */\n  max-height: 350px;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &:hover {\n    scrollbar-width: thin;\n  }\n\n  &::-webkit-scrollbar {\n    width: 0;\n  }\n\n  &:hover::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n"])));
-var Text$a = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--tonal-brown-651, #6a7378);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n"])));
+var Section$2 = /*#__PURE__*/styled.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 14px;\n  background: #ffffff;\n  border-radius: 12px;\n  padding: 10px;\n  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);\n  border: 1px solid #e0e0e0;\n"])));
+var Label$j = /*#__PURE__*/styled(SectionHeader)(_templateObject10$6 || (_templateObject10$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid #ccc;\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n  text-transform: uppercase;\n"])));
+var TabsWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  /* min-height: 200px; */\n  max-height: 350px;\n  overflow-y: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  &:hover {\n    scrollbar-width: thin;\n  }\n\n  &::-webkit-scrollbar {\n    width: 0;\n  }\n\n  &:hover::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.5);\n  }\n"])));
+var Text$e = /*#__PURE__*/styled.div(_templateObject12$1 || (_templateObject12$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--tonal-brown-651, #6a7378);\n  font-family: Lato;\n  font-size: 13px;\n  font-style: normal;\n  font-weight: 600;\n"])));
 
-var _templateObject$2j;
+var _templateObject$2D;
 function CollapsedContent$2() {
   return React.createElement(Font$1, null, "ORDER RESOURCES");
 }
-var Font$1 = /*#__PURE__*/styled.div(_templateObject$2j || (_templateObject$2j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n"])));
+var Font$1 = /*#__PURE__*/styled.div(_templateObject$2D || (_templateObject$2D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: 'Roboto', sans-serif;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px; /* 150% */\n"])));
 
-var _templateObject$2k, _templateObject2$1K;
+var _templateObject$2E, _templateObject2$1V;
 function Category(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.category;
   return React.createElement(RowContainer$4, null, React.createElement(Row$7, null, data));
 }
-var RowContainer$4 = /*#__PURE__*/styled.div(_templateObject$2k || (_templateObject$2k = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$7 = /*#__PURE__*/styled.div(_templateObject2$1K || (_templateObject2$1K = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$4 = /*#__PURE__*/styled.div(_templateObject$2E || (_templateObject$2E = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$7 = /*#__PURE__*/styled.div(_templateObject2$1V || (_templateObject2$1V = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2l, _templateObject2$1L;
+var _templateObject$2F, _templateObject2$1W;
 function Date$2(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.date;
   return React.createElement(RowContainer$5, null, React.createElement(Row$8, null, formatDate$1(data)));
 }
-var RowContainer$5 = /*#__PURE__*/styled.div(_templateObject$2l || (_templateObject$2l = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$8 = /*#__PURE__*/styled.div(_templateObject2$1L || (_templateObject2$1L = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$5 = /*#__PURE__*/styled.div(_templateObject$2F || (_templateObject$2F = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$8 = /*#__PURE__*/styled.div(_templateObject2$1W || (_templateObject2$1W = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2m, _templateObject2$1M;
+var _templateObject$2G, _templateObject2$1X;
 function Reference(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.reference;
   return React.createElement(RowContainer$6, null, React.createElement(Row$9, null, data));
 }
-var RowContainer$6 = /*#__PURE__*/styled.div(_templateObject$2m || (_templateObject$2m = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$9 = /*#__PURE__*/styled.div(_templateObject2$1M || (_templateObject2$1M = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$6 = /*#__PURE__*/styled.div(_templateObject$2G || (_templateObject$2G = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$9 = /*#__PURE__*/styled.div(_templateObject2$1X || (_templateObject2$1X = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var _templateObject$2n, _templateObject2$1N;
+var _templateObject$2H, _templateObject2$1Y;
 function Type(props) {
   var _props$row;
   var data = props == null || (_props$row = props.row) == null ? void 0 : _props$row.original.type;
   return React.createElement(RowContainer$7, null, React.createElement(Row$a, null, data));
 }
-var RowContainer$7 = /*#__PURE__*/styled.div(_templateObject$2n || (_templateObject$2n = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var Row$a = /*#__PURE__*/styled.div(_templateObject2$1N || (_templateObject2$1N = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var RowContainer$7 = /*#__PURE__*/styled.div(_templateObject$2H || (_templateObject$2H = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var Row$a = /*#__PURE__*/styled.div(_templateObject2$1Y || (_templateObject2$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
 var DownloadIcon = function DownloadIcon() {
   return React.createElement("svg", {
@@ -14365,7 +16645,7 @@ var DownloadIcon = function DownloadIcon() {
   })));
 };
 
-var _templateObject$2o, _templateObject2$1O, _templateObject3$10;
+var _templateObject$2I, _templateObject2$1Z, _templateObject3$19;
 function Action(_ref) {
   var _row$original, _orderResources$data;
   var row = _ref.row;
@@ -14475,9 +16755,9 @@ function Action(_ref) {
   }, React.createElement(DownloadIcon, null)))));
 }
 // Styled components for styling
-var Actions = /*#__PURE__*/styled.div(_templateObject$2o || (_templateObject$2o = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
-var TippyContainer = /*#__PURE__*/styled.div(_templateObject2$1O || (_templateObject2$1O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin: 7px;\n"])));
-var Row$b = /*#__PURE__*/styled.div(_templateObject3$10 || (_templateObject3$10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
+var Actions = /*#__PURE__*/styled.div(_templateObject$2I || (_templateObject$2I = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
+var TippyContainer = /*#__PURE__*/styled.div(_templateObject2$1Z || (_templateObject2$1Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin: 7px;\n"])));
+var Row$b = /*#__PURE__*/styled.div(_templateObject3$19 || (_templateObject3$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 10px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
 
 var tableColumns$1 = [{
   header: 'Date',
@@ -14506,7 +16786,7 @@ var tableColumns$1 = [{
   enableSorting: false
 }];
 
-var _templateObject$2p;
+var _templateObject$2J;
 function Order$1() {
   var _orderResources$data;
   var _useOrderProductsReso = useOrderProductsResources(),
@@ -14519,9 +16799,9 @@ function Order$1() {
     data: data
   })));
 }
-var Table$2 = /*#__PURE__*/styled.div(_templateObject$2p || (_templateObject$2p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
+var Table$2 = /*#__PURE__*/styled.div(_templateObject$2J || (_templateObject$2J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 
-var _templateObject$2q, _templateObject2$1P, _templateObject3$11, _templateObject4$x;
+var _templateObject$2K, _templateObject2$1_, _templateObject3$1a, _templateObject4$E;
 function OrderView() {
   notification.config({
     top: 150
@@ -14573,6 +16853,8 @@ function OrderView() {
     getResources = _useAtom[0];
   var _usegetClientData = usegetClientData(),
     setClientData = _usegetClientData[1];
+  var _useGlobalEscData = useGlobalEscData(),
+    setGlobalEscData = _useGlobalEscData[1];
   useEffect(function () {
     setStatusVal(orderDetails == null ? void 0 : orderDetails.status_value);
   }, [orderDetails == null ? void 0 : orderDetails.status_value]);
@@ -14728,6 +17010,7 @@ function OrderView() {
   useEffect(function () {
     if (orderId) {
       callCLientApi();
+      callEscalationApi();
     }
   }, [orderId]);
   useEffect(function () {
@@ -14874,15 +17157,33 @@ function OrderView() {
       setSubContracterData(formattedData);
     }
   }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
-  return React.createElement(MainContainer$b, null, React.createElement(GeneralHeader, null), React.createElement(DetailsFilters, null), React.createElement(Notification, null), React.createElement(OrderDetails$1, null), React.createElement(ProductsInfo, null), React.createElement(SplitLayout$1, null, React.createElement(NotesContainer, null, React.createElement(Notes, null)), React.createElement(TablesContainer, null, React.createElement(Order$1, null), React.createElement(SystemLogs, null))), React.createElement(OrderActions, null));
+  // ESCALATIONS API
+  var _useAxios3 = useAxios({
+      endpoint: "/orders/escalations/" + orderId,
+      method: 'GET'
+    }),
+    fetchedEscalationData = _useAxios3.data,
+    callEscalationApi = _useAxios3.fetchData,
+    escalationDataLoading = _useAxios3.loading;
+  useEffect(function () {
+    if (fetchedEscalationData != null && fetchedEscalationData.data) {
+      var escalationData = fetchedEscalationData == null ? void 0 : fetchedEscalationData.data;
+      var sortedEscData = escalationData == null ? void 0 : escalationData.sort(function (a, b) {
+        return new Date(b == null ? void 0 : b.created_at).getTime() - new Date(a == null ? void 0 : a.created_at).getTime();
+      });
+      var showEsc = sortedEscData != null && sortedEscData.length > 0;
+      showEsc ? setGlobalEscData(sortedEscData) : setGlobalEscData([]);
+    }
+  }, [escalationDataLoading]);
+  return React.createElement(MainContainer$e, null, React.createElement(GeneralHeader, null), React.createElement(DetailsFilters, null), React.createElement(Notification, null), React.createElement(OrderDetails$1, null), React.createElement(ProductsInfo, null), React.createElement(SplitLayout$1, null, React.createElement(NotesContainer, null, React.createElement(Notes, null)), React.createElement(TablesContainer, null, React.createElement(Order$1, null), React.createElement(SystemLogs, null))), React.createElement(OrderActions, null));
 }
-var MainContainer$b = /*#__PURE__*/styled.div(_templateObject$2q || (_templateObject$2q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n"])));
-var SplitLayout$1 = /*#__PURE__*/styled.div(_templateObject2$1P || (_templateObject2$1P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
-var NotesContainer = /*#__PURE__*/styled.div(_templateObject3$11 || (_templateObject3$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
-var TablesContainer = /*#__PURE__*/styled.div(_templateObject4$x || (_templateObject4$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
+var MainContainer$e = /*#__PURE__*/styled.div(_templateObject$2K || (_templateObject$2K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-bottom: 30px;\n"])));
+var SplitLayout$1 = /*#__PURE__*/styled.div(_templateObject2$1_ || (_templateObject2$1_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 15px;\n  @media (max-width: 1024px) {\n    display: contents;\n  }\n"])));
+var NotesContainer = /*#__PURE__*/styled.div(_templateObject3$1a || (_templateObject3$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n"])));
+var TablesContainer = /*#__PURE__*/styled.div(_templateObject4$E || (_templateObject4$E = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n"])));
 
-var _templateObject2$1Q;
-var StyledBulkItem$1 = /*#__PURE__*/styled.div(_templateObject2$1Q || (_templateObject2$1Q = /*#__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$1$;
+var StyledBulkItem$1 = /*#__PURE__*/styled.div(_templateObject2$1$ || (_templateObject2$1$ = /*#__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 initialState$3 = {
   'x-filters': [],
@@ -14951,7 +17252,7 @@ var overviewfiltersReducerAtom = /*#__PURE__*/atom(function (get) {
   return set(filtersStateAtom$2, filterReducer$2(get(filtersStateAtom$2), action));
 });
 
-var _templateObject$2r, _templateObject2$1R, _templateObject3$12;
+var _templateObject$2L, _templateObject2$20, _templateObject3$1b;
 var _excluded$8 = ["count"];
 var SearchType = function SearchType() {
   var _useState = useState(''),
@@ -15048,9 +17349,9 @@ var SearchType = function SearchType() {
     onClick: handleClear
   }, React.createElement(CrossIcon, null)));
 };
-var Search = /*#__PURE__*/styled.div(_templateObject$2r || (_templateObject$2r = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .clear {\n    position: absolute;\n    right: 32px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
-var ClearButton = /*#__PURE__*/styled.button(_templateObject2$1R || (_templateObject2$1R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  color: rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n  padding: 0 8px;\n  font-size: 14px;\n  background: transparent;\n  &:hover {\n    color: #000;\n  }\n"])));
-var SearchInput = /*#__PURE__*/styled.input(_templateObject3$12 || (_templateObject3$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  padding-left: 39px;\n  width: 100%;\n  &:focus {\n    outline: none;\n    border-color: gray;\n  }\n"])));
+var Search = /*#__PURE__*/styled.div(_templateObject$2L || (_templateObject$2L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .clear {\n    position: absolute;\n    right: 32px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
+var ClearButton = /*#__PURE__*/styled.button(_templateObject2$20 || (_templateObject2$20 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  color: rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n  padding: 0 8px;\n  font-size: 14px;\n  background: transparent;\n  &:hover {\n    color: #000;\n  }\n"])));
+var SearchInput = /*#__PURE__*/styled.input(_templateObject3$1b || (_templateObject3$1b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  padding-left: 39px;\n  width: 100%;\n  &:focus {\n    outline: none;\n    border-color: gray;\n  }\n"])));
 
 var BulkFilter = function BulkFilter() {
   // const [printToogle, setPrintToggle] = useMenuDropDown();
@@ -15284,7 +17585,7 @@ var ReturnTable$1 = function ReturnTable() {
   })))));
 };
 
-var _templateObject$2s, _templateObject2$1S, _templateObject3$13;
+var _templateObject$2M, _templateObject2$21, _templateObject3$1c;
 var _excluded$9 = ["count"];
 function ReturnMainTable() {
   var _useAtom = useAtom(overviewfiltersReducerAtom),
@@ -15370,7 +17671,7 @@ function ReturnMainTable() {
     className: " " + (isScrolled ? 'stickyTableHead' : '')
   }, React.createElement("div", {
     className: "Tableconatiner"
-  }, React.createElement(HeaderFilter, null), React.createElement(Container$1b, null, React.createElement(Row$c, null, React.createElement(Text, null, "Client Return"), customerId ? React.createElement(ReturnFilter, null) : React.createElement(Filters, null)), React.createElement(ReturnTable$1, null)), total > 0 && React.createElement(Pagination, {
+  }, React.createElement(HeaderFilter, null), React.createElement(Container$1o, null, React.createElement(Row$c, null, React.createElement(Text, null, "Client Return"), customerId ? React.createElement(ReturnFilter, null) : React.createElement(Filters, null)), React.createElement(ReturnTable$1, null)), total > 0 && React.createElement(Pagination, {
     currentPage: page,
     totalItems: total,
     itemsPerPage: itemsPerPage,
@@ -15378,9 +17679,9 @@ function ReturnMainTable() {
     onItemsPerPageChange: handleItemsPerPageChange
   }))));
 }
-var Row$c = /*#__PURE__*/styled.div(_templateObject$2s || (_templateObject$2s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
-var Container$1b = /*#__PURE__*/styled.div(_templateObject2$1S || (_templateObject2$1S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject3$13 || (_templateObject3$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+var Row$c = /*#__PURE__*/styled.div(_templateObject$2M || (_templateObject$2M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var Container$1o = /*#__PURE__*/styled.div(_templateObject2$21 || (_templateObject2$21 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
+var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject3$1c || (_templateObject3$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 OrderViewQueryHandler = function OrderViewQueryHandler() {
   var _useSearchParams = useSearchParams(),
@@ -15390,22 +17691,22 @@ var OrderViewQueryHandler = function OrderViewQueryHandler() {
   return orderId ? React.createElement(OrderView, null) : React.createElement(ReturnMainTable, null);
 };
 
-var _templateObject$2t, _templateObject2$1T;
-var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject$2t || (_templateObject$2t = /*#__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$1T || (_templateObject2$1T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
+var _templateObject$2N, _templateObject2$22;
+var HeaderWrapper = /*#__PURE__*/styled.div(_templateObject$2N || (_templateObject$2N = /*#__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$22 || (_templateObject2$22 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n"])));
 
-var _templateObject$2u;
+var _templateObject$2O;
 var HeaderTitle = function HeaderTitle(props) {
-  return React.createElement(React.Fragment, null, React.createElement(Title$6, null, props.title));
+  return React.createElement(React.Fragment, null, React.createElement(Title$9, null, props.title));
 };
-var Title$6 = /*#__PURE__*/styled.h2(_templateObject$2u || (_templateObject$2u = /*#__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 Title$9 = /*#__PURE__*/styled.h2(_templateObject$2O || (_templateObject$2O = /*#__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$2v, _templateObject2$1U;
+var _templateObject$2P, _templateObject2$23;
 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$2v || (_templateObject$2v = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var BreadcrumbList = /*#__PURE__*/styled.span(_templateObject2$1U || (_templateObject2$1U = /*#__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 BreadcrumbContainer = /*#__PURE__*/styled.div(_templateObject$2P || (_templateObject$2P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var BreadcrumbList = /*#__PURE__*/styled.span(_templateObject2$23 || (_templateObject2$23 = /*#__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 javascriptStringDumpToJSON = function javascriptStringDumpToJSON(data) {
   var d = data.replace(new RegExp("(?<=[a-zA-Z])'(?=[a-zA-Z ])", 'g'), '__');
@@ -15418,7 +17719,7 @@ var javascriptStringDumpToJSON = function javascriptStringDumpToJSON(data) {
   return JSON.parse(d);
 };
 
-var _templateObject$2w, _templateObject2$1V, _templateObject3$14;
+var _templateObject$2Q, _templateObject2$24, _templateObject3$1d;
 function ReturnSearchBar() {
   var _useState = useState(''),
     searchText = _useState[0],
@@ -15635,12 +17936,12 @@ function ReturnSearchBar() {
     onClick: handleClear
   }, React.createElement(CrossIcon, null)) : null);
 }
-var ClearButton$1 = /*#__PURE__*/styled.button(_templateObject$2w || (_templateObject$2w = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
-var Search$1 = /*#__PURE__*/styled.div(_templateObject2$1V || (_templateObject2$1V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
-var SearchInput$1 = /*#__PURE__*/styled.input(_templateObject3$14 || (_templateObject3$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
+var ClearButton$1 = /*#__PURE__*/styled.button(_templateObject$2Q || (_templateObject$2Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
+var Search$1 = /*#__PURE__*/styled.div(_templateObject2$24 || (_templateObject2$24 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
+var SearchInput$1 = /*#__PURE__*/styled.input(_templateObject3$1d || (_templateObject3$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
 var ReturnSearchBar$1 = /*#__PURE__*/React.memo(ReturnSearchBar);
 
-var _templateObject$2x, _templateObject2$1W, _templateObject3$15;
+var _templateObject$2R, _templateObject2$25, _templateObject3$1e;
 function ReturnAfterSearchBar() {
   var _useState = useState(''),
     searchText = _useState[0],
@@ -15817,12 +18118,12 @@ function ReturnAfterSearchBar() {
     onClick: handleClear
   }, React.createElement(CrossIcon, null)) : null);
 }
-var ClearButton$2 = /*#__PURE__*/styled.button(_templateObject$2x || (_templateObject$2x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
-var Search$2 = /*#__PURE__*/styled.div(_templateObject2$1W || (_templateObject2$1W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
-var SearchInput$2 = /*#__PURE__*/styled.input(_templateObject3$15 || (_templateObject3$15 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
+var ClearButton$2 = /*#__PURE__*/styled.button(_templateObject$2R || (_templateObject$2R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  background: none;\n  position: relative;\n  border: none;\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0;\n  &:hover {\n    color: #000;\n  }\n"])));
+var Search$2 = /*#__PURE__*/styled.div(_templateObject2$25 || (_templateObject2$25 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);\n  background-color: var(--Flowkit-White, #fff);\n  height: 35px;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n"])));
+var SearchInput$2 = /*#__PURE__*/styled.input(_templateObject3$1e || (_templateObject3$1e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: none;\n  outline: none;\n  flex-grow: 1;\n  width: 100%;\n  background: transparent;\n"])));
 var ReturnAfterSearchBar$1 = /*#__PURE__*/React.memo(ReturnAfterSearchBar);
 
-var _templateObject$2y;
+var _templateObject$2S;
 var RouterHeader = function RouterHeader(_ref) {
   var _ref$breadcrumbTitle = _ref.breadcrumbTitle,
     breadcrumbTitle = _ref$breadcrumbTitle === void 0 ? 'Clients >' : _ref$breadcrumbTitle,
@@ -15897,7 +18198,7 @@ var RouterHeader = function RouterHeader(_ref) {
     }
   }))));
 };
-var DatePickerWrap$1 = /*#__PURE__*/styled.div(_templateObject$2y || (_templateObject$2y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-right: 10px;\n  padding-left: 7px;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: var(--Neutral-White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  min-width: 22vw;\n  height: 35px;\n  input[type='text'] {\n    border-radius: 20px;\n    background: var(--Flowkit-White, #fff);\n    border: none;\n    color: #6a7378;\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 8px 0;\n    padding-left: 10px;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .ant-picker-outlined {\n    border-style: none !important;\n  }\n\n  .ant-picker-focused {\n    box-shadow: none;\n  }\n\n  /* .ant-picker {\n    .ant-picker-input {\n      width: 150px;\n    }\n  } */\n  .ant-btn {\n    background-color: #3348ff !important;\n  }\n"])));
+var DatePickerWrap$1 = /*#__PURE__*/styled.div(_templateObject$2S || (_templateObject$2S = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-right: 10px;\n  padding-left: 7px;\n  justify-content: space-between;\n  align-items: center;\n  align-self: stretch;\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: var(--Neutral-White, #fff);\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  min-width: 22vw;\n  height: 35px;\n  input[type='text'] {\n    border-radius: 20px;\n    background: var(--Flowkit-White, #fff);\n    border: none;\n    color: #6a7378;\n    font-size: 13px;\n    font-weight: 400;\n    line-height: 18px;\n    padding: 8px 0;\n    padding-left: 10px;\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .ant-picker-outlined {\n    border-style: none !important;\n  }\n\n  .ant-picker-focused {\n    box-shadow: none;\n  }\n\n  /* .ant-picker {\n    .ant-picker-input {\n      width: 150px;\n    }\n  } */\n  .ant-btn {\n    background-color: #3348ff !important;\n  }\n"])));
 
 var _excluded$a = ["count"];
 var OutstandingTable = function OutstandingTable() {
@@ -16533,7 +18834,7 @@ var ReturnConfirmedTable = function ReturnConfirmedTable() {
   })))));
 };
 
-var _templateObject$2z, _templateObject2$1X;
+var _templateObject$2T, _templateObject2$26;
 var _excluded$b = ["count"];
 var ConfirmedMain = function ConfirmedMain() {
   var _useReturnConfirmedOr = useReturnConfirmedOrderData(),
@@ -16603,7 +18904,7 @@ var ConfirmedMain = function ConfirmedMain() {
   }, [fetchedReturnOrderData, loading]);
   return React.createElement("div", null, React.createElement(DashBoardWrapper$4, null, React.createElement("div", {
     className: "Tableconatiner"
-  }, React.createElement(Container$1c, null, React.createElement(ReturnConfirmedTable, null), total > 0 && React.createElement(ReturnPagination, {
+  }, React.createElement(Container$1p, null, React.createElement(ReturnConfirmedTable, null), total > 0 && React.createElement(ReturnPagination, {
     currentPage: page,
     totalItems: total,
     itemsPerPage: itemsPerPage,
@@ -16611,10 +18912,10 @@ var ConfirmedMain = function ConfirmedMain() {
     onItemsPerPageChange: handleItemsPerPageChange
   })))));
 };
-var Container$1c = /*#__PURE__*/styled.div(_templateObject$2z || (_templateObject$2z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  /* top: -30px; */\n"])));
-var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject2$1X || (_templateObject2$1X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+var Container$1p = /*#__PURE__*/styled.div(_templateObject$2T || (_templateObject$2T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  /* top: -30px; */\n"])));
+var DashBoardWrapper$4 = /*#__PURE__*/styled.section(_templateObject2$26 || (_templateObject2$26 = /*#__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$2A, _templateObject2$1Y;
+var _templateObject$2U, _templateObject2$27;
 var ReturnOverview = function ReturnOverview() {
   var _UsePaginationData = UsePaginationData(),
     paginationObj = _UsePaginationData[0];
@@ -16639,7 +18940,7 @@ var ReturnOverview = function ReturnOverview() {
   var shouldShowReturnAfterTable = clientPortal && status === 'scheduled_for_return' || clientPortal && status === 'return_completed';
   return React.createElement(React.Fragment, null, React.createElement(RouterHeader, null), React.createElement("div", null, React.createElement(DashBoardWrapper$5, null, React.createElement("div", {
     className: "Tableconatiner"
-  }, React.createElement(HeaderFilter, null), React.createElement(Container$1d, null, React.createElement(ReturnFilter, null), clientPortal && status === 'outstanding_return' && React.createElement(React.Fragment, null, React.createElement(OutstandingTable, null), total > 0 && React.createElement(Pagination, {
+  }, React.createElement(HeaderFilter, null), React.createElement(Container$1q, null, React.createElement(ReturnFilter, null), clientPortal && status === 'outstanding_return' && React.createElement(React.Fragment, null, React.createElement(OutstandingTable, null), total > 0 && React.createElement(Pagination, {
     currentPage: page,
     totalItems: total,
     itemsPerPage: itemsPerPage,
@@ -16647,8 +18948,8 @@ var ReturnOverview = function ReturnOverview() {
     onItemsPerPageChange: handleItemsPerPageChange
   })), shouldShowReturnAfterTable && React.createElement(React.Fragment, null, React.createElement(ConfirmedMain, null)))))));
 };
-var Container$1d = /*#__PURE__*/styled.div(_templateObject$2A || (_templateObject$2A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -16px;\n"])));
-var DashBoardWrapper$5 = /*#__PURE__*/styled.section(_templateObject2$1Y || (_templateObject2$1Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+var Container$1q = /*#__PURE__*/styled.div(_templateObject$2U || (_templateObject$2U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -16px;\n"])));
+var DashBoardWrapper$5 = /*#__PURE__*/styled.section(_templateObject2$27 || (_templateObject2$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
 
 function ReturnClient() {
   notification.config({