@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,445 @@
+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;
+  }
+`;

package/src/components/order-daily-overview/table/table-data/helper.ts

@@ -0,0 +1,49 @@
+import { Select } from 'antd';
+import styled from 'styled-components';
+
+const getColor = (data: any) => {
+  switch (data?.value) {
+    case 1:
+      return '#FFF1D6';
+    case 2:
+      return '#ffcbcb';
+    case 3:
+      return '#ceffd6';
+    default:
+      return 'grey';
+  }
+};
+
+const getStatusColor = (data: any) => {
+  switch (data?.value) {
+    case 1:
+      return '#FEBA30';
+    case 2:
+      return '#E95252';
+    case 3:
+      return '#1F9254';
+    default:
+      return 'grey';
+  }
+};
+
+const CustomSelectDropdown: any = styled(Select)`
+  .ant-select-selector {
+    background-color: ${props => getColor(props.value)} !important;
+    color: ${props => getStatusColor(props.value)} !important;
+    border-color: ${props => getStatusColor(props.value)};
+    border-radius: 25px !important;
+    border: none !important;
+    min-width: 100px;
+    padding: 0 10px;
+  }
+  .ant-select-arrow {
+    display: none;
+  }
+  .ant-select-selection-item {
+    font-weight: 600;
+    font-size: 12px;
+  }
+`;
+
+export default CustomSelectDropdown;