Merge pull request #22 from Pup-Ion-Dev/ui-improvments

UI improvments

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";
@@ -31,20 +31,19 @@ const barkTheme = createTheme({
 });
 
 function App() {
-  return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{ (
+    return <MantineProvider defaultColorScheme="auto" theme={barkTheme}>{(
         <QueryClientProvider client={queryClient}>
             <>
                 <BarkHeader></BarkHeader>
                 <Routes>
-            <Route index element={<Home />} />
+                    <Route index element={<Home/>}/>
-            <Route path="inventory" element={<InventoryList />} />
+                    <Route path="inventory" element={<InventoryList/>}/>
-            <Route path="itemDetail/:itemId" element={<ItemDetail />} />
+                    <Route path="itemDetail/:itemId" element={<ItemDetail/>}/>
-            <Route path="editItem/:itemId" element={<EditItem />} />
+                    <Route path="editItem/:itemId" element={<EditItem/>}/>
                 </Routes>
-
             </>
         </QueryClientProvider>
-  ) }</MantineProvider>;
+    )}</MantineProvider>;
 }
 
 export default App

barkmanui/src/common/components/BarkHeader.tsx

@@ -1,8 +1,9 @@
-import { Burger, Container, Group } from '@mantine/core';
+import {Burger, Container, Group, Image} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import classes from './BarkHeader.module.css';
 import {NavLink} from "react-router";
 
+
 const links = [
     { link: '/', label: 'Home' },
     { link: '/inventory', label: 'Inventory' },
@@ -20,8 +21,8 @@ export function BarkHeader() {
 
     return (
         <header className={classes.header}>
-            <Container size="md" className={classes.inner}>
+            <Container fluid className={classes.inner}>
-
+                <Image ml="lg" src="/barklogo.png" h={55} w={55}/>
                 <Group gap={5} visibleFrom="xs">
                     {items}
                 </Group>

barkmanui/src/features/inventory/EditItem.tsx

@@ -1,5 +1,5 @@
-import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
+import {Button, Group, TextInput, Text, Textarea, NumberInput, Container, Title, Flex} from '@mantine/core';
-import { useForm } from '@mantine/form';
+import {useForm} from '@mantine/form';
 import {useParams} from "react-router";
 import {useMutation, useQuery, useQueryClient} from "@tanstack/react-query";
 import {InventoryItem} from "./types.ts";
@@ -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: "",
@@ -22,11 +22,10 @@ function EditItem() {
             notes: "",
         },
 
-        validate: {
+        validate: {},
-        },
     });
 
-    const { isPending, error, data, isFetching } = useQuery({
+    const {isPending, error, data, isFetching} = useQuery({
         queryKey: ['inventory', params.itemId],
         queryFn: async (): Promise<InventoryItem> => {
             const response = await fetch(
@@ -68,8 +67,9 @@ function EditItem() {
     useEffect(() => {
         if (data) {
             // Even if query.data changes, form will be initialized only once
-            form.initialize(data);
+            editItemForm.initialize(data);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [data]);
 
     if (isPending) return 'Loading...'
@@ -77,27 +77,39 @@ 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 m="lg">
+                <Flex mih={50}
+                      gap="md"
+                      justify="flex-start"
+                      align="flex-start"
+                      direction="column"
+                      wrap="wrap">
+
                     <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"
+                    <TextInput withAsterisk key={editItemForm.key('brand')} size="md" label="Brand"
-                       placeholder="Brand" {...form.getInputProps('brand')}/>
+                               placeholder="Brand" {...editItemForm.getInputProps('brand')}/>
-            <TextInput withAsterisk key={form.key('name')} size="md" label="Name"
+                    <TextInput withAsterisk key={editItemForm.key('name')} size="md" label="Name"
-                       placeholder="Name" {...form.getInputProps('name')}/>
+                               placeholder="Name" {...editItemForm.getInputProps('name')}/>
-            <TextInput size="md" key={form.key('status')} label="Status"
+                    <TextInput size="md" key={editItemForm.key('status')} label="Status"
-                       placeholder="Status" {...form.getInputProps('status')}/>
+                               placeholder="Status" {...editItemForm.getInputProps('status')}/>
-            <TextInput size="md" key={form.key('serialNumber')} label="Serial Number"
+                    <TextInput size="md" key={editItemForm.key('serialNumber')} label="Serial Number"
-                       placeholder="Serial Number"{...form.getInputProps('serialNumber')}/>
+                               placeholder="Serial Number"{...editItemForm.getInputProps('serialNumber')}/>
-            <NumberInput size="md" key={form.key('rentalPrice')} label="Rental Price"
+                    <NumberInput size="md" key={editItemForm.key('rentalPrice')} label="Rental Price"
-                         placeholder="Rental Price" {...form.getInputProps('rentalPrice')}/>
+                                 placeholder="Rental Price" {...editItemForm.getInputProps('rentalPrice')}/>
-            <NumberInput size="md" key={form.key('replacementCost')} label="Replacement Cost"
+                    <NumberInput size="md" key={editItemForm.key('replacementCost')} label="Replacement Cost"
-                         placeholder="Replacement Cost" {...form.getInputProps('replacementCost')}/>
+                                 placeholder="Replacement Cost" {...editItemForm.getInputProps('replacementCost')}/>
-            <Textarea label="Notes" key={form.key('notes')} placeholder="Notes" {...form.getInputProps('notes')}/>
+                    <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>
     );
 }

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -1,14 +1,13 @@
-import {Text} from "@mantine/core";
+import {Container, Text, Title} from "@mantine/core";
 import {Link, useParams} from "react-router";
 import {InventoryItem} from "./types.ts";
 import {useQuery} from "@tanstack/react-query";
 
 
-
 function ItemDetail() {
-    let params = useParams();
+    const params = useParams();
 
-    const { isPending, error, data, isFetching } = useQuery({
+    const {isPending, error, data, isFetching} = useQuery({
         queryKey: ['inventory', params.itemId],
         queryFn: async (): Promise<InventoryItem> => {
             const response = await fetch(
@@ -19,15 +18,16 @@ function ItemDetail() {
 
             return await response.json()
         },
-});
+    });
 
-if (isPending) return 'Loading...'
+    if (isPending) return 'Loading...'
 
-if (error) return 'An error has occurred: ' + error.message
+    if (error) return 'An error has occurred: ' + error.message
 
     return (
         <>
-            <Text c="red">Item Detail</Text>
+            <Container m="lg">
+                <Title order={1}>Item Detail</Title>
                 <div>{isFetching ? 'Updating...' : ''}</div>
                 <Text>ID: {data.id}</Text>
                 <Text>Brand: {data.brand}</Text>
@@ -39,7 +39,7 @@ if (error) return 'An error has occurred: ' + error.message
                 <Text>Notes: {data.notes}</Text>
 
                 <Link to={`/editItem/${data.id}`}>Edit</Link>
-
+            </Container>
         </>
     )
 }

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 c="red">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>
         </>
     )
 }