2025-03-25 06:17:41 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import Search from "../../ui/inputs/Search";
|
2025-03-29 12:26:50 +00:00
|
|
|
import vehicle from "../../../assets/image/vehicles.png";
|
|
|
|
import workStation from "../../../assets/image/workStation.png";
|
|
|
|
import machines from "../../../assets/image/machines.png";
|
|
|
|
import feneration from "../../../assets/image/feneration.png";
|
|
|
|
import worker from "../../../assets/image/worker.png";
|
2025-03-25 06:17:41 +00:00
|
|
|
const Assets: React.FC = () => {
|
|
|
|
const [searchValue, setSearchValue] = useState<string>("");
|
2025-03-29 12:26:50 +00:00
|
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
2025-03-25 06:17:41 +00:00
|
|
|
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
|
|
setSearchValue(value);
|
2025-03-29 12:26:50 +00:00
|
|
|
setSelectedCategory(null); // Reset selected category when search changes
|
2025-03-25 06:17:41 +00:00
|
|
|
};
|
2025-03-29 12:26:50 +00:00
|
|
|
|
|
|
|
const categoryList = [
|
|
|
|
{
|
|
|
|
assetName: "Doors",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Windows",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Pillars",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Feneration",
|
|
|
|
categoryImage: feneration,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Forklift",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Vehicles",
|
|
|
|
categoryImage: vehicle,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "AGV",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Vehicles",
|
|
|
|
categoryImage: vehicle,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Pallet",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Workstation",
|
|
|
|
categoryImage: workStation,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Controller",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Workstation",
|
|
|
|
categoryImage: workStation,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Conveyor",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Workstation",
|
|
|
|
categoryImage: workStation,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "VMC",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Machines",
|
|
|
|
categoryImage: machines,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "CMC",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Machines",
|
|
|
|
categoryImage: machines,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Male Worker",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Workers",
|
|
|
|
categoryImage: worker,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
assetName: "Female Worker",
|
|
|
|
assetImage: "",
|
|
|
|
category: "Workers",
|
|
|
|
categoryImage: worker,
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
// Get unique categories
|
|
|
|
const uniqueCategories = Array.from(
|
|
|
|
new Set(categoryList.map((asset) => asset.category))
|
|
|
|
);
|
|
|
|
|
|
|
|
// Filter assets based on the selected category
|
|
|
|
const filteredAssets =
|
|
|
|
selectedCategory !== null
|
|
|
|
? categoryList.filter((asset) => asset.category === selectedCategory)
|
|
|
|
: [];
|
|
|
|
|
2025-03-25 06:17:41 +00:00
|
|
|
return (
|
|
|
|
<div className="assets-container">
|
|
|
|
<Search onChange={handleSearchChange} />
|
|
|
|
{searchValue ? (
|
|
|
|
<div className="searched-content">
|
|
|
|
<p>Results for "{searchValue}"</p>
|
|
|
|
</div>
|
2025-03-29 12:26:50 +00:00
|
|
|
) : selectedCategory ? (
|
|
|
|
<div className="assets-wrapper">
|
|
|
|
{/* Back Button */}
|
|
|
|
<div
|
|
|
|
className="back-button"
|
|
|
|
onClick={() => setSelectedCategory(null)}
|
|
|
|
>
|
|
|
|
← Back
|
|
|
|
</div>
|
|
|
|
<h2>{selectedCategory}</h2>
|
|
|
|
<div className="assets-container">
|
|
|
|
{filteredAssets.map((asset, index) => (
|
|
|
|
<div key={index} className="assets">
|
|
|
|
<img
|
|
|
|
src={asset.assetImage}
|
|
|
|
alt={asset.assetName}
|
|
|
|
className="asset-image"
|
|
|
|
/>
|
|
|
|
<div className="asset-name">{asset.assetName}</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
2025-03-25 06:17:41 +00:00
|
|
|
) : (
|
2025-03-29 12:26:50 +00:00
|
|
|
<div className="assets-wrapper">
|
|
|
|
<h2>Categories</h2>
|
|
|
|
<div className="categories-container">
|
|
|
|
{uniqueCategories.map((category, index) => {
|
|
|
|
const categoryInfo = categoryList.find(
|
|
|
|
(asset) => asset.category === category
|
|
|
|
);
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
key={index}
|
|
|
|
className="category"
|
|
|
|
onClick={() => setSelectedCategory(category)}
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={categoryInfo?.categoryImage || ""}
|
|
|
|
alt={category}
|
|
|
|
className="category-image"
|
|
|
|
/>
|
|
|
|
<div className="category-name">{category}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</div>
|
|
|
|
</div>
|
2025-03-25 06:17:41 +00:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Assets;
|
2025-03-29 12:26:50 +00:00
|
|
|
|