From 39aa70a7177b27cce866a0440b9a427ec8c11e46 Mon Sep 17 00:00:00 2001 From: Drew Rautenberg Date: Fri, 17 Jan 2025 12:20:24 -0600 Subject: [PATCH 1/5] 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() { } /> } /> + } /> 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() { Brand Item Status + Details @@ -62,6 +63,9 @@ function InventoryList() { {data.brand} {data.name} {data.status} + + Details + ))} 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 ( + <> + + Item Detail + ID: {params.itemId} + + + + ) +} + +export default ItemDetail \ No newline at end of file From ca713cfdb01895b6fd127ba68b0dec2f14c44ea0 Mon Sep 17 00:00:00 2001 From: Drew Rautenberg Date: Fri, 17 Jan 2025 16:52:29 -0600 Subject: [PATCH 2/5] basic item detail page --- .../src/features/inventory/ItemDetail.tsx | 28 ++++++++++++++++++- barkmanui/src/features/inventory/types.ts | 5 ++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx index 0e96200..f1a42b1 100644 --- a/barkmanui/src/features/inventory/ItemDetail.tsx +++ b/barkmanui/src/features/inventory/ItemDetail.tsx @@ -1,16 +1,42 @@ 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'], + queryFn: async (): Promise => { + 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 ( <> Item Detail - ID: {params.itemId} +
{isFetching ? 'Updating...' : ''}
+ ID: {data.id} + Brand: {data.brand} + Name: {data.name} + Status: {data.status} + Serial Number: {data.serialNumber} + Notes: {data.notes} diff --git a/barkmanui/src/features/inventory/types.ts b/barkmanui/src/features/inventory/types.ts index f7d7264..62b5908 100644 --- a/barkmanui/src/features/inventory/types.ts +++ b/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, + } From bd82d62a2ad53bcfd93b797ff7fc5cd8e804f718 Mon Sep 17 00:00:00 2001 From: Drew Rautenberg Date: Fri, 17 Jan 2025 18:48:20 -0600 Subject: [PATCH 3/5] fixed table render issue --- barkmanui/src/features/inventory/ItemDetail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx index f1a42b1..27c278b 100644 --- a/barkmanui/src/features/inventory/ItemDetail.tsx +++ b/barkmanui/src/features/inventory/ItemDetail.tsx @@ -10,7 +10,7 @@ function ItemDetail() { let params = useParams(); const { isPending, error, data, isFetching } = useQuery({ - queryKey: ['inventory'], + queryKey: ['inventory', params.itemId], queryFn: async (): Promise => { const response = await fetch( import.meta.env.VITE_API_URL + '/inventory/' + params.itemId, From a120dd58c3b63c0bdb7b52dd76f6ca6e781a67cc Mon Sep 17 00:00:00 2001 From: Drew Rautenberg Date: Sat, 18 Jan 2025 11:30:42 -0600 Subject: [PATCH 4/5] home page text --- barkmanui/src/pages/home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/barkmanui/src/pages/home.tsx b/barkmanui/src/pages/home.tsx index aa8a845..4550c01 100644 --- a/barkmanui/src/pages/home.tsx +++ b/barkmanui/src/pages/home.tsx @@ -9,7 +9,7 @@ function Home() { <> - ARFF ARFF BARK BARK + Bark productions: at the intersection of professionalism and degeneracy From 67d90b33787c3566c05e109333f31168d2ca7497 Mon Sep 17 00:00:00 2001 From: Drew Rautenberg Date: Sat, 18 Jan 2025 13:22:01 -0600 Subject: [PATCH 5/5] Add rental price and replacement cost to item details Extended the item details view to include rental price and replacement cost. This provides more comprehensive information for users managing inventory items. --- barkmanui/src/features/inventory/ItemDetail.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/barkmanui/src/features/inventory/ItemDetail.tsx b/barkmanui/src/features/inventory/ItemDetail.tsx index 27c278b..5ba4bdc 100644 --- a/barkmanui/src/features/inventory/ItemDetail.tsx +++ b/barkmanui/src/features/inventory/ItemDetail.tsx @@ -36,6 +36,8 @@ if (error) return 'An error has occurred: ' + error.message Name: {data.name} Status: {data.status} Serial Number: {data.serialNumber} + Rental Price: ${data.rentalPrice} + Replacement Cost: ${data.replacementCost} Notes: {data.notes}