Created initial warehouse page
This commit is contained in:
parent
ec25bf0725
commit
59d4085194
7
package-lock.json
generated
7
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"fs": "^0.0.1-security",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash": "^4.17.21",
|
||||
"mapbox-gl": "^3.10.0",
|
||||
"next": "15.1.7",
|
||||
"path": "^0.12.7",
|
||||
@ -5470,6 +5471,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
"fs": "^0.0.1-security",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash": "^4.17.21",
|
||||
"mapbox-gl": "^3.10.0",
|
||||
"next": "15.1.7",
|
||||
"path": "^0.12.7",
|
||||
|
||||
@ -1,56 +1,826 @@
|
||||
"use client";
|
||||
import { useMemo, useState } from "react";
|
||||
import { useState, useMemo } from "react";
|
||||
import { FaInbox, FaTimes, FaBox, FaCalendarPlus, FaShoppingCart } from "react-icons/fa";
|
||||
import { IoFilter, IoFilterCircleOutline, IoFilterOutline } from "react-icons/io5";
|
||||
import { SetStateAction, Dispatch } from "react";
|
||||
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
// Artifact type
|
||||
interface Artifact {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
location: string;
|
||||
earthquakeId: string;
|
||||
isRequired: boolean;
|
||||
isSold: boolean;
|
||||
isCollected: boolean;
|
||||
dateAdded: string;
|
||||
}
|
||||
|
||||
export default function Warehouse() {
|
||||
const [selectedEventId, setSelectedEventId] = useState("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState("");
|
||||
const events = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: "1234",
|
||||
title: "Artifact found - Germany Earthquake",
|
||||
text1: "Mortar and pestle",
|
||||
text2: "10 minutes ago",
|
||||
longitude: 10.4515, // Near Berlin, Germany
|
||||
latitude: 52.52,
|
||||
},
|
||||
{
|
||||
id: "2134",
|
||||
title: "All artifacts from California earthquake transported",
|
||||
text1: "India to London",
|
||||
text2: "15 hours ago",
|
||||
longitude: -122.4194, // Near San Francisco, California, USA
|
||||
latitude: 37.7749,
|
||||
},
|
||||
{
|
||||
id: "2341",
|
||||
title: "7 artifacts destroyed - Spain earthquake",
|
||||
text1: "edVases and pots from Madrid",
|
||||
text2: "3 weeks ago",
|
||||
longitude: -3.7038, // Near Madrid, Spain
|
||||
latitude: 40.4168,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
// Warehouse Artifacts Data
|
||||
const warehouseArtifacts: Artifact[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Solidified Lava Chunk",
|
||||
description: "A chunk of solidified lava from the 2023 Iceland eruption.",
|
||||
location: "Reykjanes, Iceland",
|
||||
earthquakeId: "EQ2023ICL",
|
||||
isRequired: true,
|
||||
isSold: false,
|
||||
isCollected: false,
|
||||
dateAdded: "2025-05-04",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Tephra Sample",
|
||||
description: "Foreign debris from the 2022 Tonga volcanic eruption.",
|
||||
location: "Tonga",
|
||||
earthquakeId: "EQ2022TGA",
|
||||
isRequired: false,
|
||||
isSold: true,
|
||||
isCollected: true,
|
||||
dateAdded: "2025-05-03",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Ash Sample",
|
||||
description: "Volcanic ash from the 2021 La Palma eruption.",
|
||||
location: "La Palma, Spain",
|
||||
earthquakeId: "EQ2021LPA",
|
||||
isRequired: false,
|
||||
isSold: false,
|
||||
isCollected: false,
|
||||
dateAdded: "2025-05-04",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Ground Soil",
|
||||
description: "Soil sample from the 2020 Croatia earthquake site.",
|
||||
location: "Zagreb, Croatia",
|
||||
earthquakeId: "EQ2020CRO",
|
||||
isRequired: true,
|
||||
isSold: false,
|
||||
isCollected: false,
|
||||
dateAdded: "2025-05-02",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Basalt Fragment",
|
||||
description: "Basalt rock from the 2019 New Zealand eruption.",
|
||||
location: "White Island, New Zealand",
|
||||
earthquakeId: "EQ2019NZL",
|
||||
isRequired: false,
|
||||
isSold: true,
|
||||
isCollected: false,
|
||||
dateAdded: "2025-05-04",
|
||||
},
|
||||
];
|
||||
|
||||
// Filter Component
|
||||
function FilterInput({
|
||||
value,
|
||||
onChange,
|
||||
type = "text",
|
||||
options,
|
||||
}: {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
type?: string;
|
||||
options?: string[];
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full h-full">
|
||||
<p>warehouse image pasted in here</p>
|
||||
<Sidebar
|
||||
logTitle="Artifact Retrieval and Tracking"
|
||||
logSubtitle="Record new artifacts collected - name, description, time/date found, location found, scientist and collection stage"
|
||||
recentsTitle="Artifact News"
|
||||
events={events}
|
||||
selectedEventId={selectedEventId}
|
||||
setSelectedEventId={setSelectedEventId}
|
||||
hoveredEventId={hoveredEventId}
|
||||
setHoveredEventId={setHoveredEventId}
|
||||
button1Name="Log New Artifacts"
|
||||
button2Name="Search Artifacts"
|
||||
></Sidebar>
|
||||
<div className="flex items-center gap-2 group">
|
||||
<div className="relative">
|
||||
<div className="p-1 group-hover:bg-blue-100 rounded transition-colors duration-200">
|
||||
<IoFilter className="cursor-pointer text-neutral-500 font-bold group-hover:text-blue-600" />
|
||||
</div>
|
||||
<div className="absolute z-50 mt-0 w-48 bg-white border border-neutral-300 rounded-md shadow-lg p-2 opacity-0 group-hover:opacity-100 group-hover:visible transition-opacity duration-200 left-0 pointer-events-none group-hover:pointer-events-auto">
|
||||
{options ? (
|
||||
<div className="max-h-32 overflow-y-auto">
|
||||
{options.map((opt) => (
|
||||
<div key={opt} className="p-1 hover:bg-blue-100 cursor-pointer text-sm" onClick={() => onChange(opt)}>
|
||||
{opt || "All"}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<input
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="w-full p-1 border border-neutral-300 rounded-md text-sm"
|
||||
placeholder="Filter..."
|
||||
aria-label="Filter input"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{value && (
|
||||
<div className="inline-flex items-center bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-md">
|
||||
{value === "true" ? "Yes" : value === "false" ? "No" : value}
|
||||
<FaTimes className="ml-1 cursor-pointer text-blue-600 hover:text-blue-800" onClick={() => onChange("")} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Table Component
|
||||
function ArtifactTable({
|
||||
artifacts,
|
||||
filters,
|
||||
setFilters,
|
||||
setEditArtifact,
|
||||
clearSort,
|
||||
}: {
|
||||
artifacts: Artifact[];
|
||||
filters: Record<string, string>;
|
||||
setFilters: Dispatch<
|
||||
SetStateAction<{
|
||||
id: string;
|
||||
name: string;
|
||||
earthquakeId: string;
|
||||
location: string;
|
||||
description: string;
|
||||
isRequired: string;
|
||||
isSold: string;
|
||||
isCollected: string;
|
||||
dateAdded: string;
|
||||
}>
|
||||
>;
|
||||
setEditArtifact: (artifact: Artifact) => void;
|
||||
clearSort: () => void;
|
||||
}) {
|
||||
const [sortConfig, setSortConfig] = useState<{
|
||||
key: keyof Artifact;
|
||||
direction: "asc" | "desc";
|
||||
} | null>(null);
|
||||
|
||||
const handleSort = (key: keyof Artifact) => {
|
||||
setSortConfig((prev) => {
|
||||
if (!prev || prev.key !== key) {
|
||||
return { key, direction: "asc" };
|
||||
}
|
||||
return {
|
||||
key,
|
||||
direction: prev.direction === "asc" ? "desc" : "asc",
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
const clearSortConfig = () => {
|
||||
setSortConfig(null);
|
||||
clearSort();
|
||||
};
|
||||
|
||||
const sortedArtifacts = useMemo(() => {
|
||||
if (!sortConfig) return artifacts;
|
||||
const sorted = [...artifacts].sort((a, b) => {
|
||||
const aValue = a[sortConfig.key];
|
||||
const bValue = b[sortConfig.key];
|
||||
if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
|
||||
if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
return sorted;
|
||||
}, [artifacts, sortConfig]);
|
||||
|
||||
return (
|
||||
<table className="w-full text-left">
|
||||
<thead className="sticky top-0 bg-neutral-100 border-b border-neutral-200 z-10">
|
||||
<tr>
|
||||
{[
|
||||
{ label: "ID", key: "id" },
|
||||
{ label: "Name", key: "name" },
|
||||
{ label: "Earthquake ID", key: "earthquakeId" },
|
||||
{ label: "Location", key: "location" },
|
||||
{ label: "Description", key: "description" },
|
||||
{ label: "Required", key: "isRequired" },
|
||||
{ label: "Sold", key: "isSold" },
|
||||
{ label: "Collected", key: "isCollected" },
|
||||
{ label: "Date Added", key: "dateAdded" },
|
||||
].map(({ label, key }) => (
|
||||
<th
|
||||
key={key}
|
||||
className="p-3 text-sm font-semibold text-neutral-800 cursor-pointer"
|
||||
onClick={() => handleSort(key as keyof Artifact)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{label}
|
||||
<FilterInput
|
||||
value={filters[key]}
|
||||
onChange={(value) => {
|
||||
setFilters({ ...filters, [key]: value } as {
|
||||
id: string;
|
||||
name: string;
|
||||
earthquakeId: string;
|
||||
location: string;
|
||||
description: string;
|
||||
isRequired: string;
|
||||
isSold: string;
|
||||
isCollected: string;
|
||||
dateAdded: string;
|
||||
});
|
||||
if (value === "") clearSortConfig();
|
||||
}}
|
||||
type={key === "dateAdded" ? "date" : "text"}
|
||||
options={["isRequired", "isSold", "isCollected"].includes(key) ? ["", "true", "false"] : undefined}
|
||||
/>
|
||||
{sortConfig?.key === key && <span>{sortConfig.direction === "asc" ? "↑" : "↓"}</span>}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedArtifacts.map((artifact) => (
|
||||
<tr
|
||||
key={artifact.id}
|
||||
className="border-b border-neutral-200 hover:bg-neutral-100 cursor-pointer"
|
||||
onClick={() => setEditArtifact(artifact)}
|
||||
>
|
||||
<td className="p-3 pl-4 text-sm text-neutral-600">{artifact.id}</td>
|
||||
<td className="p-3 text-sm text-neutral-800 font-medium">{artifact.name}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.earthquakeId}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.location}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.description}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.isRequired ? "Yes" : "No"}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.isSold ? "Yes" : "No"}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.isCollected ? "Yes" : "No"}</td>
|
||||
<td className="p-3 text-sm text-neutral-600">{artifact.dateAdded}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
// Modal Component for Logging Artifact
|
||||
function LogModal({ onClose }: { onClose: () => void }) {
|
||||
const [name, setName] = useState("");
|
||||
const [description, setDescription] = useState("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [earthquakeId, setEarthquakeId] = useState("");
|
||||
const [storageLocation, setStorageLocation] = useState("");
|
||||
const [isRequired, setIsRequired] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleLog = async () => {
|
||||
if (!name || !description || !location || !earthquakeId || !storageLocation) {
|
||||
setError("All fields are required.");
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
|
||||
alert(`Logged ${name} to storage: ${storageLocation}`);
|
||||
onClose();
|
||||
} catch {
|
||||
setError("Failed to log artifact. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
|
||||
<h3 className="text-lg font-semibold mb-4 text-neutral-800">Log New Artifact</h3>
|
||||
{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Artifact Name"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
|
||||
aria-label="Artifact Description"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Location"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Artifact Location"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Earthquake ID"
|
||||
value={earthquakeId}
|
||||
onChange={(e) => setEarthquakeId(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Earthquake ID"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Storage Location (e.g., A-12)"
|
||||
value={storageLocation}
|
||||
onChange={(e) => setStorageLocation(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Storage Location"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isRequired}
|
||||
onChange={(e) => setIsRequired(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
|
||||
aria-label="Required Artifact"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<label className="text-sm text-neutral-600">Required (Not for Sale)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLog}
|
||||
className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
|
||||
isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
|
||||
}`}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Logging...
|
||||
</>
|
||||
) : (
|
||||
"Log Artifact"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Modal Component for Bulk Logging
|
||||
function BulkLogModal({ onClose }: { onClose: () => void }) {
|
||||
const [palletNote, setPalletNote] = useState("");
|
||||
const [storageLocation, setStorageLocation] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleLog = async () => {
|
||||
if (!palletNote || !storageLocation) {
|
||||
setError("All fields are required.");
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
|
||||
alert(`Logged bulk pallet to storage: ${storageLocation}`);
|
||||
onClose();
|
||||
} catch {
|
||||
setError("Failed to log pallet. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
|
||||
<h3 className="text-lg font-semibold mb-4 text-neutral-800">Log Bulk Pallet</h3>
|
||||
{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
|
||||
<div className="space-y-2">
|
||||
<textarea
|
||||
placeholder="Pallet Delivery Note (e.g., 10 lava chunks, 5 ash samples)"
|
||||
value={palletNote}
|
||||
onChange={(e) => setPalletNote(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-24"
|
||||
aria-label="Pallet Delivery Note"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Storage Location (e.g., B-05)"
|
||||
value={storageLocation}
|
||||
onChange={(e) => setStorageLocation(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Storage Location"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLog}
|
||||
className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
|
||||
isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
|
||||
}`}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Logging...
|
||||
</>
|
||||
) : (
|
||||
"Log Pallet"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Modal Component for Editing Artifact
|
||||
function EditModal({ artifact, onClose }: { artifact: Artifact; onClose: () => void }) {
|
||||
const [name, setName] = useState(artifact.name);
|
||||
const [description, setDescription] = useState(artifact.description);
|
||||
const [location, setLocation] = useState(artifact.location);
|
||||
const [earthquakeId, setEarthquakeId] = useState(artifact.earthquakeId);
|
||||
const [isRequired, setIsRequired] = useState(artifact.isRequired);
|
||||
const [isSold, setIsSold] = useState(artifact.isSold);
|
||||
const [isCollected, setIsCollected] = useState(artifact.isCollected);
|
||||
const [dateAdded, setDateAdded] = useState(artifact.dateAdded);
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleOverlayClick = (e: { target: any; currentTarget: any }) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name || !description || !location || !earthquakeId || !dateAdded) {
|
||||
setError("All fields are required.");
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 500)); // Simulated API call
|
||||
alert(`Updated artifact ${name}`);
|
||||
onClose();
|
||||
} catch {
|
||||
setError("Failed to update artifact. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
|
||||
onClick={handleOverlayClick}
|
||||
>
|
||||
<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
|
||||
<h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artifact</h3>
|
||||
{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
|
||||
<div className="space-y-2">
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Artifact Name"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
|
||||
aria-label="Artifact Description"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Artifact Location"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={earthquakeId}
|
||||
onChange={(e) => setEarthquakeId(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Earthquake ID"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isRequired}
|
||||
onChange={(e) => setIsRequired(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
|
||||
aria-label="Required Artifact"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<label className="text-sm text-neutral-600">Required (Not for Sale)</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSold}
|
||||
onChange={(e) => setIsSold(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
|
||||
aria-label="Sold Artifact"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<label className="text-sm text-neutral-600">Sold</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isCollected}
|
||||
onChange={(e) => setIsCollected(e.target.checked)}
|
||||
className="h-4 w-4 text-blue-600 border-neutral-300 rounded focus:ring-blue-500"
|
||||
aria-label="Collected Artifact"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
<label className="text-sm text-neutral-600">Collected</label>
|
||||
</div>
|
||||
<input
|
||||
type="date"
|
||||
value={dateAdded}
|
||||
onChange={(e) => setDateAdded(e.target.value)}
|
||||
className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500"
|
||||
aria-label="Date Added"
|
||||
disabled={isSubmitting}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3 mt-4">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
|
||||
isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
|
||||
}`}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<svg
|
||||
className="animate-spin h-5 w-5 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
"Save"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Filter Logic
|
||||
const applyFilters = (artifacts: Artifact[], filters: Record<string, string>): Artifact[] => {
|
||||
return artifacts.filter((artifact) => {
|
||||
return (
|
||||
(filters.id === "" || artifact.id.toString().includes(filters.id)) &&
|
||||
(filters.name === "" || artifact.name.toLowerCase().includes(filters.name.toLowerCase())) &&
|
||||
(filters.earthquakeId === "" || artifact.earthquakeId.toLowerCase().includes(filters.earthquakeId.toLowerCase())) &&
|
||||
(filters.location === "" || artifact.location.toLowerCase().includes(filters.location.toLowerCase())) &&
|
||||
(filters.description === "" || artifact.description.toLowerCase().includes(filters.description.toLowerCase())) &&
|
||||
(filters.isRequired === "" || (filters.isRequired === "true" ? artifact.isRequired : !artifact.isRequired)) &&
|
||||
(filters.isSold === "" || (filters.isSold === "true" ? artifact.isSold : !artifact.isSold)) &&
|
||||
(filters.isCollected === "" || (filters.isCollected === "true" ? artifact.isCollected : !artifact.isCollected)) &&
|
||||
(filters.dateAdded === "" || artifact.dateAdded === filters.dateAdded)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
// Warehouse Component
|
||||
export default function Warehouse() {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [showLogModal, setShowLogModal] = useState(false);
|
||||
const [showBulkLogModal, setShowBulkLogModal] = useState(false);
|
||||
const [editArtifact, setEditArtifact] = useState<Artifact | null>(null);
|
||||
const [filters, setFilters] = useState({
|
||||
id: "",
|
||||
name: "",
|
||||
earthquakeId: "",
|
||||
location: "",
|
||||
description: "",
|
||||
isRequired: "",
|
||||
isSold: "",
|
||||
isCollected: "",
|
||||
dateAdded: "",
|
||||
});
|
||||
const [isFiltering, setIsFiltering] = useState(false);
|
||||
const [sortConfig, setSortConfig] = useState<{
|
||||
key: keyof Artifact;
|
||||
direction: "asc" | "desc";
|
||||
} | null>(null);
|
||||
|
||||
const artifactsPerPage = 10;
|
||||
const indexOfLastArtifact = currentPage * artifactsPerPage;
|
||||
const indexOfFirstArtifact = indexOfLastArtifact - artifactsPerPage;
|
||||
|
||||
// Apply filters with loading state
|
||||
const filteredArtifacts = useMemo(() => {
|
||||
setIsFiltering(true);
|
||||
const result = applyFilters(warehouseArtifacts, filters);
|
||||
setIsFiltering(false);
|
||||
return result;
|
||||
}, [filters]);
|
||||
|
||||
const currentArtifacts = filteredArtifacts.slice(indexOfFirstArtifact, indexOfLastArtifact);
|
||||
|
||||
// Overview stats
|
||||
const totalArtifacts = warehouseArtifacts.length;
|
||||
const today = "2025-05-04";
|
||||
const artifactsAddedToday = warehouseArtifacts.filter((a) => a.dateAdded === today).length;
|
||||
const artifactsSoldToday = warehouseArtifacts.filter((a) => a.isSold && a.dateAdded === today).length;
|
||||
|
||||
const handleNextPage = () => {
|
||||
if (indexOfLastArtifact < filteredArtifacts.length) {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePreviousPage = () => {
|
||||
if (currentPage > 1) {
|
||||
setCurrentPage((prev) => prev - 1);
|
||||
}
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setFilters({
|
||||
id: "",
|
||||
name: "",
|
||||
earthquakeId: "",
|
||||
location: "",
|
||||
description: "",
|
||||
isRequired: "",
|
||||
isSold: "",
|
||||
isCollected: "",
|
||||
dateAdded: "",
|
||||
});
|
||||
setSortConfig(null); // Clear sorting
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full bg-neutral-50">
|
||||
{/* Main Content */}
|
||||
<div className="flex flex-1 p-5">
|
||||
<div className="flex-grow flex flex-col">
|
||||
{/* Overview Stats */}
|
||||
<div className="flex gap-8 mb-4">
|
||||
<div className="flex items-center text-md text-neutral-600">
|
||||
<FaBox className="mr-2 text-blue-600" />
|
||||
Total Artifacts: <span className="font-semibold ml-1">{totalArtifacts}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-md text-neutral-600">
|
||||
<FaCalendarPlus className="mr-2 text-blue-600" />
|
||||
Added Today: <span className="font-semibold ml-1">{artifactsAddedToday}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-md text-neutral-600">
|
||||
<FaShoppingCart className="mr-2 text-blue-600" />
|
||||
Sold Today: <span className="font-semibold ml-1">{artifactsSoldToday}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logging Buttons */}
|
||||
<div className="flex justify-end gap-3 mb-4">
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="px-4 py-2 bg-neutral-200 text-neutral-800 rounded-md hover:bg-neutral-300 font-medium"
|
||||
>
|
||||
Clear All Filters
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowLogModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
|
||||
>
|
||||
Log Single Artifact
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowBulkLogModal(true)}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
|
||||
>
|
||||
Log Bulk Pallet
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Table Card */}
|
||||
<div className="flex-grow bg-white rounded-lg shadow-md border border-neutral-200 overflow-hidden relative">
|
||||
{isFiltering && (
|
||||
<div className="absolute inset-0 bg-white bg-opacity-50 flex items-center justify-center z-20">
|
||||
<svg
|
||||
className="animate-spin h-8 w-8 text-blue-600"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
<div className="h-full overflow-y-none">
|
||||
<ArtifactTable
|
||||
artifacts={currentArtifacts}
|
||||
filters={filters}
|
||||
setFilters={setFilters}
|
||||
setEditArtifact={setEditArtifact}
|
||||
clearSort={() => setSortConfig(null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
{showLogModal && <LogModal onClose={() => setShowLogModal(false)} />}
|
||||
{showBulkLogModal && <BulkLogModal onClose={() => setShowBulkLogModal(false)} />}
|
||||
{editArtifact && <EditModal artifact={editArtifact} onClose={() => setEditArtifact(null)} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user