From 22101fa212cf36a85d296d3afa809f297dc70b9e Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Wed, 22 Jan 2025 11:26:18 -0600
Subject: [PATCH] Add layout enhancements to ItemDetail and EditItem components

---
 barkmanui/src/features/inventory/EditItem.tsx | 57 +++++++++++--------
 .../src/features/inventory/ItemDetail.tsx     | 52 ++++++++---------
 2 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/barkmanui/src/features/inventory/EditItem.tsx b/barkmanui/src/features/inventory/EditItem.tsx
index e16309b..2b915a3 100644
--- a/barkmanui/src/features/inventory/EditItem.tsx
+++ b/barkmanui/src/features/inventory/EditItem.tsx
@@ -1,5 +1,5 @@
-import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
-import { useForm } from '@mantine/form';
+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";
@@ -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(
@@ -79,25 +78,37 @@ function EditItem() {
     return (
         <form onSubmit={form.onSubmit(async (values) => await
             updateItem.mutateAsync(values))}>
-            <div>{isFetching ? 'Updating...' : ''}</div>
-            <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')}/>
+            <Container fluid>
+                <Flex mih={50}
+                      gap="md"
+                      justify="flex-start"
+                      align="flex-start"
+                      direction="column"
+                      wrap="wrap">
 
-            <Group justify="flex-end" mt="md">
-                <Button type="submit">Submit</Button>
-            </Group>
+                    <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')}/>
+
+                    <Group justify="flex-end" mt="md">
+                        <Button type="submit">Submit</Button>
+                    </Group>
+                </Flex>
+            </Container>
         </form>
     );
 }
diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx
index 2f643d8..cf6df35 100644
--- a/barkmanui/src/features/inventory/ItemDetail.tsx
+++ b/barkmanui/src/features/inventory/ItemDetail.tsx
@@ -1,45 +1,45 @@
-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({
-    queryKey: ['inventory', params.itemId],
+    const {isPending, error, data, isFetching} = useQuery({
+        queryKey: ['inventory', params.itemId],
         queryFn: async (): Promise<InventoryItem> => {
-        const response = await fetch(
-            import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
-        )
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
+            )
 
-        if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
 
-        return await response.json()
-    },
-});
+            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>
-            <div>{isFetching ? 'Updating...' : ''}</div>
-            <Text>ID: {data.id}</Text>
-            <Text>Brand: {data.brand}</Text>
-            <Text>Name: {data.name}</Text>
-            <Text>Status: {data.status}</Text>
-            <Text>Serial Number: {data.serialNumber}</Text>
-            <Text>Rental Price: ${data.rentalPrice}</Text>
-            <Text>Replacement Cost: ${data.replacementCost}</Text>
-            <Text>Notes: {data.notes}</Text>
-
-            <Link to={`/editItem/${data.id}`}>Edit</Link>
+            <Container fluid>
+                <Title order={1}>Item Detail</Title>
+                <div>{isFetching ? 'Updating...' : ''}</div>
+                <Text>ID: {data.id}</Text>
+                <Text>Brand: {data.brand}</Text>
+                <Text>Name: {data.name}</Text>
+                <Text>Status: {data.status}</Text>
+                <Text>Serial Number: {data.serialNumber}</Text>
+                <Text>Rental Price: ${data.rentalPrice}</Text>
+                <Text>Replacement Cost: ${data.replacementCost}</Text>
+                <Text>Notes: {data.notes}</Text>
 
+                <Link to={`/editItem/${data.id}`}>Edit</Link>
+            </Container>
         </>
     )
 }