@bjsdistribution/dms-client-return 0.1.19-dev → 0.1.21-dev

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

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  useAtom,
+  useClientPortal,
+  // 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';
+import { dateFilterCPReducer } from '../DateFilterStore';
+
+const ConfirmedMain = () => {
+  const [, setReturnConfirmedData] = useReturnConfirmedOrderData();
+  const [, setLoading] = useLoading();
+  const [statePagination] = useAtom(filtersReducerReturnAtom);
+  // const [callApi] = useCallApiAgain();
+  const { 'x-pagination': pagination } = statePagination;
+  const [state] = useAtom(dateFilterCPReducer);
+  const { 'x-filters': filters } = 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 [clientPortal] = useClientPortal();
+
+  const {
+    data: fetchedReturnOrderData,
+    loading,
+    paginationData,
+    fetchData,
+  } = useAxios<ApiResponse>({
+    endpoint: '/v1/return/orders/',
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    if (clientPortal && debouncedSearchText === '') {
+      fetchData();
+    }
+  }, [JSON.stringify(filters), debouncedSearchText]);
+
+  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;

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

@@ -0,0 +1,327 @@
+import { Empty } from 'antd';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Skeleton } from 'antd';
+import { NavLink } from 'react-router-dom';
+import {
+  Checkbox,
+  displayValueOrNA,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useLoading,
+  usePrintOptionTOggle,
+} from '../../order-daily-overview/store/store';
+import {
+  useReturnConfirmedOrderData,
+  useSelectedClientAfterOrders,
+} from '../../store';
+import { useOrderId } from '../../order-view/store';
+import SortIcon from '../../../common/SortIcon';
+import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
+import {
+  CustomDrop,
+  EmptyDataContainer,
+  StyledTable,
+  StyledTableWrapper,
+} from '../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
+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';
+
+const ReturnConfirmedTable = () => {
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+  const [, setOrderId] = useOrderId();
+  const [returnConfirmedTable] = useReturnConfirmedOrderData();
+  const [loading] = useLoading();
+  const [selectClientAll, setSelectClientAll] = useState(false);
+  const [
+    selectedOrderIds,
+    setSelectedOrderIds,
+  ] = useSelectedClientAfterOrders();
+  //sorting
+  const [sortConfig, setSortConfig] = useState<{
+    key: string;
+    direction: 'asc' | 'desc';
+  } | null>(null);
+
+  const handleSort = (key: string) => {
+    setSortConfig((prev: any) => {
+      if (prev?.key === key && prev.direction === 'asc') {
+        return { key, direction: 'desc' };
+      }
+      return { key, direction: 'asc' };
+    });
+  };
+
+  const sortedData = useMemo(() => {
+    if (!returnConfirmedTable || !sortConfig) return returnConfirmedTable;
+
+    const { key, direction } = sortConfig;
+    return [...returnConfirmedTable].sort((a, b) => {
+      const valueA = a[key];
+      const valueB = b[key];
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return direction === 'asc' ? valueA - valueB : valueB - valueA;
+      }
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        return direction === 'asc'
+          ? valueA.localeCompare(valueB)
+          : valueB.localeCompare(valueA);
+      }
+      return 0;
+    });
+  }, [returnConfirmedTable, sortConfig]);
+
+  const renderSortIcon = (columnKey: string) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <SortIcon />;
+    }
+    return sortConfig.direction === 'asc' ? (
+      <CaretDownFilledIcon />
+    ) : (
+      <CaretDownFilledIcon />
+    );
+  };
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle((prevIndex: any) => (prevIndex === index ? null : index));
+  };
+
+  // Close dropdown outside click
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setPrintToggle(null);
+    }
+  };
+
+  const getStatusClass = (status: string) => {
+    switch (status) {
+      case 'Cancelled':
+      case 'Failed':
+        return { color: '#E95252', background: 'rgba(233, 82, 82, 0.15)' };
+      case 'On Hold':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Sub-Contracted':
+      case 'SC':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Awaiting route':
+      case 'Awaiting Confirmation':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Completed':
+        return {
+          color: '#1F9254',
+          background: 'rgba(41, 204, 106, 0.15)',
+        };
+      case 'Outstanding':
+        return { color: '#FF9900', background: 'rgba(255, 153, 0, 0.15)' };
+      case 'Routed':
+        return { color: '#6396E5', background: 'rgba(99, 150, 229, 0.15)' };
+      default:
+        return { color: '#000', background: '#fff' };
+    }
+  };
+
+  const handleSelectOrderId = (id: string | number) => {
+    setSelectedOrderIds(prev =>
+      prev.includes(id) ? prev.filter(orderId => orderId !== id) : [...prev, id]
+    );
+  };
+  const handleClientSelectAll = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const isChecked = e.target.checked;
+    setSelectClientAll(isChecked);
+
+    if (isChecked) {
+      setSelectedOrderIds(
+        returnConfirmedTable?.map((item: any) => item?.id) || []
+      );
+    } else {
+      setSelectedOrderIds([]);
+    }
+  };
+
+  return (
+    <>
+      <StyledTableWrapper className="fortables">
+        <StyledTable>
+          <thead>
+            <tr>
+              {/* <th className="emailInvoiceCheckbox">
+                <Checkbox checked={false} />
+              </th> */}
+              <th className="emailInvoiceCheckbox">
+                <Checkbox
+                  checked={selectClientAll}
+                  onChange={handleClientSelectAll}
+                />
+              </th>
+              <th onClick={() => handleSort('created_at')}>
+                <div className="sortIconClass">
+                  Created {renderSortIcon('created_at')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('return_location_name')}>
+                <div className="sortIconClass">
+                  Return Location {renderSortIcon('return_location_name')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('recipient_name')}>
+                <div className="sortIconClass">
+                  Recipient {renderSortIcon('recipient_name')}
+                </div>
+              </th>
+              <th> Client</th>
+              <th>Consignment</th>
+              <th>Return Order No</th>
+              <th> Total Parts</th>
+              <th onClick={() => handleSort('weight')}>
+                <div className="sortIconClass">
+                  Total Weight {renderSortIcon('weight')}
+                </div>
+              </th>
+              <th onClick={() => handleSort('cube')}>
+                <div className="sortIconClass">
+                  Total CBM {renderSortIcon('cube')}
+                </div>
+              </th>
+              <th>Status</th>
+              <th className="emailInvoiceShare">Labels</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td colSpan={16}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={16}></td>
+              </tr>
+            ) : sortedData?.length === 0 ? (
+              <tr>
+                <td colSpan={16}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              sortedData?.map((item: any, index: any) => {
+                const statusMapping: any = {
+                  cancelled: 'Cancelled',
+                  'on hold': 'On Hold',
+                  subcontracted: 'Sub-Contracted',
+                  SC: 'Sub-Contracted',
+                  'awaiting route': 'Awaiting route',
+                  'awaiting confirmation': 'Awaiting Confirmation',
+                  complete: 'Completed',
+                  outstanding: 'Outstanding',
+                  routed: 'Routed',
+                  failed: 'Failed',
+                  confirmed: 'Confirmed',
+                };
+                const status = statusMapping[item?.status_value] || 'Unknown';
+                const statusClass = getStatusClass(status);
+
+                return (
+                  <tr key={item.id}>
+                    <td>
+                      <Checkbox
+                        checked={selectedOrderIds.includes(item?.id)}
+                        onChange={() => handleSelectOrderId(item?.id)}
+                      />
+                    </td>
+                    <td>{formatDate(new Date(item?.created_at))}</td>
+                    <td>{displayValueOrNA(item?.return_location_name)}</td>
+                    <td onClick={() => setOrderId(item.id)}>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          <NavLink to={`../${item.id}`}>
+                            {displayValueOrNA(item?.recipient_name)}
+                          </NavLink>
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(item?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
+
+                    <td>{displayValueOrNA(item?.customer_name)}</td>
+
+                    <td>{displayValueOrNA(item?.consignment)}</td>
+                    <td>{displayValueOrNA(item?.order_number)}</td>
+
+                    <td>{displayValueOrNA(item?.total_products)}</td>
+                    <td>
+                      {displayValueOrNA(item?.weight)}{' '}
+                      {item?.weight && item?.weight > 0 ? 'KG' : ''}
+                    </td>
+
+                    <td>{displayValueOrNA(item?.cube)}</td>
+
+                    <td>
+                      <ul
+                        className="statuscontainer"
+                        style={{
+                          listStyleType: 'none',
+                          background: statusClass.background,
+                        }}
+                      >
+                        <li
+                          className="statustext"
+                          style={{ color: statusClass.color }}
+                        >
+                          {status}
+                        </li>
+                      </ul>
+                    </td>
+                    <td>
+                      <ul className="actionbox">
+                        <CustomDrop
+                          ref={dropdownRefParent}
+                          className={printToogle === index ? 'active' : ''}
+                        >
+                          <li
+                            className="shareIconContainer"
+                            onClick={() => OpenDropDown(index)}
+                          >
+                            <PrinterIcon />
+                            <DownIcon />
+
+                            {printToogle === index && (
+                              <div ref={dropdownRef}>
+                                <PrintDropDown legacyProductId={item} />
+                              </div>
+                            )}
+                          </li>
+                        </CustomDrop>
+                      </ul>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
+  );
+};
+
+export default ReturnConfirmedTable;

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

@@ -12,10 +12,10 @@ import {
   useEndDate,
   useStartDate,
 } from '../../../store';
-import { filtersReducerReturnAtom } from '../../return-after-table/table-filters/ReturnFilterStore';
 import ReturnSearchBar from '../../../client-portal/ReturnSearchBar';
 import { useParams } from 'react-router-dom';
 import ReturnAfterSearchBar from '../../../client-portal/ReturnAfterSearchBar';
+import { dateFilterCPReducer } from '../../../client-portal/DateFilterStore';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -30,44 +30,37 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubPart, // Optional
 }) => {
   const [clientPortal] = useClientPortal();
-  const [, dispatch] = useAtom(filtersReducerReturnAtom);
+  const [, dispatch] = useAtom(dateFilterCPReducer);
   //CP
   const [startDate, setStartDate] = useStartDate();
   const [endDate, setEndDate] = useEndDate();
   const { status } = useParams();
 
-  useEffect(() => {
-    const storedDates = JSON.parse(localStorage.getItem('returnDate') || '{}');
-    const initialStart = storedDates?.startDate
-      ? dayjs(storedDates.startDate)
-      : null;
-    const initialEnd = storedDates?.endDate ? dayjs(storedDates.endDate) : null;
-
-    if (initialStart) setStartDate(initialStart);
-    if (initialEnd) setEndDate(initialEnd);
-  }, []);
-
   useEffect(() => {
     if (clientPortal) {
       const formattedStart = startDate?.format('YYYY-MM-DD');
       const formattedEnd = endDate ? endDate?.format('YYYY-MM-DD') : null;
-
+      console.log(formattedStart, 'syart', formattedEnd, 'end');
       const payload = {
         startDate: formattedStart,
         endDate: formattedEnd,
       };
-      localStorage.setItem('returnDate', JSON.stringify(payload));
+
+      console.log(payload, 'PAYLOAD');
       if (formattedStart || formattedEnd) {
         dispatch({
           type: 'SET_CP_DATE_FILTER',
-          payload,
+          payload: {
+            startDate: formattedStart,
+            endDate: formattedEnd,
+          },
         });
       }
     }
   }, [startDate, endDate]);
 
   const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? dayjs());
+    setStartDate(date ?? null);
   };
 
   const handleEndDateChange: DatePickerProps['onChange'] = date => {
@@ -127,7 +120,7 @@ export const DatePickerWrap = styled.div`
   align-self: stretch;
   border-radius: 20px;
   border: 1px solid #e0e2e7;
-  background: var(--Neutral-White, #fff);
+  background: #fff;
   box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   min-width: 22vw;
   height: 35px;