feat: implement inventory and pantry management views with CRUD functionality and user-friendly interfaces

frontend/app/profil/tabs/views/InventoryView.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { InventoryItem, Product } from '../../../../features/inventory/types';
+import InventoryList from '../../../inventory/InventoryList';
+import InventoryForm from '../../../inventory/InventoryForm';
+
+export default function InventoryView() {
+  const [inventory, setInventory] = useState<InventoryItem[]>([]);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [invRes, prodRes] = await Promise.all([
+        fetch('/api/inventory'),
+        fetch('/api/products'),
+      ]);
+      if (!invRes.ok) throw new Error('Kunde inte hämta inventarie');
+      if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
+      const [inv, prods] = await Promise.all([invRes.json(), prodRes.json()]);
+      setInventory(inv);
+      setProducts(prods);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Okänt fel');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  if (loading) return <p style={{ color: '#888' }}>Laddar inventarie…</p>;
+  if (error) return <p style={{ color: '#c00' }}>{error}</p>;
+
+  return (
+    <div>
+      <p style={{ color: '#555', marginBottom: '1rem' }}>
+        Lägg till, redigera och ta bort varor i ditt inventarie.
+      </p>
+
+      {/* Formulär för att lägga till vara — viker ut sig vid klick */}
+      <InventoryForm products={products} onCreated={load} />
+
+      {/* Lista med redigera/ta bort per rad */}
+      <InventoryList inventory={inventory} onDeleted={load} />
+    </div>
+  );
+}