Refactor inventory functionality and improve modularity.

Relocated inventory page to features directory and renamed it for clarity. Introduced a reusable `Button` component and replaced inline buttons across components. Added type definitions for inventory items and environment variable support for API URL configuration.

barkmanui/.env

@@ -0,0 +1 @@
+VITE_API_URL=https://barkdev.ts.drewr.io

barkmanui/src/App.tsx

@@ -1,6 +1,6 @@
 import { Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
-import Inventory from "./pages/inventory.tsx";
+import InventoryList from "./features/inventory/InventoryList.tsx";
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 // Create a client
@@ -12,7 +12,7 @@ function App() {
     <>
         <Routes>
             <Route index element={<Home />} />
-            <Route path="inventory" element={<Inventory />} />
+            <Route path="inventory" element={<InventoryList />} />
         </Routes>
 
 

barkmanui/src/common/components/Button.tsx

@@ -0,0 +1,9 @@
+import {PropsWithChildren} from "react";
+
+function Button({children}: PropsWithChildren) {
+   return (
+    <button className="bg-brand rounded text-white font-bold px-4 py-2">{children}</button>
+   )
+}
+
+export default Button

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,17 +1,23 @@
 import {useQuery} from "@tanstack/react-query";
 import {Link} from "react-router";
+import {InventoryItem} from "./types";
+import Button from "../../common/components/Button.tsx";
 
-function Inventory() {
+
+function InventoryList() {
 
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory'],
-        queryFn: async () => {
+        queryFn: async (): Promise<InventoryItem[]> => {
             const response = await fetch(
-                'https://barkdev.ts.drewr.io/inventory',
+                import.meta.env.VITE_API_URL + '/inventory',
             )
+
+            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+
             return await response.json()
         },
-    })
+    });
 
     if (isPending) return 'Loading...'
 
@@ -27,7 +33,7 @@ function Inventory() {
                 ARFF ARFF BARK BARK
             </p>
             <Link to="/">
-                <button className="bg-brand rounded text-white font-bold px-4 py-2">Home</button>
+                <Button>Home</Button>
             </Link>
             <div>{isFetching ? 'Updating...' : ''}</div>
 
@@ -54,5 +60,4 @@ function Inventory() {
         </>
     )
 }
-
-export default Inventory
+export default InventoryList;

barkmanui/src/features/inventory/types.ts

@@ -0,0 +1,6 @@
+export interface InventoryItem {
+    id: number,
+    brand: string,
+    name: string,
+    status: string,
+}

barkmanui/src/pages/home.tsx

@@ -1,4 +1,5 @@
 import {Link} from "react-router";
+import Button from "../common/components/Button.tsx";
 
 
 function Home() {
@@ -13,7 +14,7 @@ function Home() {
                 ARFF ARFF BARK BARK
             </p>
             <Link to="/inventory">
-                <button className="bg-brand rounded text-white font-bold px-4 py-2">Inventory</button>
+                <Button>Inventory</Button>
             </Link>
 
         </>