@bjsdistribution/dms-client-return 0.0.9 → 0.0.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/common/custom-switch/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { options } from '../../components/fakeData';
 import SwitchSelector from 'react-switch-selector';
+import { notification } from 'antd';
 
 interface CustomSwitchSelectorProps {
   onSwitchChange: (newValue: string) => void;
@@ -18,10 +19,17 @@ const CustomSwitchSelector: React.FC<CustomSwitchSelectorProps> = ({
     if (typeof selectedOptionValue === 'string') {
       onSwitchChange(selectedOptionValue);
     } else {
-      console.error(
-        'Unexpected type for selectedOptionValue:',
-        typeof selectedOptionValue
-      );
+      // console.error(
+      //   'Unexpected type for selectedOptionValue:',
+      //   typeof selectedOptionValue
+      // );
+
+      notification.error({
+        message: 'Error',
+        description:
+          `${typeof selectedOptionValue}` ||
+          'Unexpected type for selectedOptionValue.',
+      });
     }
   };
 

package/src/components/order-daily-overview/filters/FilterStyle.tsx

@@ -44,9 +44,9 @@ export const LeftSideConatiner = styled.div`
     padding: 6px 8px;
     justify-content: center;
     align-items: center;
-    gap: 8px;
+    gap: 2px;
     border-radius: 20px;
-    border: 1px solid var(--tonal-brown-10, #edebe8);
+    border: 1px solid #edebe8;
 
     .dateiconcontainer {
       display: flex;
@@ -70,17 +70,6 @@ export const LeftSideConatiner = styled.div`
       font-weight: 400;
       line-height: 16px; /* 123.077% */
     }
-    .roundbox {
-      display: flex;
-      width: 18px;
-      height: 18px;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      border-radius: 18px;
-      background: #fff;
-      box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
-    }
   }
 `;
 

package/src/components/order-daily-overview/filters/Filters.tsx

@@ -14,6 +14,7 @@ import {
   useCountData,
   useRoutesTable,
 } from '../store/store';
+import { notification } from 'antd';
 // import { useAtom } from 'jotai';
 
 const Filters = () => {
@@ -46,7 +47,12 @@ const Filters = () => {
         setPaginationObject(rest);
         setCount(count);
       } else {
-        console.error('Pagination data is null');
+        // console.error('Pagination data is null');
+
+        notification.error({
+          message: 'Error',
+          description: 'Pagination data is null',
+        });
       }
     }
   }, [apiLoading]);

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

@@ -47,7 +47,7 @@ function HeaderFilter() {
     if (fetchedStaticData && fetchedStaticData?.data) {
       setActionType(
         fetchedStaticData?.data?.flatMap(
-          (i: any) => i.order_contact_action_type
+          (i: any) => i?.order_product_return_action
         )
       );
     }

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

@@ -9,7 +9,13 @@ import {
   Wrapper,
 } from './Styledfilters';
 import { atom, useAtom } from 'jotai';
-import { useActionType, useCustomerData, useLocationData } from '../../store';
+import {
+  useActionType,
+  useCustomerData,
+  useLocationData,
+  useNewReturnPayload,
+  useReturnPayload,
+} from '../../store';
 import { filtersReducerAtom } from './filterStore';
 import {
   useSelectedAction,
@@ -39,6 +45,10 @@ function SelectionFilter() {
   const [, setClientLabel] = useTableName();
   const [, setName] = useState<any>();
   const [isButtonEnabled, setIsButtonEnabled] = useState(false);
+  const [, setReturnPayload] = useReturnPayload();
+  const [storedAccNumber, setStoredAccNumber] = useState<any>();
+  const [storedCustomerId, setStoredCustomerId] = useState<any>();
+  const [, setNewPayload] = useNewReturnPayload();
 
   //client options
   const clientOptions = customers?.map((option: any) => ({
@@ -48,6 +58,8 @@ function SelectionFilter() {
     value: `${option?.id}_${option?.uuid}`,
     id: option?.id,
     uuid: option?.uuid,
+    account_number: option?.account_number,
+    gsit_customer_id: option?.gsit_customer_id,
   }));
 
   const actionTypeOptions = actionType?.map((option: any) => ({
@@ -62,14 +74,27 @@ function SelectionFilter() {
 
   //client change
   const handleSelectChange = (value: unknown, option: DefaultOptionType) => {
+    setNewPayload([]);
     console.log(value, 'value');
     const selectedLabel = option?.label as string;
     const selectedValue = option?.id as number;
     const selectedUuids = option?.uuid as string;
+    const selectAccountNumber = option.account_number as string;
+    const selectedCustomerId = option.gsit_customer_id as number;
     setSelectedClient(selectedValue);
     setName(selectedLabel);
     localStorage.setItem('clientName', selectedLabel);
     localStorage.setItem('clientId', selectedValue.toString());
+    localStorage.setItem('account_number', selectAccountNumber);
+    localStorage.setItem('customer_id', selectedCustomerId.toString());
+    const storedAccNo = localStorage.getItem('account_number');
+    const storedCustomerId = localStorage.getItem('customer_id');
+    setReturnPayload((prevState: any) => ({
+      ...prevState,
+      account_number: storedAccNo,
+      customer_id: storedCustomerId,
+    }));
+    console.log(selectedUuids, 'selectedUuids');
     const filteredSubLocations = locationData
       ?.filter((subCat: any) => subCat?.customer_id === selectedUuids)
       .map((subCat: any) => ({
@@ -81,6 +106,24 @@ function SelectionFilter() {
     setUuid('');
   };
 
+  useEffect(() => {
+    const accountNumberFromStorage = localStorage.getItem('account_number');
+    const customerIdFromStorage = localStorage.getItem('customer_id');
+    if (accountNumberFromStorage) {
+      setStoredAccNumber(accountNumberFromStorage);
+    }
+    if (customerIdFromStorage) {
+      setStoredCustomerId(customerIdFromStorage);
+    }
+    if (storedAccNumber && storedCustomerId) {
+      setReturnPayload((prevState: any) => ({
+        ...prevState,
+        account_number: storedAccNumber,
+        customer_id: storedCustomerId,
+      }));
+    }
+  }, [storedAccNumber, storedCustomerId]);
+
   useEffect(() => {}, [getUuid, filteredLocationOptions]);
 
   //location change
@@ -153,6 +196,8 @@ function SelectionFilter() {
     }
   }, [storedName, selectedFilterValue, selectedLocationValue]);
 
+  console.log(filteredLocationOptions, 'filteredLocationOptions');
+
   console.log('check', storedName, selectedFilterValue, selectedLocationValue);
   return (
     <Wrapper>

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

@@ -4,14 +4,17 @@ import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
 import OrderTable from './table/OrderTable';
 import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
-import { useReturnAfterOrderData } from '../../order-view/store';
+import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
 import { useLoading } from '../store/store';
 import { ApiResponse } from '../common/interface';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { filtersReducerAtom } from './table-filters/ReturnFilterStore';
 
 const ReturnAfterTable = () => {
-  const [returnAfterOrder, setReturnOrderData] = useReturnAfterOrderData();
+  const [, setReturnOrderData] = useReturnAfterOrderData();
   const [, setLoading] = useLoading();
+  const [state] = useAtom(filtersReducerAtom);
+  const { 'x-filters': filters } = state;
 
   const {
     data: fetchedReturnOrderData,
@@ -19,6 +22,7 @@ const ReturnAfterTable = () => {
   } = useApiHook<ApiResponse>({
     endpoint: '/return_orders/?skip_filters=0',
     method: 'GET',
+    filters: filters,
   });
   useEffect(() => {
     setLoading(staticDataLoading);
@@ -26,9 +30,6 @@ const ReturnAfterTable = () => {
       setReturnOrderData(fetchedReturnOrderData?.data);
     }
   }, [fetchedReturnOrderData, staticDataLoading]);
-
-  console.log('returnAfterOrder', returnAfterOrder);
-
   return (
     <div>
       <DashBoardWrapper>

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

@@ -0,0 +1,130 @@
+import { atom, useAtom } from 'jotai';
+// import { formatDate } from '../shared/utlis';
+import { format } from 'date-fns';
+
+const date = atom(new Date());
+export const usedate = () => {
+  return useAtom(date);
+};
+
+interface Filter {
+  field: string;
+  op: string;
+  value: any;
+}
+
+interface Pagination {
+  page: number;
+  per_page: number;
+}
+
+interface FilterState {
+  'x-filters': Filter[];
+  'x-pagination': Pagination;
+}
+
+const initialState: FilterState = {
+  'x-filters': [],
+  'x-pagination': { page: 1, per_page: 50 },
+};
+
+const filterReducer = (state: FilterState, action: any): FilterState => {
+  switch (action.type) {
+    case 'SET_DATE_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'created_at'),
+          {
+            field: 'created_at',
+            op: '>=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T00:00:00+00:00`,
+          },
+          {
+            field: 'created_at',
+            op: '<=',
+            value: `${format(
+              new Date(action.payload),
+              'yyyy-MM-dd'
+            )}T23:59:59+00:00`,
+          },
+        ],
+      };
+
+    case 'SET_CLIENT_FILTER':
+      return {
+        ...state,
+        'x-filters': [
+          ...state['x-filters'].filter(f => f.field !== 'customer_id'),
+          {
+            field: 'customer_id',
+            op: '=',
+            value: action.payload,
+          },
+        ],
+      };
+
+    // 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_LOCATION_FILTER':
+    //   return {
+    //     ...state,
+    //     'x-filters': [
+    //       ...state['x-filters'].filter(f => f.field !== 'return_location'),
+    //       {
+    //         field: 'return_location',
+    //         op: 'in',
+    //         value: action.payload,
+    //       },
+    //     ],
+    //   };
+
+    case 'SET_PAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          page: action.payload,
+        },
+      };
+
+    case 'SET_PERPAGE':
+      return {
+        ...state,
+        'x-pagination': {
+          ...state['x-pagination'],
+          per_page: action.payload,
+        },
+      };
+    case 'CLEAR_FILTERS':
+      return {
+        ...state,
+      };
+    default:
+      return state;
+  }
+};
+
+const filtersStateAtom = atom(initialState);
+
+export const filtersReducerAtom = atom(
+  get => get(filtersStateAtom),
+  (get, set, action) =>
+    set(filtersStateAtom, filterReducer(get(filtersStateAtom), action))
+);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   LeftSideConatiner,
   StyledFIlterELements,
@@ -7,62 +7,59 @@ import {
 import TableFilters from './TableFilters';
 import FilterIcon from '../../../../assets/icons/FilterIcon';
 import DateIcon from '../../../../assets/icons/DateIcon';
-import DownArrowIcon from '../../../../assets/icons/DownArrowIcon';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
 import ClientIcon from '../../../../assets/icons/ClientIcon';
 import AssigneIcon from '../../../../assets/icons/AssigneIcon';
-import { DatePicker, DatePickerProps } from 'antd';
-import {
-  useOrderDetails,
-  usePrevOrderDetails,
-} from '../../../order-view/store';
-import dayjs from 'dayjs';
+import { DatePicker, Select, Tooltip } 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';
 
 const ReturnOrderFilter = () => {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-  const [prevOrderDetails] = usePrevOrderDetails();
+  const [, dispatch] = useAtom(filtersReducerAtom);
+  const [customers] = useCustomerData();
+  const [selectedDate, setSelectedDate] = useState();
+  const zoneOptions = [
+    { label: 'Zone 1', value: 'zone1' },
+    { label: 'Zone 2', value: 'zone2' },
+    { label: 'Zone 3', value: 'zone3' },
+    { label: 'Zone 4', value: 'zone4' },
+    { label: 'Zone 5', value: 'zone5' },
+  ];
 
-  const actionDate = orderDetails?.action_date
-    ? new Date(orderDetails?.action_date)
-    : null;
-
-  const onChange: DatePickerProps['onChange'] = (
-    date: any,
-    _dateString: any
-  ) => {
-    const selectedDate = date?.format('YYYY-MM-DDTHH:mm:ss');
-    if (
-      selectedDate !== undefined &&
-      prevOrderDetails.action_date !== undefined
-    ) {
-      if (
-        new Date(selectedDate).toLocaleDateString() ===
-        new Date(prevOrderDetails.action_date!).toLocaleDateString()
-      ) {
-        setOrderDetails(prev => {
-          return {
-            ...prev,
-            action_date: prevOrderDetails.action_date,
-          };
-        });
-      } else {
-        setOrderDetails(prev => {
-          return {
-            ...prev,
-            action_date: selectedDate,
-          };
-        });
-      }
-    } else {
-      setOrderDetails(prev => {
-        return {
-          ...prev,
-          action_date: null,
-        };
+  // date change here
+  const handleDateChange = (date: any | null) => {
+    setSelectedDate(date ? date?.$d : null);
+    console.log(selectedDate, 'selected');
+  };
+  useEffect(() => {
+    if (selectedDate) {
+      console.log(selectedDate, 'selected');
+      dispatch({
+        type: 'SET_DATE_FILTER',
+        payload: selectedDate,
       });
     }
+  }, [selectedDate]);
+
+  //client options
+  const clientOptions = customers?.map((option: any) => ({
+    label:
+      option?.customer_name?.charAt(0)?.toUpperCase() +
+      option?.customer_name?.slice(1),
+    value: option?.id,
+  }));
+
+  const handleClientChange = (value: any) => {
+    console.log(value, 'value');
+    dispatch({
+      type: 'SET_CLIENT_FILTER',
+      payload: value,
+    });
   };
+
   return (
     <>
       <StyledFiter>
@@ -81,41 +78,90 @@ const ReturnOrderFilter = () => {
               <StyledDatePicker>
                 <DatePicker
                   className="custom-datepicker"
-                  onChange={onChange}
-                  value={actionDate === null ? actionDate : dayjs(actionDate)}
+                  onChange={handleDateChange}
+                  style={{ width: '100px' }}
+                  value={selectedDate ? dayjs(selectedDate) : null}
                   format="DD/MM/YY"
                   placeholder="Date"
+                  needConfirm
                 />
               </StyledDatePicker>
             </div>
 
             <div className="datefilter">
               <div className="dateiconcontainer">
-                {' '}
-                <StatusIcon />{' '}
-              </div>
-              <div className="datetext">Status of Order</div>
-              <div className="roundbox">
-                <DownArrowIcon />{' '}
+                <StatusIcon />
               </div>
+              <StyledAntSelect>
+                <Select
+                  options={zoneOptions}
+                  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>
+                  )}
+                />
+              </StyledAntSelect>
             </div>
             <div className="datefilter">
               <div className="dateiconcontainer">
                 <ClientIcon />
               </div>
-              <div className="datetext">Client</div>
-              <div className="roundbox">
-                <DownArrowIcon />
-              </div>
+              <StyledAntSelect>
+                <Select
+                  options={clientOptions}
+                  className="custom-select"
+                  placeholder="Client"
+                  onChange={handleClientChange}
+                  style={{ width: '125px' }}
+                  maxTagCount={0}
+                  maxTagPlaceholder={(omittedValues: any) => (
+                    <Tooltip
+                      overlayStyle={{ pointerEvents: 'none' }}
+                      title={omittedValues
+                        .map(({ label }: any) => label)
+                        .join(', ')}
+                    >
+                      <span>{`${omittedValues.length} selected`}</span>
+                    </Tooltip>
+                  )}
+                />
+              </StyledAntSelect>
             </div>
             <div className="datefilter">
               <div className="dateiconcontainer">
                 <AssigneIcon />
               </div>
-              <div className="datetext">Assignee</div>
-              <div className="roundbox">
-                <DownArrowIcon />
-              </div>
+              <StyledAntSelect>
+                <Select
+                  options={zoneOptions}
+                  className="custom-select"
+                  placeholder="Asignee"
+                  onChange={() => {}}
+                  style={{ minWidth: '100px' }}
+                  maxTagCount={0}
+                  maxTagPlaceholder={(omittedValues: any) => (
+                    <Tooltip
+                      overlayStyle={{ pointerEvents: 'none' }}
+                      title={omittedValues
+                        .map(({ label }: any) => label)
+                        .join(', ')}
+                    >
+                      <span>{`${omittedValues.length} selected`}</span>
+                    </Tooltip>
+                  )}
+                />
+              </StyledAntSelect>
             </div>
           </LeftSideConatiner>
         </StyledFIlterELements>
@@ -128,8 +174,42 @@ const ReturnOrderFilter = () => {
 const StyledDatePicker = styled.div`
   .custom-datepicker {
     border: none;
+  }
+`;
+
+// const DropdownContainer = styled.div``;
+
+export const StyledAntSelect = styled.div`
+  .custom-select {
+    border: none;
     width: 80px;
   }
+  :where(.css-dev-only-do-not-override-m4timi).ant-select-single:not(.ant-select-customize-input)
+    .ant-select-selector {
+    padding: 0 5px;
+  }
+
+  :where(.css-dev-only-do-not-override-m4timi).ant-select-outlined:not(.ant-select-customize-input)
+    .ant-select-selector {
+    border: none;
+  }
+  .roundbox {
+    display: flex;
+    width: 18px;
+    height: 18px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+    left: 359px;
+    position: absolute;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
+    top: 16px;
+  }
 `;
 
 export default ReturnOrderFilter;

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

@@ -9,11 +9,12 @@ import RightFilters from './RightFilters';
 import { useParams } from 'react-router-dom';
 
 const ReturnFilter = () => {
-  const { selectedClient } = useParams();
+  const { clientName } = useParams();
+
   return (
     <>
       <StyledFiter>
-        <Text> {selectedClient}</Text>
+        <Text> {clientName}</Text>
         <StyledFIlterELements>
           <StyledTableFilter />
         </StyledFIlterELements>