diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx index 0e96200..f1a42b1 100644 --- a/barkmanui/src/features/inventory/ItemDetail.tsx +++ b/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 => { + 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 ( <> Item Detail - ID: {params.itemId} +
{isFetching ? 'Updating...' : ''}
+ ID: {data.id} + Brand: {data.brand} + Name: {data.name} + Status: {data.status} + Serial Number: {data.serialNumber} + Notes: {data.notes} diff --git a/barkmanui/src/features/inventory/types.ts b/barkmanui/src/features/inventory/types.ts index f7d7264..62b5908 100644 --- a/barkmanui/src/features/inventory/types.ts +++ b/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, + }