feat: enhance pantry management with new features and UI improvements

frontend/app/baslager/PantryList.tsx

@@ -7,21 +7,99 @@ type PantryItem = {
   product: { id: number; name: string; canonicalName: string | null; category: string | null };
 };
 
-type InventoryItem = {
-  productId: number;
-  quantity: string;
-  unit: string;
-};
-
 type Props = {
   items: PantryItem[];
-  inventoryByProductId: Record<number, InventoryItem[]>;
   onDeleted?: () => void;
 };
 
-export default function PantryList({ items, inventoryByProductId, onDeleted }: Props) {
+export default function PantryList({ items, onDeleted }: Props) {
   const router = useRouter();
 
+  async function handleRemove(id: number, name: string) {
+    if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
+    const res = await fetch(`/api/admin/pantry-item/${id}`, { method: 'DELETE' });
+    if (res.ok) {
+      if (onDeleted) onDeleted();
+      else router.refresh();
+    }
+  }
+
+  if (items.length === 0) {
+    return (
+      <p style={{ color: '#888', fontStyle: 'italic' }}>
+        Baslagret är tomt. Lägg till produkter ovan.
+      </p>
+    );
+  }
+
+  // Gruppera per kategori
+  const grouped = items.reduce<Record<string, PantryItem[]>>((acc, item) => {
+    const cat = item.product.category || 'Övrigt';
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(item);
+    return acc;
+  }, {});
+
+  const sortedCategories = Object.keys(grouped).sort((a, b) => {
+    if (a === 'Övrigt') return 1;
+    if (b === 'Övrigt') return -1;
+    return a.localeCompare(b, 'sv');
+  });
+
+  return (
+    <div style={{ display: 'grid', gap: '1.5rem' }}>
+      {sortedCategories.map((category) => (
+        <section key={category}>
+          <h3 style={{ margin: '0 0 0.5rem', fontSize: '1rem', color: '#555', fontWeight: 600 }}>
+            {category}
+          </h3>
+          <div style={{ display: 'grid', gap: '0.4rem' }}>
+            {grouped[category].map((item) => {
+              const displayName = item.product.canonicalName || item.product.name;
+              return (
+                <div
+                  key={item.id}
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    padding: '0.6rem 0.75rem',
+                    border: '1px solid #eee',
+                    borderRadius: '6px',
+                    background: '#fafafa',
+                  }}
+                >
+                  <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {displayName}
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => handleRemove(item.id, displayName)}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: '#c00',
+                      cursor: 'pointer',
+                      fontSize: '1.1rem',
+                      padding: '0.2rem 0.5rem',
+                      lineHeight: 1,
+                      flexShrink: 0,
+                    }}
+                    title="Ta bort från baslagret"
+                  >
+                    ×
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+
   async function handleRemove(id: number, name: string) {
     if (!confirm(`Ta bort "${name}" från baslagret?`)) return;
     const res = await fetch(`/api/admin/pantry-item/${id}`, { method: 'DELETE' });

frontend/app/baslager/page.tsx

@@ -1,5 +1,5 @@
 import { fetchJson } from '../../lib/api';
-import type { Product, InventoryItem } from '../../features/inventory/types';
+import type { Product } from '../../features/inventory/types';
 import Navigation from '../Navigation';
 import AddToPantryForm from './AddToPantryForm';
 import PantryList from './PantryList';
@@ -13,20 +13,13 @@ type PantryItem = {
 };
 
 export default async function BaslagerPage() {
-  const [pantryItems, products, inventoryItems] = await Promise.all([
+  const [pantryItems, products] = await Promise.all([
     fetchJson<PantryItem[]>('/api/pantry'),
     fetchJson<Product[]>('/api/products'),
-    fetchJson<InventoryItem[]>('/api/inventory').catch(() => [] as InventoryItem[]),
   ]);
 
   const pantryProductIds = new Set(pantryItems.map((i) => i.productId));
 
-  // Bygg upp en map productId → inventarieposter
-  const inventoryByProductId = inventoryItems.reduce<Record<number, InventoryItem[]>>((acc, item) => {
-    if (!acc[item.productId]) acc[item.productId] = [];
-    acc[item.productId].push(item);
-    return acc;
-  }, {});
 
   return (
     <main style={{ padding: '1rem', maxWidth: '700px', margin: '0 auto' }}>
@@ -45,7 +38,7 @@ export default async function BaslagerPage() {
         <h2 style={{ fontSize: '1.1rem', marginBottom: '0.75rem' }}>
           {pantryItems.length} {pantryItems.length === 1 ? 'produkt' : 'produkter'} i baslagret
         </h2>
-        <PantryList items={pantryItems} inventoryByProductId={inventoryByProductId} />
+        <PantryList items={pantryItems} />
       </section>
     </main>
   );