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/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>
 
         </>

barkmanui/src/pages/inventory.tsx

@@ -1,58 +0,0 @@
-import {useQuery} from "@tanstack/react-query";
-import {Link} from "react-router";
-
-function Inventory() {
-
-    const { isPending, error, data, isFetching } = useQuery({
-        queryKey: ['inventory'],
-        queryFn: async () => {
-            const response = await fetch(
-                'https://barkdev.ts.drewr.io/inventory',
-            )
-            return await response.json()
-        },
-    })
-
-    if (isPending) return 'Loading...'
-
-    if (error) return 'An error has occurred: ' + error.message
-
-
-    return (
-        <>
-            <div>
-                <h1 className={"text-brand"}>Inventory</h1>
-            </div>
-            <p>
-                ARFF ARFF BARK BARK
-            </p>
-            <Link to="/">
-                <button className="bg-brand rounded text-white font-bold px-4 py-2">Home</button>
-            </Link>
-            <div>{isFetching ? 'Updating...' : ''}</div>
-
-            <table className="w-1/2">
-                <thead>
-                <tr className="text-left">
-                    <th className="text-brand">ID</th>
-                    <th className="text-brand">Brand</th>
-                    <th className="text-brand">Item</th>
-                    <th className="text-brand">Status</th>
-                </tr>
-                </thead>
-                <tbody>
-                {data.map((data) => (
-                    <tr key={data.id}>
-                        <td>{data.id}</td>
-                        <td>{data.brand}</td>
-                        <td>{data.name}</td>
-                        <td>{data.status}</td>
-                    </tr>
-                ))}
-                </tbody>
-            </table>
-        </>
-    )
-}
-
-export default Inventory