Add EditItem component and route for editing inventory items

barkmanui/src/App.tsx

@@ -5,6 +5,7 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import {createTheme, MantineProvider} from '@mantine/core';
 import '@mantine/core/styles.css';
 import ItemDetail from "./features/inventory/ItemDetail.tsx";
+import EditItem from "./features/inventory/EditItem.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -36,6 +37,7 @@ function App() {
             <Route index element={<Home />} />
             <Route path="inventory" element={<InventoryList />} />
             <Route path="itemDetail/:itemId" element={<ItemDetail />} />
+            <Route path="editItem/:itemId" element={<EditItem />} />
         </Routes>
 
 

barkmanui/src/features/inventory/EditItem.tsx

@@ -0,0 +1,56 @@
+import {NumberInput, Stack, Text, Textarea, TextInput} 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 EditItem() {
+    let params = useParams();
+
+    const { isPending, error, data, isFetching } = useQuery({
+        queryKey: ['inventory', params.itemId],
+        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>
+            <Stack
+                h={600}
+                bg="var(--mantine-color-body)"
+                align="center"
+                justify="center"
+                gap="md"
+            >
+                <Text c="red">Edit Item</Text>
+                <div>{isFetching ? 'Updating...' : ''}</div>
+                <Text>ID: {data.id}</Text>
+                <TextInput withAsterisk size="md" label="Brand" placeholder={data.brand}/>
+                <TextInput withAsterisk size="md" label="Name" placeholder={data.name}/>
+                <TextInput size="md" label="Status" placeholder={data.status}/>
+                <TextInput size="md" label="Serial Number" placeholder={data.serialNumber}/>
+                <NumberInput size="md" label="Rental Price" placeholder={data.rentalPrice.toString()}/>
+                <NumberInput size="md" label="Replacement Cost" placeholder={data.replacementCost.toString()}/>
+                <Text>Replacement Cost: ${data.replacementCost}</Text>
+                <Textarea label="Notes" placeholder={data.notes}/>
+            </Stack>
+
+        </>
+    )
+}
+
+export default EditItem

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -1,8 +1,9 @@
 import {Text} from "@mantine/core";
 import {BarkHeader} from "../../common/components/BarkHeader.tsx";
-import {useParams} from "react-router";
+import {Link, useParams} from "react-router";
 import {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
+import editItem from "./EditItem.tsx";
 
 
 
@@ -40,6 +41,7 @@ if (error) return 'An error has occurred: ' + error.message
             <Text>Replacement Cost: ${data.replacementCost}</Text>
             <Text>Notes: {data.notes}</Text>
 
+            <Link to={`/editItem/${data.id}`}>Edit</Link>
 
         </>
     )