gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pd opening inventory update button , rd OI complete, brand and category pagination and OI reports completed

Browse Source
This commit is contained in:
Sibunnayak 2024-10-30 18:58:27 +05:30
parent 1ec4d8951f
commit 14b30bc6b6
9 changed files with 476 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/_nav.js
View File

@ -104,13 +104,6 @@ const _nav = [
to: "/retail-distributor", to: "/retail-distributor",
group: "RetailDistributor", group: "RetailDistributor",
}, },
// {
// component: CNavItem,
// name: "Opening Inventory",
// icon: <CIcon icon={cilSwapHorizontal} customClassName="nav-icon" />,
// to: "/opening-inventory",
// group: "OpeningInventory",
// },
{ {
component: CNavItem, component: CNavItem,
name: "Attendance", name: "Attendance",
@ -146,6 +139,22 @@ const _nav = [
to: "/sales", to: "/sales",
group: "Sales", group: "Sales",
}, },
{
component: CNavGroup,
name: "Reports",
icon: <CIcon icon={cilTablet} customClassName="nav-icon" />,
group: "",
items: [
{
component: CNavItem,
name: "Opening Inventory",
icon: <CIcon icon={cilClipboard} customClassName="nav-icon" />,
to: "/reports/opening-inventory",
group: "Reports",
},
],
},
{ {
component: CNavGroup, component: CNavGroup,
name: "Orders", name: "Orders",

31
src/routes.js
View File

@ -165,9 +165,9 @@ import TodayTask from "./views/Tasks/TodayTasks";
import Sales from "./views/Sales/Sales"; import Sales from "./views/Sales/Sales";
import SingleSales from "./views/Sales/SingleSale"; import SingleSales from "./views/Sales/SingleSale";
import MobileApp from "./views/configuration/MobileApp"; import MobileApp from "./views/configuration/MobileApp";
import PDOpeningInventory from "./views/OpeningInventory/PDOpeningInventory";
import DistributorOpeningInventory from "./views/PrincipalDistributors/OpeningInventory"; import DistributorOpeningInventory from "./views/PrincipalDistributors/OpeningInventory";
import UploadOpeningInventory from "./views/PrincipalDistributors/UploadOpeningInventory"; import UploadOpeningInventory from "./views/PrincipalDistributors/UploadOpeningInventory";
import OpeningInventoryReports from "./views/Reports/OpeningInventoryReports";
const routes = [ const routes = [
//dashboard //dashboard
@ -433,7 +433,13 @@ const routes = [
navName: "Distributor", navName: "Distributor",
}, },
//----------------------- End Product Management Routes------------------------------------------------ //----------------------- End Product Management Routes------------------------------------------------
//---------------Reports------------
{
path: "/reports/opening-inventory",
name: "Reports Opening Inventory",
element: OpeningInventoryReports,
navName: "Reports",
},
//Departure //Departure
// { path: "/departures", name: "Departures", element: Departures }, // { path: "/departures", name: "Departures", element: Departures },
// { path: "/departure/add", name: "Add Departure", element: AddDeparture }, // { path: "/departure/add", name: "Add Departure", element: AddDeparture },
@ -677,20 +683,6 @@ const routes = [
navName: "Website Related", navName: "Website Related",
}, },
//-------------------------------End website related routes---------------------------------- //-------------------------------End website related routes----------------------------------
//-------------------------------Opening Inventory routes----------------------------------
{
path: "/opening-inventory",
name: "Opening Inventory",
element: PDOpeningInventory,
navName: "Opening Inventory",
},
{
path: "/opening-inventory/pd/:id",
name: "Opening Inventory",
element: PDOpeningInventory,
navName: "Opening Inventory",
},
//-------------------------------End Opening Inventory routes----------------------------------
//--------------Order Management Routes--------------------------------------- //--------------Order Management Routes---------------------------------------
{ {
path: "/orders/new", path: "/orders/new",
@ -819,7 +811,12 @@ const routes = [
navName: "Configuration", navName: "Configuration",
}, },
{ path: "/logo", name: "Logo", element: Logo, navName: "Configuration" }, { path: "/logo", name: "Logo", element: Logo, navName: "Configuration" },
{ path: "/mobile-app", name: "MobileApp", element: MobileApp, navName: "Configuration" }, {
path: "/mobile-app",
name: "MobileApp",
element: MobileApp,
navName: "Configuration",
},
//----------------- End Configuration Routes----------------------------------- //----------------- End Configuration Routes-----------------------------------
//-----------------Affiliate & Coupons Routes----------------------------------- //-----------------Affiliate & Coupons Routes-----------------------------------

18
src/views/Brands/Brands.js
View File

@ -55,8 +55,8 @@ const Brands = () => {
setLoading(true); // Set loading to true before fetching setLoading(true); // Set loading to true before fetching
const response = await axios.get("/api/brand/getBrands", { const response = await axios.get("/api/brand/getBrands", {
params: { params: {
page, // page,
show: itemPerPage, // show: itemPerPage,
brandName: nameRef.current?.value || "", brandName: nameRef.current?.value || "",
}, // Include pagination and search }, // Include pagination and search
}); });
@ -72,7 +72,7 @@ const Brands = () => {
useEffect(() => { useEffect(() => {
getBrands(); getBrands();
}, [page, itemPerPage]); // Trigger fetch when these values change }, []);
const handleEditClick = (_id, brandName) => { const handleEditClick = (_id, brandName) => {
setOpen(true); setOpen(true);
@ -177,8 +177,7 @@ const Brands = () => {
} }
}; };
const getPageCount = () => const getPageCount = () => Math.max(1, Math.ceil(brands?.length / itemPerPage));
Math.max(1, Math.ceil(brands.length / itemPerPage));
const debouncedSearch = useCallback( const debouncedSearch = useCallback(
debounce(() => { debounce(() => {
setPage(1); setPage(1);
@ -371,7 +370,7 @@ const Brands = () => {
<label>Brand Name:</label> <label>Brand Name:</label>
<input <input
type="text" type="text"
placeholder="product name" placeholder="Brand name"
className="form-control" className="form-control"
ref={nameRef} ref={nameRef}
onChange={handleSearchChange} onChange={handleSearchChange}
@ -411,7 +410,12 @@ const Brands = () => {
</tr> </tr>
) : ( ) : (
brands && brands &&
brands.map((item, i) => ( brands
.slice(
(`${page}` - 1) * itemPerPage,
`${page}` * itemPerPage
)
.map((item, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<h5>{item.brandName} </h5> <h5>{item.brandName} </h5>

15
src/views/Categories/categories.js
View File

@ -57,8 +57,8 @@ const Categories = () => {
setLoading(true); setLoading(true);
const response = await axios.get("/api/category/getCategories", { const response = await axios.get("/api/category/getCategories", {
params: { params: {
page, // page,
show: itemPerPage, // show: itemPerPage,
categoryName: nameRef.current?.value || "", categoryName: nameRef.current?.value || "",
}, // Include pagination and search }, // Include pagination and search
}); });
@ -75,7 +75,7 @@ const Categories = () => {
useEffect(() => { useEffect(() => {
getCategories(); getCategories();
}, [page, itemPerPage]); }, []);
const handleEditClick = (_id, categoryName) => { const handleEditClick = (_id, categoryName) => {
setOpen(true); setOpen(true);
@ -415,7 +415,7 @@ const Categories = () => {
<label>Category Name:</label> <label>Category Name:</label>
<input <input
type="text" type="text"
placeholder="product name" placeholder="Category name"
className="form-control" className="form-control"
ref={nameRef} ref={nameRef}
onChange={handleSearchChange} onChange={handleSearchChange}
@ -455,7 +455,12 @@ const Categories = () => {
</tr> </tr>
) : ( ) : (
category && category &&
category.map((item, i) => ( category
.slice(
(`${page}` - 1) * itemPerPage,
`${page}` * itemPerPage
)
.map((item, i) => (
<tr key={i}> <tr key={i}>
<td> <td>
<h5>{item.categoryName} </h5> <h5>{item.categoryName} </h5>

304
src/views/OpeningInventory/PDOpeningInventory.js
View File

@ -1,304 +0,0 @@
import React, { useState, useEffect, useRef, useCallback } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
import debounce from "lodash.debounce";
const PDOpeningInventory = () => {
const token = isAutheticated();
const [loading, setLoading] = useState(true);
const [users, setUsers] = useState([]);
const [totalPages, setTotalPages] = useState(1);
const [currentPage, setCurrentPage] = useState(1);
const [itemPerPage, setItemPerPage] = useState(10);
const [totalData, setTotalData] = useState(0);
const nameRef = useRef();
const SBURef = useRef();
const getUsers = async () => {
setLoading(true);
try {
const res = await axios.get(`/api/allpd/stock`, {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
page: currentPage,
show: itemPerPage,
name: nameRef.current.value,
SBU: SBURef.current.value,
},
});
// console.log(res.data);
setUsers(res?.data?.data);
setTotalData(res.data?.pagination?.totalRecords);
setTotalPages(res.data?.pagination?.totalPages);
} catch (error) {
swal({
title: error,
text: "please login to access the resource or refresh the page ",
icon: "error",
button: "Retry",
dangerMode: true,
});
} finally {
setLoading(false);
}
};
useEffect(() => {
getUsers();
}, [itemPerPage, currentPage]);
const debouncedSearch = useCallback(
debounce(() => {
setCurrentPage(1);
getUsers();
}, 500),
[]
);
const handleSearchChange = () => {
debouncedSearch();
};
return (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Principal Distributor Opening Inventory
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10 ">
<div className="col-lg-1">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(Number(e.target.value));
setCurrentPage(1); // Reset to first page when changing items per page
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3">
<label>Name:</label>
<input
type="text"
name="searchTerm"
placeholder="Name"
className="form-control"
ref={nameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-3">
<label>SBU:</label>
<input
type="text"
name="searchTerm"
placeholder="SBU"
className="form-control"
ref={SBURef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{
border: "1px solid",
tableLayout: "fixed",
width: "100%",
}}
>
<thead
className="thead-info"
style={{ background: "rgb(140, 213, 213)" }}
>
<tr>
<th style={{ width: "12%" }}>Unique Id</th>
<th style={{ width: "10%" }}>SBU</th>
<th style={{ width: "20%" }}>Name</th>
<th style={{ width: "20%" }}>Email</th>
<th style={{ width: "15%" }}>Mobile Nmuber</th>
<th style={{ width: "15%" }}>Date Registered</th>
<th className="text-center" style={{ width: "13%" }}>
Opening Inventory
</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr className="text-center">
<td colSpan="9">
<h5>Loading....</h5>
</td>
</tr>
) : users.length > 0 ? (
users.map((user, i) => (
<tr key={i}>
<td>{user?.userId.uniqueId}</td>
<td>{user.userId.SBU ? user.userId.SBU : "N/A"}</td>
<td className="text-start">{user.userId.name}</td>
<td className="text-start">{user.userId.email}</td>
<td className="text-start">{user.userId.phone}</td>
<td className="text-center">
{new Date(user.createdAt).toLocaleString(
"en-IN",
{
// weekday: "short",
month: "short",
day: "numeric",
year: "numeric",
// hour: "numeric",
// minute: "numeric",
// hour12: true,
}
)}
</td>
<td className="text-center">
<Link
to={`/principaldistributor/opening-inventory/${user?.userId._id}`}
>
<button
style={{
color: "white",
}}
type="button"
className="
btn btn-info btn-sm
waves-effect waves-light
btn-table
ml-1
md-mt-1
md-ml-0
"
>
View
</button>
</Link>
</td>
</tr>
))
) : (
<tr>
<td colSpan="9" className="text-center">
<h5>No Principal Distributor found!</h5>
</td>
</tr>
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {users?.length} of {totalData} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="dataTables_paginate paging_simple_numbers">
<ul className="pagination">
<li
className={`paginate_button page-item previous ${
currentPage === 1 ? "disabled" : ""
}`}
>
<a
className="page-link"
onClick={() =>
setCurrentPage((prev) => Math.max(prev - 1, 1))
}
aria-controls="datatable"
>
Previous
</a>
</li>
{Array.from({ length: totalPages }, (_, index) => (
<li
key={index}
className={`paginate_button page-item ${
currentPage === index + 1 ? "active" : ""
}`}
>
<a
className="page-link"
onClick={() => setCurrentPage(index + 1)}
aria-controls="datatable"
>
{index + 1}
</a>
</li>
))}
<li
className={`paginate_button page-item next ${
currentPage === totalPages ? "disabled" : ""
}`}
>
<a
className="page-link"
onClick={() =>
setCurrentPage((prev) =>
Math.min(prev + 1, totalPages)
)
}
aria-controls="datatable"
>
Next
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default PDOpeningInventory;

2
src/views/PrincipalDistributors/OpeningInventory.js
View File

@ -251,7 +251,7 @@ const DistributorOpeningInventory = () => {
className="font-bold capitalize" className="font-bold capitalize"
onClick={() => onClick={() =>
navigate( navigate(
`/principaldistributor/opening-inventory/upload/${id}`, `/${distributortype}/opening-inventory/upload/${id}`,
{ {
replace: true, replace: true,
} }

4
src/views/PrincipalDistributors/UploadOpeningInventory.js
View File

@ -44,7 +44,9 @@ const UploadOpeningInventory = () => {
formData.append("file", file); formData.append("file", file);
const { data } = await axios.post( const { data } = await axios.post(
`/api/openinginventories/upload/${id}`, distributortype === "principaldistributor"
? `/api/openinginventories/pd/upload/${id}`
: `/api/openinginventories/rd/upload/${id}`,
formData, formData,
{ {
headers: { headers: {

409
src/views/Reports/OpeningInventoryReports.js Normal file
View File

@ -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 OpeningInventoryReports = () => {
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/opening-inventory`, {
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 (
<div className="main-content">
<div className="page-content">
<div className="container-fluid">
<div className="row">
<div className="col-12">
<div
className="
page-title-box
d-flex
align-items-center
justify-content-between
"
>
<div style={{ fontSize: "22px" }} className="fw-bold">
Opening Inventory Reports
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-12">
<div className="card">
<div className="card-body">
<div className="row ml-0 mr-0 mb-10">
<div className="col-lg-1">
<div className="dataTables_length">
<label className="w-100">
Show
<select
onChange={(e) => {
setItemPerPage(e.target.value);
setCurrentPage(1);
}}
className="form-control"
disabled={loading}
>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
entries
</label>
</div>
</div>
<div className="col-lg-3">
<label>Product Name:</label>
<input
type="text"
placeholder="product name"
className="form-control"
ref={nameRef}
onChange={handleSearchChange}
disabled={loading}
/>
</div>
<div className="col-lg-3">
<label>Filter by Category:</label>
<select
className="form-control"
ref={categoryRef}
onChange={handleSearchChange}
disabled={loading}
>
<option value="">All</option>
{categories?.map((e, i) => (
<option key={i} value={e._id}>
{e?.categoryName}
</option>
))}
</select>
</div>
<div className="col-lg-3">
<label>Filter by Brand:</label>
<select
className="form-control"
ref={brandRef}
onChange={handleSearchChange}
disabled={loading}
>
<option value="">All</option>
{brands?.map((e, i) => (
<option key={i} value={e._id}>
{e?.brandName}
</option>
))}
</select>
</div>
</div>
<div className="table-responsive table-shoot mt-3">
<table
className="table table-centered table-nowrap"
style={{ border: "1px solid" }}
>
<thead
className="thead-light"
style={{ background: "#ecdddd" }}
>
<tr>
<th className="text-start" style={{ width: "10%" }}>
SKU Code
</th>
<th className="text-start" style={{ width: "25%" }}>
SKU Description
</th>
<th className="text-start" style={{ width: "15%" }}>
Category Name
</th>
<th className="text-start" style={{ width: "15%" }}>
Brand Name
</th>
<th className="text-start" style={{ width: "15%" }}>
At PD and RD
</th>
<th className="text-start" style={{ width: "10%" }}>
All PDs
</th>
<th className="text-start" style={{ width: "10%" }}>
All RDs
</th>
</tr>
</thead>
<tbody>
{loading ? (
<tr>
<td className="text-center" colSpan="7">
Loading...
</td>
</tr>
) : productsData?.length > 0 ? (
productsData?.map((product, i) => (
<tr key={i}>
<td
className="text-start"
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{product.SKU}
</td>
<td
className="text-start"
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{product.name}
</td>
<td
className="text-start"
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{product.category || "Category Not selected"}
</td>
<td
className="text-start"
style={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{product.brand || "Brand Not selected"}
</td>
<td className="text-start">
{product.allPdAndRd}
</td>
<td className="text-start">{product.allPDs}</td>
<td className="text-start">{product.allRDs}</td>
</tr>
))
) : (
<tr className="text-center">
<td colSpan="7">
<h5>No Product Available...</h5>
</td>
</tr>
)}
</tbody>
</table>
</div>
<div className="row mt-20">
<div className="col-sm-12 col-md-6 mb-20">
<div
className="dataTables_info"
id="datatable_info"
role="status"
aria-live="polite"
>
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
{totalData} entries
</div>
</div>
<div className="col-sm-12 col-md-6">
<div className="d-flex">
<ul className="pagination ms-auto">
<li
className={
currentPage === 1
? "paginate_button page-item previous disabled"
: "paginate_button page-item previous"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev - 1)}
disabled={loading}
>
Previous
</span>
</li>
{!(currentPage - 1 < 1) && (
<li className="paginate_button page-item">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={(e) =>
setCurrentPage((prev) => prev - 1)
}
disabled={loading}
>
{currentPage - 1}
</span>
</li>
)}
<li className="paginate_button page-item active">
<span
className="page-link"
style={{ cursor: "pointer" }}
>
{currentPage}
</span>
</li>
{!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
) && (
<li className="paginate_button page-item ">
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => {
setCurrentPage((prev) => prev + 1);
}}
disabled={loading}
>
{currentPage + 1}
</span>
</li>
)}
<li
className={
!(
(currentPage + 1) * itemPerPage - itemPerPage >
totalData - 1
)
? "paginate_button page-item next"
: "paginate_button page-item next disabled"
}
>
<span
className="page-link"
style={{ cursor: "pointer" }}
onClick={() => setCurrentPage((prev) => prev + 1)}
disabled={loading}
>
Next
</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default OpeningInventoryReports;

12
src/views/RetailDistributors/RetailDistributor.js
View File

@ -282,6 +282,18 @@ const RetailDistributor = () => {
Stock Stock
</button> </button>
</Link> </Link>
<Link
to={`/retaildistributor/opening-inventory/${retailDistributor?._id}`}
>
<button
type="button"
className=" btn btn-info btn-sm waves-effect waves-light btn-table ml-1
md-mt-1
md-ml-0"
>
OI
</button>
</Link>
</td> </td>
</tr> </tr>
)) ))