From 6197aea186e21236d8fae196573c71c631332a59 Mon Sep 17 00:00:00 2001 From: Sibunnayak Date: Fri, 27 Sep 2024 03:00:20 +0530 Subject: [PATCH] pd stock ui developed --- src/routes.js | 7 + src/views/PrincipalDistributors/Stock.js | 513 ++++++++++++++++++ .../principalDistributor.js | 20 + src/views/orders/ViewOrders.js | 4 +- src/views/orders/viewInoices.js | 4 +- 5 files changed, 544 insertions(+), 4 deletions(-) create mode 100644 src/views/PrincipalDistributors/Stock.js diff --git a/src/routes.js b/src/routes.js index ceab322..e42e5ba 100644 --- a/src/routes.js +++ b/src/routes.js @@ -154,6 +154,7 @@ import ViewRetailDistributorPD from "./views/PrincipalDistributors/ViewRetailDis import MapRD from "./views/RetailDistributors/MapRD"; import PendingOrders from "./views/orders/pendingOrders"; import ViewInvoices from "./views/orders/viewInoices"; +import Stocks from "./views/PrincipalDistributors/Stock"; const routes = [ //dashboard @@ -425,6 +426,12 @@ const routes = [ element: ViewRetailDistributorPD, navName: "PrincipalDistributor", }, + { + path: "/pd-stock/:id", + name: "view Stock", + element: Stocks, + navName: "PrincipalDistributor", + }, //Inventory { path: "/inventory", diff --git a/src/views/PrincipalDistributors/Stock.js b/src/views/PrincipalDistributors/Stock.js new file mode 100644 index 0000000..cc743da --- /dev/null +++ b/src/views/PrincipalDistributors/Stock.js @@ -0,0 +1,513 @@ +import React, { useState, useEffect, useRef, useCallback } from "react"; +import { Link, useParams } 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 { Typography } from "@mui/material"; +const Stocks = () => { + const token = isAutheticated(); + const navigate = useNavigate(); + const { id } = useParams(); + const [loading, setLoading] = useState(false); + const [productsData, setProductsData] = useState([]); + const [categories, setCategories] = useState([]); + const [brands, setBrands] = useState([]); + const [user, setUser] = useState(null); + + const nameRef = useRef(); + const categoryRef = useRef(); + const brandRef = useRef(); + + const [currentPage, setCurrentPage] = useState(1); + const [itemPerPage, setItemPerPage] = useState(10); + const [totalData, setTotalData] = useState(0); + // Fetch User Details + const getUserDetails = useCallback(async () => { + try { + const response = await axios.get(`/api/v1/admin/user/${id}`, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + setUser(response.data.user); + } catch (error) { + swal({ + title: "Warning", + text: error.message, + icon: "error", + button: "Close", + dangerMode: true, + }); + } + }, [id, token]); + + // Call getUserDetails on component mount + useEffect(() => { + getUserDetails(); + }, [getUserDetails]); + + const getProductsData = async () => { + setLoading(true); + try { + const response = await axios.get(`/api/pd/stock/${id}`, { + 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?.products || []); + setTotalData(response.data?.totalProducts || 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); + }); + }; + + const [currencyDetails, setCurrencyDetails] = useState(null); + + const getCurrency = async () => { + try { + const response = await axios.get("/api/currency/getall", { + // headers: { + // Authorization: `Bearer ${token}`, + // }, + }); + + if (response.status === 200) { + setCurrencyDetails(response?.data?.currency[0]); + } + } catch (error) { + console.log(error); + } + }; + useEffect(() => { + getCatagories(); + getCurrency(); + getBrands(); + }, []); + + useEffect(() => { + getProductsData(); + }, [itemPerPage, currentPage]); + + const debouncedSearch = useCallback( + debounce(() => { + setCurrentPage(1); + getProductsData(); + }, 500), + [] + ); + + const handleSearchChange = () => { + debouncedSearch(); + }; + return ( +
+
+
+
+
+
+
+ {[ + { label: "Id", value: user?.uniqueId }, + { label: "SBU", value: user?.SBU }, + { label: "Name", value: user?.name }, + ].map((item, index) => ( + + {item.label}: + + {item.value} + + + ))} +
+ + {/* Right side: Email, Mobile Number */} +
+ {[ + { label: "Email", value: user?.email }, + { label: "Mobile Number", value: user?.phone }, + ].map((item, index) => ( + + {item.label}: + + {item.value} + + + ))} +
+ + {/* Back Button on the right */} +
+ + + +
+
+ {/* Section Heading: Product Stocks */} +
+
+
+ Product Stocks +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + + + + + + + + + + + + + + {loading ? ( + + + + ) : productsData?.length > 0 ? ( + productsData?.map((product, i) => { + return ( + + + + + + + + + + + ); + }) + ) : ( + !loading && + productsData?.length === 0 && ( + + + + ) + )} + +
ImageSKUProductCategory NameBrand NamePriceAdded OnStock
+ Loading... +
+ {product?.image && + product?.image?.length !== 0 ? ( + <> + preview + + ) : ( +
+

No

+

image

+

uploaded!

+
+ )} + 		{product.SKU}{product.name} + {product.category !== "" + ? product.category + : "Category Not selected "} + + {product.brand !== "" + ? product.brand + : "Brand Not selected "} + + {currencyDetails?.CurrencySymbol} + {product?.price} + + {new Date(product.createdAt).toLocaleString( + "en-IN", + { + weekday: "short", + month: "short", + day: "numeric", + year: "numeric", + hour: "numeric", + minute: "numeric", + hour12: true, + } + )} + {product.stock}
+
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 Stocks; diff --git a/src/views/PrincipalDistributors/principalDistributor.js b/src/views/PrincipalDistributors/principalDistributor.js index 1b8c661..6c34c5a 100644 --- a/src/views/PrincipalDistributors/principalDistributor.js +++ b/src/views/PrincipalDistributors/principalDistributor.js @@ -372,6 +372,26 @@ const principalDistributor = () => { View + + + )) diff --git a/src/views/orders/ViewOrders.js b/src/views/orders/ViewOrders.js index a54e3f7..9178545 100644 --- a/src/views/orders/ViewOrders.js +++ b/src/views/orders/ViewOrders.js @@ -170,7 +170,7 @@ const ViewOrders = () => { productId: item.productId._id, processquantity: item.remainingQuantity, // Add processquantity only for items with remainingQuantity > 0 })); - console.log(processingOrderInvoice); + // console.log(processingOrderInvoice); const cancellationRes = await axios.post( `/api/processing-order`, { @@ -237,7 +237,7 @@ const ViewOrders = () => { processquantity, }) ); - console.log(prepareData); + // console.log(prepareData); try { const cancellationRes = await axios.post( diff --git a/src/views/orders/viewInoices.js b/src/views/orders/viewInoices.js index 697712b..15db7b2 100644 --- a/src/views/orders/viewInoices.js +++ b/src/views/orders/viewInoices.js @@ -58,7 +58,7 @@ const ViewInvoices = () => { Authorization: `Bearer ${token}`, }, }); - console.log(response); + // console.log(response); setInvoice(response.data); setStatus(response.data.courierStatus); @@ -102,7 +102,7 @@ const ViewInvoices = () => { } ); - console.log(res); + // console.log(res); if (res.status === 200) { Swal.fire("Invoice Status updated", "Invoice Dispatched", "success"); navigate(`/orders/dispatched`);