diff --git a/src/_nav.js b/src/_nav.js index 0b04308..0d3c9ca 100644 --- a/src/_nav.js +++ b/src/_nav.js @@ -153,6 +153,13 @@ const _nav = [ to: "/reports/opening-inventory", group: "Reports", }, + { + component: CNavItem, + name: "Stock", + icon: , + to: "/reports/stock", + group: "Reports", + }, ], }, { diff --git a/src/routes.js b/src/routes.js index 5a57df1..fedd951 100644 --- a/src/routes.js +++ b/src/routes.js @@ -168,6 +168,7 @@ import MobileApp from "./views/configuration/MobileApp"; import DistributorOpeningInventory from "./views/PrincipalDistributors/OpeningInventory"; import UploadOpeningInventory from "./views/PrincipalDistributors/UploadOpeningInventory"; import OpeningInventoryReports from "./views/Reports/OpeningInventoryReports"; +import StockReports from "./views/Reports/StockReports "; const routes = [ //dashboard @@ -440,6 +441,13 @@ const routes = [ element: OpeningInventoryReports, navName: "Reports", }, + { + path: "/reports/stock", + name: "Reports Stock", + element: StockReports, + navName: "Reports", + }, + //-----------------End Reports------------------ //Departure // { path: "/departures", name: "Departures", element: Departures }, // { path: "/departure/add", name: "Add Departure", element: AddDeparture }, diff --git a/src/views/Reports/OpeningInventoryReports.js b/src/views/Reports/OpeningInventoryReports.js index 33ec6c2..9670e6f 100644 --- a/src/views/Reports/OpeningInventoryReports.js +++ b/src/views/Reports/OpeningInventoryReports.js @@ -218,7 +218,7 @@ const OpeningInventoryReports = () => { Brand Name - At PD and RD + Total At PD & RD All PDs diff --git a/src/views/Reports/StockReports .js b/src/views/Reports/StockReports .js new file mode 100644 index 0000000..52649b5 --- /dev/null +++ b/src/views/Reports/StockReports .js @@ -0,0 +1,409 @@ +import React, { useState, useEffect, useRef, useCallback } from "react"; +import { Link } from "react-router-dom"; +import axios from "axios"; +import Button from "@material-ui/core/Button"; +import { useNavigate } from "react-router-dom"; +import { isAutheticated } from "src/auth"; +import swal from "sweetalert"; +import debounce from "lodash.debounce"; +import { toast } from "react-hot-toast"; +const StockReports = () => { + const token = isAutheticated(); + const navigate = useNavigate(); + const [loading, setLoading] = useState(false); + const [productsData, setProductsData] = useState([]); + const [categories, setCategories] = useState([]); + const [brands, setBrands] = useState([]); + + const nameRef = useRef(); + const categoryRef = useRef(); + const brandRef = useRef(); + + const [currentPage, setCurrentPage] = useState(1); + const [itemPerPage, setItemPerPage] = useState(10); + const [totalData, setTotalData] = useState(0); + + const getProductsData = async () => { + setLoading(true); + try { + const response = await axios.get(`/api/report/stock`, { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + page: currentPage, + show: itemPerPage, + name: nameRef.current?.value || "", + category: categoryRef.current?.value || "", + brand: brandRef.current?.value || "", + }, + }); + // console.log(response.data); + setProductsData(response.data?.data || []); + setTotalData(response.data?.pagination?.total || 0); + } catch (err) { + const msg = err?.response?.data?.msg || "Something went wrong!"; + swal({ + title: "Error", + text: msg, + icon: "error", + button: "Retry", + dangerMode: true, + }); + } finally { + setLoading(false); + } + }; + + const getCatagories = () => { + axios + .get(`/api/category/getCategories`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // console.log(res?.data?.categories); + setCategories(res?.data?.categories); + }); + }; + const getBrands = () => { + axios + .get(`/api/brand/getBrands`, { + headers: { + "Access-Control-Allow-Origin": "*", + Authorization: `Bearer ${token}`, + }, + }) + .then((res) => { + // console.log(res?.data?.brands); + setBrands(res?.data?.brands); + }); + }; + + useEffect(() => { + getCatagories(); + getBrands(); + }, []); + + useEffect(() => { + getProductsData(); + }, [itemPerPage, currentPage]); + + const debouncedSearch = useCallback( + debounce(() => { + setCurrentPage(1); + getProductsData(); + }, 500), + [] + ); + + const handleSearchChange = () => { + debouncedSearch(); + }; + + return ( +
+
+
+
+
+
+
+ Stock Reports +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + {loading ? ( + + + + ) : productsData?.length > 0 ? ( + productsData?.map((product, i) => ( + + + + + + + + + + )) + ) : ( + + + + )} + +
+ SKU Code + + SKU Description + + Category Name + + Brand Name + + Total At PD & RD + + All PDs + + All RDs +
+ Loading... +
+ {product.SKU} + + {product.name} + + {product.category || "Category Not selected"} + + {product.brand || "Brand Not selected"} + + {product.allPdAndRd} + {product.allPDs}{product.allRDs}
+
No Product Available...
+
+
+ +
+
+
+ Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "} + {Math.min(currentPage * itemPerPage, totalData)} of{" "} + {totalData} entries +
+
+ +
+
+
    +
  • + setCurrentPage((prev) => prev - 1)} + disabled={loading} + > + Previous + +
    • + + {!(currentPage - 1 < 1) && ( +
  • + + setCurrentPage((prev) => prev - 1) + } + disabled={loading} + > + {currentPage - 1} + +
    • + )} + +
  • + + {currentPage} + +
    • + + {!( + (currentPage + 1) * itemPerPage - itemPerPage > + totalData - 1 + ) && ( +
  • + { + setCurrentPage((prev) => prev + 1); + }} + disabled={loading} + > + {currentPage + 1} + +
    • + )} + +
  • + totalData - 1 + ) + ? "paginate_button page-item next" + : "paginate_button page-item next disabled" + } + > + setCurrentPage((prev) => prev + 1)} + disabled={loading} + > + Next + +
    • +
+
+
+
+
+
+
+
+
+
+
+ ); +}; + +export default StockReports;