@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

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

@@ -1,349 +0,0 @@
-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';
-import dayjs from 'dayjs';
-import { WEIGHT_UNIT } from '../../../common/utils';
-
-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">
-                  Delivery Date {renderSortIcon('return_location_name')}
-                </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 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>
-              <th onClick={() => handleSort('weight')}>
-                <div className="sortIconClass">
-                  Total Weight ({WEIGHT_UNIT}) {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>{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 }}>
-                        <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?.recipient_reference)}</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 ? WEIGHT_UNIT : ''}
-                    </td>
-
-                    <td>{displayValueOrNA(item?.cube)}</td>
-
-                    <td>
-                      <ul
-                        className="statuscontainer"
-                        style={{
-                          listStyleType: 'none',
-                          background: statusClass.background,
-                        }}
-                      >
-                        <li
-                          className="statustext"
-                          style={{ color: statusClass.color }}
-                        >
-                          {status}
-
-                          {(status === 'Completed' || status === 'Failed') &&
-                          item?.action_date
-                            ? ` - ${dayjs(item?.action_date).format(
-                                'DD/MM/YYYY'
-                              )}`
-                            : ''}
-                        </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/fakeData.ts

@@ -1,342 +0,0 @@
-export const obtainProductMethodData = [
-  {
-    label: 'Collect From Other Location',
-    value: 'collect_from_other_location',
-  },
-  {
-    label: 'Collect From Customer',
-    value: 'collect_from_customer',
-  },
-  {
-    label: 'Collect From Supplier',
-    value: 'collect_from_supplier',
-  },
-  {
-    label: 'Already Collected',
-    value: 'already_collected',
-  },
-  {
-    label: 'Customer Delivering into Depot',
-    value: 'customer_delivering_into_depot',
-  },
-  {
-    label: 'Supplier Delivering into Depot',
-    value: 'supplier_delivering_into_depot',
-  },
-  {
-    label: 'Pick From Internal stock',
-    value: 'pick_from_internal_stock',
-  },
-  {
-    label: 'Full Stock Control',
-    value: 'full_stock_control',
-  },
-];
-export const options = [
-  {
-    label: 'Task',
-    value: 'task',
-    selectedBackgroundColor: '#F0F2F2',
-    selectedFontColor: '#3a3630',
-  },
-  {
-    label: 'Reminder',
-    value: 'reminder',
-    selectedBackgroundColor: 'white',
-    selectedFontColor: '#3a3630',
-  },
-];
-export const ReturnData = [
-  {
-    label: 'Return1',
-    value: 'return1',
-  },
-  {
-    label: 'Return2',
-    value: 'return2',
-  },
-  {
-    label: 'Return3',
-    value: 'return3',
-  },
-];
-export const CollectionData = [
-  {
-    label: 'Test1',
-    value: 'test1',
-  },
-  {
-    label: 'Test2',
-    value: 'test2',
-  },
-  {
-    label: 'Test3',
-    value: 'test3',
-  },
-];
-export const UnReceivedata = [
-  {
-    label: 'Test1',
-    value: 'test1',
-  },
-  {
-    label: 'Test2',
-    value: 'test2',
-  },
-  {
-    label: 'Test3',
-    value: 'test3',
-  },
-];
-export const ProductType = [
-  {
-    label: 'Delivery',
-    value: 'delivery',
-  },
-  {
-    label: 'Return',
-    value: 'return',
-  },
-  {
-    label: 'Collection',
-    value: 'collection',
-  },
-];
-export const TaskType = [
-  {
-    label: 'Client',
-    value: 'client',
-  },
-  {
-    label: 'Customer Service (CS)',
-    value: 'cs',
-  },
-  {
-    label: 'Transport (DH)',
-    value: 'dh',
-  },
-  {
-    label: 'Warehouse',
-    value: 'warehouse',
-  },
-  {
-    label: 'Customer Portal',
-    value: 'customer-portal',
-  },
-  {
-    label: 'Delivery App',
-    value: 'delivery-app',
-  },
-  {
-    label: 'Complaints',
-    value: 'complaints',
-  },
-  {
-    label: 'Offshore',
-    value: 'offshore',
-  },
-  {
-    label: 'Stock Admin',
-    value: 'stock-admin',
-  },
-  {
-    label: 'Call Customer',
-    value: 'call-customer',
-  },
-  {
-    label: 'Driver Compliance',
-    value: 'driver-compliance',
-  },
-];
-export const CustomOptions = [
-  {
-    label: 'Private',
-    value: 'private',
-  },
-  {
-    label: 'Public',
-    value: 'public',
-  },
-];
-export const DefectConfirm = [
-  {
-    label: 'Yes',
-    value: 'yes',
-  },
-  {
-    label: 'No',
-    value: 'no',
-  },
-];
-export const TomTomColumns = [
-  {
-    header: 'Event Date',
-    accessorKey: 'eventdate',
-  },
-  {
-    header: 'Route',
-    accessorKey: 'route',
-  },
-  {
-    header: 'Details',
-    accessorKey: 'details',
-  },
-  {
-    header: 'Type',
-    accessorKey: 'type',
-  },
-];
-export const orderResources = [
-  {
-    types: 'Workflow',
-    category: 'ePOD',
-    datetimes: '2024-06-01 10:30:30',
-    action: 'action',
-    reference: 'Success Note',
-  },
-  {
-    types: 'Workflow',
-    category: 'ePOD',
-    datetimes: '2024-06-01 10:30:30',
-    action: 'action',
-    reference: 'Success Note',
-  },
-  {
-    types: 'Workflow',
-    category: 'ePOD',
-    datetimes: '2024-06-01 10:30:30',
-    action: 'action',
-    reference: 'Success Note',
-  },
-  {
-    types: 'Workflow',
-    category: 'ePOD',
-    datetimes: '2024-06-01 10:30:30',
-    action: 'action',
-    reference: 'Success Note',
-  },
-];
-export const orderResourcesColumns = [
-  {
-    header: 'Date Time',
-    accessorKey: 'datetimes',
-  },
-  {
-    header: 'Type',
-    accessorKey: 'types',
-  },
-  {
-    header: 'Category',
-    accessorKey: 'category',
-  },
-  {
-    header: 'Reference',
-    accessorKey: 'reference',
-  },
-  {
-    header: 'Action',
-    accessorKey: 'action',
-  },
-];
-export const tomtomResources = [
-  {
-    route: 'Hammer',
-    details: 'Sent to Object; RYF',
-    eventdate: '2024-06-01',
-    type: 'workFlow',
-  },
-  {
-    route: 'Screwdriver',
-    details: 'Sent to Object; RYF',
-    eventdate: '2024-06-10',
-    type: 'workFlow',
-  },
-  {
-    route: 'Wrench',
-    details: 'Sent to Object; RYF',
-    eventdate: '2024-06-20',
-    type: 'workFlow',
-  },
-];
-export const toolboxResources = [
-  {
-    resources: 'Hammer',
-    sources: 'John Doe',
-    datetime: '2024-06-01',
-    action: 'Action',
-  },
-  {
-    resources: 'Screwdriver',
-    sources: 'Jane Smith',
-    datetime: '2024-06-10',
-    action: 'Action',
-  },
-  {
-    resources: 'Wrench',
-    sources: 'Jim Beam',
-    datetime: '2024-06-20',
-    action: 'Action',
-  },
-];
-export const toolboxColumns = [
-  {
-    header: 'Resources',
-    accessorKey: 'resources',
-  },
-  {
-    header: 'Sources',
-    accessorKey: 'sources',
-  },
-  {
-    header: 'Date Time',
-    accessorKey: 'datetime',
-  },
-  {
-    header: 'Action',
-    accessorKey: 'action',
-  },
-];
-export const SystemEventColumns = [
-  {
-    header: 'Date',
-    accessorKey: 'date',
-  },
-  {
-    header: 'Event',
-    accessorKey: 'event',
-  },
-  {
-    header: 'Notes',
-    accessorKey: 'notes',
-  },
-  {
-    header: 'Code',
-    accessorKey: 'code',
-  },
-];
-export const systemLgsEvents = [
-  {
-    event: 'Order cretaed via Api',
-    notes: 'Consignment Number: BGRD546841',
-    date: '2024-06-01 20:01:11',
-    code: 'BPA1124',
-  },
-  {
-    event: 'Order cretaed via Api',
-    notes: 'Consignment Number: BGRD546841',
-    date: '2024-06-01 20:01:11',
-    code: 'BPA1124',
-  },
-  {
-    event: 'Order cretaed via Api',
-    notes: 'Consignment Number: BGRD546841',
-    date: '2024-06-01 20:01:11',
-    code: 'BPA1124',
-  },
-  {
-    event: 'Order cretaed via Api',
-    notes: 'Consignment Number: BGRD546841',
-    date: '2024-06-01 20:01:11',
-    code: 'BPA1124',
-  },
-];