@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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

@@ -1,42 +1,91 @@
-import React, { useState } from 'react';
-import { UsePaginationData, useItemsPerPage } from './store/store';
+import React, { useEffect } from 'react';
+import {
+  // UsePaginationData,
+  // useItemsPerPage,
+  useLoading,
+  // useSelectedAction,
+  // useSelectedLocation,
+  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'
-import Pagination from './table-view/Pagination';
+// import Pagination from './table-view/Pagination';
 import styled from 'styled-components';
 import RouterHeader from './header/route-header/RouterHeader';
 // import Loader from './header/loader/Loader';
 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 ReturnTable from './table/ReturnTable';
 // 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 [paginationObj] = UsePaginationData();
+  // const [, setCurrentPage] = useState(1);
+  // const [itemsPerPage, setItemsPerPage] = useItemsPerPage();
 
-  const { page, total } = paginationObj;
+  // const { page, total } = paginationObj;
+
+  // const handlePageChange = (page: number) => {
+  //   setCurrentPage(page);
+  // };
+  // const handleItemsPerPageChange = (itemsPerPage: number) => {
+  //   setItemsPerPage(itemsPerPage);
+  // };
 
-  const [isScrolled] = useStickyStatus();
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-  const handleItemsPerPageChange = (itemsPerPage: number) => {
-    setItemsPerPage(itemsPerPage);
-  };
   ////
+  const [selectedClient] = useTableName();
+
+  const [isScrolled] = useStickyStatus();
+
+  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);
+    }
+  }, [staticDataLoading]);
+
   return (
     <>
-      {/* <Loader /> */}
       <DashBoardWrapper className={` ${isScrolled ? 'stickyTableHead' : ''}`}>
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <Filters />
-          <ReturnTable />
-          {total > 0 && (
+          <Container>
+            <Row>
+              <Text>Client Return</Text>
+              {selectedClient ? <ReturnFilter /> : <Filters />}
+            </Row>
+            <ReturnTable />
+          </Container>
+          {/* {total > 0 && (
             <Pagination
               currentPage={page}
               totalItems={total}
@@ -44,16 +93,24 @@ function ReturnMainTable() {
               onPageChange={handlePageChange}
               onItemsPerPageChange={handleItemsPerPageChange}
             ></Pagination>
-          )}
+          )} */}
         </div>
       </DashBoardWrapper>
-      {/* {<Loader />} */}
     </>
   );
 }
 
 export default ReturnMainTable;
 
+const Row = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Container = styled.div`
+  position: relative;
+  top: -46px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;

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

@@ -1,25 +1,53 @@
-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>
         <RouterHeader />
         <div className="Tableconatiner">
           <HeaderFilter />
-          <ReturnOrderFilter />
-          <OrderTable />
+          <Container>
+            <ReturnOrderFilter />
+            <OrderTable />
+          </Container>
         </div>
       </DashBoardWrapper>
     </div>
   );
 };
-
+const Container = styled.div`
+  position: relative;
+  top: -30px;
+`;
 const DashBoardWrapper = styled.section`
   .Tableconatiner {
     border-radius: 12px;