pd opening inventory update button , rd OI complete, brand and category pagination and OI reports completed
This commit is contained in:
Sibunnayak
parent
1ec4d8951f
commit
14b30bc6b6
23
src/_nav.js
23
src/_nav.js
@ -104,13 +104,6 @@ const _nav = [
|
||||
to: "/retail-distributor",
|
||||
group: "RetailDistributor",
|
||||
},
|
||||
// {
|
||||
// component: CNavItem,
|
||||
// name: "Opening Inventory",
|
||||
// icon: <CIcon icon={cilSwapHorizontal} customClassName="nav-icon" />,
|
||||
// to: "/opening-inventory",
|
||||
// group: "OpeningInventory",
|
||||
// },
|
||||
{
|
||||
component: CNavItem,
|
||||
name: "Attendance",
|
||||
@ -146,6 +139,22 @@ const _nav = [
|
||||
to: "/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,
|
||||
name: "Orders",
|
||||
|
||||
@ -165,9 +165,9 @@ import TodayTask from "./views/Tasks/TodayTasks";
|
||||
import Sales from "./views/Sales/Sales";
|
||||
import SingleSales from "./views/Sales/SingleSale";
|
||||
import MobileApp from "./views/configuration/MobileApp";
|
||||
import PDOpeningInventory from "./views/OpeningInventory/PDOpeningInventory";
|
||||
import DistributorOpeningInventory from "./views/PrincipalDistributors/OpeningInventory";
|
||||
import UploadOpeningInventory from "./views/PrincipalDistributors/UploadOpeningInventory";
|
||||
import OpeningInventoryReports from "./views/Reports/OpeningInventoryReports";
|
||||
const routes = [
|
||||
//dashboard
|
||||
|
||||
@ -433,7 +433,13 @@ const routes = [
|
||||
navName: "Distributor",
|
||||
},
|
||||
//----------------------- End Product Management Routes------------------------------------------------
|
||||
|
||||
//---------------Reports------------
|
||||
{
|
||||
path: "/reports/opening-inventory",
|
||||
name: "Reports Opening Inventory",
|
||||
element: OpeningInventoryReports,
|
||||
navName: "Reports",
|
||||
},
|
||||
//Departure
|
||||
// { path: "/departures", name: "Departures", element: Departures },
|
||||
// { path: "/departure/add", name: "Add Departure", element: AddDeparture },
|
||||
@ -677,20 +683,6 @@ const routes = [
|
||||
navName: "Website Related",
|
||||
},
|
||||
//-------------------------------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---------------------------------------
|
||||
{
|
||||
path: "/orders/new",
|
||||
@ -819,7 +811,12 @@ const routes = [
|
||||
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-----------------------------------
|
||||
|
||||
//-----------------Affiliate & Coupons Routes-----------------------------------
|
||||
|
||||
@ -55,8 +55,8 @@ const Brands = () => {
|
||||
setLoading(true); // Set loading to true before fetching
|
||||
const response = await axios.get("/api/brand/getBrands", {
|
||||
params: {
|
||||
page,
|
||||
show: itemPerPage,
|
||||
// page,
|
||||
// show: itemPerPage,
|
||||
brandName: nameRef.current?.value || "",
|
||||
}, // Include pagination and search
|
||||
});
|
||||
@ -72,7 +72,7 @@ const Brands = () => {
|
||||
|
||||
useEffect(() => {
|
||||
getBrands();
|
||||
}, [page, itemPerPage]); // Trigger fetch when these values change
|
||||
}, []);
|
||||
|
||||
const handleEditClick = (_id, brandName) => {
|
||||
setOpen(true);
|
||||
@ -177,8 +177,7 @@ const Brands = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const getPageCount = () =>
|
||||
Math.max(1, Math.ceil(brands.length / itemPerPage));
|
||||
const getPageCount = () => Math.max(1, Math.ceil(brands?.length / itemPerPage));
|
||||
const debouncedSearch = useCallback(
|
||||
debounce(() => {
|
||||
setPage(1);
|
||||
@ -371,7 +370,7 @@ const Brands = () => {
|
||||
<label>Brand Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="product name"
|
||||
placeholder="Brand name"
|
||||
className="form-control"
|
||||
ref={nameRef}
|
||||
onChange={handleSearchChange}
|
||||
@ -411,7 +410,12 @@ const Brands = () => {
|
||||
</tr>
|
||||
) : (
|
||||
brands &&
|
||||
brands.map((item, i) => (
|
||||
brands
|
||||
.slice(
|
||||
(`${page}` - 1) * itemPerPage,
|
||||
`${page}` * itemPerPage
|
||||
)
|
||||
.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<h5>{item.brandName} </h5>
|
||||
|
||||
@ -57,8 +57,8 @@ const Categories = () => {
|
||||
setLoading(true);
|
||||
const response = await axios.get("/api/category/getCategories", {
|
||||
params: {
|
||||
page,
|
||||
show: itemPerPage,
|
||||
// page,
|
||||
// show: itemPerPage,
|
||||
categoryName: nameRef.current?.value || "",
|
||||
}, // Include pagination and search
|
||||
});
|
||||
@ -75,7 +75,7 @@ const Categories = () => {
|
||||
|
||||
useEffect(() => {
|
||||
getCategories();
|
||||
}, [page, itemPerPage]);
|
||||
}, []);
|
||||
|
||||
const handleEditClick = (_id, categoryName) => {
|
||||
setOpen(true);
|
||||
@ -415,7 +415,7 @@ const Categories = () => {
|
||||
<label>Category Name:</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="product name"
|
||||
placeholder="Category name"
|
||||
className="form-control"
|
||||
ref={nameRef}
|
||||
onChange={handleSearchChange}
|
||||
@ -455,7 +455,12 @@ const Categories = () => {
|
||||
</tr>
|
||||
) : (
|
||||
category &&
|
||||
category.map((item, i) => (
|
||||
category
|
||||
.slice(
|
||||
(`${page}` - 1) * itemPerPage,
|
||||
`${page}` * itemPerPage
|
||||
)
|
||||
.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>
|
||||
<h5>{item.categoryName} </h5>
|
||||
|
||||
@ -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;
|
||||
@ -251,7 +251,7 @@ const DistributorOpeningInventory = () => {
|
||||
className="font-bold capitalize"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/principaldistributor/opening-inventory/upload/${id}`,
|
||||
`/${distributortype}/opening-inventory/upload/${id}`,
|
||||
{
|
||||
replace: true,
|
||||
}
|
||||
|
||||
@ -44,7 +44,9 @@ const UploadOpeningInventory = () => {
|
||||
formData.append("file", file);
|
||||
|
||||
const { data } = await axios.post(
|
||||
`/api/openinginventories/upload/${id}`,
|
||||
distributortype === "principaldistributor"
|
||||
? `/api/openinginventories/pd/upload/${id}`
|
||||
: `/api/openinginventories/rd/upload/${id}`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
|
||||
409
src/views/Reports/OpeningInventoryReports.js
Normal file
409
src/views/Reports/OpeningInventoryReports.js
Normal 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;
|
||||
@ -282,6 +282,18 @@ const RetailDistributor = () => {
|
||||
Stock
|
||||
</button>
|
||||
</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>
|
||||
</tr>
|
||||
))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user