From 39aa70a7177b27cce866a0440b9a427ec8c11e46 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Fri, 17 Jan 2025 12:20:24 -0600
Subject: [PATCH] Add item detail view and link from inventory list

Introduces a new `ItemDetail` component to display detailed information for an inventory item. Updates the `InventoryList` to include a link directing users to the detail view for each item. Also adds the necessary route for the `ItemDetail` component in the app configuration.
---
 barkmanui/src/App.tsx                         |  2 ++
 .../src/features/inventory/InventoryList.tsx  |  6 +++++-
 .../src/features/inventory/ItemDetail.tsx     | 20 +++++++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 barkmanui/src/features/inventory/ItemDetail.tsx

diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index 062b61c..2e871c0 100644
--- a/barkmanui/src/App.tsx
+++ b/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>
 
 
diff --git a/barkmanui/src/features/inventory/InventoryList.tsx b/barkmanui/src/features/inventory/InventoryList.tsx
index 3328e9c..8b796c0 100644
--- a/barkmanui/src/features/inventory/InventoryList.tsx
+++ b/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>
diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx
new file mode 100644
index 0000000..0e96200
--- /dev/null
+++ b/barkmanui/src/features/inventory/ItemDetail.tsx
@@ -0,0 +1,20 @@
+import {Text} from "@mantine/core";
+import {BarkHeader} from "../../common/components/BarkHeader.tsx";
+import {useParams} from "react-router";
+
+
+function ItemDetail() {
+    let params = useParams();
+
+    return (
+        <>
+            <BarkHeader></BarkHeader>
+            <Text c="red">Item Detail</Text>
+            <Text>ID: {params.itemId}</Text>
+
+
+        </>
+    )
+}
+
+export default ItemDetail
\ No newline at end of file