Inventory
This commit is contained in:
Sibunnayak
parent
d0b9aa60e9
commit
3ada9ea922
@ -8,8 +8,7 @@ import debounce from "lodash.debounce";
|
||||
const Inventory = () => {
|
||||
const token = isAutheticated();
|
||||
const [loading, setLoading] = useState(false);
|
||||
// const [inventoryData, setInventoryData] = useState([]);
|
||||
const [filteredData, setFilteredData] = useState([]);
|
||||
const [inventoryData, setInventoryData] = useState([]);
|
||||
|
||||
const nameRef = useRef();
|
||||
const startDateRef = useRef();
|
||||
@ -31,12 +30,14 @@ const Inventory = () => {
|
||||
show: itemPerPage,
|
||||
startDate: startDateRef.current?.value || "",
|
||||
endDate: endDateRef.current?.value || "",
|
||||
name: nameRef.current?.value || "",
|
||||
},
|
||||
});
|
||||
|
||||
const transformedData =
|
||||
response.data?.inventories?.map((entry) => ({
|
||||
id: entry._id,
|
||||
uniqueId: entry.uniqueId,
|
||||
tradeName:
|
||||
entry.addedForData?.shippingAddress?.tradeName ||
|
||||
entry.addedForData?.trade_name ||
|
||||
@ -52,12 +53,8 @@ const Inventory = () => {
|
||||
updatedAt: entry.updatedAt,
|
||||
})) || [];
|
||||
|
||||
// setInventoryData(transformedData);
|
||||
setInventoryData(transformedData);
|
||||
setTotalData(response.data?.total_data || 0);
|
||||
|
||||
// Apply the filter after data is fetched
|
||||
filterData(transformedData);
|
||||
|
||||
} catch (err) {
|
||||
const msg = err?.response?.data?.msg || "Something went wrong!";
|
||||
swal({
|
||||
@ -72,14 +69,6 @@ const Inventory = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const filterData = (data) => {
|
||||
const tradeName = nameRef.current?.value || "";
|
||||
const filtered = data.filter((entry) =>
|
||||
entry.tradeName.toLowerCase().includes(tradeName.toLowerCase())
|
||||
);
|
||||
setFilteredData(filtered);
|
||||
};
|
||||
|
||||
const debouncedSearch = useCallback(
|
||||
debounce(() => {
|
||||
setCurrentPage(1);
|
||||
@ -177,7 +166,7 @@ const Inventory = () => {
|
||||
</div>
|
||||
|
||||
<div className="table-responsive table-shoot mt-3">
|
||||
<table
|
||||
{/* <table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
@ -206,11 +195,11 @@ const Inventory = () => {
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : filteredData.length > 0 ? (
|
||||
filteredData.map((entry, i) =>
|
||||
) : inventoryData.length > 0 ? (
|
||||
inventoryData.map((entry, i) =>
|
||||
entry.products.map((product, j) => (
|
||||
<tr key={`${i}-${j}`}>
|
||||
<td className="text-start">{entry.id}</td>
|
||||
<td className="text-start">{entry.uniqueId}</td>
|
||||
<td className="text-start">
|
||||
{new Date(entry.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
@ -282,9 +271,215 @@ const Inventory = () => {
|
||||
)
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</table> */}
|
||||
|
||||
<table
|
||||
className="table table-centered table-nowrap"
|
||||
style={{
|
||||
border: "1px solid",
|
||||
borderCollapse: "collapse",
|
||||
}} // Ensure borders collapse for clean lines
|
||||
>
|
||||
<thead
|
||||
className="thead-light"
|
||||
style={{ background: "#ecdddd" }}
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
ID
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Time
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Trade Name
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
PD/RD
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Product SKU
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Product Name
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Sale
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Inventory
|
||||
</th>
|
||||
<th
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td
|
||||
className="text-center"
|
||||
colSpan="10"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
Loading...
|
||||
</td>
|
||||
</tr>
|
||||
) : inventoryData.length > 0 ? (
|
||||
inventoryData.map((entry, i) =>
|
||||
entry.products.map((product, j) => (
|
||||
<tr key={`${i}-${j}`}>
|
||||
{/* Only show ID, Date, Time, Trade Name, PD/RD, and Actions on the first row of each entry */}
|
||||
{j === 0 && (
|
||||
<>
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{entry.uniqueId}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{new Date(entry.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{new Date(entry.createdAt).toLocaleString(
|
||||
"en-IN",
|
||||
{
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
hour12: true,
|
||||
}
|
||||
)}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{entry.tradeName}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{entry.designation}
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
{/* Product details */}
|
||||
<td
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{product.SKU}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{product.ProductName}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{product.Sale}
|
||||
</td>
|
||||
<td
|
||||
className="text-start"
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
{product.Inventory}
|
||||
</td>
|
||||
{/* Actions: only show on the first row of each entry */}
|
||||
{j === 0 && (
|
||||
<td
|
||||
className="text-start"
|
||||
rowSpan={entry.products.length}
|
||||
style={{ border: "1px solid" }}
|
||||
>
|
||||
<Link
|
||||
to={`/inventory/view/${entry.id}`}
|
||||
state={{ product }}
|
||||
>
|
||||
<button
|
||||
style={{
|
||||
color: "white",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm waves-effect waves-light btn-table mx-1 mt-1"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
</Link>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
)
|
||||
) : (
|
||||
<tr className="text-center">
|
||||
<td colSpan="10" style={{ border: "1px solid" }}>
|
||||
<h5>No Data Available...</h5>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div className="row mt-20">
|
||||
<div className="col-sm-12 col-md-6 mb-20">
|
||||
<div
|
||||
@ -293,65 +488,92 @@ const Inventory = () => {
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
Showing {Math.min(itemPerPage * currentPage, totalData)} of {totalData} entries
|
||||
Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
|
||||
{Math.min(currentPage * itemPerPage, totalData)} of{" "}
|
||||
{totalData} entries
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-12 col-md-6 text-md-end">
|
||||
<div
|
||||
className="dataTables_paginate paging_simple_numbers"
|
||||
id="datatable_paginate"
|
||||
>
|
||||
<ul className="pagination pagination-rounded">
|
||||
|
||||
<div className="col-sm-12 col-md-6">
|
||||
<div className="d-flex">
|
||||
<ul className="pagination ms-auto">
|
||||
<li
|
||||
className={`paginate_button page-item previous ${currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className="page-link"
|
||||
onClick={() => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage((prev) => prev - 1);
|
||||
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
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{[...Array(Math.ceil(totalData / itemPerPage))].map(
|
||||
(_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`paginate_button page-item ${index + 1 === currentPage ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
{!(currentPage - 1 < 1) && (
|
||||
<li className="paginate_button page-item">
|
||||
<span
|
||||
className="page-link"
|
||||
onClick={() => setCurrentPage(index + 1)}
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={(e) =>
|
||||
setCurrentPage((prev) => prev - 1)
|
||||
}
|
||||
disabled={loading}
|
||||
>
|
||||
{index + 1}
|
||||
</a>
|
||||
{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={`paginate_button page-item next ${currentPage === Math.ceil(totalData / itemPerPage) ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
className="page-link"
|
||||
onClick={() => {
|
||||
if (currentPage < Math.ceil(totalData / itemPerPage)) {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
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
|
||||
</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user