basic item detail page

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -1,16 +1,42 @@
 import {Text} from "@mantine/core";
 import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 import {useParams} from "react-router";
+import {InventoryItem} from "./types.ts";
+import {useQuery} from "@tanstack/react-query";
+
 
 
 function ItemDetail() {
     let params = useParams();
 
+    const { isPending, error, data, isFetching } = useQuery({
+    queryKey: ['inventory'],
+        queryFn: async (): Promise<InventoryItem> => {
+        const response = await fetch(
+            import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
+        )
+
+        if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+
+        return await response.json()
+    },
+});
+
+if (isPending) return 'Loading...'
+
+if (error) return 'An error has occurred: ' + error.message
+
     return (
         <>
             <BarkHeader></BarkHeader>
             <Text c="red">Item Detail</Text>
-            <Text>ID: {params.itemId}</Text>
+            <div>{isFetching ? 'Updating...' : ''}</div>
+            <Text>ID: {data.id}</Text>
+            <Text>Brand: {data.brand}</Text>
+            <Text>Name: {data.name}</Text>
+            <Text>Status: {data.status}</Text>
+            <Text>Serial Number: {data.serialNumber}</Text>
+            <Text>Notes: {data.notes}</Text>
 
 
         </>

barkmanui/src/features/inventory/types.ts

@@ -3,4 +3,9 @@ export interface InventoryItem {
     brand: string,
     name: string,
     status: string,
+    serialNumber: string,
+    rentalPrice: number,
+    replacementCost: number,
+    notes: string,
+
 }