@bjsdistribution/dms-client-return 0.0.2 → 0.0.3

package/src/components/order-daily-overview/index.tsx

@@ -1,5 +1,10 @@
-import React, { useState } from 'react';
-import { UsePaginationData, useItemsPerPage } from './store/store';
+import React, { useEffect, useState } from 'react';
+import {
+  UsePaginationData,
+  useItemsPerPage,
+  useLoading,
+  useTableName,
+} from './store/store';
 import Filters from './filters/Filters';
 // import TableComponent from '../../components/order-daily-overview/table-view/table/Table';
 // import TableComponent from '../../components/order-daily-overview/Cards/CardsTable'
@@ -10,12 +15,27 @@ import RouterHeader from './header/route-header/RouterHeader';
 import { useStickyStatus } from '../store';
 import HeaderFilter from './header-filters/HeaderFilter';
 import ReturnTable from './table/ReturnTable';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { useClientData } from '../order-view/store';
+import { ClientData } from './common/interface';
+import ReturnOrderTable from './return-order-table/return-orders-filters/ReturnOrderTable';
+import ReturnFilter from './return-order-table/return-orders-filters/ReturnFilter';
+import { Text } from './filters/FilterStyle';
 // import Loader from '../loader/Loader';
 
+// interface ApiResponse {
+//   message: string;
+//   code: number;
+//   error: string | null;
+//   error_traceback: string | null;
+//   data: [];
+// }
+
 function ReturnMainTable() {
   const [paginationObj] = UsePaginationData();
   const [, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
+  const [selectedClient] = useTableName();
 
   const { page, total } = paginationObj;
 
@@ -26,16 +46,44 @@ function ReturnMainTable() {
   const handleItemsPerPageChange = (itemsPerPage: number) => {
     setItemsPerPage(itemsPerPage);
   };
+
   ////
+  const [, setLoading] = useLoading();
+  const [, setClientData] = useClientData();
+
+  const { data: fetchedClientData, loading: staticDataLoading } = useApiHook<{
+    data: ClientData[];
+  }>({
+    endpoint: `/return_orders/get/client-returns/`,
+    method: 'GET',
+  });
+  console.log('fetchedClientData', fetchedClientData?.data);
+
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedClientData && fetchedClientData.data) {
+      const result = fetchedClientData?.data;
+      setClientData(result);
+
+      // Flatten the nested objects into an array
+
+      // const data = Object.values(fetchedClientData.data);
+      // console.log('data', data);
+      // setClientData(data);
+    }
+  }, [staticDataLoading]);
+
   return (
     <>
-      {/* <Loader /> */}
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <Filters />
-          <ReturnTable />
+          <Row>
+            <Text> {selectedClient ? selectedClient : 'Client Return'}</Text>
+            {selectedClient ? <ReturnFilter /> : <Filters />}
+          </Row>
+          {selectedClient ? <ReturnOrderTable /> : <ReturnTable />}
           {total > 0 && (
             <Pagination
               currentPage={page}
@@ -47,13 +95,18 @@ function ReturnMainTable() {
           )}
         </div>
       </DashBoardWrapper>
-      {/* {<Loader />} */}
     </>
   );
 }
 
 export default ReturnMainTable;
 
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;

package/src/components/order-daily-overview/return-after-table/ReturnAfterTable.tsx

@@ -1,11 +1,34 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import RouterHeader from '../header/route-header/RouterHeader';
 import HeaderFilter from '../header-filters/HeaderFilter';
 import OrderTable from './table/OrderTable';
 import ReturnOrderFilter from './table-filters/ReturnOrderFilter';
+import { useReturnAfterOrderData } from '../../order-view/store';
+import { useLoading } from '../store/store';
+import { ApiResponse } from '../common/interface';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
 
 const ReturnAfterTable = () => {
+  const [returnAfterOrder, setReturnOrderData] = useReturnAfterOrderData();
+  const [, setLoading] = useLoading();
+
+  const {
+    data: fetchedReturnOrderData,
+    loading: staticDataLoading,
+  } = useApiHook<ApiResponse>({
+    endpoint: '/return_orders/?skip_filters=0',
+    method: 'GET',
+  });
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedReturnOrderData && fetchedReturnOrderData?.data) {
+      setReturnOrderData(fetchedReturnOrderData?.data);
+    }
+  }, [fetchedReturnOrderData, staticDataLoading]);
+
+  console.log('returnAfterOrder', returnAfterOrder);
+
   return (
     <div>
       <DashBoardWrapper>

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -1,183 +1,111 @@
-// 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 { AntSelect, Checkbox } from '@bjsdistribution/dms-component-library';
+import {
+  AntSelect,
+  Checkbox,
+  displayValueOrNA,
+} 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 React, { useEffect, useRef, useState } from 'react';
 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 { useSelectedOrders } from '../../../store';
+import { useReturnAfterOrderData } from '../../../order-view/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
-import { FormattedDate, getStringValue } from '../../../utils';
-// import ExportIcon from '../../../../assets/icons/ExportIcon';
-// import ArrivalIcon from '../../../../assets/icons/ArrivalIcon';
 import PrinterIcon from '../../../../assets/icons/PrinterIcon';
 import DownIcon from '../../../../assets/icons/DownIcon';
 import {
   StyledTable,
   StyledTableWrapper,
+  CustomDrop,
 } from '../../return-order-table/return-orders-filters/returnstyles';
 import LoadIcon from '../../../../assets/icons/LoadIcon';
-// import { StyledAntSelect } from '../../Header-filters/Styledfilters';
+import { usePrintOptionTOggle } from '../../store/store';
+import PrintDropDown from '../../../order-view/details-filters/left-side-filters/dropdowns/PrintDropDown';
 
 const OrderTable = ({ loadingskeleton }: any) => {
-  const [emailInvoiceData] = useEmailInvoice();
-  const [,] = useAtom(countReducerAtom);
-  const [selectedInvoices, setSelectedInvoices] = useSelectedEmail();
+  const [selectedOrders, setSelectedReturnOrder] = useSelectedOrders();
   const [selectAll, setSelectAll] = useState(false);
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const defaultSelectWrapperClass = 'rounded';
+  const dropdownRefParent = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [printToogle, setPrintToggle] = usePrintOptionTOggle();
+
+  const [returnAfterOrder] = useReturnAfterOrderData();
+
+  const OpenDropDown = (index: number) => {
+    setPrintToggle(prevIndex => (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 handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
-      setSelectedInvoices(
-        data.map((invoice: any) => ({
-          id: invoice.id,
+      setSelectedReturnOrder(
+        returnAfterOrder.map((e: any) => ({
+          id: e.id,
           status_id: 3,
         }))
       );
     } else {
-      setSelectedInvoices([]);
+      setSelectedReturnOrder([]);
     }
   };
 
   const handleSelectInvoice = (id: any) => {
-    setSelectedInvoices((prevSelectedInvoices: any) => {
+    setSelectedReturnOrder((prevSelectedInvoices: any) => {
       const isSelected = prevSelectedInvoices?.some(
-        (invoice: any) => invoice.id === id
+        (item: any) => item.id === id
       );
 
       if (isSelected) {
-        return prevSelectedInvoices.filter((invoice: any) => invoice.id !== id);
+        return prevSelectedInvoices.filter((items: any) => items.id !== id);
       } else {
         return [...prevSelectedInvoices, { id, status_id: 3 }];
       }
     });
   };
+  console.log('', returnAfterOrder);
+
+  const assigneOptions = [
+    {
+      label: 'BJS Distribution',
+      value: 'bjs-dist',
+    },
+    {
+      label: 'Haulage',
+      value: 'haulage',
+    },
+  ];
+
+  const getStatusClass = (status: any) => {
+    switch (status) {
+      case 'Cancelled':
+        return { color: '#E95252', background: 'rgba(233, 82, 82, 0.15)' };
+      case 'Pending':
+        return { color: '#F4A503', background: '#FFF1D6' };
+      case 'Awaiting':
+        return { color: '#845ADF', background: 'rgba(132, 90, 223, 0.15)' };
+      case 'Completed':
+        return { color: '#1F9254', background: 'rgba(41, 204, 106, 0.15)' };
+      default:
+        return { color: '#000', background: '#fff' };
+    }
+  };
 
   return (
     <>
@@ -189,7 +117,6 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th>
               <th className="emailInvoiceNo">Created</th>
-              {/* <th>Created</th> */}
               <th>Return Location</th>
               <th>Pick Up Location</th>
               <th>Recipient</th>
@@ -212,7 +139,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 </td>
                 <td colSpan={6}></td>
               </tr>
-            ) : emailInvoiceData?.length === 0 ? (
+            ) : returnAfterOrder?.length === 0 ? (
               <tr>
                 <td colSpan={7}>
                   <EmptyDataContainer>
@@ -221,104 +148,120 @@ const OrderTable = ({ loadingskeleton }: any) => {
                 </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>
+              returnAfterOrder?.map((item: any, index: any) => {
+                const statusMapping: any = {
+                  CO: 'Cancelled',
+                  OO: 'On Hold',
+                  SC: 'Sub-Contracted',
+                  AR: 'Awaiting Route',
+                  SD: 'Completed',
+                  AD: 'Outstanding',
+                };
+                const status = statusMapping[item?.status] || 'Unknown';
+                const statusClass = getStatusClass(status);
+                return (
+                  <tr key={item.id}>
+                    <td>
+                      <Checkbox
+                        checked={selectedOrders?.some(
+                          (selectedInvoice: any) =>
+                            selectedInvoice?.id === item.id
+                        )}
+                        onChange={() => handleSelectInvoice(item.id)}
+                      />
+                    </td>
+                    <td>{displayValueOrNA(item?.created_at)}</td>
+                    <td>{displayValueOrNA(item?.return_locations)}</td>
+                    <td>{displayValueOrNA(item?.pick_up_location)}</td>
+                    <td>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          {displayValueOrNA(
+                            item?.order_recipient?.recipient_name
+                          )}
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(item?.order_recipient?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
+                    <td>
+                      {displayValueOrNA(item?.customer_data?.customer_name)}
+                    </td>
 
-                  <td>{invoice?.date}</td>
+                    <td>{displayValueOrNA(item?.consignment)}</td>
+                    <td>
+                      {/* {displayValueOrNA(item?.created_at)} */}
+                      N/A
+                    </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,
-                        }}
+                    <td>{displayValueOrNA(item?.box_count)}</td>
+                    <td>{displayValueOrNA(item?.weight)}KG</td>
+                    <td>{displayValueOrNA(item?.cube)}</td>
+                    <td>
+                      <AntSelect
+                        options={assigneOptions}
+                        placeholder="Select"
+                        onChange={() => {}}
+                        // defaultValue={item?.customer_name || ''}
+                        style={defaultSelectStyle}
+                        disabled={false}
+                        // onSearch={handleSearch}
+                        showSearch
+                        popupClassName={defaultPopupClassName}
+                        selectWrapperClass={defaultSelectWrapperClass}
+                      />
+                    </td>
+                    <td>
+                      <ul
+                        className="statuscontainer"
+                        style={{ listStyleType: 'none' }}
                       >
-                        {' '}
-                        {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>
-                    {/* <StyledAntSelect
-                      options={[]}
-                      placeholder="Select Client Name"
-                      onChange={() => {}}
-                      mode="multiple"
-                      value={invoice?.customer_name || ''}
-                      style={{ minWidth: '14vw' }}
-                    /> */}
-
-                    <AntSelect
-                      options={[]}
-                      placeholder="Select"
-                      onChange={() => {}}
-                      defaultValue={invoice?.customer_name || ''}
-                      style={defaultSelectStyle}
-                      disabled={false}
-                      // onSearch={handleSearch}
-                      showSearch
-                      popupClassName={defaultPopupClassName}
-                      selectWrapperClass={defaultSelectWrapperClass}
-                    />
-                  </td>
-
-                  <td>
-                    <ul
-                      className="statuscontainer"
-                      style={{ listStyleType: 'none' }}
-                    >
-                      <li className="statustext">Completed</li>
-                    </ul>
-                  </td>
-
-                  <td>
-                    <ul className="actionbox">
-                      <li className="shareIconContainer">
-                        <PrinterIcon />
-                        <DownIcon />
-                      </li>
-                      <li className="downloadcontainer">
-                        <LoadIcon />
-                      </li>
-                    </ul>
-                    {/* <div className="shareIconContainer">
+                        <li className={`statustext ${statusClass}`}>
+                          {status}
+                        </li>
+                      </ul>
+                    </td>
+                    <td>
+                      <ul className="actionbox">
+                        <CustomDrop
+                          ref={dropdownRefParent}
+                          className={printToogle === index ? 'active' : ''}
+                        >
+                          <li
+                            className="shareIconContainer"
+                            onClick={() => OpenDropDown(index)}
+                          >
+                            <PrinterIcon />
+                            <DownIcon />
+                          </li>
+                          {printToogle == index && (
+                            <div ref={dropdownRef}>
+                              <PrintDropDown />
+                            </div>
+                          )}
+                        </CustomDrop>
+                        <li className="downloadcontainer">
+                          <LoadIcon />
+                        </li>
+                      </ul>
+                      {/* <div className="shareIconContainer">
                       <PrinterIcon />
                       <DownIcon />
                     </div>
                     <div className="downloadcontainer">
                       <LoadIcon />
                     </div> */}
-                  </td>
-                </tr>
-              ))
+                    </td>
+                  </tr>
+                );
+              })
             )}
           </tbody>
         </StyledTable>