feat: enhance pantry management with new features and UI improvements

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

@@ -14,20 +14,62 @@ type PantryItem = {
   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 authFetch = useAuthFetch();
 
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [pantryRes, prodRes] = await Promise.all([
+        authFetch('/api/pantry'),
+        fetch('/api/products'),
+      ]);
+      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()]);
+      setPantryItems(pantry);
+      setProducts(prods);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Okänt fel');
+    } finally {
+      setLoading(false);
+    }
+  }, [authFetch]);
+
+  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} onDeleted={load} />
+      </section>
+    </div>
+  );
+}
+
+
   const load = useCallback(async () => {
     setLoading(true);
     setError(null);