@bjsdistribution/dms-client-return 0.0.1 → 0.0.3

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

@@ -1,7 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
-  // FilterConatiner,
-  // FilterIconConatiner,
   LeftSideConatiner,
   StyledFIlterELements,
   StyledFiter,
@@ -13,8 +11,62 @@ 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';
 
 const ReturnOrderFilter = () => {
+  const [isDatePickerVisible, setDatePickerVisible] = useState(false);
+
+  const handleDateIconClick = () => {
+    setDatePickerVisible(prevState => !prevState);
+  };
+  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>
@@ -27,10 +79,17 @@ const ReturnOrderFilter = () => {
               <div className="textcont">Filters</div>
             </div>
             <div className="datefilter">
-              <div className="dateiconcontainer">
+              <div className="dateiconcontainer" onClick={handleDateIconClick}>
                 <DateIcon />
               </div>
               <div className="datetext">Date</div>
+              {isDatePickerVisible && (
+                <DatePicker
+                  onChange={onChange}
+                  value={actionDate === null ? actionDate : dayjs(actionDate)}
+                  format="DD/MM/YY"
+                />
+              )}
               <div className="roundbox">
                 <DownArrowIcon />
               </div>
@@ -41,7 +100,6 @@ const ReturnOrderFilter = () => {
                 <StatusIcon />
               </div>
               <div className="datetext">Status of Order</div>
-
               <div className="roundbox">
                 <DownArrowIcon />
               </div>
@@ -60,7 +118,6 @@ const ReturnOrderFilter = () => {
                 <AssigneIcon />
               </div>
               <div className="datetext">Assignee</div>
-
               <div className="roundbox">
                 <DownArrowIcon />
               </div>

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

@@ -1,64 +1,22 @@
 import React from 'react';
-import { StyledFIlterELements, StyledFiter, StyledTableFilter, Text } from '../../filters/FilterStyle';
+import {
+  StyledFIlterELements,
+  StyledFiter,
+  StyledTableFilter,
+} from '../../filters/FilterStyle';
 import RightFilters from './RightFilters';
 
-
 const ReturnFilter = () => {
- 
-
-
   return (
     <>
       <StyledFiter>
         <StyledFIlterELements>
-          <Text>Client Return</Text>
-          {/* <em>
-            <IconContainer>
-              <ButtonCon
-                className={DataView ? 'active' : ''}
-                onClick={() => ToggleView()}
-              >
-                <TableIcon />
-              </ButtonCon>
-              <ButtonCon
-                className={!DataView ? 'active' : ''}
-                onClick={() => ToggleView()}
-              >
-                <CardsIcon />
-              </ButtonCon>
-            </IconContainer>
-          </em> */}
           <StyledTableFilter />
         </StyledFIlterELements>
         <RightFilters />
       </StyledFiter>
-
-      {/* {DataView ? (
-        <MyTable TableData={TableData} data={data} apiLoading={apiLoading}/>
-      ) : (
-        <CardTable />
-      )} */}
     </>
   );
 };
 
-// const IconContainer = styled.div`
-//   display: flex;
-//   gap: 10px;
-//   cursor: pointer;
-// `;
-
-// const ButtonCon = styled.div`
-//   border-radius: 6px;
-//   width: 24px;
-//   height: 24px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   padding: 2px;
-//   &.active {
-//     background: #ecf1fc;
-//   }
-// `;
-
 export default ReturnFilter;

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

@@ -1,164 +1,58 @@
-// 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 { Checkbox, useApiHook } 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, 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 { useReturnData } 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';
+import { useLoading } from '../../store/store';
+import { ApiResponse } from '../../../types';
+import { filtersReducerAtom } from '../../header-filters/filterStore';
 
 const ReturnOrderTable = ({ loadingskeleton }: any) => {
-  const [emailInvoiceData] = useEmailInvoice();
-  const [,] = useAtom(countReducerAtom);
-  const [selectedInvoices, setSelectedInvoices] = useSelectedEmail();
+  const [state] = useAtom(filtersReducerAtom);
+
+  const [selectedReturnOrder, setSelectedReturnOrder] = useSelectedOrders();
   const [selectAll, setSelectAll] = useState(false);
+  const { 'x-filters': filters, 'x-pagination': pagination } = state;
+  const [returnData, setReturnData] = useReturnData();
+  const [, setLoading] = useLoading();
+  const { data: fetchedOrderData, loading: staticDataLoading } = useApiHook<
+    ApiResponse
+  >({
+    endpoint: '/return_order_products/',
+    method: 'GET',
+    filters: filters,
+    pagination: pagination,
+  });
+
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedOrderData && fetchedOrderData?.data) {
+      setReturnData(fetchedOrderData?.data);
+    }
+  }, [fetchedOrderData, staticDataLoading]);
 
   const handleSelectAll = (e: any) => {
     setSelectAll(e.target.checked);
     if (e.target.checked) {
-      setSelectedInvoices(
-        emailInvoiceData.map((invoice: any) => ({
+      setSelectedReturnOrder(
+        returnData.map((invoice: any) => ({
           id: invoice.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
       );
@@ -170,7 +64,6 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
       }
     });
   };
-
   return (
     <>
       <StyledTableWrapper id="tableScrolling">
@@ -203,30 +96,30 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                 </td>
                 <td colSpan={6}></td>
               </tr>
-            ) : emailInvoiceData?.length === 0 ? (
+            ) : returnData?.length === 0 ? (
               <tr>
-                <td colSpan={7}>
+                <td colSpan={14}>
                   <EmptyDataContainer>
                     <Empty />
                   </EmptyDataContainer>
                 </td>
               </tr>
             ) : (
-              data?.map((invoice: any) => (
-                <tr key={invoice.id}>
+              returnData?.map((item: any) => (
+                <tr key={item.id}>
                   <td>
                     <Checkbox
-                      checked={selectedInvoices?.some(
+                      checked={selectedReturnOrder?.some(
                         (selectedInvoice: any) =>
-                          selectedInvoice?.id === invoice.id
+                          selectedInvoice?.id === item.id
                       )}
-                      onChange={() => handleSelectInvoice(invoice.id)}
+                      onChange={() => handleSelectInvoice(item.id)}
                     />
                   </td>
 
-                  <td>{invoice?.customer_name}</td>
+                  <td>N/A</td>
 
-                  <td>{invoice?.customer_name}</td>
+                  <td>{item?.return_location}</td>
 
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
@@ -237,48 +130,21 @@ const ReturnOrderTable = ({ loadingskeleton }: any) => {
                           paddingLeft: 0,
                         }}
                       >
-                        {' '}
-                        {getStringValue(invoice?.account_number)}
+                        {item?.order_data?.order_recipient?.recipient_name}
                       </li>
                       <li style={{ color: '#888075' }}>
-                        {invoice?.customer_name}
+                        {item?.order_data?.order_recipient?.postcode}
                       </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>{item?.code}</td>
+                  <td>{item?.description}</td>
+                  <td>N/A</td>
+                  <td>{item?.weight}</td>
+                  <td>{item?.cube}</td>
+                  <td>{item?.return_reasons?.reason}</td>
+                  <td>N/A</td>
+                  <td>{item?.collection_reasons?.reason}</td>
                   <td>
                     <div className="shareIconContainer">
                       <PrinterIcon />

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -306,6 +306,54 @@ export const StyledTable = styled.table`
           paddingLeft: 0, */
           cursor: pointer;
         }
+        .statusCancelled {
+          color: #e95252;
+          /* background: rgba(233, 82, 82, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusOnHold {
+          color: #f4a503;
+          /* background: #fff1d6; */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusSubContracted {
+          color: #845adf;
+          /* background: rgba(132, 90, 223, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusAwaiting {
+          color: #845adf;
+          /* background: rgba(132, 90, 223, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusCompleted {
+          color: #1f9254;
+          /* background: rgba(41, 204, 106, 0.15); */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusOutstanding {
+          color: #f4a503;
+          /* background: #fff1d6; */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
+
+        .statusUnknown {
+          color: #000;
+          /* background: #fff; */
+          padding: 4px 8px;
+          border-radius: 4px;
+        }
         .statustext {
           color: #1f9254;
           font-family: 'Open Sans';
@@ -466,3 +514,17 @@ export const StyledTableWrapper = styled.div`
     background: #7b61ff;
   }
 `;
+
+export const CustomDrop = styled.div`
+  /* border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #fff;
+  display: flex;
+  padding: 4px 8px;
+  gap: 8px;
+  align-items: center; */
+  cursor: pointer;
+  &.active .drop {
+    transform: rotate(180deg);
+  }
+`;

package/src/components/order-daily-overview/store/store.ts

@@ -1,19 +1,8 @@
-// Base
 import { atom, useAtom } from 'jotai';
 
-// Interface
-// import { routeInfoInitialValue } from './initialValues';
-import {
-  // RouteInfoType,
-  PaginationData,
-  TableColumn,
-  TableRowType,
-  // OrderRecipientData,
-} from '../shared/interface';
+import { PaginationData, TableColumn, TableRowType } from '../shared/interface';
 
 import { ModalType } from '../shared/types';
-// import { routeInfoInitialValue } from './initialValues';
-// Table column filter
 export const visibleColumnsAtom = atom<string[]>([]);
 const toggleColumnMenuAtom = atom<boolean>(false);
 export const useToggleColumn = () => {
@@ -52,6 +41,26 @@ export const useLoading = () => {
   return useAtom(loading);
 };
 
+const selectedAction = atom<number | null>(null);
+export function useSelectedAction() {
+  return useAtom(selectedAction);
+}
+
+const selectedLocation = atom<string | null>(null);
+export function useSelectedLocation() {
+  return useAtom(selectedLocation);
+}
+
+const selectedClient = atom<number | null>(null);
+export function useSelectedClient() {
+  return useAtom(selectedClient);
+}
+
+const clientTableName = atom<string | null>(null);
+export function useTableName() {
+  return useAtom(clientTableName);
+}
+
 // Paginations
 
 const atomPaginationData = atom<PaginationData>({
@@ -77,6 +86,8 @@ const countStatus = atom<any>([]);
 export const useCountData = () => {
   return useAtom(countStatus);
 };
+
+//
 // ROUTE DETAILS PAGE STATES ->
 
 // const orderId = atom<number | undefined>(undefined);