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

frontend/app/profil/tabs/DatabsTab.tsx

@@ -1,71 +1,77 @@
 'use client';
 
 import { useState } from 'react';
-import MergePreviewForm from '../../admin/products/MergePreviewForm';
-import AdminProductList from '../../admin/products/AdminProductList';
-import ExpandableCreateProductSection from '../../admin/products/ExpandableCreateProductSection';
-import ResetProductsButton from '../../admin/products/ResetProductsButton';
-import DeletedProductsView from '../../admin/products/DeletedProductsView';
+import { useSession } from 'next-auth/react';
+import ProductsView from './views/ProductsView';
+import InventoryView from './views/InventoryView';
+import PantryView from './views/PantryView';
 
-const subTabs = [
-  { id: 'varor', label: '📦 Varor' },
-  { id: 'skapa-merge', label: '➕ Skapa / Slå ihop' },
-  { id: 'papperskorg', label: '🗑️ Papperskorg' },
-] as const;
+type TableId = 'inventory' | 'pantry' | 'products';
 
-type SubTabId = typeof subTabs[number]['id'];
+type TableDef = {
+  id: TableId;
+  label: string;
+  adminOnly: boolean;
+};
+
+const TABLES: TableDef[] = [
+  { id: 'inventory', label: '🏠 Inventarie', adminOnly: false },
+  { id: 'pantry', label: '📦 Baslager', adminOnly: false },
+  { id: 'products', label: '🗄️ Produkter', adminOnly: true },
+];
 
 const tabStyle = (active: boolean): React.CSSProperties => ({
-  padding: '0.4rem 1rem',
+  padding: '0.5rem 1.1rem',
   border: 'none',
-  borderBottom: active ? '2.5px solid #333' : '2.5px solid transparent',
-  background: 'none',
+  borderBottom: active ? '2.5px solid #2563eb' : '2.5px solid transparent',
+  background: active ? '#eff6ff' : 'none',
   cursor: 'pointer',
   fontWeight: active ? 600 : 400,
-  color: active ? '#111' : '#666',
+  color: active ? '#2563eb' : '#555',
   fontSize: '0.95rem',
-  transition: 'color 0.15s, border-color 0.15s',
+  borderRadius: '4px 4px 0 0',
+  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
 });
 
 export default function DatabsTab() {
-  const [activeSubTab, setActiveSubTab] = useState<SubTabId>('varor');
+  const { data: session } = useSession();
+  const isAdmin = (session?.user as any)?.role === 'admin';
+
+  const visibleTables = TABLES.filter((t) => !t.adminOnly || isAdmin);
+
+  const [activeTable, setActiveTable] = useState<TableId>('inventory');
+
+  // Om vald tabell inte är tillgänglig för rollen, fall tillbaka på första
+  const safeActive = visibleTables.find((t) => t.id === activeTable)
+    ? activeTable
+    : visibleTables[0]?.id ?? 'inventory';
 
   return (
     <div>
-      {/* Undertabbar */}
-      <div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
-        {subTabs.map((tab) => (
+      {/* Tabellväljare */}
+      <div
+        style={{
+          display: 'flex',
+          gap: '0.25rem',
+          borderBottom: '1px solid #ddd',
+          marginBottom: '1.75rem',
+        }}
+      >
+        {visibleTables.map((table) => (
           <button
-            key={tab.id}
-            style={tabStyle(activeSubTab === tab.id)}
-            onClick={() => setActiveSubTab(tab.id)}
+            key={table.id}
+            style={tabStyle(safeActive === table.id)}
+            onClick={() => setActiveTable(table.id)}
           >
-            {tab.label}
+            {table.label}
           </button>
         ))}
       </div>
 
-      {activeSubTab === 'varor' && (
-        <div>
-          <p style={{ color: '#555', marginBottom: '1rem' }}>
-            Granska och standardisera produktnamn samt hantera kategorier.
-          </p>
-          <AdminProductList />
-        </div>
-      )}
-
-      {activeSubTab === 'skapa-merge' && (
-        <div>
-          <p style={{ color: '#555', marginBottom: '1rem' }}>
-            Skapa ny produkt, återställ produktdatabas eller slå ihop dubbletter.
-          </p>
-          <ExpandableCreateProductSection />
-          <ResetProductsButton />
-          <MergePreviewForm />
-        </div>
-      )}
-
-      {activeSubTab === 'papperskorg' && <DeletedProductsView />}
+      {safeActive === 'inventory' && <InventoryView />}
+      {safeActive === 'pantry' && <PantryView />}
+      {safeActive === 'products' && isAdmin && <ProductsView />}
     </div>
   );
 }
+

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>
+  );
+}

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

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import type { Product } from '../../../../features/inventory/types';
+import AddToPantryForm from '../../../baslager/AddToPantryForm';
+import PantryList from '../../../baslager/PantryList';
+
+type PantryItem = {
+  id: number;
+  productId: number;
+  createdAt: string;
+  updatedAt: string;
+  product: Product;
+};
+
+type InventoryItem = {
+  productId: number;
+  quantity: string;
+  unit: string;
+};
+
+export default function PantryView() {
+  const [pantryItems, setPantryItems] = useState<PantryItem[]>([]);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [inventoryByProductId, setInventoryByProductId] = useState<Record<number, InventoryItem[]>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [pantryRes, prodRes, invRes] = await Promise.all([
+        fetch('/api/pantry'),
+        fetch('/api/products'),
+        fetch('/api/inventory').catch(() => null),
+      ]);
+      if (!pantryRes.ok) throw new Error('Kunde inte hämta baslager');
+      if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
+      const [pantry, prods] = await Promise.all([pantryRes.json(), prodRes.json()]);
+      const inv: InventoryItem[] = invRes?.ok ? await invRes.json() : [];
+      setPantryItems(pantry);
+      setProducts(prods);
+      const byProd = inv.reduce<Record<number, InventoryItem[]>>((acc, item) => {
+        if (!acc[item.productId]) acc[item.productId] = [];
+        acc[item.productId].push(item);
+        return acc;
+      }, {});
+      setInventoryByProductId(byProd);
+    } 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 baslager…</p>;
+  if (error) return <p style={{ color: '#c00' }}>{error}</p>;
+
+  const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
+
+  return (
+    <div>
+      <p style={{ color: '#555', marginBottom: '1rem' }}>
+        Produkter du alltid räknar med att ha hemma. Lägg till och ta bort varor i ditt baslager.
+      </p>
+
+      <section style={{ marginBottom: '2rem' }}>
+        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>Lägg till produkt</h2>
+        <AddToPantryForm products={products} pantryProductIds={pantryProductIds} onCreated={load} />
+      </section>
+
+      <section>
+        <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
+          {pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
+        </h2>
+        <PantryList items={pantryItems} inventoryByProductId={inventoryByProductId} onDeleted={load} />
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+'use client';
+
+import { useState } from 'react';
+import MergePreviewForm from '../../../admin/products/MergePreviewForm';
+import AdminProductList from '../../../admin/products/AdminProductList';
+import ExpandableCreateProductSection from '../../../admin/products/ExpandableCreateProductSection';
+import ResetProductsButton from '../../../admin/products/ResetProductsButton';
+import DeletedProductsView from '../../../admin/products/DeletedProductsView';
+
+const subTabs = [
+  { id: 'varor', label: '📦 Varor' },
+  { id: 'skapa-merge', label: '➕ Skapa / Slå ihop' },
+  { id: 'papperskorg', label: '🗑️ Papperskorg' },
+] as const;
+
+type SubTabId = typeof subTabs[number]['id'];
+
+const tabStyle = (active: boolean): React.CSSProperties => ({
+  padding: '0.4rem 1rem',
+  border: 'none',
+  borderBottom: active ? '2.5px solid #333' : '2.5px solid transparent',
+  background: 'none',
+  cursor: 'pointer',
+  fontWeight: active ? 600 : 400,
+  color: active ? '#111' : '#666',
+  fontSize: '0.95rem',
+  transition: 'color 0.15s, border-color 0.15s',
+});
+
+export default function ProductsView() {
+  const [activeSubTab, setActiveSubTab] = useState<SubTabId>('varor');
+
+  return (
+    <div>
+      <div style={{ display: 'flex', gap: '0.25rem', borderBottom: '1px solid #ddd', marginBottom: '1.5rem' }}>
+        {subTabs.map((tab) => (
+          <button
+            key={tab.id}
+            style={tabStyle(activeSubTab === tab.id)}
+            onClick={() => setActiveSubTab(tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {activeSubTab === 'varor' && (
+        <div>
+          <p style={{ color: '#555', marginBottom: '1rem' }}>
+            Granska och standardisera produktnamn samt hantera kategorier.
+          </p>
+          <AdminProductList />
+        </div>
+      )}
+
+      {activeSubTab === 'skapa-merge' && (
+        <div>
+          <p style={{ color: '#555', marginBottom: '1rem' }}>
+            Skapa ny produkt, återställ produktdatabas eller slå ihop dubbletter.
+          </p>
+          <ExpandableCreateProductSection />
+          <ResetProductsButton />
+          <MergePreviewForm />
+        </div>
+      )}
+
+      {activeSubTab === 'papperskorg' && <DeletedProductsView />}
+    </div>
+  );
+}