From e7bdb5d6a1e5050693102b01ffad0b681ed703ee Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Tue, 1 Apr 2025 16:07:09 +0700
Subject: [PATCH] feat: add fetchInventoryStatus API and integrate into
 inventory page

---
 frontend/api/inventory.ts                 | 20 +++++++++++++++++++-
 frontend/app/(sidebar)/inventory/page.tsx | 21 ++++++++++++++++-----
 frontend/types.ts                         |  4 ++++
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/frontend/api/inventory.ts b/frontend/api/inventory.ts
index 12425e0..1c59e20 100644
--- a/frontend/api/inventory.ts
+++ b/frontend/api/inventory.ts
@@ -1,11 +1,29 @@
 import axiosInstance from "./config";
-import type { InventoryItem, CreateInventoryItemInput } from "@/types";
+import type {
+  InventoryItem,
+  CreateInventoryItemInput,
+  InventoryItemStatus,
+} from "@/types";
 
 /**
  * Simulates an API call to fetch inventory items.
  * Waits for a simulated delay and then attempts an axios GET request.
  * If the request fails, returns fallback dummy data.
+ * 
+ * 
  */
+export async function fetchInventoryStatus(): Promise<InventoryItemStatus[]> {
+  try {
+    const response = await axiosInstance.get<InventoryItemStatus[]>(
+      "/inventory/status"
+    );
+    return response.data;
+  } catch (error) {
+    console.error("Error fetching inventory status:", error);
+    return [];
+  }
+}
+
 export async function fetchInventoryItems(): Promise<InventoryItem[]> {
   try {
     const response = await axiosInstance.get<InventoryItem[]>("/api/inventory");
diff --git a/frontend/app/(sidebar)/inventory/page.tsx b/frontend/app/(sidebar)/inventory/page.tsx
index fdee0a0..6080f18 100644
--- a/frontend/app/(sidebar)/inventory/page.tsx
+++ b/frontend/app/(sidebar)/inventory/page.tsx
@@ -31,7 +31,7 @@ import { Search } from "lucide-react";
 import { FaSort, FaSortUp, FaSortDown } from "react-icons/fa";
 
 import { Badge } from "@/components/ui/badge";
-import { fetchInventoryItems } from "@/api/inventory";
+import { fetchInventoryItems, fetchInventoryStatus } from "@/api/inventory";
 import { AddInventoryItem } from "./add-inventory-item";
 import {
   EditInventoryItem,
@@ -48,14 +48,25 @@ export default function InventoryPage() {
 
   const {
     data: inventoryItems = [],
-    isLoading,
-    isError,
+    isLoading: isItemLoading,
+    isError: isItemError,
   } = useQuery({
     queryKey: ["inventoryItems"],
     queryFn: fetchInventoryItems,
     staleTime: 60 * 1000,
   });
+
+  const {
+    data: inventoryStatus = [],
+    isLoading: isLoadingStatus,
+    isError: isErrorStatus,
+  } = useQuery({
+    queryKey: ["inventoryStatus"],
+    queryFn: fetchInventoryStatus,
+    staleTime: 60 * 1000,
+  });
   // console.table(inventoryItems);
+  console.table(inventoryStatus);
   const [searchTerm, setSearchTerm] = useState("");
   const filteredItems = useMemo(() => {
     return inventoryItems
@@ -122,13 +133,13 @@ export default function InventoryPage() {
     onPaginationChange: setPagination,
   });
 
-  if (isLoading)
+  if (isItemLoading || isLoadingStatus)
     return (
       <div className="flex min-h-screen items-center justify-center">
         Loading...
       </div>
     );
-  if (isError)
+  if (isItemError || isErrorStatus)
     return (
       <div className="flex min-h-screen items-center justify-center">
         Error loading inventory data.
diff --git a/frontend/types.ts b/frontend/types.ts
index e9f34a0..55ff59e 100644
--- a/frontend/types.ts
+++ b/frontend/types.ts
@@ -69,6 +69,10 @@ export type InventoryItem = {
   lastUpdated: string;
   status: string;
 };
+export type InventoryItemStatus = {
+  id: number;
+  name: string;
+};
 
 export type CreateInventoryItemInput = Omit<InventoryItem, "id" | "lastUpdated" | "status">;