@bjsdistribution/dms-client-return 0.0.1

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -0,0 +1,298 @@
+// import React, { useEffect } from 'react';
+
+// import { useApiHook } from '@bjsdistribution/dms-component-library';
+// // import { useInQueueData } from '../readyforinvoice/store';
+// // import { useStaticData } from './store';
+// // import useInfiniteScroll from '../readyforinvoice/InfiniteScrolling';
+// import { useAtom } from 'jotai';
+// import { ApiResponse, Column } from '../../../types';
+// import MyTable from '../../table/table-data/MyTable';
+// import { overviewFiltersReducerAtom } from '../FilterStore';
+// import { useInQueueData, useStaticData } from '../../../store';
+// import useInfiniteScroll from '../../../../common/infiniteScrolling';
+// import { data } from '../../table/table-data/Fakedata';
+// // import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
+
+// const ReturnOrderTable: React.FC = () => {
+//   const getStatusId = (data: any) => {
+//     console.log(data, 'datadatadatadata');
+//   };
+
+//   const columns: Column[] = [
+//     { Header: 'Date', accessor: 'name' },
+//     { Header: 'Client', accessor: 'customer_name' },
+//     { Header: 'Account No', accessor: 'account_number' },
+//     { Header: 'Total Orders', accessor: 'total_orders' },
+//     { Header: 'Total Items', accessor: 'total_items' },
+//     { Header: 'Discount', accessor: 'discount' },
+//     { Header: 'Amount', accessor: 'amount' },
+//     { Header: 'VAT', accessor: 'vat_rate' },
+//     { Header: 'Total', accessor: 'total_amount' },
+//     { Header: 'Update Status', accessor: 'status_id', callback: getStatusId },
+//   ];
+
+//   const [filterState, dispatchOverviewFilter] = useAtom(
+//     overviewFiltersReducerAtom
+//   );
+//   const { 'x-pagination': pagination } = filterState;
+
+//   const [, setQueueData] = useInQueueData();  //data
+//   const [, setStaticData] = useStaticData();
+
+//   const {
+//     data: fetchedInvoiceData,
+//     // loadingskeleton,
+//     paginationData,
+//     setShouldPerformAction,
+//   } = useApiHook<ApiResponse>({
+//     endpoint: `/invoices/`,
+//     method: 'GET',
+//     performAction: true,
+//     pagination: pagination,
+//     filters: [
+//       { field: 'invoice_discount_queues.status_id', op: '=', value: 1 },
+//     ],
+//   });
+
+//   // infinite scrolling code start here
+//   const { page, scrollActivated } = useInfiniteScroll(
+//     paginationData,
+//     setShouldPerformAction,
+//     'tableScrolling'
+//   );
+
+//   useEffect(() => {
+//     dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
+//   }, [page]);
+
+//   useEffect(() => {
+//     if (fetchedInvoiceData && fetchedInvoiceData?.data) {
+//       const invoiceData = fetchedInvoiceData?.data;
+
+//       if (scrollActivated) {
+//         setQueueData((prev: any) => {
+//           const newData = invoiceData?.filter(
+//             (newItem: any) =>
+//               !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
+//           );
+//           return [...prev, ...newData];
+//         });
+//       } else {
+//         setQueueData(invoiceData);
+//       }
+//     }
+//   }, [fetchedInvoiceData, scrollActivated, setQueueData]);
+
+//   //for static data
+//   const { data: fetchedStaticData } = useApiHook<any>({
+//     endpoint: `/invoices/getStaticData/all/`,
+//     method: 'GET',
+//   });
+
+//   useEffect(() => {
+//     if (fetchedStaticData && fetchedStaticData?.data) {
+//       const staticData = fetchedStaticData?.data[0];
+//       setStaticData(staticData);
+//     }
+//   }, [fetchedStaticData, setStaticData]);
+
+//   return (
+//     <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
+//       <MyTable
+//         columns={columns}
+//         data={data}
+//         loading={false}
+//         // loadingskeleton={loadingskeleton}
+//       />
+//     </div>
+//   );
+// };
+
+// export default ReturnOrderTable;
+import { Checkbox } from '@bjsdistribution/dms-component-library';
+import { Empty } from 'antd';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+// import EmailIcon from '../../assets/EmailIcon';
+// import ExcelIcon from '../../assets/ExcelIcon';
+// import PdfIcon from '../../assets/PdfIcon';
+// import { countReducerAtom } from '../invoice-actions/store';
+// import { FormattedDate, getStringValue } from '../utils';
+// import { IconContainers, TdWrapper } from './emailStyles';
+// import { useEmailInvoice, useSelectedEmail } from './store';
+// import Popup from './Popup';
+import { Skeleton } from 'antd';
+// import { StyledTable, StyledTableWrapper } from '../styles';
+// import { EmptyDataContainer } from './emailStyles';
+// import ShareIcon from '../../assets/ShareIcon';
+import { data } from '../../table/table-data/Fakedata';
+// import { StyledTable, StyledTableWrapper } from '../../table-view/TableStyle';
+import { useEmailInvoice, useSelectedEmail } from '../../../store';
+import { countReducerAtom } from '../../../order-view/store';
+import { EmptyDataContainer } from '../../table/table-data/styles';
+import { FormattedDate, getStringValue } from '../../../utils';
+import { StyledTable, StyledTableWrapper } from './returnstyles';
+// import ExportIcon from '../../../../assets/icons/ExportIcon';
+// import ArrivalIcon from '../../../../assets/icons/ArrivalIcon';
+import PrinterIcon from '../../../../assets/icons/PrinterIcon';
+import DownIcon from '../../../../assets/icons/DownIcon';
+
+const ReturnOrderTable = ({ loadingskeleton }: any) => {
+  const [emailInvoiceData] = useEmailInvoice();
+  const [,] = useAtom(countReducerAtom);
+  const [selectedInvoices, setSelectedInvoices] = useSelectedEmail();
+  const [selectAll, setSelectAll] = useState(false);
+
+  const handleSelectAll = (e: any) => {
+    setSelectAll(e.target.checked);
+    if (e.target.checked) {
+      setSelectedInvoices(
+        emailInvoiceData.map((invoice: any) => ({
+          id: invoice.id,
+          status_id: 3,
+        }))
+      );
+    } else {
+      setSelectedInvoices([]);
+    }
+  };
+
+  const handleSelectInvoice = (id: any) => {
+    setSelectedInvoices((prevSelectedInvoices: any) => {
+      const isSelected = prevSelectedInvoices?.some(
+        (invoice: any) => invoice.id === id
+      );
+
+      if (isSelected) {
+        return prevSelectedInvoices.filter((invoice: any) => invoice.id !== id);
+      } else {
+        return [...prevSelectedInvoices, { id, status_id: 3 }];
+      }
+    });
+  };
+
+  return (
+    <>
+      <StyledTableWrapper id="tableScrolling">
+        <StyledTable>
+          <thead>
+            <tr>
+              <th className="emailInvoiceCheckbox">
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
+              </th>
+              {/* <th className="emailInvoiceNo">Invoice No.</th> */}
+              <th>Product Location</th>
+              <th>Return Location</th>
+              <th>Recipient</th>
+              <th>Code</th>
+              <th> Description</th>
+              <th>Part</th>
+              <th>Weight</th>
+              <th> CBM</th>
+              <th>Return Reason</th>
+              <th>Collected</th>
+              <th>Collection Reason</th>
+              <th className="emailInvoiceShare">Labels</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loadingskeleton ? (
+              <tr>
+                <td colSpan={6}>
+                  <Skeleton active />
+                </td>
+                <td colSpan={6}></td>
+              </tr>
+            ) : emailInvoiceData?.length === 0 ? (
+              <tr>
+                <td colSpan={7}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              data?.map((invoice: any) => (
+                <tr key={invoice.id}>
+                  <td>
+                    <Checkbox
+                      checked={selectedInvoices?.some(
+                        (selectedInvoice: any) =>
+                          selectedInvoice?.id === invoice.id
+                      )}
+                      onChange={() => handleSelectInvoice(invoice.id)}
+                    />
+                  </td>
+
+                  <td>{invoice?.customer_name}</td>
+
+                  <td>{invoice?.customer_name}</td>
+
+                  <td>
+                    <ul style={{ listStyleType: 'none', padding: 0 }}>
+                      <li
+                        style={{
+                          color: '#0099ff',
+                          fontWeight: 600,
+                          paddingLeft: 0,
+                        }}
+                      >
+                        {' '}
+                        {getStringValue(invoice?.account_number)}
+                      </li>
+                      <li style={{ color: '#888075' }}>
+                        {invoice?.customer_name}
+                      </li>
+                    </ul>
+                  </td>
+                  <td>{FormattedDate({ date: invoice?.date })}</td>
+                  <td>
+                    {/* <TdWrapper>{invoice?.account_number}</TdWrapper> */}
+                    {invoice?.vat_rate_amount}
+                  </td>
+                  <td>{invoice?.customer_name}</td>
+                  <td>{invoice?.customer_name}</td>
+
+                  <td>{invoice?.customer_name}</td>
+                  <td>{invoice?.customer_name}</td>
+                  <td>{invoice?.customer_name}</td>
+                  {/* <td>{invoice?.customer_name}</td> */}
+                  <td>{invoice?.customer_name}</td>
+
+                  {/* <td onClick={() => dispatch({ type: 'email-sent' })}>
+                    <IconContainers>
+                      <i>
+                        <ExportIcon />
+                      </i>
+                    </IconContainers>
+                  </td>
+                  <td>
+                    <IconContainers>
+                      <i>
+                        <PdfIcon />
+                      </i>
+                      <i>
+                        <ArrivalIcon />
+                      </i>
+                      <i>
+                        <PdfIcon />
+                      </i>
+                    </IconContainers>
+                  </td> */}
+                  <td>
+                    <div className="shareIconContainer">
+                      <PrinterIcon />
+                      <DownIcon />
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
+  );
+};
+
+export default ReturnOrderTable;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/RightFilters.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+
+import { StyledBulkItem } from '../../filters/BulkFilterStyle';
+import SearchType from '../../header/route-header/search/SearchType';
+import styled from 'styled-components';
+import DownloadIcon from '../../../../assets/icons/DownloadIcon';
+
+const RightFilters = () => {
+  return (
+    <Container>
+      <TextConatiner>
+        <Text>Create Return</Text>
+      </TextConatiner>
+      
+      <StyledBulkItem>
+        <SearchType />
+      </StyledBulkItem>
+      <IconConatiner>
+        <Mid>
+          <IconText>Export</IconText>
+          <DownloadIcon/>
+        </Mid>
+      </IconConatiner>
+     
+    </Container>
+  );
+
+
+  //   return (
+  //     // <StyledBulkFilterCover>
+
+  //       <StyledBulkItem>
+  //       <SearchType />
+  //       </StyledBulkItem>
+  //       /* {showTableFilter && (
+  //         <StyledBulkItem>
+  //           <TableFilter tableData={TableData[0].tableHead} />
+  //         </StyledBulkItem>
+  //       )} */
+  //     // </StyledBulkFilterCover>
+  //   );
+};
+const Container = styled.div`
+  display: flex;
+/* align-items: flex-start; */
+gap: 16px;
+align-items: center;
+
+`
+const Mid = styled.div`
+  display: flex;
+  padding: 4px 10px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 15px 0px 0px 15px;
+`;
+const TextConatiner = styled.div`
+  display: flex;
+  padding: 7px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  border-radius: 15px;
+  background: rgba(136, 128, 117, 0.35);
+`;
+const Text = styled.div`
+  color: #888075;
+  font-family: "'Lato";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+`;
+
+
+const IconConatiner = styled.div`
+  /* display: flex;
+  height: 34px;
+  padding: 4px 10px;  
+  align-items: flex-start;
+  border-radius: 8px 8px 8px 8px; */
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  background: #f0f2f2;
+  border: 1px solid  #e2e0db;
+  display: flex;
+  padding: 7px 12px;
+  justify-content: center;
+  align-items: center;
+  gap: 2px;
+  border-radius: 15px;
+  height: 34px;
+`;
+
+const IconText = styled.div`
+  color: #3a3630;
+  text-align: center;
+
+  /* body/captions */
+  font-family: 'Lato';
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+export default RightFilters;