@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.94-prod",
+  "version": "0.0.95-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.1.87",
+    "@bjsdistribution/dms-component-library": "0.3.14-prod",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/assets/icons/ArrowDownIcon.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface ArrowDownIconProps {
+  fill?: string;
+}
+
+const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({ fill = '#3A3630' }) => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect width="24" height="24" fill={fill} />
+      <path
+        opacity="0.4"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M6.69104 9.8912C6.82604 9.75637 7.00903 9.68063 7.19984 9.68063C7.39064 9.68063 7.57363 9.75637 7.70864 9.8912L11.9998 14.1824L16.291 9.8912C16.4275 9.76402 16.608 9.69478 16.7946 9.69807C16.9811 9.70136 17.1591 9.77693 17.291 9.90884C17.4229 10.0408 17.4985 10.2187 17.5018 10.4053C17.5051 10.5918 17.4358 10.7723 17.3086 10.9088L12.5086 15.7088C12.3736 15.8436 12.1906 15.9194 11.9998 15.9194C11.809 15.9194 11.626 15.8436 11.491 15.7088L6.69104 10.9088C6.5562 10.7738 6.48047 10.5908 6.48047 10.4C6.48047 10.2092 6.5562 10.0262 6.69104 9.8912Z"
+        fill="#3A3630"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDownIcon;

package/src/assets/icons/DeliverProductIcon.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+const DeliverProductIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="20"
+      viewBox="0 0 18 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_2123_194397)">
+        <path
+          d="M16.1579 5.78943V9.99996M1 5.78943V14.3461C1 15.5107 2.63874 16.2029 5.91537 17.5865C7.23158 18.1431 7.89011 18.421 8.57895 18.421V9.4568M11.1053 15.8947C11.1053 15.8947 11.8421 15.8947 12.5789 17.5789C12.5789 17.5789 14.92 13.3684 17 12.5263"
+          stroke="#36A053"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.52632 9.99997L5.21053 10.8421M12.7895 3.26313L4.36842 7.47366M5.48505 8.05555L3.02526 6.86566C1.67537 6.21218 1 5.88544 1 5.36839C1 4.85134 1.67537 4.5246 3.02526 3.87113L5.48421 2.68123C7.00421 1.94608 7.76211 1.57892 8.57895 1.57892C9.39579 1.57892 10.1545 1.94608 11.6728 2.68123L14.1326 3.87113C15.4825 4.5246 16.1579 4.85134 16.1579 5.36839C16.1579 5.88544 15.4825 6.21218 14.1326 6.86566L11.6737 8.05555C10.1537 8.79071 9.39579 9.15787 8.57895 9.15787C7.76211 9.15787 7.00337 8.79071 5.48505 8.05555Z"
+          stroke="#36A053"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2123_194397">
+          <rect
+            width="18"
+            height="18.8421"
+            fill="white"
+            transform="translate(0 0.578918)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default DeliverProductIcon;

package/src/assets/icons/ReturnProductIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ReturnProductIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="16"
+      viewBox="0 0 18 16"
+      fill="none"
+    >
+      <path
+        d="M7.39996 7.20159H10.5999M11.0311 11.1824L13.2127 11.14C14.0815 11.124 15.8023 11.3376 15.8023 13.1424C15.8023 15.0143 14.0031 15.1983 13.1927 15.1983H5.83997C4.13758 15.1983 1.8016 14.8207 1.8016 11.608V4.79761M11.0311 11.1824C11.0339 11.02 11.0998 10.8654 11.2159 10.752L12.5871 9.58878M11.0311 11.1824C11.0283 11.2684 11.0426 11.354 11.0749 11.4338C11.1071 11.5136 11.1557 11.5857 11.2175 11.6456L12.5871 12.7768M16.1831 4.79761V8.81998M15.5583 0.801636H2.4416C1.8416 0.801636 1.5408 0.801636 1.3328 0.943235C1.23031 1.01294 1.14541 1.1055 1.0848 1.21363C0.962405 1.43203 0.992005 1.72563 1.052 2.31443C1.152 3.29682 1.2016 3.78802 1.4624 4.13841C1.5928 4.31441 1.7576 4.46081 1.9472 4.57041C2.328 4.79201 2.82879 4.79201 3.83119 4.79201H14.1687C15.1711 4.79201 15.6719 4.79201 16.0527 4.57041C16.2423 4.46081 16.4071 4.31441 16.5375 4.13841C16.7983 3.78802 16.8479 3.29682 16.9479 2.31443C17.0079 1.72563 17.0375 1.43203 16.9159 1.21363C16.8551 1.10542 16.7699 1.01284 16.6671 0.943235C16.4591 0.801636 16.1583 0.801636 15.5583 0.801636Z"
+        stroke="#E95252"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ReturnProductIcon;

package/src/common/checkbox/index.tsx

@@ -6,37 +6,58 @@ interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   icon?: React.ReactNode;
   imageSrc: string;
   label: string;
+  enabled: boolean;
+  onClickCheckbox: (service: string) => void;
 }
 
 function Checkbox(props: CheckboxProps) {
-  const { imageSrc, label, checked, ...rest } = props;
+  const {
+    imageSrc,
+    label,
+    checked,
+    enabled = false,
+    onClickCheckbox,
+    ...rest
+  } = props;
   return (
-    <MainContainer $checked={checked}>
+    <MainContainer
+      $enabled={enabled}
+      $checked={checked}
+      onClick={() => onClickCheckbox(label)}
+    >
       {/* Custom Checkbox */}
       <CheckboxContainer>
-        <HiddenCheckbox type="checkbox" {...rest} />
-        <CircleContainer>
+        <HiddenCheckbox type="checkbox" $enabled={enabled} {...rest} />
+        <CircleContainer $checked={checked} $enabled={enabled}>
           <Circle $checked={checked} />
         </CircleContainer>
       </CheckboxContainer>
       <InformationContainer>
-        <Image src={imageSrc} $checked={checked} className="checkbox-img" />
-        <Text $checked={checked}>{label}</Text>
+        <Image
+          src={imageSrc}
+          $checked={checked}
+          $enabled={enabled}
+          className="checkbox-img"
+        />
+        <Text $checked={checked} className="label">
+          {label?.replaceAll('_', ' ')}
+        </Text>
       </InformationContainer>
     </MainContainer>
   );
 }
 
-const Image = styled.img<{ $checked: boolean }>`
+const Image = styled.img<{ $checked: boolean; $enabled: boolean }>`
   height: 28px;
   width: 20px;
   filter: ${props => (props.$checked ? 'grayscale(0)' : 'grayscale(1)')};
+  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
 `;
 
-const CircleContainer = styled.span`
+const CircleContainer = styled.span<{ $checked: boolean; $enabled: boolean }>`
   height: 20px;
   width: 20px;
-  border: 1px solid #e0e2e7;
+  border: 1px solid ${props => (props.$checked ? '#feba30' : '#e0e2e7')};
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -44,12 +65,13 @@ const CircleContainer = styled.span`
   position: absolute;
   top: 8px;
   left: 8px;
+  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
 `;
 
 const Circle = styled.span<{ $checked: boolean }>`
   height: 14px;
   width: 14px;
-  background: ${props => (props.$checked ? '#feba30' : 'white')};
+  background: ${props => (props.$checked ? '#feba30' : '#ffffff')};
   border-radius: 50%;
   display: inline-block;
   transition: 0.2s ease all;
@@ -61,6 +83,7 @@ const Text = styled.span<{ $checked: boolean }>`
   font-size: 12px;
   font-style: normal;
   font-weight: 600;
+  text-transform: capitalize;
 `;
 
 const InformationContainer = styled.div`
@@ -74,7 +97,7 @@ const CheckboxContainer = styled.div`
   display: flex;
 `;
 
-const HiddenCheckbox = styled.input`
+const HiddenCheckbox = styled.input<{ $enabled: boolean }>`
   border: 0;
   height: 100%;
   margin: -1px;
@@ -84,12 +107,13 @@ const HiddenCheckbox = styled.input`
   white-space: nowrap;
   width: 100%;
   opacity: 0;
-  cursor: pointer;
+  /* cursor: pointer; */
+  cursor: ${props => (props.$enabled ? 'pointer' : 'not-allowed')};
   top: 0;
   left: 0;
 `;
 
-const MainContainer = styled.div<{ $checked: boolean }>`
+const MainContainer = styled.div<{ $enabled: boolean; $checked: boolean }>`
   display: flex;
   width: 130px;
   height: 93px;
@@ -99,13 +123,32 @@ const MainContainer = styled.div<{ $checked: boolean }>`
   align-items: center;
   justify-content: center;
   position: relative;
+  background: ${props => (props.$checked ? '#ffffff' : '#f8fafc')};
+  box-shadow: ${props =>
+    props.$checked ? '0px 4px 8px -2px rgba(16, 24, 40, 0.1)' : 'none'};
+  pointer-events: ${props => (props.$enabled ? 'visible' : 'none')};
 
-  &:hover {
-    border: 1px solid #cbc8c2;
+  /* &:hover {
+    border: 1px solid ${props => (props.$enabled ? '#cbc8c2' : '#e0e2e7')};
     .checkbox-img {
-      filter: grayscale(0);
+      filter: ${props => (props.$enabled ? 'grayscale(0)' : 'grayscale(1)')};
     }
-  }
+  } */
+
+    ${props =>
+      props.$enabled &&
+      `&:hover {
+          border: 1px solid #cbc8c2;
+
+        .checkbox-img {
+          filter: grayscale(0);
+        }
+        
+        .label {
+          color: #3a3630;
+        }
+      }
+  `}
 `;
 
 export default Checkbox;

package/src/common/modals/order-action-modal/OrderActionModal.tsx

@@ -15,12 +15,18 @@ interface ActionModalProps {
   onCloseHeader: () => void;
   onSubmit: () => void;
   isSubmitDisabled?: boolean;
+  minWidth?: string; // New optional prop for min-width
+  maxWidth?: string; // New optional prop for min-width
 }
 
-function OrderActionModal(props: ActionModalProps) {
+function OrderActionModal({
+  minWidth = '30vw',
+  maxWidth = '75vw',
+  ...props
+}: ActionModalProps) {
   return (
     <BackgroundModal>
-      <MainContainer>
+      <MainContainer minWidth={minWidth} maxWidth={maxWidth}>
         <OrderActionHeader
           title={props.headerTitle}
           onClose={props.onCloseHeader}
@@ -39,21 +45,21 @@ function OrderActionModal(props: ActionModalProps) {
     </BackgroundModal>
   );
 }
-const MainContainer = styled.div`
+
+// Styled component with dynamic min-width
+const MainContainer = styled.div<{ minWidth: string; maxWidth: string }>`
   min-height: 30vh;
   max-height: 80vh;
-  /* overflow: auto; */
   border-radius: 12px;
   background: #fff;
   box-shadow: 0px 20px 24px -4px #10182814;
   display: flex;
   flex-direction: column;
-  /* gap: 15px; */
   align-items: center;
   justify-content: space-between;
   overflow-x: hidden;
-  max-width: 75vw;
-  min-width: 30vw;
+  max-width: ${({ maxWidth }) => maxWidth}; // Dynamic max-width
+  min-width: ${({ minWidth }) => minWidth}; // Dynamic min-width
 `;
 
 export default OrderActionModal;

package/src/common/radio-group/RadioButtonGroup.tsx

@@ -25,9 +25,9 @@ function RadioButtonGroup(props: RadioButtonGroupProps) {
   } = props;
 
   function renderOptions() {
-    return options.map((option: StandardOptionsType, index: number) => {
+    return options?.map((option: StandardOptionsType, index: number) => {
       const { label, value, color } = option;
-      const shortenedOptionLabel = label.replace(/\s+/g, '');
+      const shortenedOptionLabel = label?.replace(/\s+/g, '');
       const optionId = `radio-option-${shortenedOptionLabel}`;
 
       return (
@@ -82,7 +82,6 @@ const RequiredText = styled.span<RequiredTextProps>`
 
 const LegendContainer = styled.div`
   display: flex;
-  margin-bottom: 7px;
 `;
 
 const Legend = styled.legend`
@@ -102,7 +101,7 @@ const Wrapper = styled.div<{ $direction: DirectionType }>`
   display: flex;
   flex-direction: ${props =>
     props.$direction === 'horizontal' ? 'row' : 'column'};
-  gap: 32px;
+  gap: 20px;
   padding: 0px 10px;
   border-radius: 15px;
   border: 1px solid #e0e2e7;

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -339,32 +339,35 @@ function SelectionFilter() {
               showSearch
             />
           </FilterColumn>
-
-          <FilterColumn>
-            <Label>Action Type</Label>
-            <StyledAntSelect
-              options={actionTypeOptions}
-              placeholder="Select Action Type"
-              value={selectedFilterValue}
-              onChange={handleActionClick}
-              style={{ minWidth: '150px' }}
-              allowClear
-              onClear={handleClearAction}
-            />
-          </FilterColumn>
-
-          <FilterColumn>
-            <Label>Location </Label>
-            <StyledAntSelect
-              options={locationOptions}
-              value={selectedLocationValue}
-              placeholder="Select Location"
-              onChange={handleLocationChange}
-              style={{ minWidth: '150px' }}
-              allowClear
-              mode="multiple"
-            />
-          </FilterColumn>
+          {selectedClient && (
+            <>
+              <FilterColumn>
+                <Label>Action Type</Label>
+                <StyledAntSelect
+                  options={actionTypeOptions}
+                  placeholder="Select Action Type"
+                  value={selectedFilterValue}
+                  onChange={handleActionClick}
+                  style={{ minWidth: '150px' }}
+                  allowClear
+                  onClear={handleClearAction}
+                />
+              </FilterColumn>
+
+              <FilterColumn>
+                <Label>Location </Label>
+                <StyledAntSelect
+                  options={locationOptions}
+                  value={selectedLocationValue}
+                  placeholder="Select Location"
+                  onChange={handleLocationChange}
+                  style={{ minWidth: '150px' }}
+                  allowClear
+                  mode="multiple"
+                />
+              </FilterColumn>
+            </>
+          )}
         </LeftColumn>
         <RightColumn>
           <ApplyButton onClick={applyFilters} disabled={!isButtonEnabled}>

package/src/components/order-daily-overview/header-filters/filterStore.ts

@@ -61,9 +61,9 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       return {
         ...state,
         'x-filters': [
-          ...state['x-filters'].filter(f => f.field !== 'order.customer_id'),
+          ...state['x-filters'].filter(f => f.field !== 'customer_id'),
           {
-            field: 'order.customer_id',
+            field: 'customer_id',
             op: '=',
             value: action.payload,
           },
@@ -75,10 +75,10 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ...state,
         'x-filters': [
           ...state['x-filters'].filter(
-            f => f.field !== 'order_product_return_action.type'
+            f => f.field !== 'product_return_action_id'
           ),
           {
-            field: 'order_product_return_action.type',
+            field: 'product_return_action_id',
             op: '=',
             value: action.payload,
           },
@@ -101,16 +101,14 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
     case 'CLEAR_CLIENT':
       return {
         ...state,
-        'x-filters': state['x-filters'].filter(
-          f => f.field !== 'order.customer_id'
-        ),
+        'x-filters': state['x-filters'].filter(f => f.field !== 'customer_id'),
       };
 
     case 'CLEAR_ACTION':
       return {
         ...state,
         'x-filters': state['x-filters'].filter(
-          f => f.field !== 'order_product_return_action.type'
+          f => f.field !== 'product_return_action_id'
         ),
       };
 

package/src/components/order-daily-overview/index.tsx

@@ -6,7 +6,7 @@ import {
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
-import { useStickyStatus } from '../store';
+import { useCustomerData, useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { useAtom, useClientData } from '../order-view/store';
@@ -17,6 +17,7 @@ import ReturnTable from './table/ReturnTable';
 import { overviewfiltersReducerAtom } from './header-filters/overViewFilter';
 import Pagination from './table-view/Pagination';
 import { notification } from 'antd';
+import { ApiResponse } from '../types';
 
 function ReturnMainTable() {
   const [state] = useAtom(overviewfiltersReducerAtom);
@@ -29,6 +30,7 @@ function ReturnMainTable() {
   const [isScrolled] = useStickyStatus();
   const [, setLoading] = useStatsLoading();
   const [, setClientData] = useClientData();
+  const [, setCustomers] = useCustomerData();
   // const [tableName] = useTableName();
   const queryParams = new URLSearchParams(location.search);
 
@@ -41,6 +43,22 @@ function ReturnMainTable() {
     setItemsPerPage(itemsPerPage);
   };
 
+  //API for client data
+  const { data: fetchedCustomerData, loading: loading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: `/v1/return/product/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
+
+  useEffect(() => {
+    if (fetchedCustomerData && fetchedCustomerData?.data) {
+      setCustomers(fetchedCustomerData?.data);
+    }
+  }, [loading]);
+
   const {
     data: fetchedClientData,
     loading: statsDataLoading,
@@ -48,7 +66,7 @@ function ReturnMainTable() {
   } = useApiHook<{
     data: ClientData[];
   }>({
-    endpoint: `/return_orders/stats/`,
+    endpoint: `/v1/return/product/stats/`,
     method: 'GET',
     //@ts-ignore
     pagination: pagination,
@@ -71,11 +89,6 @@ function ReturnMainTable() {
             description: 'Failed to parse pagination data',
           });
         }
-      } else {
-        notification.error({
-          message: 'Error',
-          description: 'Pagination data is null or undefined',
-        });
       }
     }
   }, [statsDataLoading]);

package/src/components/order-daily-overview/return-after-table/ReturnAfterTable.tsx

@@ -42,9 +42,9 @@ const ReturnAfterTable = () => {
     setShouldPerformAction,
     paginationData,
   } = useApiHook<ApiResponse>({
-    endpoint: '/return_orders/?skip_filters=0',
+    endpoint: '/v1/return/orders/',
     method: 'GET',
-    filters: filters,
+    filters: filters && filters?.length > 0 ? filters : undefined,
     pagination: pagination,
     performAction: false,
   });

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -148,7 +148,10 @@ const OrderTable = () => {
       case 'Awaiting':
         return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
       case 'Completed':
-        return { color: '#1F9254', background: 'rgba(41, 204, 106, 0.15)' };
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)',
+        };
       case 'Outstanding':
         return { color: '#FF9900', background: 'rgba(255, 153, 0, 0.15)' };
       case 'Routed':
@@ -222,16 +225,15 @@ const OrderTable = () => {
                   Created {renderSortIcon('created_at')}
                 </div>
               </th>
-              <th onClick={() => handleSort('return_locations.location_name')}>
+              <th onClick={() => handleSort('return_location_name')}>
                 <div className="sortIconClass">
-                  Return Location{' '}
-                  {renderSortIcon('return_locations.location_name')}
+                  Return Location {renderSortIcon('return_location_name')}
                 </div>
               </th>
               <th>Pick Up Location</th>
-              <th onClick={() => handleSort('order_recipient.recipient_name')}>
+              <th onClick={() => handleSort('recipient_name')}>
                 <div className="sortIconClass">
-                  Recipient {renderSortIcon('order_recipient.recipient_name')}
+                  Recipient {renderSortIcon('recipient_name')}
                 </div>
               </th>
               <th> Client</th>
@@ -273,15 +275,15 @@ const OrderTable = () => {
               sortedData?.map((item: any, index: any) => {
                 const statusMapping: any = {
                   cancelled: 'Cancelled',
-                  OO: 'On Hold',
+                  'on hold': 'On Hold',
                   SC: 'Sub-Contracted',
                   'awaiting route': 'Awaiting',
                   'awaiting confirmation': 'Awaiting',
-                  completed: 'completed',
+                  complete: 'Completed',
                   outstanding: 'Outstanding',
                   routed: 'Routed',
+                  failed: 'Failed',
                 };
-
                 const status = statusMapping[item?.status_value] || 'Unknown';
                 const statusClass = getStatusClass(status);
                 return (
@@ -293,10 +295,12 @@ const OrderTable = () => {
                       />
                     </td> */}
                     <td>{formatDate(new Date(item?.created_at))}</td>
+                    <td>{displayValueOrNA(item?.return_location_name)}</td>
                     <td>
-                      {displayValueOrNA(item?.return_locations?.location_name)}
+                      {item?.locations?.length
+                        ? item?.locations.join(', ')
+                        : 'N/A'}
                     </td>
-                    <td>{displayValueOrNA(item?.pick_up_location)}</td>
 
                     <td onClick={() => setOrderId(item.id)}>
                       <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -308,25 +312,21 @@ const OrderTable = () => {
                           }}
                         >
                           <NavLink to={`../${item.id}`}>
-                            {displayValueOrNA(
-                              item?.order_recipient?.recipient_name
-                            )}
+                            {displayValueOrNA(item?.recipient_name)}
                           </NavLink>
                         </li>
                         <li style={{ color: '#888075' }}>
-                          {displayValueOrNA(item?.order_recipient?.postcode)}
+                          {displayValueOrNA(item?.postcode)}
                         </li>
                       </ul>
                     </td>
 
-                    <td>
-                      {displayValueOrNA(item?.customer_data?.customer_name)}
-                    </td>
+                    <td>{displayValueOrNA(item?.customer_name)}</td>
 
                     <td>{displayValueOrNA(item?.consignment)}</td>
                     <td>{displayValueOrNA(item?.order_number)}</td>
 
-                    <td>{displayValueOrNA(item?.box_count)}</td>
+                    <td>{displayValueOrNA(item?.total_products)}</td>
                     <td>
                       {displayValueOrNA(item?.weight)}{' '}
                       {item?.weight && item?.weight > 0 ? 'KG' : ''}

package/src/components/order-daily-overview/return-after-table/table-filters/ReturnFilterStore.ts

@@ -86,9 +86,9 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         return {
           ...state,
           'x-filters': [
-            ...state['x-filters'].filter(f => f.field !== 'status_id'),
+            ...state['x-filters'].filter(f => f.field !== 'order_status'),
             {
-              field: 'status_id',
+              field: 'order_status',
               op: '=',
               value: action.payload,
             },
@@ -97,14 +97,17 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
       } else {
         return {
           ...state,
-          'x-filters': state['x-filters'].filter(f => f.field !== 'status_id'),
+          'x-filters': state['x-filters'].filter(
+            f => f.field !== 'order_status'
+          ),
         };
       }
 
-      case 'SET_ASSIGNEE_FILTER':
-        return {
-          ...state,
-          'x-filters': action.payload !== null
+    case 'SET_ASSIGNEE_FILTER':
+      return {
+        ...state,
+        'x-filters':
+          action.payload !== null
             ? [
                 ...state['x-filters'].filter(f => f.field !== 'bjs_delivery'),
                 {
@@ -114,8 +117,7 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
                 },
               ]
             : state['x-filters'].filter(f => f.field !== 'bjs_delivery'),
-        };
-      
+      };
 
     case 'CLEAR_STATUS_ORDER_FILTER':
       return {