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/features/inventory/EditItem.tsx

@@ -1,13 +1,22 @@
-import {NumberInput, Stack, Text, Textarea, TextInput} from "@mantine/core";
-import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
+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>