From f7b3162855ffbd73119109ae8c652cdfe948cd17 Mon Sep 17 00:00:00 2001 From: THIS ONE IS A LITTLE BIT TRICKY KRUB Date: Tue, 1 Apr 2025 22:27:54 +0700 Subject: [PATCH] feat: refactor inventory item structure to use string IDs and update related components --- frontend/api/inventory.ts | 52 ++++++++----------- .../inventory/add-inventory-item.tsx | 19 ++++--- .../inventory/edit-inventory-item.tsx | 30 +++++++---- frontend/app/(sidebar)/inventory/page.tsx | 10 ++-- frontend/types.ts | 8 +-- 5 files changed, 63 insertions(+), 56 deletions(-) diff --git a/frontend/api/inventory.ts b/frontend/api/inventory.ts index 9d06b01..e1fb1d2 100644 --- a/frontend/api/inventory.ts +++ b/frontend/api/inventory.ts @@ -45,49 +45,49 @@ export async function fetchInventoryItems(): Promise { // 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); } } diff --git a/frontend/app/(sidebar)/inventory/add-inventory-item.tsx b/frontend/app/(sidebar)/inventory/add-inventory-item.tsx index 90054d7..067b441 100644 --- a/frontend/app/(sidebar)/inventory/add-inventory-item.tsx +++ b/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 ( diff --git a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx b/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx index a506334..6ee2603 100644 --- a/frontend/app/(sidebar)/inventory/edit-inventory-item.tsx +++ b/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(); diff --git a/frontend/app/(sidebar)/inventory/page.tsx b/frontend/app/(sidebar)/inventory/page.tsx index 96444ad..9765528 100644 --- a/frontend/app/(sidebar)/inventory/page.tsx +++ b/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()) diff --git a/frontend/types.ts b/frontend/types.ts index 387e232..ea753e7 100644 --- a/frontend/types.ts +++ b/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;