@bjsdistribution/dms-client-return 0.0.1 → 0.0.3

package/src/components/order-daily-overview/table/Return.tsx

@@ -1,156 +0,0 @@
-import React, { useEffect } from 'react';
-// import { ApiResponse, Column } from './types';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import MultiRFI from './ReadyforInvoicemulti';
-import { useAtom } from 'jotai';
-// import useInfiniteScroll from './InfiniteScrolling';
-// import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
-// import {
-//   usePrevSelectedClients,
-//   useSelectedClients,
-// } from '../header-for-invoice/store';
-import Table from './table-data/Table';
-import { useMaiNTableView } from '../../store';
-import { overviewFiltersReducerAtom } from '../return-order-table/FilterStore';
-import { ApiResponse, Column } from '../../types';
-import useInfiniteScroll from './InfiniteScrolling';
-
-const RFI: React.FC = () => {
-  //   const [, setClient] = useSelectedClients();
-  const [tabledata, setMainTableData] = useMaiNTableView();
-  const [filterState, dispatchOverviewFilter] = useAtom(
-    overviewFiltersReducerAtom
-  );
-  console.log('tabledata', tabledata);
-  const columns: Column[] = [
-    {
-      Header: 'Trading Name',
-      accessor: 'name',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Client',
-      accessor: 'customer_name',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Orders',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Products',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'RTS',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Pending',
-      accessor: 'total_items',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Dispose',
-      accessor: 'customer_id',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Re-allocate',
-      accessor: 'debrief_status',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Re-Del',
-      accessor: 'vat_rate_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Recycle',
-      accessor: 'fuel_surcharge_amount',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'unknown',
-      accessor: 'discount_amount',
-      sortable: true,
-      showIcon: true,
-    },
-  ];
-  // const [invoiceData, setInvoiceData] = useInvoiceData();
-  //   const [
-  //     readyForInvoiceOverview,
-  //     setReadyForInvoiceOverview,
-  //   ] = useReadyForInvoiceOverview();
-  // const [filterApplied] = usefilterApplied();
-
-  const { 'x-filters': filters, 'x-pagination': pagination } = filterState;
-  const {
-    data: fetchedOverviewData,
-    setShouldPerformAction, // need for  infinite
-    paginationData, // need for  infinite
-    // loadingskeleton, // need for  infinite
-  } = useApiHook<ApiResponse>({
-    endpoint: `/invoices/ready_for_invoice/overview/`,
-    method: 'GET',
-    filters: filters,
-    pagination: pagination,
-    performAction: true,
-  });
-
-  console.log('fetchedOverviewData', fetchedOverviewData);
-  //  infinite scrolling code start here
-  const { page, scrollActivated } = useInfiniteScroll(
-    paginationData,
-    setShouldPerformAction,
-    'tableScrolling'
-  );
-  useEffect(() => {
-    dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
-  }, [page]);
-
-  useEffect(() => {
-    if (fetchedOverviewData && fetchedOverviewData?.data) {
-      const invoiceData = fetchedOverviewData?.data;
-
-      if (scrollActivated) {
-        setMainTableData((prev: any) => {
-          const newData = invoiceData?.filter(
-            (newItem: any) =>
-              !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
-          );
-          return [...prev, ...newData];
-        });
-      } else {
-        setMainTableData(invoiceData);
-      }
-    }
-  }, [fetchedOverviewData, scrollActivated]);
-
-  return (
-    <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
-      {/* {renderContent} */}
-      <Table
-        columns={columns}
-        data={tabledata}
-        loading={false}
-        // loadingskeleton={loadingskeleton}
-        view="rfi"
-      />
-    </div>
-  );
-};
-export default RFI;

package/src/components/order-daily-overview/table/table-data/MyTable.tsx

@@ -1,433 +0,0 @@
-import React from 'react';
-import {
-  Back,
-  Buttons,
-  EmptyDataContainer,
-  Header,
-  Remove,
-  StyledTable,
-  StyledTableWrapper,
-  StyledTdBasic,
-} from './styles';
-import styled from 'styled-components';
-// import CustomSelectDropdown from '../../components/inqueue/helper';
-import { format } from 'date-fns';
-// import { useStaticData } from '../../components/inqueue/store';
-// import DropdownIcon from '../../assets/DropdownIcon';
-// import { getIntegerValue } from '../../components/utils';
-// import { Skeleton } from 'antd';
-import { atom, useAtom } from 'jotai';
-// import { countReducerAtom } from '../../components/invoice-actions/store';
-import { Empty, Skeleton } from 'antd';
-// import { EmptyDataContainer } from '../../components/emailInvoice/emailStyles';
-// import { Column } from '../../components/readyforinvoice/types';
-import { ConfigProvider } from 'antd';
-import { Column } from '../../../types';
-import ArrowIcon from '../../../../assets/icons/ArrowIcon';
-import ArrivalIcon from '../../../../assets/icons/ArrivalIcon';
-import VehicleIcon from '../../../../assets/icons/VehicleIcon';
-import { getIntegerValue } from '../../../utils';
-import CustomSelectDropdown from './helper';
-import { useStaticData } from '../../../store';
-// import GreenDotIcon from '../../assets/GreenDotIcon';
-// import RedDotIcon from '../../assets/RedDotIcon';
-// import OrangeDotIcon from '../../assets/OrangeDotIcon';
-
-export const selectedValueAtom = atom(null);
-export const selectedIDAtom = atom(null);
-
-interface TableRow {
-  [key: string]: any;
-}
-
-interface MyTableProps {
-  columns: Column[];
-  data: any;
-  loading: boolean;
-  loadingskeleton?: boolean;
-  view?: 'rfi';
-}
-
-// Function to render nested content
-const MyTable: React.FC<MyTableProps> = ({
-  columns,
-  data,
-  // loading,
-  loadingskeleton,
-  view,
-}) => {
-  const [staticData] = useStaticData();
-
-  const statusOptions = staticData?.invoice_discount_status?.map(
-    (item: any) => ({
-      value: item?.id,
-      label: item?.status,
-      icon:
-        item?.status?.toLowerCase() === 'pending' ? (
-          <ArrivalIcon />
-        ) : item?.status?.toLowerCase() === 'approved' ? (
-          <ArrivalIcon />
-        ) : (
-          <VehicleIcon />
-        ),
-    })
-  );
-
-  const renderContent = (content: any): React.ReactNode => {
-    if (Array.isArray(content)) {
-      return (
-        <div>
-          {content.map((item, index) => (
-            <div key={index}>{renderContent(item)}</div>
-          ))}
-        </div>
-      );
-    } else if (typeof content === 'object' && content !== null) {
-      return (
-        <div>
-          {Object.entries(content).map(([key, value]) => (
-            <div key={key}>{renderContent(value)}</div>
-          ))}
-        </div>
-      );
-    }
-    return content;
-  };
-
-//   const [, dispatch] = useAtom(countReducerAtom);
-  const [, setSelectedValue] = useAtom(selectedValueAtom);
-  const [, setSelectedID] = useAtom(selectedIDAtom);
-
-  const handleSelect = (id: any) => {
-    setSelectedID(id);
-  };
-
-  const handleOption = (event: any) => {
-    const selectedValue = event;
-    setSelectedValue(selectedValue);
-    // 1: For pending  2: For Rejected 3: For Approved
-    if (selectedValue === 2 || selectedValue === 3) {
-    //   dispatch({ type: 'discount-modal' });
-    }
-  };
-
-  const renderCellContent = (column: Column, tableRow: TableRow) => {
-    const cellData = tableRow[column?.accessor];
-    const statusID = tableRow?.invoice_discount_queues?.status_id;
-    const selectedOption = statusOptions?.find(
-      (option: any) => option?.value === statusID
-    );
-
-    switch (column.accessor) {
-      case 'action':
-        return (
-          <Buttons>
-            <Back onClick={() => console.log('Action button clicked')}>
-              Back to debrief
-            </Back>
-            <Remove onClick={() => console.log('Another button clicked')}>
-              Remove from Invoice
-            </Remove>
-          </Buttons>
-        );
-      case 'invoice_date':
-        if (!cellData) {
-          return null;
-        }
-        const formattedInvoiceDate = format(new Date(cellData), 'dd/MM/yyyy');
-        return <span>{formattedInvoiceDate}</span>;
-
-      case 'date':
-        if (!cellData) {
-          return null;
-        }
-        const formattedDate = format(new Date(cellData), 'dd/MM/yyyy');
-        return <span>{formattedDate}</span>;
-
-      case 'total_orders':
-        return (
-          <span
-            style={{
-              backgroundColor: 'rgba(153, 153, 153, 0.10)',
-              padding: '3px 12px',
-              borderRadius: '4px',
-              color: '#6A7378',
-            }}
-          >
-            {view !== 'rfi' ? cellData : tableRow?.grand_total?.total_orders}
-          </span>
-        );
-      case 'total_amount':
-        const val = +tableRow?.grand_total?.total_amount;
-        return (
-          <span
-          style={{
-            backgroundColor: 'rgba(153, 153, 153, 0.10)',
-            padding: '3px 12px',
-            borderRadius: '4px',
-            color: '#6A7378',
-          }}
-        >            
-        
-            {view !== 'rfi'
-              ? cellData?.toLocaleString()
-              : val?.toLocaleString()}
-          </span>
-        );
-      case 'discount':
-        return (
-          <span
-            style={{
-              display: 'flex',
-              flexDirection: 'row',
-              gap: '5px',
-              alignItems: 'center',
-            }}
-          >
-            <Percentage>
-              {tableRow?.invoice_discount_queues?.new_discount}
-              {'%'}
-            </Percentage>
-
-            <span
-              style={{
-                alignItems: 'center',
-                fontSize: '14px',
-                color: '#3A3630',
-              }}
-            >
-              {getIntegerValue(cellData)}
-            </span>
-          </span>
-        );
-      case 'total':
-        const totalVal = +tableRow?.grand_total?.grand_total;
-        return (
-          <span>
-            {'£'}
-            {view !== 'rfi'
-              ? cellData?.toLocaleString()
-              : totalVal?.toLocaleString()}
-          </span>
-        );
-      case 'amount':
-        return (
-          <span>
-            {'£'}
-            {cellData?.toLocaleString()}
-          </span>
-        );
-      case 'zone':
-        return (
-          <span
-            style={{
-              backgroundColor: 'rgba(153, 153, 153, 0.10)',
-              padding: '3px 12px',
-              borderRadius: '4px',
-            }}
-          >
-            {cellData}
-          </span>
-        );
-      case 'vat_rate':
-        return (
-<span
-            style={{
-              backgroundColor: 'rgba(153, 153, 153, 0.10)',
-              padding: '3px 12px',
-              borderRadius: '4px',
-            }}
-          >            {view !== 'rfi' ? cellData : tableRow?.grand_total?.vat_rate}
-            {'%'}
-          </span>
-        );
-      case 'products':
-        return (
-          <span
-            style={{
-              backgroundColor: 'rgba(153, 153, 153, 0.10)',
-              padding: '3px 12px',
-              borderRadius: '4px',
-            }}
-          >
-            {cellData}
-          </span>
-        );
-      case 'customer_name':
-        return (
-          <span
-            style={{
-              color: '#0099ff',
-              fontWeight: 600,
-              cursor: 'pointer',
-            }}
-            onClick={() =>
-              column.callback !== undefined &&
-              column?.callback({
-                label: tableRow?.customer_name,
-                value: tableRow?.customer_id,
-              })
-            }
-          >
-            {cellData}
-          </span>
-        );
-      case 'status_id':
-        return (
-          <>
-            <div onClick={() => handleSelect(tableRow?.id)}>
-              <DropdownContainer>
-                <ConfigProvider
-                  theme={{
-                    components: {
-                      Select: {
-                        /* here is your component tokens */
-                        optionPadding: '10px 6px',
-                        optionFontSize: 13,
-                        optionHeight: 16,
-                        optionSelectedFontWeight: 400,
-                      },
-                    },
-                  }}
-                >
-                  <CustomSelectDropdown
-                    value={selectedOption}
-                    options={statusOptions}
-                    onChange={handleOption}
-                    variant="borderless"
-                    optionRender={(option: any) => (
-                      <div
-                        style={{
-                          display: 'flex',
-                          gap: '8px',
-                          alignItems: 'center',
-                        }}
-                      >
-                        <span
-                          style={{ display: 'flex' }}
-                          aria-label={option.data.label}
-                        >
-                          {option.data.icon}
-                        </span>
-                        <span style={{ color: '#8D8F90' }}>
-                          {option.data.label}
-                        </span>
-                      </div>
-                    )}
-                  />
-                  <IconContainer>
-                    <ArrowIcon />
-                  </IconContainer>
-                </ConfigProvider>
-              </DropdownContainer>
-            </div>
-          </>
-        );
-      default:
-        return renderContent(cellData);
-    }
-  };
-
-  return (
-    <CoverDiv>
-      <StyledTableWrapper id="tableScrolling">
-        <StyledTable className="mainTable">
-          <thead>
-            <tr>
-              {columns?.map(column => (
-                <Header key={column.accessor}>{column.Header}</Header>
-              ))}
-            </tr>
-            {/* <tr>
-              {columns?.map(column => (
-                <Header key={column.accessor}>
-                  {column.Header}
-                  {column.showIcon && column.sortable && (
-                    <div style={{ marginTop: '5px' }}>
-                      <InvoiceSortIcon />
-                    </div>
-                  )}
-                </Header>
-              ))}
-            </tr> */}
-          </thead>
-          <tbody>
-            {loadingskeleton ? (
-              <tr>
-                <td colSpan={columns?.length || 7}>
-                  <Skeleton active />
-                </td>
-              </tr>
-            ) : data?.length ? (
-              data.map((tableRow: TableRow, index: any) => (
-                <tr key={index}>
-                  {columns?.map(column => (
-                    <StyledTdBasic key={column.accessor}>
-                      {renderCellContent(column, tableRow)}
-                    </StyledTdBasic>
-                  ))}
-                </tr>
-              ))
-            ) : (
-              <tr>
-                <td colSpan={columns?.length || 7}>
-                  <EmptyDataContainer>
-                    <Empty />
-                  </EmptyDataContainer>
-                </td>
-              </tr>
-            )}
-          </tbody>
-        </StyledTable>
-      </StyledTableWrapper>
-    </CoverDiv>
-  );
-};
-
-export default MyTable;
-
-const Percentage = styled.div`
-  border-radius: 4px;
-  background: rgba(42, 175, 77, 0.12);
-  display: flex;
-  padding: 4px 8px;
-  align-items: flex-start;
-  gap: 24px;
-  color: #2aaf4d;
-`;
-
-const IconContainer = styled.div`
-  position: absolute;
-  top: 7px;
-  left: 71px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.5);
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
-  display: flex;
-  width: 18px;
-  height: 18px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  pointer-events: none;
-`;
-
-const DropdownContainer = styled.div`
-  position: relative;
-  .custom-dropdown {
-    .ant-select-item {
-      font-weight: 400;
-      font-size: 13px;
-    }
-  }
-`;
-
-export const CoverDiv = styled.div`
-  position: relative;
-  min-height: calc(100vh - 396px);
-  .ant-skeleton {
-    position: absolute;
-    bottom: 0;
-    background: #fff;
-  }
-`;