@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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);

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

@@ -1,217 +1,143 @@
-import React from 'react';
-// import { ApiResponse, Column } from './types';
-// import MyTable from '../../common/table/Mytable';
-// import { useApiHook } from '@bjsdistribution/dms-component-library';
-// import { useReadyForInvoiceOverview, useReadyForInvoiceView } from './store';
-// import MultiRFI from './ReadyforInvoicemulti';
-// import { useAtom } from 'jotai';
-import { Column } from '../../types';
-import MyTable from './table-data/MyTable';
-import { data } from './table-data/Fakedata';
-// import useInfiniteScroll from './InfiniteScrolling';
-// import { overviewFiltersReducerAtom } from '../header-for-invoice/invoice-selection/FilterStore';
-// import {
-//   usePrevSelectedClients,
-//   useSelectedClients,
-// } from '../header-for-invoice/store';
-// import ClientView from './client-view';
+import React, { useEffect } from 'react';
+import { useClientData, useOrderStaticData } from '../../order-view/store';
+import { useLoading } from '../store/store';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  ColumStyle,
+  EmptyDataContainer,
+  GreyBox,
+  StyledTable,
+  StyledTableWrapper,
+} from './table-data/styles';
+import { Empty, Skeleton } from 'antd';
 
-const ReturnTable: React.FC = () => {
-  //   const [, setClient] = useSelectedClients();
-  //   const [
-  //     readyForInvoiceView,
-  //     setReadyForInvoiceView,
-  //   ] = useReadyForInvoiceView();
-  //   const [filterState, dispatchOverviewFilter] = useAtom(
-  //     overviewFiltersReducerAtom
-  //   );
-  //   const [, setPrevSelectedClients] = usePrevSelectedClients();
-  // const [, dispatchFilters] = useAtom(overviewFiltersReducerAtom);
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+}
 
-  //   const getId = (data: any) => {
-  //     setClient([data]);
-  //     setPrevSelectedClients([data]); // to disable apply button if client is clickec from table
-  //     setReadyForInvoiceView('client');
-  //     dispatchOverviewFilter({
-  //       type: 'SET_CUSTOMER_FILTER',
-  //       payload: [data.value],
-  //     });
-  //   };
+const ReturnTable: React.FC = ({ loadingskeleton }: any) => {
+  const [clientData] = useClientData();
+  const [, setLoading] = useLoading();
+  const [, setOrderStaticData] = useOrderStaticData();
 
-  const columns: Column[] = [
-    {
-      Header: 'Trading Name',
-      accessor: 'name',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Client',
-      accessor: 'customer_name',
-      //   callback: getId,
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Orders',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Products',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'RTS',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Pending',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Dispose',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'Re-allocate',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Re-Del',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    {
-      Header: 'Recycle',
-      accessor: 'total_orders',
-      sortable: true,
-      showIcon: false,
-    },
-    {
-      Header: 'unknown',
-      accessor: 'total_amount',
-      sortable: true,
-      showIcon: true,
-    },
-    // {
-    //   Header: 'Amount',
-    //   accessor: 'total_amount',
-    //   sortable: true,
-    //   showIcon: true,
-    // },
-    // { Header: 'VAT', accessor: 'vat_rate', sortable: true, showIcon: true },
-    // { Header: 'Total', accessor: 'total', sortable: true, showIcon: false },
-  ];
+  const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/getStaticData/all/`,
+    method: 'GET',
+  });
 
-  // const [invoiceData, setInvoiceData] = useInvoiceData();
-  //   const [
-  //     readyForInvoiceOverview,
-  //     setReadyForInvoiceOverview,
-  //   ] = useReadyForInvoiceOverview();
-  // const [filterApplied] = usefilterApplied();
+  useEffect(() => {
+    setLoading(staticDataLoading);
+    if (fetchedStaticData && fetchedStaticData.data) {
+      const result = fetchedStaticData?.data;
+      setOrderStaticData(result[0]);
+    }
+  }, [staticDataLoading, fetchedStaticData]);
 
-  //   const { 'x-filters': filters, 'x-pagination': pagination } = filterState;
-  //   const {
-  //     data: fetchedOverviewData,
-  //     setShouldPerformAction, // need for  infinite
-  //     paginationData, // need for  infinite
-  //     loadingskeleton, // need for  infinite
-  //   } = useApiHook<ApiResponse>({
-  //     endpoint: `/invoices/ready_for_invoice/overview/`,
-  //     method: 'GET',
-  //     filters: filters,
-  //     pagination: pagination,
-  //     performAction: true,
-  //   });
-  //   //  infinite scrolling code start here
-  //   const { page, scrollActivated } = useInfiniteScroll(
-  //     paginationData,
-  //     setShouldPerformAction,
-  //     'tableScrolling'
-  //   );
-  //   useEffect(() => {
-  //     dispatchOverviewFilter({ type: 'SET_PAGE', payload: page });
-  //   }, [page]);
-
-  //   useEffect(() => {
-  //     if (fetchedOverviewData && fetchedOverviewData?.data) {
-  //       const invoiceData = fetchedOverviewData?.data;
-
-  //       if (scrollActivated) {
-  //         setReadyForInvoiceOverview((prev: any) => {
-  //           const newData = invoiceData?.filter(
-  //             (newItem: any) =>
-  //               !prev?.some((prevItem: any) => prevItem?.id === newItem?.id)
-  //           );
-  //           return [...prev, ...newData];
-  //         });
-  //       } else {
-  //         setReadyForInvoiceOverview(invoiceData);
-  //       }
-  //     }
-  //   }, [fetchedOverviewData, scrollActivated]);
-
-  //   const renderContent = () => {
-
-  //     <MyTable
-  //     columns={columns}
-  //     data={data}
-  //     loading={false}
-  //     // loadingskeleton={loadingskeleton}
-  //     view="rfi"
-  //   />
+  return (
+    <>
+      <StyledTableWrapper id="tableScrolling">
+        <StyledTable>
+          <thead>
+            <tr>
+              <th>Trading Name</th>
+              <th>Client</th>
+              <th>Orders</th>
+              <th>Products</th>
+              <th>Dispose</th>
+              <th>Re-allocate</th>
+              <th>Re-Del</th>
+              <th>Recycle</th>
+              <th>Unknown</th>
+            </tr>
+          </thead>
+          <tbody>
+            {loadingskeleton ? (
+              <tr>
+                <td colSpan={9}>
+                  <Skeleton active />
+                </td>
+              </tr>
+            ) : clientData?.length === 0 ? (
+              <tr>
+                <td colSpan={9}>
+                  <EmptyDataContainer>
+                    <Empty />
+                  </EmptyDataContainer>
+                </td>
+              </tr>
+            ) : (
+              clientData?.map((key: any, index: any) => {
+                return (
+                  <tr key={index}>
+                    <td>{key?.trading_as}</td>
 
-  // switch (readyForInvoiceView) {
-  //   case 'client':
-  //     return (
-  //       <div
-  //         style={{
-  //           display: 'flex',
-  //           flexDirection: 'column',
-  //           gap: '10px',
-  //           marginTop: '10px',
-  //         }}
-  //       >
-  //         {/* <ClientView /> */}
-  //       </div>
-  //     );
-  //   default:
-  //     return (
-  //       <MyTable
-  //         columns={columns}
-  //         data={data}
-  //         loading={false}
-  //         // loadingskeleton={loadingskeleton}
-  //         view="rfi"
-  //       />
-  //     );
-  // }
-  //   };
+                    <td>
+                      {' '}
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                            paddingLeft: 0,
+                          }}
+                        >
+                          {key?.customer_name}
+                        </li>
+                      </ul>{' '}
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>
+                          {key?.return_orders}
+                          {/* </div> */}
+                        </GreyBox>
+                      </ColumStyle>
+                    </td>
 
-  return (
-    <div style={{ textTransform: 'capitalize', overflow: 'auto' }}>
-      {/* {renderContent} */}
-      <MyTable
-        columns={columns}
-        data={data}
-        loading={false}
-        // loadingskeleton={loadingskeleton}
-        view="rfi"
-      />
-    </div>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.return_order_products}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.DISPOSE}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.['RE-ALLOCATE']}</GreyBox>{' '}
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.['RE-DEL']}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.RECYCLE}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                    <td>
+                      <ColumStyle>
+                        <GreyBox>{key?.UNKNOWN}</GreyBox>
+                      </ColumStyle>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </StyledTable>
+      </StyledTableWrapper>
+    </>
   );
 };
 

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

@@ -1,5 +1,20 @@
 import styled from 'styled-components';
 
+export const ColumStyle = styled.div`
+  display: flex;
+  width: 67px;
+  align-items: center;
+  gap: 7px;
+`;
+
+export const GreyBox = styled.div`
+  display: flex;
+  padding: 3px 12px;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 6px;
+  background: rgba(153, 153, 153, 0.1);
+`;
 // Styled components
 export const StyledTableWrapper = styled.div`
   overflow-x: auto;

package/src/components/order-view/details-filters/DetailsFilters.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
 import Details from './right-side-filters/Details';
-import ActionsMenu from './left-side-filters/ActionsMenu';
+// import ActionsMenu from './left-side-filters/ActionsMenu';
 
 const DetailsFilters = () => {
   return (
     <Flex>
       <Details />
-      <ActionsMenu />
+      {/* <ActionsMenu /> */}
     </Flex>
   );
 };
@@ -25,9 +25,10 @@ const Flex = styled.div`
   gap: 10px;
   align-self: stretch;
   position: relative;
-  margin-top: -30px;
+  margin-bottom: -71px;
   width: 97%;
-  margin-left: 28px;
+  margin-left: 21px;
+  top: -40px;
   justify-content: space-between;
 `;
 export default DetailsFilters;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import styled from 'styled-components';
-import PrintDropDown from './PrintDropDown';
 import OptionsDropDown from './OptionsDropDown';
 import MenuDropDown from './MenuDropDown';
 // components
@@ -11,7 +10,6 @@ function DropDowns() {
       <DashBoardWrapper>
         <MenuDropDown />
         <OptionsDropDown />
-        <PrintDropDown />
       </DashBoardWrapper>
     </>
   );

package/src/components/order-view/details-filters/left-side-filters/dropdowns/PrintDropDown.tsx

@@ -1,52 +1,60 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
+import styled from 'styled-components';
+import { PrintIconMap } from '../../../../order-daily-overview/shared/utlis';
+import { PrintData } from '../../../../order-daily-overview/shared/interface';
+import { optionsPrint } from '../../../../order-daily-overview/common/fakedata';
+// import { PrintIconMap } from '../utils';
+// import { optionsPrint } from '../fakeData';
+// import { PrintData } from '../interface';
 
-import { DropDownContainer } from './DropdownStyles';
-import DropDownMenu from './DropDownMenu';
-import DropDownItem from './DropDownItem';
-import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
-
-const Options = [
-  { label: 'Return notes', value: 'return-notes' },
-  { label: 'Product Labels', value: 'product-labels' },
-  { label: 'Returns Cover Note', value: 'cover-note' },
-];
-
-const PrintDropDown: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
-  };
-
-  const handleSelect = (value: string) => {
-    console.log(`Selected: ${value}`);
-    setIsOpen(false);
-  };
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+const options: PrintData[] = optionsPrint;
 
+const PrintDropDown = () => {
+  const downloadFiles = () => {};
   return (
-    <DropDownContainer ref={dropdownRef}>
-      <DropDownItem
-        label="Print"
-        icon={<DropDownLarge />}
-        onClick={handleClick}
-      />
-      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
-    </DropDownContainer>
+    <OptionsList>
+      {options.map((item, index) => {
+        const IconComponent = PrintIconMap[item.icon];
+
+        return (
+          <OptionsListLi key={index} onClick={downloadFiles}>
+            {IconComponent && <IconComponent />} {item.label}
+          </OptionsListLi>
+        );
+      })}
+    </OptionsList>
   );
 };
+
 export default PrintDropDown;
+
+export const OptionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  border-radius: 6px;
+  border: 1px solid rgba(224, 226, 231, 0.5);
+  background: #fff;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  width: 177px;
+  padding: 5px 1px 3px 1px;
+  position: absolute;
+  top: 26px;
+  right: 0;
+  z-index: 99;
+  min-width: 194px;
+`;
+
+export const OptionsListLi = styled.li`
+  border-bottom: 1px solid #f0f2f2;
+  padding: 8px 10px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  font-size: 13px;
+  cursor: pointer;
+  &:last-child {
+    border: none;
+  }
+`;

package/src/components/order-view/general-information/Status.tsx

@@ -95,7 +95,7 @@ const Heading = styled.div`
 `;
 
 const Container = styled.div`
-  padding: 15px;
+  margin-top: 35px;
 `;
 
 const TextContainer = styled.div`