@bjsdistribution/dms-client-return 0.1.18-dev → 0.1.20-dev

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

@@ -10,15 +10,26 @@ import { ExportButton, useAxios } from '@bjsdistribution/dms-component-library';
 import { useParams } from 'react-router-dom';
 import { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
 import { notification } from 'antd';
-import { useSelectedClientPortOrders } from '../store';
+import {
+  useSelectedClientAfterOrders,
+  useSelectedClientPortOrders,
+  // useSelectedClientPortOrders,
+} from '../store';
 
 const ReturnRTFilters = () => {
   const [returnData] = useReturnData();
   const [pendingState] = useAtom(filtersReducerAtom);
   const [state] = useAtom(filtersReducerReturnAtom);
   const [returnAfterOrder] = useReturnAfterOrderData();
-  const [selectedReturnOrder] = useSelectedClientPortOrders();
-
+  // const [selectedReturnOrder] = useSelectedClientPortOrders();
+  const [
+    selectedOrderIds,
+    setSelectedOrderIds,
+  ] = useSelectedClientAfterOrders();
+  const [
+    selectedPendingOrderIds,
+    setSelectedPendingOrderIds,
+  ] = useSelectedClientPortOrders();
   const { status } = useParams<{ status: any }>();
   const { 'x-filters': pendingFilters } = pendingState;
 
@@ -46,10 +57,13 @@ const ReturnRTFilters = () => {
       feature_name: 'return',
     };
   }
-  // console.log(selectedReturnOrder, 'selectedReturnOrder');
   //Export Manifest
-  const onlyIds = selectedReturnOrder?.map(item => item.id);
-  const isExportEnabled = onlyIds?.length > 0;
+  const isExportEnabled =
+    status === 'outstanding_return'
+      ? selectedPendingOrderIds?.length > 0
+      : status === 'scheduled_for_return' || status === 'return_completed'
+      ? selectedOrderIds?.length > 0
+      : false;
   const { fetchData: callExportApi } = useAxios<{
     data: any[];
     message: string;
@@ -58,12 +72,19 @@ const ReturnRTFilters = () => {
     method: 'POST',
   });
 
-  const handleExport = async () => {
+  const handleExportManifest = async () => {
     if (!isExportEnabled) return;
 
+    const exportOrderIds =
+      status === 'outstanding_return'
+        ? selectedPendingOrderIds
+        : status === 'scheduled_for_return' || status === 'return_completed'
+        ? selectedOrderIds
+        : [];
+
     try {
       const response = (await callExportApi({
-        payload: { order_ids: onlyIds },
+        payload: { order_ids: exportOrderIds },
       })) as {
         code: number | null;
         error?: string | null;
@@ -78,38 +99,16 @@ const ReturnRTFilters = () => {
           message: 'Success',
           description: response?.message || 'Export completed.',
         });
-
-        // setSelectedIds([]);
-        const resourceUrl = response.data.url;
-        const downloadResponse = await fetch(resourceUrl);
-
-        if (!downloadResponse.ok) {
-          throw new Error('Failed to fetch the export file.');
+        window.open(response?.data?.url, '_blank');
+
+        if (status === 'outstanding_return') {
+          setSelectedPendingOrderIds([]);
+        } else if (
+          status === 'scheduled_for_return' ||
+          status === 'return_completed'
+        ) {
+          setSelectedOrderIds([]);
         }
-
-        const blob = await downloadResponse.blob();
-
-        const urlObject = window.URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = urlObject;
-
-        // You can customize the filename or extract it from headers
-        const contentDisposition = downloadResponse.headers.get(
-          'Content-Disposition'
-        );
-        const filenameMatch = contentDisposition?.match(/filename="?(.+)"?/);
-        const filename = filenameMatch?.[1] || 'download.csv';
-
-        link.download = filename;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-        window.URL.revokeObjectURL(urlObject);
-
-        notification.success({
-          message: 'Downloaded',
-          description: 'File downloaded successfully.',
-        });
       } else {
         notification.error({
           message: 'No File URL',
@@ -122,13 +121,28 @@ const ReturnRTFilters = () => {
         message: 'Export Failed',
         description: 'Something went wrong during export.',
       });
+
+      if (status === 'outstanding_return') {
+        setSelectedPendingOrderIds([]);
+      } else if (
+        status === 'scheduled_for_return' ||
+        status === 'return_completed'
+      ) {
+        setSelectedOrderIds([]);
+      }
     }
   };
 
   return (
     <StyledBulkFilterCover className="dmsBulkFilter">
       <ExportButton moduleInfoModule={moduleInfo} />
-      <StyledBulkItem onClick={handleExport}>
+      <StyledBulkItem
+        onClick={handleExportManifest}
+        style={{
+          pointerEvents: isExportEnabled ? 'auto' : 'none',
+          opacity: isExportEnabled ? 1 : 0.5,
+        }}
+      >
         <Text>Export Manifest</Text>
       </StyledBulkItem>
     </StyledBulkFilterCover>
@@ -174,6 +188,11 @@ export const StyledBulkItem = styled.div`
       }
     }
   }
+  &:hover:not(:disabled) {
+    background: #f0f0f0;
+    cursor: pointer;
+  }
+
   @media screen and (max-width: 1030px) {
     padding: 6px 4px;
   }

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

@@ -7,10 +7,12 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import {
   useAtom,
+  useClientOutstandingReturnData,
   useClientPortal,
   useEndDate,
   useSearchText,
   useStartDate,
+  useStatsCPCount,
 } from '../store';
 import dayjs from 'dayjs';
 import { filtersReducerAtom } from '../order-daily-overview/header-filters/filterStore';
@@ -18,14 +20,14 @@ import { ApiResponse } from '../types';
 import { javascriptStringDumpToJSON } from '../utils';
 import { UsePaginationData } from '../order-daily-overview/store/store';
 import { notification } from 'antd';
-import { useReturnData } from '../order-view/store';
 import { useParams } from 'react-router-dom';
+import { returnCountType } from './ReturnStatus';
 
 function ReturnSearchBar() {
   const [searchText, setSearchText] = useState('');
   const [debouncedSearchText, setDebouncedSearchText] = useSearchText();
   const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
-  const [, setReturnData] = useReturnData();
+  const [, setOutstandingData] = useClientOutstandingReturnData();
   const { status } = useParams();
   //condition on client view
   const [clientPortal] = useClientPortal();
@@ -37,6 +39,8 @@ function ReturnSearchBar() {
   const [startDate] = useStartDate();
   const [endDate] = useEndDate();
   const [state] = useAtom(filtersReducerAtom);
+  const [, setCount] = useStatsCPCount();
+  const [modifiedStatsFilters, setModifiedStatsFilters] = useState<any[]>([]);
 
   const { 'x-pagination': pagination } = state;
 
@@ -97,11 +101,59 @@ function ReturnSearchBar() {
     setModifiedFilters(updatedFilters);
   }, [startDate, endDate, status]);
 
+  //For stats
+
+  const getDateFilters = (
+    startDate: dayjs.Dayjs | null,
+    endDate: dayjs.Dayjs | null
+  ) => {
+    const stored = JSON.parse(localStorage.getItem('returnDate') || '{}');
+
+    const sDate = startDate?.isValid?.() ? startDate : dayjs(stored?.startDate);
+    const eDate = endDate?.isValid?.()
+      ? endDate
+      : stored?.endDate
+      ? dayjs(stored?.endDate)
+      : null;
+
+    if (!sDate?.isValid?.()) return [];
+
+    let dateFilters = [];
+
+    if (eDate && eDate.isValid()) {
+      dateFilters = [
+        { field: 'created_at', op: '>=', value: sDate.format('YYYY-MM-DD') },
+        {
+          field: 'created_at',
+          op: '<=',
+          value: eDate.add(1, 'day').format('YYYY-MM-DD'),
+        },
+      ];
+    } else {
+      dateFilters = [
+        {
+          field: 'created_at',
+          op: '=',
+          value: sDate.format('YYYY-MM-DD'),
+        },
+      ];
+    }
+
+    return dateFilters;
+  };
+
+  useEffect(() => {
+    if (!clientPortal) return;
+
+    const dateFilters = getDateFilters(startDate, endDate);
+    setModifiedStatsFilters(dateFilters);
+  }, [startDate, endDate]);
+
   const {
-    loading,
+    // loading,
     paginationData,
     fetchData: getPendingData,
-    data: fetchedReturnOrderData,
+    // data: fetchedReturnOrderData,
   } = useAxios<ApiResponse>({
     endpoint: '/v1/return/product/pending/',
     method: 'GET',
@@ -110,7 +162,7 @@ function ReturnSearchBar() {
   });
 
   useEffect(() => {
-    if (debouncedSearchText.length > 1) {
+    if (debouncedSearchText?.length > 1) {
       getPendingData({
         endPointQuery: `?search_term=${debouncedSearchText}`,
       }).then((response: any) => {
@@ -123,20 +175,20 @@ function ReturnSearchBar() {
         }
 
         if (response?.data?.length > 0) {
-          setReturnData(response?.data);
+          setOutstandingData(response?.data);
         } else {
-          setReturnData([]);
+          setOutstandingData([]);
         }
       });
     } else if (
-      debouncedSearchText.length > 0 &&
-      debouncedSearchText.length <= 2
+      debouncedSearchText?.length > 0 &&
+      debouncedSearchText?.length <= 2
     ) {
       notification.warning({
         message: 'Search Phrase cannot be less than 3 characters',
       });
     }
-  }, [debouncedSearchText, fetchedReturnOrderData, loading]);
+  }, [debouncedSearchText]);
 
   // Debouncing effect
   useEffect(() => {
@@ -149,14 +201,43 @@ function ReturnSearchBar() {
   }, [searchText]);
 
   useEffect(() => {
-    if (debouncedSearchText.length === 0) {
+    if (debouncedSearchText?.length === 0) {
       setSearchText('');
     }
   }, [debouncedSearchText]);
 
+  //
+  const { fetchData: fetchStatsData } = useAxios<{
+    data: returnCountType[];
+  }>({
+    endpoint: `v1/portal/return/stats/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: modifiedStatsFilters,
+  });
+
+  useEffect(() => {
+    const isClientOutstanding = clientPortal && status === 'outstanding_return';
+    if (!isClientOutstanding || debouncedSearchText?.length < 3) return;
+
+    const fetchStats = async () => {
+      const response = await fetchStatsData({
+        endPointQuery: `?search_term=${debouncedSearchText}&type=outstanding`,
+      });
+      //@ts-ignore
+      if (response?.data) {
+        //@ts-ignore
+        setCount(response?.data); // Set the count here
+      } else {
+        setCount(null); // fallback if no data
+      }
+    };
+
+    fetchStats();
+  }, [debouncedSearchText, status, clientPortal]);
+
   const handleClear = () => {
     setSearchText('');
-    setDebouncedSearchText('');
   };
   return (
     <Search>

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

@@ -3,19 +3,26 @@ import {
   device,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, 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 { filtersReducerReturnAtom } from '../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
 import dayjs from 'dayjs';
-
+export type returnCountType = {
+  outstanding_count: number | null;
+  scheduled_count: number;
+  completed_count: number;
+};
 const ReturnStatus = () => {
   //CP
   type returnCountType = {
@@ -28,11 +35,13 @@ const ReturnStatus = () => {
   const [activeCardId, setActiveCardId] = useActiveCardId();
   const [, dispatch] = useAtom(filtersReducerReturnAtom);
   const { status } = useParams();
-  const [count, setCount] = useState<any>();
+  const [count, setCount] = useStatsCPCount();
   const [startDate] = useStartDate();
   const [endDate] = useEndDate();
   const [clientPortal] = useClientPortal();
   const [modifiedFilters, setModifiedFilters] = useState<any[]>([]);
+  const [debouncedSearchText] = useSearchText();
+  const [debouncedSearchAfterText] = useSearchAfterText();
 
   const getDateFilters = (
     startDate: dayjs.Dayjs | null,
@@ -92,6 +101,27 @@ const ReturnStatus = () => {
     filters: modifiedFilters,
   });
 
+  const prevSearchTextRef = useRef('');
+  const prevSearchAfterTextRef = useRef('');
+
+  useEffect(() => {
+    const prev = prevSearchTextRef.current;
+    if (clientPortal && prev && debouncedSearchText === '') {
+      fetchData();
+    }
+    prevSearchTextRef.current = debouncedSearchText;
+  }, [debouncedSearchText, startDate, endDate]);
+
+  useEffect(() => {
+    const prev = prevSearchAfterTextRef.current;
+    if (clientPortal && prev && debouncedSearchAfterText === '') {
+      fetchData();
+    }
+    prevSearchAfterTextRef.current = debouncedSearchAfterText;
+  }, [debouncedSearchAfterText, startDate, endDate]);
+
+  console.log(debouncedSearchText, 'debouncedSearchText');
+  console.log(debouncedSearchAfterText, 'debouncedSearchAfterText');
   useEffect(() => {
     fetchData();
   }, [startDate, endDate]);
@@ -127,12 +157,15 @@ const ReturnStatus = () => {
     },
   ];
   const navigate = useNavigate();
+  const [, setDebouncedSearchText] = useSearchAfterText();
+
   const handleCardClick = (item: any) => {
     if (activeCardId === item?.id) {
       return;
     }
     setActiveCardId(item?.id);
     navigate(`/return/${item?.status}`);
+    setDebouncedSearchText('');
     if (item?.status == 'scheduled_for_return') {
       dispatch({
         type: 'SET_SCHEDULED_RETURN_FILTER',

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

@@ -0,0 +1,235 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+// import OrderTable from './table/OrderTable';
+// import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
+// import { useAtom, useReturnAfterOrderData } from '../../order-view/store';
+// import {
+//   useItemsPerReturnPage,
+//   useLoading,
+//   UsePaginationData,
+//   UsePaginationReturnData,
+// } from '../store/store';
+// import { ApiResponse } from '../common/interface';
+// import { useAxios } from '@bjsdistribution/dms-component-library';
+// import { filtersReducerReturnAtom } from './table-filters/ReturnFilterStore';
+// import { notification } from 'antd';
+// import ReturnPagination from '../table-view/ReturnPagination';
+import {
+  useAtom,
+  // useCallApiAgain,
+  useReturnConfirmedOrderData,
+  useSearchAfterText,
+} from '../../store';
+import ReturnConfirmedTable from './ReturnConfirmedTable';
+import {
+  useItemsPerReturnPage,
+  useLoading,
+  UsePaginationData,
+  UsePaginationReturnData,
+} from '../../order-daily-overview/store/store';
+import { filtersReducerReturnAtom } from '../../order-daily-overview/return-after-table/table-filters/ReturnFilterStore';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../types';
+import { notification } from 'antd';
+import ReturnPagination from '../../order-daily-overview/table-view/ReturnPagination';
+import { useParams } from 'react-router-dom';
+
+const ConfirmedMain = () => {
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
+  const [, setLoading] = useLoading();
+  const [state] = useAtom(filtersReducerReturnAtom);
+  // const [callApi] = useCallApiAgain();
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const [paginationObj] = UsePaginationReturnData();
+  const [, setCurrentPage] = useState(1);
+  const [itemsPerPage, setItemsPerPage] = useItemsPerReturnPage();
+  const [, setPaginationObject] = UsePaginationData();
+  const { page, total } = paginationObj;
+  const [debouncedSearchText] = useSearchAfterText();
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+  const handleItemsPerPageChange = (itemsPerPage: number) => {
+    setItemsPerPage(itemsPerPage);
+  };
+  const { status } = useParams();
+
+  const {
+    data: fetchedReturnOrderData,
+    loading,
+    paginationData,
+    fetchData,
+  } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/orders/',
+    method: 'GET',
+    filters: filters && filters?.length > 0 ? filters : undefined,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    const shouldFetch = debouncedSearchText === '' && filters?.length > 0;
+
+    if (shouldFetch) {
+      fetchData();
+    }
+  }, [debouncedSearchText, status, JSON.stringify(filters)]);
+
+  useEffect(() => {
+    setLoading(loading);
+
+    if (fetchedReturnOrderData?.data) {
+      setReturnConfirmedData(fetchedReturnOrderData?.data);
+
+      if (paginationData) {
+        try {
+          const { count, ...rest } = JSON.parse(paginationData);
+          setPaginationObject(rest);
+        } catch (error) {
+          notification.error({
+            message: 'Error',
+            description: 'Failed to parse pagination data',
+          });
+        }
+      }
+    }
+  }, [fetchedReturnOrderData, loading]);
+
+  return (
+    <div>
+      <DashBoardWrapper>
+        {/* <RouterHeader /> */}
+        <div className="Tableconatiner">
+          {/* <HeaderFilter /> */}
+          <Container>
+            <ReturnConfirmedTable />
+            {total > 0 && (
+              <ReturnPagination
+                currentPage={page}
+                totalItems={total}
+                itemsPerPage={itemsPerPage}
+                onPageChange={handlePageChange}
+                onItemsPerPageChange={handleItemsPerPageChange}
+              ></ReturnPagination>
+            )}
+          </Container>
+        </div>
+      </DashBoardWrapper>
+    </div>
+  );
+};
+const Container = styled.div`
+  position: relative;
+  /* top: -30px; */
+`;
+const DashBoardWrapper = styled.section`
+  .Tableconatiner {
+    border-radius: 12px;
+    background: #fff;
+    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);
+    display: block;
+    padding: 15px 20px;
+  }
+  .headerWrap,
+  .tableData,
+  .styleCovered {
+    transition: all ease 0.5s;
+  }
+  &.stickyTableHead {
+    h2 {
+      font-size: 21px;
+    }
+    .headerWrap {
+      height: 84px;
+      padding: 10px;
+      border-radius: 0px 0px 15px 15px;
+      > div {
+        position: relative;
+        z-index: 10;
+      }
+    }
+    .styleCovered {
+      margin-top: -32px;
+      width: 67%;
+      float: right;
+      gap: 5px;
+      padding-right: 11px;
+
+      li {
+        padding: 4px 10px 5px 5px;
+        gap: 5px;
+        .svgCover {
+          width: 30px;
+          height: 30px;
+          svg {
+            height: auto;
+            width: 58%;
+          }
+        }
+        .countDigit {
+          font-size: 19px;
+        }
+      }
+      .countMess {
+        font-size: 13px;
+      }
+    }
+    .dmsBulkFilter {
+      min-height: unset;
+      gap: 4px;
+      > div {
+        padding: 4px 12px;
+        label {
+          font-size: 11px;
+        }
+      }
+    }
+
+    .StyledFilterList {
+      gap: 4px;
+      li {
+        height: 29px;
+        padding: 3px 8px;
+        gap: 4px;
+        .StyledFilterBtnIcon {
+          width: 20px;
+          height: 20px;
+          svh {
+            width: 10px;
+            height: auto;
+          }
+        }
+        .StyledFilterBtnLabel {
+          font-size: 13px;
+        }
+      }
+    }
+    .StyledFilterLabel {
+      padding-left: 10px;
+      span {
+        font-size: 13px;
+      }
+    }
+    .cardcontainer.tableData {
+      max-height: calc(100vh - 310px);
+      min-height: calc(100vh - 310px);
+    }
+
+    .tableData {
+      max-height: calc(100vh - 320px);
+      min-height: calc(100vh - 320px);
+
+      margin-top: 8px;
+      thead {
+        position: sticky;
+        top: 0;
+        z-index: 9;
+        th {
+          font-size: 13px;
+          padding: 2px 15px;
+        }
+      }
+    }
+  }
+`;
+
+export default ConfirmedMain;