Move BarkHeader component to App layout

Consolidated BarkHeader usage by removing it from individual pages and including it in the main App layout. This improves consistency and reduces redundancy across components.

barkmanui/src/App.tsx

@@ -6,6 +6,7 @@ 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";
+import {BarkHeader} from "./common/components/BarkHeader.tsx";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -33,6 +34,7 @@ function App() {
   return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
       <QueryClientProvider client={queryClient}>
     <>
+        <BarkHeader></BarkHeader>
         <Routes>
             <Route index element={<Home />} />
             <Route path="inventory" element={<InventoryList />} />
@@ -40,7 +42,6 @@ function App() {
             <Route path="editItem/:itemId" element={<EditItem />} />
         </Routes>
 
-
     </>
       </QueryClientProvider>
   ) }</MantineProvider>;

barkmanui/src/features/inventory/EditItem.tsx

@@ -1,13 +1,22 @@
-import {NumberInput, Stack, Text, Textarea, TextInput} from "@mantine/core";
+import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import { useForm } from '@mantine/form';
 import {useParams} from "react-router";
-import {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
-
+import {InventoryItem} from "./types.ts";
-
 
 function EditItem() {
-    let params = useParams();
+    const params = useParams();
+
+    const form = useForm({
+        mode: 'uncontrolled',
+        initialValues: {
+            email: '',
+            termsOfService: false,
+        },
+
+        validate: {
+        },
+    });
 
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory', params.itemId],
@@ -26,31 +35,24 @@ function EditItem() {
 
     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>
 
-        </>
+    return (
-    )
+        <form onSubmit={form.onSubmit((values) => console.log(values))}>
+            <div>{isFetching ? 'Updating...' : ''}</div>
+            <Text>ID: {data.id}</Text>
+            <TextInput withAsterisk size="md" label="Brand" placeholder="Brand"/>
+            <TextInput withAsterisk size="md" label="Name" placeholder="Name"/>
+            <TextInput size="md" label="Status" placeholder="Status"/>
+            <TextInput size="md" label="Serial Number" placeholder="Serial Number"/>
+            <NumberInput size="md" label="Rental Price" placeholder="Rental Price"/>
+            <NumberInput size="md" label="Replacement Cost" placeholder="Replacement Cost"/>
+            <Textarea label="Notes" placeholder="Notes"/>
+
+            <Group justify="flex-end" mt="md">
+                <Button type="submit">Submit</Button>
+            </Group>
+        </form>
+    );
 }
 
-export default EditItem
+export default EditItem;

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,6 +1,5 @@
 import {useQuery} from "@tanstack/react-query";
 import {InventoryItem} from "./types";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
 import {Link} from "react-router";
@@ -27,8 +26,6 @@ function InventoryList() {
 
     return (
         <>
-            <BarkHeader></BarkHeader>
-
             <Flex
                 mih={50}
                 gap="xl"

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -1,9 +1,7 @@
 import {Text} from "@mantine/core";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
 import {Link, useParams} from "react-router";
 import {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
-import editItem from "./EditItem.tsx";
 
 
 
@@ -29,7 +27,6 @@ if (error) return 'An error has occurred: ' + error.message
 
     return (
         <>
-            <BarkHeader></BarkHeader>
             <Text c="red">Item Detail</Text>
             <div>{isFetching ? 'Updating...' : ''}</div>
             <Text>ID: {data.id}</Text>

barkmanui/src/pages/home.tsx

@@ -1,4 +1,3 @@
-import {BarkHeader} from "../common/components/BarkHeader.tsx";
 import {Text} from "@mantine/core";
 
 
@@ -7,11 +6,7 @@ function Home() {
 
     return (
         <>
-            <BarkHeader></BarkHeader>
-
             <Text c="red">Bark productions: at the intersection of professionalism and degeneracy</Text>
-
-
         </>
     )
 }