From 8e9ab3d1132635ec07eac643a0c9572d78302cf6 Mon Sep 17 00:00:00 2001
From: Nils-Johan Gynther <nils-johan.gynther@neoleaf.se>
Date: Fri, 10 Apr 2026 19:20:51 +0200
Subject: [PATCH] Add recipe instructions display and missing ingredients alert
 in RecipePreview component

---
 frontend/app/recipes/RecipePreview.tsx | 48 ++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/frontend/app/recipes/RecipePreview.tsx b/frontend/app/recipes/RecipePreview.tsx
index fa8a3849..d8a1b234 100644
--- a/frontend/app/recipes/RecipePreview.tsx
+++ b/frontend/app/recipes/RecipePreview.tsx
@@ -217,6 +217,54 @@ export default function RecipePreview({ recipes }: Props) {
         </div>
       </div>
 
+      {(() => {
+        const selected = recipes.find((r) => String(r.id) === selectedRecipeId);
+        if (!selected?.instructions) return null;
+        return (
+          <article
+            style={{
+              border: '1px solid #ddd',
+              borderRadius: '8px',
+              padding: '1rem',
+              display: 'grid',
+              gap: '0.5rem',
+            }}
+          >
+            <h3 style={{ margin: 0 }}>Instruktioner – {selected.name}</h3>
+            <p style={{ margin: 0, whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
+              {selected.instructions}
+            </p>
+          </article>
+        );
+      })()}
+
+      {preview && preview.summary.missingCount > 0 && (
+        <article
+          style={{
+            border: '1px solid #f1b5b5',
+            borderRadius: '8px',
+            padding: '1rem',
+            display: 'grid',
+            gap: '0.5rem',
+            background: '#ffeaea',
+          }}
+        >
+          <h3 style={{ margin: 0, color: '#8b0000' }}>
+            Saknade ingredienser ({preview.summary.missingCount})
+          </h3>
+          <ul style={{ margin: 0, paddingLeft: '1.25rem', display: 'grid', gap: '0.25rem' }}>
+            {preview.ingredients
+              .filter((ing) => ing.status === 'missing')
+              .map((ing) => (
+                <li key={ing.ingredientId}>
+                  <strong>{ing.productName}</strong> — saknas{' '}
+                  {ing.missingQuantity} {ing.requiredUnit}
+                </li>
+              ))}
+          </ul>
+        </article>
+      )}
+
       {preview ? (
         <section style={{ display: 'grid', gap: '1rem' }}>
           <article