feat: update inventory API and types to improve item creation and validation

frontend/api/inventory.ts

@@ -3,6 +3,7 @@ import type {
   InventoryItem,
   InventoryItemStatus,
   InventoryItemCategory,
+  CreateInventoryItemInput,
 } from "@/types";
 
 /**
@@ -39,9 +40,11 @@ export async function fetchInventoryCategory(): Promise<
 
 export async function fetchInventoryItems(): Promise<InventoryItem[]> {
   try {
-    const response = await axiosInstance.get<InventoryItem[]>("/api/inventory");
+    const response = await axiosInstance.get<InventoryItem[]>("/inventory");
     return response.data;
   } catch (error) {
+    // console.error("Error while fetching inventory items! " + error);
+    // throw error;
     // Fallback dummy data
     return [
       {
@@ -100,13 +103,11 @@ export async function fetchInventoryItems(): Promise<InventoryItem[]> {
  * Note: The function accepts all fields except id, lastUpdated, and status.
  */
 export async function createInventoryItem(
-  item: Omit<InventoryItem, "id" | "lastUpdated" | "status">
+  item: Omit<CreateInventoryItemInput, "id" | "lastUpdated" | "status">
 ): Promise<InventoryItem> {
-  // Simulate network delay
-  await new Promise((resolve) => setTimeout(resolve, 500));
   try {
     const response = await axiosInstance.post<InventoryItem>(
-      "/api/inventory",
+      "/inventory",
       item
     );
     return response.data;

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

@@ -60,23 +60,13 @@ export function AddInventoryItem({
   const [itemUnit, setItemUnit] = useState("");
   const [itemStatus, setItemStatus] = useState("");
 
-  // 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.
+      // invalidate queries to refresh inventory data.
       const queryClient = useQueryClient();
       queryClient.invalidateQueries({ queryKey: ["inventoryItems"] });
-      // Reset form fields and close dialog.
+      // reset form fields and close dialog.
       setItemName("");
       setItemCategory("");
       setItemQuantity(0);
@@ -86,9 +76,27 @@ export function AddInventoryItem({
     },
   });
 
+  const inputStates = [itemName, itemCategory, itemUnit, itemStatus, date];
+  const isInputValid = inputStates.every((input) => input);
+
   const handleSave = () => {
-    // Basic validation (you can extend this as needed)
+    if (!isInputValid) {
-    if (!itemName || !itemCategory || !itemUnit) return;
+      console.error("All fields are required");
+      return;
+    }
+
+    const newItem: CreateInventoryItemInput = {
+      name: itemName,
+      categoryId:
+        inventoryCategory.find((item) => item.name === itemCategory)?.id || 0,
+      quantity: itemQuantity,
+      unitId: harvestUnits.find((item) => item.name === itemUnit)?.id || 0,
+      statusId:
+        inventoryStatus.find((item) => item.name === itemStatus)?.id || 0,
+      lastUpdated: date ? date.toISOString() : new Date().toISOString(),
+    };
+    console.table(newItem);
+    mutation.mutate(newItem);
   };
 
   return (
@@ -163,7 +171,7 @@ export function AddInventoryItem({
               id="quantity"
               type="number"
               className="col-span-3"
-              value={itemQuantity}
+              value={itemQuantity === 0 ? "" : itemQuantity}
               onChange={(e) => setItemQuantity(Number(e.target.value))}
             />
           </div>

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

@@ -22,11 +22,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { TriangleAlertIcon } from "lucide-react";
 import {
   Pagination,
   PaginationContent,
   PaginationItem,
 } from "@/components/ui/pagination";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Search } from "lucide-react";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 import { fetchHarvestUnits } from "@/api/harvest";
@@ -92,6 +94,8 @@ export default function InventoryPage() {
   //////////////////////////////
   // console.table(inventoryItems);
   // console.table(inventoryStatus);
+  // console.table(harvestUnits);
+
   const [searchTerm, setSearchTerm] = useState("");
   const filteredItems = useMemo(() => {
     return inventoryItems
@@ -195,6 +199,22 @@ export default function InventoryPage() {
   const isLoading = loadingStates.some((loading) => loading);
   const isError = errorStates.some((error) => error);
 
+  if (inventoryItems.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[50vh]">
+        <Alert variant="destructive" className="w-full max-w-md text-center">
+          <div className="flex flex-col items-center">
+            <TriangleAlertIcon className="h-6 w-6 text-red-500 mb-2" />
+            <AlertTitle>No Inventory Data</AlertTitle>
+            <AlertDescription>
+              You currently have no inventory items. Add a new item to get
+              started!
+            </AlertDescription>
+          </div>
+        </Alert>
+      </div>
+    );
+  }
   if (isLoading)
     return (
       <div className="flex min-h-screen items-center justify-center">

frontend/types.ts

@@ -82,10 +82,14 @@ export type HarvestUnits = {
   name: string;
 };
 
-export type CreateInventoryItemInput = Omit<
+export type CreateInventoryItemInput = {
-  InventoryItem,
+  name: string;
-  "id" | "lastUpdated" | "status"
+  categoryId: number;
->;
+  quantity: number;
+  unitId: number;
+  lastUpdated: string;
+  statusId: number;
+};
 
 export interface Blog {
   id: number;