wut

barkmanui/src/App.tsx

@@ -7,6 +7,7 @@ import '@mantine/core/styles.css';
 import ItemDetail from "./features/inventory/ItemDetail.tsx";
 import EditItem from "./features/inventory/EditItem.tsx";
 import {BarkHeader} from "./common/components/BarkHeader.tsx";
+import AddItem from "./features/inventory/AddItem.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -40,6 +41,7 @@ function App() {
                     <Route path="inventory" element={<InventoryList/>}/>
                     <Route path="itemDetail/:itemId" element={<ItemDetail/>}/>
                     <Route path="editItem/:itemId" element={<EditItem/>}/>
+                    <Route path="addItem" element={<AddItem/>}/>
                 </Routes>
             </>
         </QueryClientProvider>

barkmanui/src/features/inventory/AddItem.tsx

@@ -0,0 +1,90 @@
+import {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core';
+import {useForm} from '@mantine/form';
+import {useParams} from "react-router";
+import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
+import {InventoryItem} from "./types.ts";
+import {useEffect} from "react";
+
+type EditableInventoryItem = Omit<InventoryItem, 'id'>;
+
+function EditItem() {
+    const params = useParams();
+
+    const editItemForm = useForm<EditableInventoryItem>({
+        mode: 'uncontrolled',
+        initialValues: {
+            name: "",
+            brand: "",
+            statusId: "",
+            status: {name: "", id: ""},
+            serialNumber: "",
+            rentalPrice: 0,
+            replacementCost: 0,
+            notes: "",
+        },
+
+        validate: {},
+    });
+
+
+
+
+    const updateItem = useMutation({
+        mutationFn: async (values: EditableInventoryItem) => {
+
+            const result = await fetch(import.meta.env.VITE_API_URL + '/inventory' , {
+                method: 'POST',
+                body: JSON.stringify(values),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+
+            if (!result.ok) {
+                throw new Error('Failed to update inventory item');
+            }
+
+        }
+    })
+
+
+    return (
+        <>
+        <form onSubmit={editItemForm.onSubmit(async (values) => await
+            updateItem.mutateAsync(values))}>
+            <Container m="lg">
+                <Flex mih={50}
+                      gap="md"
+                      justify="flex-start"
+                      align="flex-start"
+                      direction="column"
+                      wrap="wrap">
+
+                    <Title order={1}>Add Item</Title>
+
+                    <TextInput withAsterisk key={editItemForm.key('brand')} size="md" label="Brand"
+                               placeholder="Brand" {...editItemForm.getInputProps('brand')}/>
+                    <TextInput withAsterisk key={editItemForm.key('name')} size="md" label="Name"
+                               placeholder="Name" {...editItemForm.getInputProps('name')}/>
+                    <TextInput size="md" key={editItemForm.key('statusId')} label="Status"
+                               placeholder="Status" {...editItemForm.getInputProps('statusId')}/>
+                    <TextInput size="md" key={editItemForm.key('serialNumber')} label="Serial Number"
+                               placeholder="Serial Number"{...editItemForm.getInputProps('serialNumber')}/>
+                    <NumberInput size="md" key={editItemForm.key('rentalPrice')} label="Rental Price"
+                                 placeholder="Rental Price" {...editItemForm.getInputProps('rentalPrice')}/>
+                    <NumberInput size="md" key={editItemForm.key('replacementCost')} label="Replacement Cost"
+                                 placeholder="Replacement Cost" {...editItemForm.getInputProps('replacementCost')}/>
+                    <Textarea label="Notes" key={editItemForm.key('notes')}
+                              placeholder="Notes" {...editItemForm.getInputProps('notes')}/>
+
+                    <Group justify="flex-end" mt="md">
+                        <Button type="submit">Submit</Button>
+                    </Group>
+                </Flex>
+            </Container>
+        </form>
+            </>
+    );
+}
+
+export default EditItem;

barkmanui/src/features/inventory/InventoryList.tsx

@@ -2,7 +2,7 @@ import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types";
 import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
-import {Link} from "react-router";
+import {Link, NavLink} from "react-router";
 
 function InventoryList() {
 
@@ -37,7 +37,7 @@ function InventoryList() {
                 <p>
                     ARFF ARFF BARK BARK
                 </p>
-                <BarkButton>Add Item</BarkButton>
+                <NavLink to={'/addItem'}><BarkButton>Add Item</BarkButton></NavLink>
             </Flex>