+
+
+
+ - Items
+ - Description
+ - Quantity
+
+ {items.map((item, index) => (
+
navigate(`/inventory/${item.id}`)}
+ >
+
+ 0 ? item.imageUrls[0] : undefined}
+ preview={false}
+ fallback="https://plus.unsplash.com/premium_vector-1731660866636-d6ee4dcd6806?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ />
+
+
+
{item.name}
+
{item.description}
+
+
{item.quantity}
+
+ ))}
+
-
+
+
+
);
diff --git a/src/pages/ProductFormPage.tsx b/src/pages/ProductFormPage.tsx
new file mode 100644
index 0000000..df95c22
--- /dev/null
+++ b/src/pages/ProductFormPage.tsx
@@ -0,0 +1,257 @@
+import { Divider, Form, Input, InputNumber, Switch, Button, message, Upload } from "antd";
+import { ArrowLeftOutlined, UploadOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import { InventoryService } from "../services/InventoryService";
+import { useNavigate } from "react-router";
+
+export function ProductFormPage() {
+ const [form] = Form.useForm();
+ const [loading, setLoading] = useState
(false);
+ const [imageFiles, setImageFiles] = useState>(new Map());
+ const navigate = useNavigate();
+
+ const onSubmit = async (values: any) => {
+ try {
+ if (imageFiles.size === 0) {
+ message.error("Please uploat at least one image");
+ return;
+ }
+ if (loading) return;
+ setLoading(true);
+
+ // Create FormData
+ const formData = new FormData();
+
+ // Append form fields
+ formData.append(
+ "itemToBeAddedString",
+ JSON.stringify({
+ title: values.title,
+ description: values.description,
+ quantity: values.quantity,
+ location: values.location,
+ neverExpires: values.neverExpires,
+ expiresAfterDays: values.expiresAfterDays,
+ }),
+ );
+
+ formData.append("Content-Type", "application/json");
+
+ // Append image files
+ imageFiles.forEach((file) => {
+ formData.append("images", file);
+ });
+
+ const response = await InventoryService.donate(formData);
+ console.log(response);
+ if (response.status === 201) {
+ message.success("Successfully created!");
+ form.resetFields();
+ setImageFiles(new Map());
+ navigate("/inventory");
+ }
+ } catch (error: any) {
+ message.error(error?.response?.data?.message || error.toString());
+ console.log("ERROR:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const fillLocationAutomatically = () => {
+ if (!navigator.geolocation) {
+ message.error("Geolocation is not supported by your browser.");
+ return;
+ }
+
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ const { latitude, longitude } = position.coords;
+
+ // Fill top-level coordinates (for validation) and nested location
+ // fields after reverse-geocoding.
+ // Try reverse geocoding to extract address components.
+ fetch(`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json&addressdetails=1`)
+ .then((res) => res.json())
+ .then((data) => {
+ const display = data?.display_name || "";
+ const addr = data?.address || {};
+ const city = addr.city || addr.town || addr.village || "";
+ const state = addr.state || "";
+ const country = addr.country || "";
+
+ form.setFieldsValue({
+ // nested location object
+ location: {
+ address: display,
+ city,
+ state,
+ country,
+ latitude,
+ longitude,
+ },
+ });
+ message.success("Location auto-filled!");
+ })
+ .catch(() => {
+ // fallback: set coords only
+ form.setFieldsValue({
+ location: { address: "", city: "", state: "", country: "", latitude, longitude },
+ latitude,
+ longitude,
+ });
+ message.warning("Unable to auto-detect address components; coordinates were filled.");
+ });
+ },
+ () => {
+ message.error("Permission denied. Cannot fill location automatically.");
+ },
+ );
+ };
+
+ return (
+
+
+
window.history.back()}>
+
+
+
Add donation
+
+
+
+
+
+
- (null);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (!id) return;
+ (async () => {
+ if (loading) return;
+ setLoading(true);
+ try {
+ const { data } = await InventoryService.getItem(id);
+ setItem(data);
+ } catch (error) {
+ console.log("ERROR:", error);
+ }
+ })();
+ });
+
+ if (!item)
+ return (
+
+
+
+
window.history.back()}>
+
+
+
Show item
+
+
+
+
+
+
+
+
+
window.history.back()}>
+
+
+
Show item
+
+
+
+
+
+ {item.name}
+
+ }
+ >
+
+
+ {imageSrc ? (
+
+ ) : (
+
+ No image
+
+ )}
+
+ {`Quantity: ${item.quantity ?? 0}`}
+ {expiryText}
+
+
+
+
+
+ {item.description || "-"}
+
+ {item.location ? (
+
+
{item.location.address}
+
{[item.location.city, item.location.state, item.location.country].filter(Boolean).join(", ")}
+
+
+