From 1daa3d23c090ba2c0dbc8f8502af8a2518c13aa7 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Thu, 23 Jan 2025 11:12:43 -0600
Subject: [PATCH] cleaned up ui and code

---
 barkmanui/src/App.tsx                         | 61 +++++++++----------
 .../src/common/components/BarkHeader.tsx      |  4 +-
 barkmanui/src/features/inventory/EditItem.tsx | 36 +++++------
 .../src/features/inventory/ItemDetail.tsx     |  2 +-
 barkmanui/src/pages/home.tsx                  |  6 +-
 5 files changed, 55 insertions(+), 54 deletions(-)

diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index 9633399..e3753f9 100644
--- a/barkmanui/src/App.tsx
+++ b/barkmanui/src/App.tsx
@@ -1,7 +1,7 @@
-import { Routes, Route} from 'react-router';
+import {Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
 import InventoryList from "./features/inventory/InventoryList.tsx";
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+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";
@@ -12,39 +12,38 @@ import {BarkHeader} from "./common/components/BarkHeader.tsx";
 const queryClient = new QueryClient()
 
 const barkTheme = createTheme({
-  primaryColor: 'red',
-  colors: {
-    'red': [
-      "#ffe8e8",
-      "#ffcfd0",
-      "#fd9d9d",
-      "#fb6868",
-      "#fa3c3b",
-      "#f9211e",
-      "#fa120f",
-      "#df0404",
-      "#c70002",
-      "#ae0000"
-    ],
-  },
+    primaryColor: 'red',
+    colors: {
+        'red': [
+            "#ffe8e8",
+            "#ffcfd0",
+            "#fd9d9d",
+            "#fb6868",
+            "#fa3c3b",
+            "#f9211e",
+            "#fa120f",
+            "#df0404",
+            "#c70002",
+            "#ae0000"
+        ],
+    },
 
 });
 
 function App() {
-  return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
-      <QueryClientProvider client={queryClient}>
-    <>
-        <BarkHeader></BarkHeader>
-        <Routes>
-            <Route index element={<Home />} />
-            <Route path="inventory" element={<InventoryList />} />
-            <Route path="itemDetail/:itemId" element={<ItemDetail />} />
-            <Route path="editItem/:itemId" element={<EditItem />} />
-        </Routes>
-
-    </>
-      </QueryClientProvider>
-  ) }</MantineProvider>;
+    return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{(
+        <QueryClientProvider client={queryClient}>
+            <>
+                <BarkHeader></BarkHeader>
+                <Routes>
+                    <Route index element={<Home/>}/>
+                    <Route path="inventory" element={<InventoryList/>}/>
+                    <Route path="itemDetail/:itemId" element={<ItemDetail/>}/>
+                    <Route path="editItem/:itemId" element={<EditItem/>}/>
+                </Routes>
+            </>
+        </QueryClientProvider>
+    )}</MantineProvider>;
 }
 
 export default App
diff --git a/barkmanui/src/common/components/BarkHeader.tsx b/barkmanui/src/common/components/BarkHeader.tsx
index a07d76a..0e1f4b5 100644
--- a/barkmanui/src/common/components/BarkHeader.tsx
+++ b/barkmanui/src/common/components/BarkHeader.tsx
@@ -21,8 +21,8 @@ export function BarkHeader() {
 
     return (
         <header className={classes.header}>
-            <Container size="md" className={classes.inner}>
-                <Image src="public/barklogo.png" h={55} w={55}/>
+            <Container fluid className={classes.inner}>
+                <Image ml="lg" src="/barklogo.png" h={55} w={55}/>
                 <Group gap={5} visibleFrom="xs">
                     {items}
                 </Group>
diff --git a/barkmanui/src/features/inventory/EditItem.tsx b/barkmanui/src/features/inventory/EditItem.tsx
index 2b915a3..6bf33b3 100644
--- a/barkmanui/src/features/inventory/EditItem.tsx
+++ b/barkmanui/src/features/inventory/EditItem.tsx
@@ -10,7 +10,7 @@ type EditableInventoryItem = Omit<InventoryItem, 'id'>;
 function EditItem() {
     const params = useParams();
 
-    const form = useForm<EditableInventoryItem>({
+    const editItemForm = useForm<EditableInventoryItem>({
         mode: 'uncontrolled',
         initialValues: {
             name: "",
@@ -67,7 +67,7 @@ function EditItem() {
     useEffect(() => {
         if (data) {
             // Even if query.data changes, form will be initialized only once
-            form.initialize(data);
+            editItemForm.initialize(data);
         }
     }, [data]);
 
@@ -76,9 +76,9 @@ function EditItem() {
     if (error) return 'An error has occurred: ' + error.message
 
     return (
-        <form onSubmit={form.onSubmit(async (values) => await
+        <form onSubmit={editItemForm.onSubmit(async (values) => await
             updateItem.mutateAsync(values))}>
-            <Container fluid>
+            <Container m="lg">
                 <Flex mih={50}
                       gap="md"
                       justify="flex-start"
@@ -89,20 +89,20 @@ function EditItem() {
                     <div>{isFetching ? 'Updating...' : ''}</div>
                     <Title order={1}>Edit Item</Title>
                     <Text>ID: {data.id}</Text>
-                    <TextInput withAsterisk key={form.key('brand')} size="md" label="Brand"
-                               placeholder="Brand" {...form.getInputProps('brand')}/>
-                    <TextInput withAsterisk key={form.key('name')} size="md" label="Name"
-                               placeholder="Name" {...form.getInputProps('name')}/>
-                    <TextInput size="md" key={form.key('status')} label="Status"
-                               placeholder="Status" {...form.getInputProps('status')}/>
-                    <TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
-                               placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
-                    <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
-                                 placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
-                    <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
-                                 placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
-                    <Textarea label="Notes" key={form.key('notes')}
-                              placeholder="Notes" {...form.getInputProps('notes')}/>
+                    <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('status')} label="Status"
+                               placeholder="Status" {...editItemForm.getInputProps('status')}/>
+                    <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>
diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx
index cf6df35..81c7e00 100644
--- a/barkmanui/src/features/inventory/ItemDetail.tsx
+++ b/barkmanui/src/features/inventory/ItemDetail.tsx
@@ -26,7 +26,7 @@ function ItemDetail() {
 
     return (
         <>
-            <Container fluid>
+            <Container m="lg">
                 <Title order={1}>Item Detail</Title>
                 <div>{isFetching ? 'Updating...' : ''}</div>
                 <Text>ID: {data.id}</Text>
diff --git a/barkmanui/src/pages/home.tsx b/barkmanui/src/pages/home.tsx
index 7540286..bcecbe1 100644
--- a/barkmanui/src/pages/home.tsx
+++ b/barkmanui/src/pages/home.tsx
@@ -1,4 +1,4 @@
-import {Text} from "@mantine/core";
+import {Container, Text} from "@mantine/core";
 
 
 function Home() {
@@ -6,7 +6,9 @@ function Home() {
 
     return (
         <>
-            <Text>Bark productions: at the intersection of professionalism and degeneracy</Text>
+            <Container m="lg">
+                <Text>Bark productions: at the intersection of professionalism and degeneracy</Text>
+            </Container>
         </>
     )
 }