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

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={`/return/view/${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/ClientRouterHeader.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect } from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
+import HeaderTitle from './title/HeaderTitle';
+import Breadcrumb from './breadCrumb/BreadCrumb';
+import styled from 'styled-components';
+import dayjs from 'dayjs';
+import { DatePicker, DatePickerProps } from 'antd';
+import {
+  useAtom,
+  useClientPortal,
+  useEndDate,
+  useStartDate,
+} from '../../../store';
+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;
+  breadcrumbSubtitle?: string;
+  breadcrumbSubPart?: string;
+  showDateFilter?: boolean;
+}
+
+const ClientRouterHeader: React.FC<RouterHeaderProps> = ({
+  breadcrumbTitle = 'Clients >', // Default value
+  breadcrumbSubtitle = ' Return', // Default value
+  breadcrumbSubPart, // Optional
+}) => {
+  const [clientPortal] = useClientPortal();
+  const [, dispatch] = useAtom(dateFilterCPReducer);
+  //CP
+  const [startDate, setStartDate] = useStartDate();
+  const [endDate, setEndDate] = useEndDate();
+  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,
+          },
+        });
+      }
+    }
+  }, [startDate, endDate]);
+
+  const handleStartDateChange: DatePickerProps['onChange'] = date => {
+    setStartDate(date ?? null);
+  };
+
+  const handleEndDateChange: DatePickerProps['onChange'] = date => {
+    setEndDate(date);
+  };
+
+  const validStatuses = [
+    'outstanding_return',
+    'scheduled_for_return',
+    'return_completed',
+  ];
+
+  return (
+    <>
+      <HeaderWrapper className="headerWrap">
+        <StyledFlex>
+          <div>
+            <HeaderTitle title={'Return'} />
+            <Breadcrumb
+              title={breadcrumbTitle}
+              subtitle={breadcrumbSubtitle}
+              subPart={breadcrumbSubPart}
+            />
+          </div>
+        </StyledFlex>
+
+        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
+
+        {clientPortal &&
+          (status === 'scheduled_for_return' ||
+            status === 'return_completed') && <ReturnAfterSearchBar />}
+
+        {clientPortal &&
+          typeof status === 'string' &&
+          validStatuses.includes(status) && (
+            <DatePickerWrap>
+              <DatePicker
+                value={startDate ? dayjs(startDate) : null}
+                onChange={handleStartDateChange}
+                format={'MMMM D, YYYY'}
+                allowClear={false}
+                disabledDate={current =>
+                  !!endDate && current.isAfter(dayjs(endDate), 'day')
+                }
+              />
+              <DatePicker
+                value={endDate ? dayjs(endDate) : null}
+                onChange={handleEndDateChange}
+                format={'MMMM D, YYYY'}
+                disabledDate={current =>
+                  !!startDate && current.isBefore(dayjs(startDate), 'day')
+                }
+              />
+            </DatePickerWrap>
+          )}
+      </HeaderWrapper>
+    </>
+  );
+};
+export const DatePickerWrap = styled.div`
+  display: flex;
+  padding-right: 10px;
+  padding-left: 7px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 20px;
+  border: 1px solid #e0e2e7;
+  background: #fff;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  min-width: 22vw;
+  height: 35px;
+  input[type='text'] {
+    border-radius: 20px;
+    background: var(--Flowkit-White, #fff);
+    border: none;
+    color: #6a7378;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 18px;
+    padding: 8px 0;
+    padding-left: 10px;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .ant-picker-outlined {
+    border-style: none !important;
+  }
+
+  .ant-picker-focused {
+    box-shadow: none;
+  }
+
+  /* .ant-picker {
+    .ant-picker-input {
+      width: 150px;
+    }
+  } */
+  .ant-btn {
+    background-color: #3348ff !important;
+  }
+`;
+export default ClientRouterHeader;

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

@@ -1,21 +1,9 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { HeaderWrapper, StyledFlex } from './RouterHeaderStyle';
 import HeaderTitle from './title/HeaderTitle';
 import Breadcrumb from './breadCrumb/BreadCrumb';
 import styled from 'styled-components';
-import dayjs from 'dayjs';
-import { DatePicker, DatePickerProps } from 'antd';
-import {
-  useAtom,
-  useClientPortal,
-  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';
 
 interface RouterHeaderProps {
   breadcrumbTitle?: string;
@@ -29,50 +17,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
   breadcrumbSubtitle = ' Return', // Default value
   breadcrumbSubPart, // Optional
 }) => {
-  const [clientPortal] = useClientPortal();
-  const [, dispatch] = useAtom(filtersReducerReturnAtom);
-  //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;
-
-      const payload = {
-        startDate: formattedStart,
-        endDate: formattedEnd,
-      };
-      localStorage.setItem('returnDate', JSON.stringify(payload));
-      if (formattedStart || formattedEnd) {
-        dispatch({
-          type: 'SET_CP_DATE_FILTER',
-          payload,
-        });
-      }
-    }
-  }, [startDate, endDate]);
-
-  const handleStartDateChange: DatePickerProps['onChange'] = date => {
-    setStartDate(date ?? dayjs());
-  };
-
-  const handleEndDateChange: DatePickerProps['onChange'] = date => {
-    setEndDate(date);
-  };
   return (
     <>
       <HeaderWrapper className="headerWrap">
@@ -86,34 +30,6 @@ const RouterHeader: React.FC<RouterHeaderProps> = ({
             />
           </div>
         </StyledFlex>
-
-        {clientPortal && status === 'outstanding_return' && <ReturnSearchBar />}
-
-        {clientPortal &&
-          (status === 'scheduled_for_return' ||
-            status === 'return_completed') && <ReturnAfterSearchBar />}
-
-        {clientPortal && (
-          <DatePickerWrap>
-            <DatePicker
-              value={startDate ? dayjs(startDate) : null}
-              onChange={handleStartDateChange}
-              format={'MMMM D, YYYY'}
-              allowClear={false}
-              disabledDate={current =>
-                !!endDate && current.isAfter(dayjs(endDate), 'day')
-              }
-            />
-            <DatePicker
-              value={endDate ? dayjs(endDate) : null}
-              onChange={handleEndDateChange}
-              format={'MMMM D, YYYY'}
-              disabledDate={current =>
-                !!startDate && current.isBefore(dayjs(startDate), 'day')
-              }
-            />
-          </DatePickerWrap>
-        )}
       </HeaderWrapper>
     </>
   );
@@ -127,7 +43,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;