@bjsdistribution/dms-client-return 0.0.1 → 0.0.3

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

@@ -1,445 +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 Table: 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 (
-          <span
-            style={{
-              backgroundColor: 'rgba(153, 153, 153, 0.10)',
-              padding: '3px 12px',
-              borderRadius: '4px',
-              color: '#6A7378',
-            }}
-          >
-            {renderContent(cellData)}
-          </span>
-        );
-    }
-  };
-
-  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 Table;
-
-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;
-  }
-`;