feat: refactor inventory item structure to use string IDs and update related components

frontend/api/inventory.ts

@@ -45,49 +45,49 @@ export async function fetchInventoryItems(): Promise<InventoryItem[]> {
     // Fallback dummy data
     return [
       {
-        id: 1,
+        id: "1",
         name: "Tomato Seeds",
-        category: "1",
+        categoryId: "1",
         quantity: 500,
-        unit: "1",
+        unitId: "1",
         lastUpdated: "2023-03-01",
-        status: "1",
+        statusId: "1",
       },
       {
-        id: 2,
+        id: "2",
         name: "NPK Fertilizer",
-        category: "3",
+        categoryId: "3",
         quantity: 200,
-        unit: "2",
+        unitId: "2",
         lastUpdated: "2023-03-05",
-        status: "2",
+        statusId: "2",
       },
       {
-        id: 3,
+        id: "3",
         name: "Corn Seeds",
-        category: "1",
+        categoryId: "1",
         quantity: 300,
-        unit: "1",
+        unitId: "1",
         lastUpdated: "2023-03-10",
-        status: "3",
+        statusId: "3",
       },
       {
-        id: 4,
+        id: "4",
         name: "Organic Compost",
-        category: "3",
+        categoryId: "3",
         quantity: 150,
-        unit: "2",
+        unitId: "2",
         lastUpdated: "2023-03-15",
-        status: "1",
+        statusId: "1",
       },
       {
-        id: 5,
+        id: "5",
         name: "Wheat Seeds",
-        category: "1",
+        categoryId: "1",
         quantity: 250,
-        unit: "2",
+        unitId: "2",
         lastUpdated: "2023-03-20",
-        status: "2",
+        statusId: "2",
       },
     ];
   }
@@ -111,15 +111,7 @@ export async function createInventoryItem(
     );
     return response.data;
   } catch (error) {
-    // Simulate successful creation if API endpoint is not available
-    return {
-      id: Math.floor(Math.random() * 1000),
-      name: item.name,
-      category: item.category,
-      quantity: item.quantity,
-      unit: item.unit,
-      lastUpdated: new Date().toISOString(),
-      status: "In Stock",
-    };
+    console.error("Error while creating Inventory Item!" + error);
+    throw new Error("Failed to create inventory item: " + error);
   }
 }

frontend/app/(sidebar)/inventory/add-inventory-item.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
@@ -60,12 +60,21 @@ export function AddInventoryItem({
   const [itemUnit, setItemUnit] = useState("");
   const [itemStatus, setItemStatus] = useState("");
 
-  const queryClient = useQueryClient();
+  // const {
+  //   data: inventoryItems = [],
+  //   isLoading: isItemLoading,
+  //   isError: isItemError,
+  // } = useQuery({
+  //   queryKey: ["inventoryItems"],
+  //   queryFn: fetchInventoryItems,
+  //   staleTime: 60 * 1000,
+  // });
 
   const mutation = useMutation({
     mutationFn: (item: CreateInventoryItemInput) => createInventoryItem(item),
     onSuccess: () => {
       // Invalidate queries to refresh inventory data.
+      const queryClient = useQueryClient();
       queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
       // Reset form fields and close dialog.
       setItemName("");
@@ -80,12 +89,6 @@ export function AddInventoryItem({
   const handleSave = () => {
     // Basic validation (you can extend this as needed)
     if (!itemName || !itemCategory || !itemUnit) return;
-    mutation.mutate({
-      name: itemName,
-      category: itemCategory,
-      quantity: itemQuantity,
-      unit: itemUnit,
-    });
   };
 
   return (

frontend/app/(sidebar)/inventory/edit-inventory-item.tsx

@@ -38,9 +38,9 @@ import {
 export interface EditInventoryItemProps {
   id: string;
   name: string;
-  category: string;
-  status: string;
-  unit: string;
+  categoryId: string;
+  statusId: string;
+  unitId: string;
   quantity: number;
   fetchedInventoryStatus: InventoryItemStatus[];
   fetchedInventoryCategory: InventoryItemCategory[];
@@ -50,9 +50,9 @@ export interface EditInventoryItemProps {
 export function EditInventoryItem({
   id,
   name,
-  category,
-  status,
-  unit,
+  categoryId,
+  statusId,
+  unitId,
   quantity,
   fetchedInventoryStatus,
   fetchedInventoryCategory,
@@ -60,10 +60,22 @@ export function EditInventoryItem({
 }: EditInventoryItemProps) {
   const [open, setOpen] = useState(false);
   const [itemName, setItemName] = useState(name);
-  const [itemCategory, setItemCategory] = useState(category);
+  const [itemCategory, setItemCategory] = useState(
+    fetchedInventoryCategory.find(
+      (categoryItem) => categoryItem.id.toString() === categoryId
+    )?.name
+  );
   const [itemQuantity, setItemQuantity] = useState(quantity);
-  const [itemUnit, setItemUnit] = useState(unit);
-  const [itemStatus, setItemStatus] = useState(status);
+  const [itemUnit, setItemUnit] = useState(
+    fetchedHarvestUnits.find(
+      (harvestItem) => harvestItem.id.toString() === unitId
+    )?.name
+  );
+  const [itemStatus, setItemStatus] = useState(
+    fetchedInventoryStatus.find(
+      (statusItem) => statusItem.id.toString() === statusId
+    )?.name
+  );
 
   // const queryClient = useQueryClient();
 

frontend/app/(sidebar)/inventory/page.tsx

@@ -99,19 +99,19 @@ export default function InventoryPage() {
         ...item,
         status:
           inventoryStatus.find(
-            (statusItem) => statusItem.id.toString() === item.status
+            (statusItem) => statusItem.id.toString() === item.statusId
           )?.name || "",
         category:
           inventoryCategory.find(
-            (categoryItem) => categoryItem.id.toString() === item.category
+            (categoryItem) =>
+              categoryItem.id.toString() === item.categoryId.toString()
           )?.name || "",
         unit:
-          harvestUnits.find((unit) => unit.id.toString() === item.unit)?.name ||
-          "",
+          harvestUnits.find((unit) => unit.id.toString() === item.unitId)
+            ?.name || "",
         fetchedInventoryStatus: inventoryStatus,
         fetchedInventoryCategory: inventoryCategory,
         fetchedHarvestUnits: harvestUnits,
-        id: String(item.id),
       }))
       .filter((item) =>
         item.name.toLowerCase().includes(searchTerm.toLowerCase())

frontend/types.ts

@@ -60,13 +60,13 @@ export interface User {
 }
 
 export type InventoryItem = {
-  id: number;
+  id: string;
   name: string;
-  category: string;
+  categoryId: string;
   quantity: number;
-  unit: string;
+  unitId: string;
   lastUpdated: string;
-  status: string;
+  statusId: string;
 };
 export type InventoryItemStatus = {
   id: number;