feat: enhance PantryList and BaslagerPage to support inventory display and improve recipe grid layout

NEXT_STEPS.md

@@ -19,7 +19,13 @@ Kategorier skrivs in fritt i admin i dag. Det vore bättre med en dropdownlista
 ### 4. Bild på recept
 `imageUrl`-kolumnen finns i databasen (migrerad). Backend och frontend saknar stöd för att visa eller ladda upp receptbilder. 
 
-### 5. Matplanering
+### 5. Filtrering och sortering av receptlistan
+Receptlistan visas i dag utan möjlighet att filtrera eller sortera. Lägg till stöd för att filtrera på kategori/tagg och sortera på t.ex. namn eller senast tillagd. Kan implementeras i frontend (klientside) eller som query-parametrar till backend.
+
+### 6. Layout och presentation av receptlistan
+Receptlistan (`app/recipes/RecipeGrid.tsx`) är en enkel lista. Förbättra presentationen med t.ex. ett kortrutnät med bild, kortnamn och eventuellt tillagningstid — liknande ett receptkort i stil med en matblogg.
+
+### 7. Matplanering
 Lägg till en enkel veckomenylista: välj ett recept per dag, se en samlad ingredienslista och jämför mot inventariet. Kräver en ny `MealPlan`-modell i Prisma.
 
 ---

compose.yml

@@ -55,6 +55,7 @@ services:
 
   recipe-db:
     image: mariadb:11
+    container_name: recipe-db
     restart: unless-stopped
     environment:
       MARIADB_ROOT_PASSWORD: ${MARIADB_ROOT_PASSWORD}

frontend/app/baslager/PantryList.tsx

@@ -8,11 +8,18 @@ type PantryItem = {
   product: { id: number; name: string; canonicalName: string | null; category: string | null };
 };
 
-type Props = {
+type InventoryItem = {
-  items: PantryItem[];
+  productId: number;
+  quantity: string;
+  unit: string;
 };
 
-export default function PantryList({ items }: Props) {
+type Props = {
+  items: PantryItem[];
+  inventoryByProductId: Record<number, InventoryItem[]>;
+};
+
+export default function PantryList({ items, inventoryByProductId }: Props) {
   const [isPending, startTransition] = useTransition();
 
   function handleRemove(id: number, name: string) {
@@ -54,6 +61,19 @@ export default function PantryList({ items }: Props) {
           <div style={{ display: 'grid', gap: '0.4rem' }}>
             {grouped[category].map((item) => {
               const displayName = item.product.canonicalName || item.product.name;
+              const invItems = inventoryByProductId[item.product.id] || [];
+              const hasInventory = invItems.length > 0;
+
+              // Summera per enhet för visning
+              const unitSummary = invItems.reduce<Record<string, number>>((acc, inv) => {
+                const u = inv.unit || '?';
+                acc[u] = (acc[u] || 0) + parseFloat(inv.quantity || '0');
+                return acc;
+              }, {});
+              const inventoryText = Object.entries(unitSummary)
+                .map(([u, q]) => `${q % 1 === 0 ? q : q.toFixed(1)} ${u}`)
+                .join(', ');
+
               return (
                 <div
                   key={item.id}
@@ -67,7 +87,37 @@ export default function PantryList({ items }: Props) {
                     background: '#fafafa',
                   }}
                 >
-                  <span>{displayName}</span>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', minWidth: 0 }}>
+                    <span style={{ minWidth: '1.1rem', textAlign: 'center', fontSize: '1rem' }}>
+                      {hasInventory ? '✓' : '○'}
+                    </span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{displayName}</span>
+                    {hasInventory ? (
+                      <span style={{
+                        fontSize: '0.78rem',
+                        color: '#1f5f2c',
+                        background: '#ecf8ee',
+                        border: '1px solid #b9e0bf',
+                        borderRadius: '4px',
+                        padding: '0.1rem 0.45rem',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        {inventoryText}
+                      </span>
+                    ) : (
+                      <span style={{
+                        fontSize: '0.78rem',
+                        color: '#888',
+                        background: '#f5f5f5',
+                        border: '1px solid #ddd',
+                        borderRadius: '4px',
+                        padding: '0.1rem 0.45rem',
+                        whiteSpace: 'nowrap',
+                      }}>
+                        Saknas i inventariet
+                      </span>
+                    )}
+                  </div>
                   <button
                     type="button"
                     onClick={() => handleRemove(item.id, displayName)}
@@ -80,6 +130,7 @@ export default function PantryList({ items }: Props) {
                       fontSize: '1.1rem',
                       padding: '0.2rem 0.5rem',
                       lineHeight: 1,
+                      flexShrink: 0,
                     }}
                     title="Ta bort från baslagret"
                   >

frontend/app/baslager/page.tsx

@@ -1,5 +1,5 @@
 import { fetchJson } from '../../lib/api';
-import type { Product } from '../../features/inventory/types';
+import type { Product, InventoryItem } from '../../features/inventory/types';
 import Navigation from '../Navigation';
 import AddToPantryForm from './AddToPantryForm';
 import PantryList from './PantryList';
@@ -13,13 +13,21 @@ type PantryItem = {
 };
 
 export default async function BaslagerPage() {
-  const [pantryItems, products] = await Promise.all([
+  const [pantryItems, products, inventoryItems] = 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' }}>
       <Navigation />
@@ -37,7 +45,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} />
+        <PantryList items={pantryItems} inventoryByProductId={inventoryByProductId} />
       </section>
     </main>
   );

frontend/app/recipes/RecipeGrid.tsx

@@ -103,7 +103,7 @@ export default function RecipeGrid({ recipes }: { recipes: Recipe[] }) {
               ) : (
                 <RecipePlaceholder name={recipe.name} />
               )}
-              <div style={{ padding: '0.75rem 1rem' }}>
+              <div style={{ padding: '0.75rem 1rem 0.85rem' }}>
                 <h3
                   style={{
                     margin: 0,
@@ -119,7 +119,7 @@ export default function RecipeGrid({ recipes }: { recipes: Recipe[] }) {
                 {recipe.description && (
                   <p
                     style={{
-                      margin: '0.25rem 0 0',
+                      margin: '0.25rem 0 0.5rem',
                       fontSize: '0.85rem',
                       color: '#868e96',
                       overflow: 'hidden',
@@ -131,6 +131,12 @@ export default function RecipeGrid({ recipes }: { recipes: Recipe[] }) {
                     {recipe.description}
                   </p>
                 )}
+                <div style={{ display: 'flex', gap: '0.75rem', marginTop: recipe.description ? 0 : '0.4rem', fontSize: '0.78rem', color: '#adb5bd' }}>
+                  {recipe.ingredients?.length > 0 && (
+                    <span>{recipe.ingredients.length} ingredienser</span>
+                  )}
+                  <span>{new Date(recipe.createdAt).toLocaleDateString('sv-SE')}</span>
+                </div>
               </div>
             </div>
           </Link>

frontend/app/recipes/write/WriteRecipePage.tsx

@@ -33,7 +33,7 @@ type ParseResult = {
   ingredients: ParsedIngredientRow[];
 };
 
-type Step = 'input' | 'review' | 'saving';
+type Step = 'input' | 'review' | 'saving' | 'saved';
 
 export default function WriteRecipePage() {
   const router = useRouter();
@@ -201,7 +201,9 @@ export default function WriteRecipePage() {
         throw new Error(errorMessage);
       }
 
-      router.push('/recipes');
+      setStep('saved');
+      router.refresh();
+      setTimeout(() => router.push('/recipes'), 2000);
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Något gick fel vid sparning.';
       setError(message);
@@ -589,6 +591,26 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
           </div>
         </section>
       )}
+
+      {/* SPARAT */}
+      {step === 'saved' && (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '3rem',
+          gap: '1rem',
+          background: '#f0fdf4',
+          border: '1px solid #86efac',
+          borderRadius: '8px',
+          textAlign: 'center',
+        }}>
+          <div style={{ fontSize: '3rem' }}>✓</div>
+          <h2 style={{ margin: 0, color: '#166534' }}>Receptet sparades!</h2>
+          <p style={{ margin: 0, color: '#15803d' }}>Du skickas strax till receptlistan...</p>
+        </div>
+      )}
     </main>
   );
 }