Add update functionality for recipes and create edit page

frontend/app/recipes/RecipePreview.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useTransition } from 'react';
+import Link from 'next/link';
 import type {
   Recipe,
   RecipeInventoryPreview,
@@ -115,7 +116,7 @@ export default function RecipePreview({ recipes }: Props) {
           </select>
         </label>
 
-        <div>
+        <div style={{ display: 'flex', gap: '0.75rem' }}>
           <button
             type="button"
             onClick={loadPreview}
@@ -124,6 +125,23 @@ export default function RecipePreview({ recipes }: Props) {
           >
             {isPending ? 'Hämtar preview...' : 'Visa preview'}
           </button>
+          {selectedRecipeId && (
+            <Link
+              href={`/recipes/${selectedRecipeId}/edit`}
+              style={{
+                padding: '0.6rem 1rem',
+                background: '#f0f0f0',
+                color: '#333',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                textDecoration: 'none',
+                cursor: 'pointer',
+                display: 'inline-block',
+              }}
+            >
+              Redigera recept
+            </Link>
+          )}
         </div>
 
         {error ? <p style={{ color: 'crimson', margin: 0 }}>{error}</p> : null}
@@ -154,6 +172,31 @@ export default function RecipePreview({ recipes }: Props) {
                   : 'Kan inte lagas exakt ännu'}
               </strong>
             </div>
+
+            {preview.summary.unitMismatchCount > 0 && (
+              <div
+                style={{
+                  padding: '0.75rem',
+                  background: '#fff4e5',
+                  border: '1px solid #f0cf9b',
+                  borderRadius: '4px',
+                  color: '#8a4b00',
+                  fontSize: '0.9rem',
+                  marginTop: '0.5rem',
+                }}
+              >
+                <strong>⚠️ Enhetskonflikt!</strong> {preview.summary.unitMismatchCount} ingrediens
+                {preview.summary.unitMismatchCount !== 1 ? 'er har' : ' har'} olika enheter än vad som finns i hemmavaror.
+                <br />
+                <span style={{ fontSize: '0.85rem', marginTop: '0.25rem', display: 'block' }}>
+                  T.ex. receptet säger "0.5 st" men du har lagrat "1.3 kg". Du kan antingen:
+                  <ul style={{ margin: '0.5rem 0 0 1rem', paddingLeft: '1rem' }}>
+                    <li>Redigera receptet för att matcha dina enheter</li>
+                    <li>Lagra ingrediensen med samma enhet som receptet använder</li>
+                  </ul>
+                </span>
+              </div>
+            )}
           </article>
 
           <div style={{ display: 'grid', gap: '0.75rem' }}>
@@ -215,6 +258,22 @@ export default function RecipePreview({ recipes }: Props) {
                         Saknas: {ingredient.missingQuantity} {ingredient.requiredUnit}
                       </div>
                     ) : null}
+
+                    {ingredient.status === 'unit_mismatch' ? (
+                      <div
+                        style={{
+                          padding: '0.5rem',
+                          background: '#fff4e5',
+                          border: '1px solid #f0cf9b',
+                          borderRadius: '4px',
+                          fontSize: '0.9rem',
+                          marginTop: '0.25rem',
+                        }}
+                      >
+                        <strong>Enhetsproblem:</strong> Receptet kräver {ingredient.requiredUnit} men hemmavaror lagras i andra enheter. 
+                        Uppdatera receptet eller lagra ingrediensen med rätt enhet.
+                      </div>
+                    ) : null}
                   </div>
 
                   {ingredient.matchingInventoryItems.length > 0 ? (