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

frontend/app/inventory/InventoryList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import type { InventoryItem } from '../../features/inventory/types';
 import InventoryEditForm from './InventoryEditForm';
 import InventoryConsumeForm from './InventoryConsumeForm';
@@ -27,10 +28,12 @@ function getBestBeforeStatus(bestBeforeDate: string | null) {
 
 type Props = {
   inventory: InventoryItem[];
+  onDeleted?: () => void;
 };
 
-export default function InventoryList({ inventory }: Props) {
+export default function InventoryList({ inventory, onDeleted }: Props) {
   const [search, setSearch] = useState('');
+  const router = useRouter();
 
   // Unika produktnamn för autocomplete
   const autocompleteNames = Array.from(
@@ -165,9 +168,31 @@ export default function InventoryList({ inventory }: Props) {
                     justifyContent: 'flex-start',
                   }}
                 >
-                  <InventoryEditForm item={item} />
+                  <InventoryEditForm item={item} onUpdated={onDeleted ?? (() => router.refresh())} />
                   <InventoryConsumeForm id={item.id} unit={item.unit} />
                   <InventoryConsumptionHistory id={item.id} />
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      if (!confirm(`Ta bort "${item.product.canonicalName || item.product.name}" från inventariet?`)) return;
+                      const res = await fetch(`/api/admin/inventory-item/${item.id}`, { method: 'DELETE' });
+                      if (res.ok) {
+                        if (onDeleted) onDeleted();
+                        else router.refresh();
+                      }
+                    }}
+                    style={{
+                      padding: '0.5rem 0.75rem',
+                      background: '#fff0f0',
+                      border: '1px solid #f5b8b8',
+                      borderRadius: '6px',
+                      color: '#c00',
+                      cursor: 'pointer',
+                      fontWeight: 500,
+                    }}
+                  >
+                    Ta bort
+                  </button>
                 </div>
               </article>
             );