@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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

@@ -1,184 +1,116 @@
-// 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 { useOrderId, 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';
+import { NavLink } from 'react-router-dom';
+import { formatDate } from '../../shared/utlis';
 
 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' };
+    }
+  };
 
+  const [id, setOrderId] = useOrderId();
+  console.log(id, 'idid');
   return (
     <>
       <StyledTableWrapper id="tableScrolling">
@@ -189,7 +121,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>
@@ -207,118 +138,136 @@ const OrderTable = ({ loadingskeleton }: any) => {
           <tbody>
             {loadingskeleton ? (
               <tr>
-                <td colSpan={6}>
+                <td colSpan={16}>
                   <Skeleton active />
                 </td>
-                <td colSpan={6}></td>
+                <td colSpan={16}></td>
               </tr>
-            ) : emailInvoiceData?.length === 0 ? (
+            ) : returnAfterOrder?.length === 0 ? (
               <tr>
-                <td colSpan={7}>
+                <td colSpan={16}>
                   <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>
+              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>{formatDate(new Date(item?.created_at))}</td>
+                    <td>{displayValueOrNA(item?.return_locations)}</td>
+                    <td>{displayValueOrNA(item?.pick_up_location)}</td>
 
-                  <td>{invoice?.date}</td>
+                    <td onClick={() => setOrderId(item.id)}>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          <NavLink to={`${item.id}`}>
+                            {displayValueOrNA(
+                              item?.order_recipient?.recipient_name
+                            )}
+                          </NavLink>
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(item?.order_recipient?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
 
-                  {/* <td>{invoice?.customer_name}</td> */}
-                  <td>{invoice?.customer_name}</td>
+                    <td>
+                      {displayValueOrNA(item?.customer_data?.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>{displayValueOrNA(item?.consignment)}</td>
+                    <td>{displayValueOrNA(item?.order_number)}</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>{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?.assign || ''}
+                        style={defaultSelectStyle}
+                        disabled={false}
+                        // onSearch={handleSearch}
+                        showSearch
+                        popupClassName={defaultPopupClassName}
+                        selectWrapperClass={defaultSelectWrapperClass}
+                      />
+                    </td>
+                    <td>
+                      <ul
+                        className="statuscontainer"
+                        style={{ listStyleType: 'none' }}
+                      >
+                        <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 />
 
-                  <td>
-                    <ul className="actionbox">
-                      <li className="shareIconContainer">
-                        <PrinterIcon />
-                        <DownIcon />
-                      </li>
-                      <li className="downloadcontainer">
-                        <LoadIcon />
-                      </li>
-                    </ul>
-                    {/* <div className="shareIconContainer">
+                            {printToogle == index && (
+                              <div ref={dropdownRef}>
+                                <PrintDropDown />
+                              </div>
+                            )}
+                          </li>
+                        </CustomDrop>
+                        <li className="downloadcontainer">
+                          <LoadIcon />
+                        </li>
+                      </ul>
+                      {/* <div className="shareIconContainer">
                       <PrinterIcon />
                       <DownIcon />
                     </div>
                     <div className="downloadcontainer">
                       <LoadIcon />
                     </div> */}
-                  </td>
-                </tr>
-              ))
+                    </td>
+                  </tr>
+                );
+              })
             )}
           </tbody>
         </StyledTable>

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

@@ -1,7 +1,5 @@
 import React from 'react';
 import {
-  // FilterConatiner,
-  // FilterIconConatiner,
   LeftSideConatiner,
   StyledFIlterELements,
   StyledFiter,
@@ -13,8 +11,58 @@ import DownArrowIcon from '../../../../assets/icons/DownArrowIcon';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
 import ClientIcon from '../../../../assets/icons/ClientIcon';
 import AssigneIcon from '../../../../assets/icons/AssigneIcon';
+import { DatePicker, DatePickerProps } from 'antd';
+import {
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../order-view/store';
+import dayjs from 'dayjs';
+import styled from 'styled-components';
 
 const ReturnOrderFilter = () => {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails] = usePrevOrderDetails();
+
+  const actionDate = orderDetails?.action_date
+    ? new Date(orderDetails?.action_date)
+    : null;
+
+  const onChange: DatePickerProps['onChange'] = (
+    date: any,
+    _dateString: any
+  ) => {
+    const selectedDate = date?.format('YYYY-MM-DDTHH:mm:ss');
+    if (
+      selectedDate !== undefined &&
+      prevOrderDetails.action_date !== undefined
+    ) {
+      if (
+        new Date(selectedDate).toLocaleDateString() ===
+        new Date(prevOrderDetails.action_date!).toLocaleDateString()
+      ) {
+        setOrderDetails(prev => {
+          return {
+            ...prev,
+            action_date: prevOrderDetails.action_date,
+          };
+        });
+      } else {
+        setOrderDetails(prev => {
+          return {
+            ...prev,
+            action_date: selectedDate,
+          };
+        });
+      }
+    } else {
+      setOrderDetails(prev => {
+        return {
+          ...prev,
+          action_date: null,
+        };
+      });
+    }
+  };
   return (
     <>
       <StyledFiter>
@@ -30,20 +78,25 @@ const ReturnOrderFilter = () => {
               <div className="dateiconcontainer">
                 <DateIcon />
               </div>
-              <div className="datetext">Date</div>
-              <div className="roundbox">
-                <DownArrowIcon />
-              </div>
+              <StyledDatePicker>
+                <DatePicker
+                  className="custom-datepicker"
+                  onChange={onChange}
+                  value={actionDate === null ? actionDate : dayjs(actionDate)}
+                  format="DD/MM/YY"
+                  placeholder="Date"
+                />
+              </StyledDatePicker>
             </div>
 
             <div className="datefilter">
               <div className="dateiconcontainer">
-                <StatusIcon />
+                {' '}
+                <StatusIcon />{' '}
               </div>
               <div className="datetext">Status of Order</div>
-
               <div className="roundbox">
-                <DownArrowIcon />
+                <DownArrowIcon />{' '}
               </div>
             </div>
             <div className="datefilter">
@@ -60,7 +113,6 @@ const ReturnOrderFilter = () => {
                 <AssigneIcon />
               </div>
               <div className="datetext">Assignee</div>
-
               <div className="roundbox">
                 <DownArrowIcon />
               </div>
@@ -73,4 +125,11 @@ const ReturnOrderFilter = () => {
   );
 };
 
+const StyledDatePicker = styled.div`
+  .custom-datepicker {
+    border: none;
+    width: 80px;
+  }
+`;
+
 export default ReturnOrderFilter;

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

@@ -5,6 +5,7 @@ import HeaderFilter from '../header-filters/HeaderFilter';
 
 import ReturnFilter from './return-orders-filters/ReturnFilter';
 import ReturnOrderTable from './return-orders-filters/ReturnOrderTable';
+import ModalManager from '../../order-view/modalsPopup/ModalManager';
 
 const ReturnTable = () => {
   return (
@@ -13,14 +14,20 @@ const ReturnTable = () => {
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <ReturnFilter />
-          <ReturnOrderTable />
+          <Container>
+            <ReturnFilter />
+            <ReturnOrderTable />
+          </Container>
         </div>
       </DashBoardWrapper>
+      <ModalManager />
     </div>
   );
 };
-
+const Container = styled.div`
+  position: relative;
+  top: -46px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;