@bjsdistribution/dms-client-return 0.1.21-prod → 0.1.22-dev

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.21-prod",
+  "version": "0.1.22-dev",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/common/custom-input/CustomInput.tsx

@@ -0,0 +1,24 @@
+import { Input } from '@bjsdistribution/dms-component-library';
+import React, { InputHTMLAttributes } from 'react';
+import styled from 'styled-components';
+
+function GenericInput(
+  props: InputHTMLAttributes<HTMLInputElement> & { hasError?: boolean }
+) {
+  return <StyledInput {...props} />;
+}
+
+const StyledInput = styled(Input)<{ hasError?: boolean }>`
+  height: 30px;
+  border: 1px solid ${({ hasError }) => (hasError ? 'red' : '#ccc')};
+  &:hover {
+    background: #ffffff;
+    outline: none;
+    border-color: #7b7874;
+  }
+  &:focus {
+    border-color: ${({ hasError }) => (hasError ? 'red' : '#888')};
+  }
+`;
+
+export default GenericInput;

package/src/components/client-portal/DateFilterStore.ts

@@ -1,3 +1,4 @@
+import dayjs from 'dayjs';
 import { atom } from 'jotai';
 
 interface Filter {
@@ -17,7 +18,7 @@ interface FilterState {
 }
 
 const initialState: FilterState = {
-  'x-filters': [],
+  'x-filters': [{ field: 'order_status', op: '=', value: 'complete' }],
   'x-pagination': { page: 1, per_page: 50 },
 };
 
@@ -27,35 +28,82 @@ const overviewFilterReducer = (
 ): FilterState => {
   switch (action.type) {
     case 'SET_CP_DATE_FILTER': {
-      const { startDate, endDate } = action.payload;
+      const { startDate, endDate, status } = action.payload;
+
+      let fieldName = 'created_at';
+      if (status === 'return_completed') {
+        fieldName = 'action_date';
+      }
 
       const filters: Filter[] = [];
 
-      if (startDate) {
+      if (startDate && endDate && startDate === endDate) {
         filters.push({
-          field: 'created_at',
+          field: fieldName,
           op: '>=',
           value: `${startDate}T00:00:00+00:00`,
         });
-      }
+        filters.push({
+          field: fieldName,
+          op: '<=',
+          value: `${startDate}T23:59:59+00:00`,
+        });
+      } else if (startDate && !endDate) {
+        const nextDay = dayjs(startDate)
+          .add(1, 'day')
+          .format('YYYY-MM-DD');
 
-      if (endDate) {
         filters.push({
-          field: 'created_at',
+          field: fieldName,
+          op: '>=',
+          value: `${startDate}T00:00:00+00:00`,
+        });
+        filters.push({
+          field: fieldName,
           op: '<=',
-          value: `${endDate}T23:59:59+00:00`,
+          value: `${nextDay}T00:00:00+00:00`,
         });
+      } else {
+        if (startDate) {
+          filters.push({
+            field: fieldName,
+            op: '>=',
+            value: `${startDate}T00:00:00+00:00`,
+          });
+        }
+
+        if (endDate) {
+          filters.push({
+            field: fieldName,
+            op: '<=',
+            value: `${endDate}T23:59:59+00:00`,
+          });
+        }
       }
 
       return {
         ...state,
         'x-filters': [
-          ...state['x-filters'].filter(f => f.field !== 'created_at'),
+          ...state['x-filters'].filter(
+            f => f.field !== 'created_at' && f.field !== 'action_date'
+          ),
           ...filters,
         ],
       };
     }
 
+    case 'CLEAR_CP_DATE_FILTER': {
+      console.log('Before clearing:', state['x-filters']);
+      const updatedFilters = state['x-filters'].filter(
+        f => f.field !== 'created_at' && f.field !== 'action_date'
+      );
+
+      return {
+        ...state,
+        'x-filters': updatedFilters,
+      };
+    }
+
     //client portal
     case 'SET_SCHEDULED_RETURN_FILTER':
       if (action.payload) {

package/src/components/client-portal/OutstandingTable.tsx

@@ -146,7 +146,7 @@ const OutstandingTable = () => {
     if (clientPortal && debouncedSearchText === '') {
       fetchData();
     }
-  }, [JSON.stringify(modifiedFilters), debouncedSearchText]);
+  }, [JSON.stringify(modifiedFilters), debouncedSearchText, pagination]);
 
   useEffect(() => {
     setLoading(returnDataLoad);

package/src/components/client-portal/ReturnStatus.tsx

@@ -3,18 +3,21 @@ import {
   device,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import {
   useActiveCardId,
   useAtom,
   useClientPortal,
+  useEndDate,
   useSearchAfterText,
   useSearchText,
+  useStartDate,
   useStatsCPCount,
 } from '../store';
 import { useNavigate, useParams } from 'react-router-dom';
 import { dateFilterCPReducer } from './DateFilterStore';
+import dayjs from 'dayjs';
 // import dayjs from 'dayjs';
 export type returnCountType = {
   outstanding_count: number | null;
@@ -37,14 +40,15 @@ const ReturnStatus = () => {
   const [count, setCount] = useStatsCPCount();
   const [clientPortal] = useClientPortal();
   const [debouncedSearchText, setOutstandingSearch] = useSearchText();
-
   const cleanedFilters = filters.filter(f => f.field !== 'order_status');
-
+  const [startDate, setStartDate] = useStartDate();
+  const [endDate, setEndDate] = useEndDate();
+  const [previousStatus, setPreviousStatus] = useState<string | null>(null);
   const [
     debouncedSearchAfterText,
     setDebouncedSearchText,
   ] = useSearchAfterText();
-  const { data: statsData, loading: apiLoading, fetchData } = useAxios<{
+  const { data: statsData, fetchData } = useAxios<{
     data: returnCountType[];
   }>({
     endpoint: `v1/portal/return/stats/`,
@@ -66,50 +70,65 @@ const ReturnStatus = () => {
 
   useEffect(() => {
     if (
-      (clientPortal &&
-        debouncedSearchAfterText === '' &&
-        status == 'scheduled_for_return') ||
-      status == 'return_completed'
+      clientPortal &&
+      debouncedSearchAfterText === '' &&
+      (status == 'scheduled_for_return' || status == 'return_completed')
     ) {
       fetchData();
     }
   }, [debouncedSearchAfterText, debouncedSearchText, JSON.stringify(filters)]);
 
   useEffect(() => {
-    if (statsData && statsData?.data) {
-      const data = statsData?.data;
-      setCount(data);
+    if (statsData?.data && typeof statsData?.data === 'object') {
+      setCount(statsData?.data);
     }
-  }, [apiLoading]);
-
-  const returnCounts = [
-    {
-      id: 1,
-      icon: 'outstanding_return',
-      status: 'outstanding_return',
-      count: count?.outstanding_count,
-      label: 'Outstanding Return',
-    },
-    {
-      id: 2,
-      icon: 'scheduled_for_return',
-      status: 'scheduled_for_return',
-      count: count?.scheduled_count,
-      label: 'Scheduled For Return',
-    },
-    {
-      id: 3,
-      icon: 'return_completed',
-      status: 'return_completed',
-      count: count?.completed_count,
-      label: 'Return Completed',
-    },
-  ];
+  }, [statsData]);
 
+  const returnCounts = useMemo(
+    () => [
+      // {
+      //   id: 1,
+      //   icon: 'outstanding_return',
+      //   status: 'outstanding_return',
+      //   count: count?.outstanding_count,
+      //   label: 'Outstanding Return',
+      // },
+      // {
+      //   id: 2,
+      //   icon: 'scheduled_for_return',
+      //   status: 'scheduled_for_return',
+      //   count: count?.scheduled_count,
+      //   label: 'Scheduled For Return',
+      // },
+      {
+        id: 3,
+        icon: 'return_completed',
+        status: 'return_completed',
+        count: count?.completed_count,
+        label: 'Return Completed',
+      },
+    ],
+    [count]
+  );
+
+  //handling status change
   const handleCardClick = (item: any) => {
     if (activeCardId === item?.id) {
       return;
     }
+
+    const newStatus = item?.status;
+
+    if (
+      previousStatus === 'return_completed' &&
+      newStatus !== 'return_completed'
+    ) {
+      dispatch({ type: 'CLEAR_CP_DATE_FILTER' });
+      setStartDate(null);
+      setEndDate(null);
+    }
+    setPreviousStatus(newStatus);
+
     setActiveCardId(item?.id);
     //for dev
     navigate(`/return/${item?.status}`);
@@ -117,26 +136,47 @@ const ReturnStatus = () => {
     //navigate(`/${item?.status}`);
     setOutstandingSearch('');
     setDebouncedSearchText('');
-    if (item?.status == 'scheduled_for_return') {
+
+    let formattedStart = startDate?.format('YYYY-MM-DD');
+    let formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
+
+    if (newStatus === 'scheduled_for_return') {
       dispatch({
         type: 'SET_SCHEDULED_RETURN_FILTER',
         payload:
           'awaiting confirmation,awaiting route,routed,confirmed,on hold,subcontracted',
       });
-      dispatch({
-        type: 'SET_PAGE',
-        payload: 1,
-      });
     }
-    if (item?.status == 'return_completed') {
+
+    if (newStatus === 'return_completed') {
       dispatch({
         type: 'SET_RETURN_COMPLETED_FILTER',
         payload: 'complete',
       });
+
+      const today = dayjs().format('YYYY-MM-DD');
+      const oneWeekAgo = dayjs()
+        .subtract(7, 'day')
+        .format('YYYY-MM-DD');
+
+      formattedStart = oneWeekAgo;
+      formattedEnd = today;
+
+      setStartDate(dayjs().subtract(7, 'day'));
+      setEndDate(dayjs());
+
+      dispatch({ type: 'CLEAR_CP_DATE_FILTER' });
+
       dispatch({
-        type: 'SET_PAGE',
-        payload: 1,
+        type: 'SET_CP_DATE_FILTER',
+        payload: {
+          startDate: formattedStart,
+          endDate: formattedEnd,
+          status: newStatus, // using action date
+        },
       });
+
+      dispatch({ type: 'SET_PAGE', payload: 1 });
     }
   };
 

package/src/components/client-portal/return-confirm/ConfirmedMain.tsx

@@ -11,7 +11,7 @@ import ReturnConfirmedTable from './ReturnConfirmedTable';
 import {
   useItemsPerReturnPage,
   useLoading,
-  UsePaginationData,
+  // UsePaginationData,
   UsePaginationReturnData,
 } from '../../order-daily-overview/store/store';
 import { filtersReducerReturnAtom } from '../../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
@@ -30,10 +30,10 @@ const ConfirmedMain = () => {
   const { 'x-pagination': pagination } = statePagination;
   const [state] = useAtom(dateFilterCPReducer);
   const { 'x-filters': filters } = state;
-  const [paginationObj] = UsePaginationReturnData();
+  const [paginationObj, setReturnPaginationObject] = UsePaginationReturnData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
-  const [, setPaginationObject] = UsePaginationData();
+  // const [, setPaginationObject] = UsePaginationData();
   const { page, total } = paginationObj;
   const [debouncedSearchText] = useSearchAfterText();
   const handlePageChange = (page: number) => {
@@ -61,18 +61,17 @@ const ConfirmedMain = () => {
     if (clientPortal && debouncedSearchText === '') {
       fetchData();
     }
-  }, [JSON.stringify(filters), debouncedSearchText]);
+  }, [JSON.stringify(filters), debouncedSearchText, pagination]);
 
   useEffect(() => {
     setLoading(loading);
 
     if (fetchedReturnOrderData?.data) {
       setReturnConfirmedData(fetchedReturnOrderData?.data);
-
       if (paginationData) {
         try {
           const { count, ...rest } = JSON.parse(paginationData);
-          setPaginationObject(rest);
+          setReturnPaginationObject(rest);
         } catch (error) {
           notification.error({
             message: 'Error',

package/src/components/client-portal/return-confirm/ReturnConfirmedTable.tsx

@@ -27,6 +27,7 @@ import PrinterIcon from '../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../assets/icons/DownIcon';
 import PrintDropDown from '../../order-daily-overview/shared/elements/PrintDropDown';
 import { formatDate } from '../../order-daily-overview/shared/utlis';
+import dayjs from 'dayjs';
 
 const ReturnConfirmedTable = () => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
@@ -171,6 +172,11 @@ const ReturnConfirmedTable = () => {
                   Created {renderSortIcon('created_at')}
                 </div>
               </th>
+              {/* <th onClick={() => handleSort('return_location_name')}>
+                <div className="sortIconClass">
+                  Delivery Date {renderSortIcon('return_location_name')}
+                </div>
+              </th> */}
               <th onClick={() => handleSort('return_location_name')}>
                 <div className="sortIconClass">
                   Return Location {renderSortIcon('return_location_name')}
@@ -181,7 +187,13 @@ const ReturnConfirmedTable = () => {
                   Recipient {renderSortIcon('recipient_name')}
                 </div>
               </th>
-              <th> Client</th>
+              {/* <th onClick={() => handleSort('recipient_reference')}> */}
+              <th>
+                {/* <div className="sortIconClass"> */}
+                Recipient Reference{renderSortIcon('recipient_reference')}
+                {/* </div> */}
+              </th>
+              <th>Sender</th>
               <th>Consignment</th>
               <th>Return Order No</th>
               <th> Total Parts</th>
@@ -242,6 +254,7 @@ const ReturnConfirmedTable = () => {
                       />
                     </td>
                     <td>{formatDate(new Date(item?.created_at))}</td>
+                    {/* <td>{formatDate(new Date(item?.action_date))}</td> */}
                     <td>{displayValueOrNA(item?.return_location_name)}</td>
                     <td onClick={() => setOrderId(item.id)}>
                       <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -261,6 +274,7 @@ const ReturnConfirmedTable = () => {
                         </li>
                       </ul>
                     </td>
+                    <td>{displayValueOrNA(item?.recipient_reference)}</td>
 
                     <td>{displayValueOrNA(item?.customer_name)}</td>
 
@@ -287,7 +301,12 @@ const ReturnConfirmedTable = () => {
                           className="statustext"
                           style={{ color: statusClass.color }}
                         >
-                          {status}
+                          {status}{' '}
+                          {status === 'Completed' && item?.action_date
+                            ? ` - ${dayjs(item?.action_date).format(
+                                'DD/MM/YYYY'
+                              )}`
+                            : ''}
                         </li>
                       </ul>
                     </td>

package/src/components/order-daily-overview/header/route-header/ClientRouterHeader.tsx

@@ -37,28 +37,50 @@ const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
   const { status } = useParams();
 
   useEffect(() => {
-    if (clientPortal) {
-      const formattedStart = startDate?.format('YYYY-MM-DD');
-      const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
-      //   const payload = {
-      //     startDate: formattedStart,
-      //     endDate: formattedEnd,
-      //   };
-
-      if (formattedStart || formattedEnd) {
-        dispatch({
-          type: 'SET_CP_DATE_FILTER',
-          payload: {
-            startDate: formattedStart,
-            endDate: formattedEnd,
-          },
-        });
-      }
+    if (!clientPortal) return;
+
+    const isReturnCompleted = status === 'return_completed';
+    const hasNoDate = !startDate && !endDate;
+
+    // if (isReturnCompleted && hasNoDate) {
+    //   const today = dayjs();
+
+    //   setStartDate(today);
+    //   setEndDate(today);
+
+    //   return;
+    // }
+
+    const formattedStart = startDate?.format('YYYY-MM-DD');
+    const formattedEnd = endDate?.format('YYYY-MM-DD') ?? null;
+
+    if (hasNoDate && !isReturnCompleted) {
+      dispatch({ type: 'CLEAR_CP_DATE_FILTER' });
+      return;
     }
-  }, [startDate, endDate]);
+
+    if (formattedStart || formattedEnd) {
+      dispatch({
+        type: 'SET_CP_DATE_FILTER',
+        payload: {
+          startDate: formattedStart,
+          endDate: formattedEnd,
+          status,
+        },
+      });
+    }
+  }, [clientPortal, status, startDate, endDate]);
 
   const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? null);
+    if (!date) {
+      setStartDate(null);
+      setEndDate(null);
+      dispatch({
+        type: 'CLEAR_CP_DATE_FILTER',
+      });
+    } else {
+      setStartDate(date);
+    }
   };
 
   const handleEndDateChange: DatePickerProps['onChange'] = date => {
@@ -99,10 +121,10 @@ const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
                 value={startDate ? dayjs(startDate) : null}
                 onChange={handleStartDateChange}
                 format={'MMMM D, YYYY'}
-                allowClear={false}
-                disabledDate={current =>
-                  !!endDate && current.isAfter(dayjs(endDate), 'day')
-                }
+                allowClear
+                // disabledDate={current =>
+                //   !!endDate && current.isAfter(dayjs(endDate), 'day')
+                // }
               />
               <DatePicker
                 value={endDate ? dayjs(endDate) : null}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { CoverPage } from './Styledfilters';
 import SelectionFilter from './SelectionFilter';
 import { useClientPortal } from '../../store';
-import ReturnStatus from '../../client-portal/ReturnStatus';
+// import ReturnStatus from '../../client-portal/ReturnStatus';
 
 function HeaderFilter() {
   const [clientPortal] = useClientPortal();
@@ -10,7 +10,8 @@ function HeaderFilter() {
   return (
     <>
       {clientPortal ? (
-        <ReturnStatus />
+        // <ReturnStatus />
+        <></>
       ) : (
         <>
           <CoverPage>

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

@@ -12,6 +12,7 @@ import { atom, useAtom } from 'jotai';
 import {
   useActionTypeOptions,
   useClearState,
+  useClientLoading,
   useClientPortal,
   useCustomerData,
   useReturnPayload,
@@ -50,6 +51,7 @@ function SelectionFilter() {
   const [searchParams] = useSearchParams();
   const [clientPortal] = useClientPortal();
   const navigate = useNavigate();
+  const [clientLoading] = useClientLoading();
   //API for client data
   const { data: fetchedCustomerData, loading: loading, fetchData } = useAxios<
     ApiResponse
@@ -59,12 +61,12 @@ function SelectionFilter() {
     //@ts-ignore
     pagination: { is_pagination: false },
   });
-
+  //need to fix
   useEffect(() => {
-    if (!clientPortal && clientPortal !== undefined) {
+    if (!clientPortal && !clientLoading) {
       fetchData();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {

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

@@ -6,7 +6,12 @@ import {
 } from './store/store';
 import Filters from './filters/Filters';
 import styled from 'styled-components';
-import { useClientPortal, useCustomerData, useStickyStatus } from '../store';
+import {
+  useClientLoading,
+  useClientPortal,
+  useCustomerData,
+  useStickyStatus,
+} from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import {
   DocumentTitle,
@@ -37,6 +42,7 @@ function ReturnMainTable() {
   // const [tableName] = useTableName();
   const queryParams = new URLSearchParams(location.search);
   const [clientPortal] = useClientPortal();
+  const [clientLoading] = useClientLoading();
 
   const customerId = queryParams.get('customerId');
 
@@ -59,10 +65,10 @@ function ReturnMainTable() {
   });
 
   useEffect(() => {
-    if (!clientPortal && clientPortal !== undefined) {
+    if (!clientPortal && !clientLoading) {
       fetchData();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     if (fetchedCustomerData && fetchedCustomerData?.data) {
@@ -85,11 +91,12 @@ function ReturnMainTable() {
     filters: filters,
     showLoader: false,
   });
+
   useEffect(() => {
-    if (!clientPortal && clientPortal !== undefined) {
+    if (!clientPortal && !clientLoading) {
       fetchProductStats();
     }
-  }, []);
+  }, [clientLoading]);
 
   useEffect(() => {
     setLoading(statsDataLoading);