@bjsdistribution/dms-client-return 0.0.11 → 0.0.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.11",
+  "version": "0.0.12",
   "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.3",
+    "@bjsdistribution/dms-component-library": "0.1.3",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/components/order-daily-overview/common/fakedata.tsx

@@ -101,6 +101,10 @@ export const optionsPrint = [
   { icon: 'collectionLables', label: 'Print Collection Labels' },
 ];
 
+export const optionsForReturnPrint = [
+  { icon: 'deliveryLables', label: 'Print Return Labels' },
+];
+
 export const Depots = [
   { value: 'bjsCouriers', label: 'BJS COURIERS' },
   { value: 'bjsSales', label: 'BJS SALES' },

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

@@ -3,12 +3,18 @@ import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
 import { ApiResponse } from '../../types';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
-import { useActionType, useCustomerData, useLocationData } from '../../store';
+import {
+  useActionType,
+  useCustomerData,
+  useLocationData,
+  useStatusOrderData,
+} from '../../store';
 
 function HeaderFilter() {
   const [, setCustomers] = useCustomerData();
   const [, setActionType] = useActionType();
   const [, setLocationData] = useLocationData();
+  const [, setStatusOfOrders] = useStatusOrderData();
 
   //API for client data
   const { data: fetchedCustomerData, loading: loading } = useApiHook<
@@ -50,6 +56,9 @@ function HeaderFilter() {
           (i: any) => i?.order_product_return_action
         )
       );
+      setStatusOfOrders(
+        fetchedStaticData?.data?.flatMap((i: any) => i?.order_stock_alias)
+      );
     }
   }, [actionLoading, fetchedStaticData]);
 

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

@@ -12,9 +12,12 @@ import { atom, useAtom } from 'jotai';
 import {
   useActionType,
   useCustomerData,
+  useGroupedPayload,
   useLocationData,
   useNewReturnPayload,
   useReturnPayload,
+  useSelectAll,
+  useSelectedOrders,
 } from '../../store';
 import { filtersReducerAtom } from './filterStore';
 import {
@@ -49,6 +52,9 @@ function SelectionFilter() {
   const [storedAccNumber, setStoredAccNumber] = useState<any>();
   const [storedCustomerId, setStoredCustomerId] = useState<any>();
   const [, setNewPayload] = useNewReturnPayload();
+  const [, setGrouped] = useGroupedPayload();
+  const [, setSelectedReturnOrder] = useSelectedOrders();
+  const [, setSelectAll] = useSelectAll();
 
   //client options
   const clientOptions = customers?.map((option: any) => ({
@@ -69,7 +75,7 @@ function SelectionFilter() {
 
   const LocationOptions = locationData?.map((option: any) => ({
     label: option?.location_name,
-    value: option?.customer_id,
+    value: option?.token,
   }));
 
   //client change
@@ -94,7 +100,6 @@ function SelectionFilter() {
       account_number: storedAccNo,
       customer_id: storedCustomerId,
     }));
-    console.log(selectedUuids, 'selectedUuids');
     const filteredSubLocations = locationData
       ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
       .map((subCat: any) => ({
@@ -104,6 +109,10 @@ function SelectionFilter() {
 
     setFilteredLocationOptions(filteredSubLocations);
     setUuid('');
+    setSelectedReturnOrder([]);
+    setNewPayload([]);
+    setGrouped([]);
+    setSelectAll(false);
   };
 
   useEffect(() => {
@@ -127,10 +136,9 @@ function SelectionFilter() {
   useEffect(() => {}, [getUuid, filteredLocationOptions]);
 
   //location change
-  const handleLocationChange = (value: unknown, option: DefaultOptionType) => {
+  const handleLocationChange = (value: any, option: DefaultOptionType) => {
     const selectedLabel = option?.label as string;
-    console.log(value, 'value');
-    setSelectedLocationValue(selectedLabel);
+    setSelectedLocationValue(value);
 
     if (selectedLocationValue === selectedLabel) {
       dispatch({
@@ -196,9 +204,9 @@ function SelectionFilter() {
     }
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
-  console.log(filteredLocationOptions, 'filteredLocationOptions');
+  // console.log(filteredLocationOptions, 'filteredLocationOptions');
 
-  console.log('check', storedName, selectedFilterValue, selectedLocationValue);
+  // console.log('check', storedName, selectedFilterValue, selectedLocationValue);
   return (
     <Wrapper>
       <FilterRow>

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

@@ -62,7 +62,7 @@ function ReturnMainTable() {
     endpoint: `/return_orders/get/client-returns/`,
     method: 'GET',
   });
-  console.log('fetchedClientData', fetchedClientData?.data);
+  // console.log('fetchedClientData', fetchedClientData?.data);
 
   useEffect(() => {
     setLoading(staticDataLoading);

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

@@ -1,8 +1,4 @@
-import {
-  AntSelect,
-  Checkbox,
-  displayValueOrNA,
-} from '@bjsdistribution/dms-component-library';
+import { AntSelect, Checkbox } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton } from 'antd';
@@ -18,9 +14,9 @@ import {
 } from '../../return-order-table/return-orders-filters/returnstyles';
 import LoadIcon from '../../../../assets/icons/LoadIcon';
 import { usePrintOptionTOggle } from '../../store/store';
-import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
+import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { NavLink } from 'react-router-dom';
-import { formatDate } from '../../shared/utlis';
+import { displayValueOrNA, formatDate } from '../../shared/utlis';
 
 const OrderTable = ({ loadingskeleton }: any) => {
   const [selectedOrders, setSelectedReturnOrder] = useSelectedOrders();
@@ -207,7 +203,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                     <td>{displayValueOrNA(item?.order_number)}</td>
 
                     <td>{displayValueOrNA(item?.box_count)}</td>
-                    <td>{displayValueOrNA(item?.weight)}KG</td>
+                    <td>{displayValueOrNA(item?.weight)} KG</td>
                     <td>{displayValueOrNA(item?.cube)}</td>
                     <td>
                       <AntSelect

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

@@ -67,20 +67,18 @@ const filterReducer = (state: FilterState, action: any): FilterState => {
         ],
       };
 
-    // case 'SET_ACTIONS_FILTER':
-    //   return {
-    //     ...state,
-    //     'x-filters': [
-    //       ...state['x-filters'].filter(
-    //         f => f.field !== 'product_return_action_id'
-    //       ),
-    //       {
-    //         field: 'product_return_action_id',
-    //         op: '=',
-    //         value: action.payload,
-    //       },
-    //     ],
-    //   };
+    case 'SET_STATUS_ORDER_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'status_id'),
+          {
+            field: 'status_id',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
 
     // case 'SET_LOCATION_FILTER':
     //   return {

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

@@ -10,17 +10,20 @@ import DateIcon from '../../../../assets/icons/DateIcon';
 // import StatusIcon from '../../../../assets/icons/StatusIcon';
 import ClientIcon from '../../../../assets/icons/ClientIcon';
 // import AssigneIcon from '../../../../assets/icons/AssigneIcon';
-import { DatePicker, Select, Tooltip } from 'antd';
+import { DatePicker, Select } from 'antd';
 import { useAtom } from '../../../order-view/store';
 import styled from 'styled-components';
 import { filtersReducerAtom } from './ReturnFilterStore';
 import dayjs from 'dayjs';
-import { useCustomerData } from '../../../store';
+import { useCustomerData, useStatusOrderData } from '../../../store';
+import StatusIcon from '../../../../assets/icons/StatusIcon';
+import AssigneIcon from '../../../../assets/icons/AssigneIcon';
 
 const ReturnOrderFilter = () => {
   const [, dispatch] = useAtom(filtersReducerAtom);
   const [customers] = useCustomerData();
   const [selectedDate, setSelectedDate] = useState();
+  const [statusOfOrder] = useStatusOrderData();
   // const zoneOptions = [
   //   { label: 'Zone 1', value: 'zone1' },
   //   { label: 'Zone 2', value: 'zone2' },
@@ -52,6 +55,14 @@ const ReturnOrderFilter = () => {
     value: option?.id,
   }));
 
+  //status of order
+  const orderOptions = statusOfOrder?.map((option: any) => ({
+    label:
+      option?.status_type?.charAt(0)?.toUpperCase() +
+      option?.status_type?.slice(1),
+    value: option?.id,
+  }));
+
   const handleClientChange = (value: any) => {
     console.log(value, 'value');
     dispatch({
@@ -60,6 +71,14 @@ const ReturnOrderFilter = () => {
     });
   };
 
+  const handleStatusOfOrder = (value: any) => {
+    console.log(value, 'value');
+    dispatch({
+      type: 'SET_STATUS_ORDER_FILTER',
+      payload: value,
+    });
+  };
+
   return (
     <>
       <StyledFiter>
@@ -88,31 +107,21 @@ const ReturnOrderFilter = () => {
               </StyledDatePicker>
             </div>
 
-            {/* <div className="datefilter">
+            <div className="datefilter">
               <div className="dateiconcontainer">
                 <StatusIcon />
               </div>
               <StyledAntSelect>
                 <Select
-                  options={zoneOptions}
+                  options={orderOptions}
                   className="custom-select"
                   placeholder="Status of Order"
-                  onChange={() => {}}
-                  style={{ minWidth: '115px' }}
-                  maxTagCount={0}
-                  maxTagPlaceholder={(omittedValues: any) => (
-                    <Tooltip
-                      overlayStyle={{ pointerEvents: 'none' }}
-                      title={omittedValues
-                        .map(({ label }: any) => label)
-                        .join(', ')}
-                    >
-                      <span>{`${omittedValues.length} selected`}</span>
-                    </Tooltip>
-                  )}
+                  onChange={handleStatusOfOrder}
+                  style={{ minWidth: '130px' }}
+                  allowClear
                 />
               </StyledAntSelect>
-            </div> */}
+            </div>
             <div className="datefilter">
               <div className="dateiconcontainer">
                 <ClientIcon />
@@ -124,25 +133,15 @@ const ReturnOrderFilter = () => {
                   placeholder="Client"
                   onChange={handleClientChange}
                   style={{ width: '125px', border: 'none' }}
-                  maxTagCount={0}
-                  maxTagPlaceholder={(omittedValues: any) => (
-                    <Tooltip
-                      overlayStyle={{ pointerEvents: 'none' }}
-                      title={omittedValues
-                        .map(({ label }: any) => label)
-                        .join(', ')}
-                    >
-                      <span>{`${omittedValues.length} selected`}</span>
-                    </Tooltip>
-                  )}
+                  allowClear
                 />
               </StyledAntSelect>
             </div>
-            {/* <div className="datefilter">
+            <div className="datefilter">
               <div className="dateiconcontainer">
                 <AssigneIcon />
               </div>
-              <StyledAntSelect>
+              {/* <StyledAntSelect>
                 <Select
                   options={zoneOptions}
                   className="custom-select"
@@ -161,8 +160,8 @@ const ReturnOrderFilter = () => {
                     </Tooltip>
                   )}
                 />
-              </StyledAntSelect>
-            </div> */}
+              </StyledAntSelect> */}
+            </div>
           </LeftSideConatiner>
         </StyledFIlterELements>
         <TableFilters />

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -1,12 +1,14 @@
 import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import { Empty } from 'antd';
 import { useAtom } from 'jotai';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Skeleton } from 'antd';
 import {
   useGroupedPayload,
+  useLocationData,
   useNewReturnPayload,
   useReturnPayload,
+  useSelectAll,
   useSelectedOrders,
 } from '../../../store';
 import { useReturnData } from '../../../order-view/store';
@@ -17,22 +19,23 @@ import DownIcon from '../../../../assets/icons/DownIcon';
 import { useLoading, usePrintOptionTOggle } from '../../store/store';
 import { ApiResponse } from '../../../types';
 import { filtersReducerAtom } from '../../header-filters/filterStore';
-import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
 import { displayValueOrNA } from '../../shared/utlis';
-const ReturnOrderTable = ({ loadingskeleton }: any) => {
+import PrintDropDownReturn from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
+const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
 
   const [selectedReturnOrder, setSelectedReturnOrder] = useSelectedOrders();
-  const [selectAll, setSelectAll] = useState(false);
+  const [selectAll, setSelectAll] = useSelectAll();
   const { 'x-filters': filters, 'x-pagination': pagination } = state;
   const [returnData, setReturnData] = useReturnData();
-  const [, setLoading] = useLoading();
+  const [load, setLoading] = useLoading();
   const dropdownRefParent = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [printToogle, setPrintToggle] = usePrintOptionTOggle();
   const [createReturn, setReturnPayload] = useReturnPayload();
   const [newpayload, setNewPayload] = useNewReturnPayload();
   const [, setGrouped] = useGroupedPayload();
+  const [locationData] = useLocationData();
 
   const OpenDropDown = (index: number) => {
     setPrintToggle(prevIndex => (prevIndex === index ? null : index));
@@ -54,7 +57,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     }
   };
 
-  const { data: fetchedOrderData, loading: staticDataLoading } = useApiHook<
+  const { data: fetchedOrderData, loading: returnDataLoad } = useApiHook<
     ApiResponse
   >({
     endpoint: '/return_order_products/',
@@ -64,11 +67,31 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
   });
 
   useEffect(() => {
-    setLoading(staticDataLoading);
+    setLoading(returnDataLoad);
     if (fetchedOrderData && fetchedOrderData?.data) {
       setReturnData(fetchedOrderData?.data);
     }
-  }, [fetchedOrderData, staticDataLoading]);
+  }, [fetchedOrderData, returnDataLoad]);
+
+  useEffect(() => {
+    setLoading(returnDataLoad);
+
+    if (fetchedOrderData && fetchedOrderData?.data && locationData) {
+      const updatedReturnData = fetchedOrderData.data.map(returnItem => {
+        const matchingLocation = locationData.find(
+          (location: any) => location?.token === returnItem?.return_location
+        );
+        return {
+          ...returnItem,
+          new_location: matchingLocation
+            ? matchingLocation.location_name
+            : null,
+        };
+      });
+
+      setReturnData(updatedReturnData);
+    }
+  }, [fetchedOrderData, returnDataLoad, locationData]);
 
   const handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
@@ -78,23 +101,27 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
           id: loc.id,
           return_locations: loc?.return_locations,
           return_location: loc?.return_location,
-          products: loc.id,
+          products: loc?.legacy_product_id,
           order_product_return_action: loc?.order_product_return_action,
-          return_location_token: loc?.return_locations?.token,
+          return_location_token: loc?.return_location,
+          new_location: loc?.new_location,
         }))
       );
       setNewPayload(
         returnData?.map((loc: any) => ({
           id: loc.id,
           account_number: createReturn?.account_number,
-          customer_id: createReturn?.customer_id,
-          products: loc.id,
-          return_action: loc?.order_product_return_action?.type || null,
-          return_location_token: loc?.return_locations?.token,
+          customer_id: +createReturn?.customer_id,
+          products: [loc?.legacy_product_id],
+          return_action: [loc?.order_product_return_action?.type] || null,
+          return_location_token: loc?.return_location || null,
+          new_location: loc?.new_location,
         }))
       );
     } else {
       setSelectedReturnOrder([]);
+      setNewPayload([]);
+      setGrouped([]);
     }
   };
 
@@ -102,13 +129,17 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
     id: any,
     return_location: any,
     return_locations: any,
-    order_product_return_action: any
+    order_product_return_action: any,
+    new_location: any,
+    legacy_product_id: any
   ) => {
     setSelectedReturnOrder((prevSelectedLocations: any) => {
       const isSelected = prevSelectedLocations?.some(
         (loc: any) => loc.id === id
       );
 
+      console.log(new_location, 'new_location');
+
       if (isSelected) {
         const updatedSelectedLocations = prevSelectedLocations.filter(
           (loc: any) => loc.id !== id
@@ -116,9 +147,10 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
 
         setReturnPayload(prevState => ({
           ...prevState,
-          products: id,
+          products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          return_location_token: return_location || null,
+          new_location: new_location,
         }));
 
         setNewPayload((prevPayload: any) =>
@@ -130,19 +162,20 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
         const newReturnPayload = {
           id,
           account_number: createReturn?.account_number,
-          customer_id: createReturn?.customer_id,
-          products: id,
-          return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          customer_id: +createReturn?.customer_id,
+          products: [legacy_product_id],
+          return_action: [order_product_return_action?.type] || null,
+          return_location_token: return_location || null,
         };
 
         setNewPayload((prevPayload: any) => [...prevPayload, newReturnPayload]);
 
         setReturnPayload(prevState => ({
           ...prevState,
-          products: id,
+          products: legacy_product_id,
           return_action: order_product_return_action?.type || null,
-          return_location_token: return_locations?.token || null,
+          return_location_token: return_location || null,
+          new_location: new_location,
         }));
 
         return [
@@ -152,6 +185,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
             return_location,
             return_locations,
             order_product_return_action,
+            new_location,
           },
         ];
       }
@@ -217,7 +251,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
             </tr>
           </thead>
           <tbody>
-            {loadingskeleton ? (
+            {load ? (
               <tr>
                 <td colSpan={6}>
                   <Skeleton active />
@@ -237,6 +271,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                 <tr key={item.id}>
                   <td>
                     <Checkbox
+                      className="custom-check"
                       checked={selectedReturnOrder?.some(
                         (selectedInvoice: any) =>
                           selectedInvoice?.id === item.id
@@ -246,19 +281,24 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           item.id,
                           item.return_location,
                           item.return_locations,
-                          item.order_product_return_action
+                          item.order_product_return_action,
+                          item.new_location,
+                          item.legacy_product_id
                         )
                       }
                     />
                   </td>
 
                   <td>
-                    {item?.orders_products_stock?.location ? null : (
-                      <div className="awaiting">Awating</div>
+                    {item?.orders_products_stock?.location !== null &&
+                    item?.orders_products_stock?.location !== undefined ? (
+                      item.orders_products_stock.location
+                    ) : (
+                      <div className="awaiting">Awaiting</div>
                     )}
                   </td>
 
-                  <td> {displayValueOrNA(item?.return_location)}</td>
+                  <td> {displayValueOrNA(item?.new_location)}</td>
 
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -286,7 +326,11 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                   <td>{displayValueOrNA(item?.weight)}KG</td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
-                  <td>N/A</td>
+                  <td>
+                    {displayValueOrNA(
+                      item?.order_product_returns?.collected_at
+                    )}
+                  </td>
                   <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
                   <td>
                     <ul className="actionbox">
@@ -302,7 +346,7 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           <DownIcon />
                           {printToogle == index && (
                             <div ref={dropdownRef}>
-                              <PrintDropDown />
+                              <PrintDropDownReturn />
                             </div>
                           )}
                         </li>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -245,6 +245,9 @@ export const StyledTable = styled.table`
           width: fit-content;
         }
       }
+      .custom-check {
+        position: relative;
+      }
       .emailInvoiceNo {
         padding-left: 0px;
       }

package/src/components/order-daily-overview/table-view/Pagination.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 import {
   StyledContainer,
   StyledContentWrapper,
+  // StyledDropdown,
   StyledInfoBox,
   StyledLabel,
   StyledPaginationItem,
   StyledPaginationWrapper,
+  // StyledDropdownData,
 } from './PaginationStyle';
 import PrevIcon from '../../../assets/icons/PrevIcon';
 import NextIcon from '../../../assets/icons/NextIcon';
 import { useAtom } from 'jotai';
-import { filtersReducerAtom } from '../store/filterStore';
 import { Select } from 'antd';
+import { filtersReducerAtom } from '../return-after-table/table-filters/ReturnFilterStore';
 
 const PAGE_SIZE_OPTIONS = [50, 100, 150];
 const MAX_PAGES_TO_SHOW = 5;
@@ -46,18 +48,17 @@ const Pagination: React.FC<any> = ({
       type: 'SET_PERPAGE',
       payload: newItemsPerPage,
     });
-  
+
     // Reset to the first page
     dispatch({
       type: 'SET_PAGE',
       payload: 1,
     });
-  
+
     onPageChange(1);
     onItemsPerPageChange(newItemsPerPage);
   };
 
-
   const getPageNumbers = (
     currentPage: number,
     totalPages: number
@@ -96,16 +97,16 @@ const Pagination: React.FC<any> = ({
         </StyledInfoBox>
         <StyledLabel>Row on Page</StyledLabel>
         <Select
-  value={itemsPerPage}
-  onChange={handleItemsPerPageChange}
-  style={{ width: 75 }} 
->
-  {PAGE_SIZE_OPTIONS.map(option => (
-    <Select.Option key={option} value={option}>
-      {option}
-    </Select.Option>
-  ))}
-</Select>
+          value={itemsPerPage}
+          onChange={handleItemsPerPageChange}
+          style={{ width: 75 }}
+        >
+          {PAGE_SIZE_OPTIONS.map(option => (
+            <Select.Option key={option} value={option}>
+              {option}
+            </Select.Option>
+          ))}
+        </Select>
         <StyledPaginationWrapper>
           <StyledPaginationItem
             onClick={() => handlePageChange(currentPage - 1)}