Merge pull request #17 from Pup-Ion-Dev/add-item-detail-page

Add item detail page

barkmanui/src/App.tsx

@@ -4,6 +4,7 @@ import InventoryList from "./features/inventory/InventoryList.tsx";
 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";
 
 // Create a client
 const queryClient = new QueryClient()
@@ -34,6 +35,7 @@ function App() {
         <Routes>
             <Route index element={<Home />} />
             <Route path="inventory" element={<InventoryList />} />
+            <Route path="itemDetail/:itemId" element={<ItemDetail />} />
         </Routes>
 
 

barkmanui/src/features/inventory/InventoryList.tsx

@@ -3,7 +3,7 @@ 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";
 
 function InventoryList() {
 
@@ -53,6 +53,7 @@ function InventoryList() {
                     <Table.Th c="red">Brand</Table.Th>
                     <Table.Th c="red">Item</Table.Th>
                     <Table.Th c="red">Status</Table.Th>
+                    <Table.Th c="red">Details</Table.Th>
                 </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
@@ -62,6 +63,9 @@ function InventoryList() {
                         <Table.Td>{data.brand}</Table.Td>
                         <Table.Td>{data.name}</Table.Td>
                         <Table.Td>{data.status}</Table.Td>
+                        <Table.Td>
+                            <Link to={`/itemDetail/${data.id}`}>Details</Link>
+                        </Table.Td>
                     </Table.Tr>
                 ))}
                 </Table.Tbody>

barkmanui/src/features/inventory/ItemDetail.tsx

@@ -0,0 +1,48 @@
+import {Text} from "@mantine/core";
+import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {useParams} from "react-router";
+import {InventoryItem} from "./types.ts";
+import {useQuery} from "@tanstack/react-query";
+
+
+
+function ItemDetail() {
+    let params = useParams();
+
+    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,
+        )
+
+        if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+
+        return await response.json()
+    },
+});
+
+if (isPending) return 'Loading...'
+
+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>
+            <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>
+
+
+        </>
+    )
+}
+
+export default ItemDetail

barkmanui/src/features/inventory/types.ts

@@ -3,4 +3,9 @@ export interface InventoryItem {
     brand: string,
     name: string,
     status: string,
+    serialNumber: string,
+    rentalPrice: number,
+    replacementCost: number,
+    notes: string,
+
 }

barkmanui/src/pages/home.tsx

@@ -9,7 +9,7 @@ function Home() {
         <>
             <BarkHeader></BarkHeader>
 
-            <Text c="red">ARFF ARFF BARK BARK</Text>
+            <Text c="red">Bark productions: at the intersection of professionalism and degeneracy</Text>
 
 
         </>