Add CreateRecipePage component for recipe creation with ingredients. Updated UX

backend/src/recipes/dto/create-recipe.dto.ts

@@ -4,9 +4,27 @@ import {
   IsString,
   ValidateNested,
   ArrayMinSize,
+  IsInt,
+  IsNumber,
+  Min,
 } from 'class-validator';
 import { Type } from 'class-transformer';
-import { CreateRecipeIngredientDto } from './create-recipe-ingredient.dto';
+
+class CreateRecipeIngredientDto {
+  @IsInt()
+  productId!: number;
+
+  @IsNumber()
+  @Min(0.01)
+  quantity!: number;
+
+  @IsString()
+  unit!: string;
+
+  @IsOptional()
+  @IsString()
+  note?: string;
+}
 
 export class CreateRecipeDto {
   @IsString()

backend/src/recipes/recipes.controller.ts

@@ -1,6 +1,6 @@
 import { Body, Controller, Get, Param, ParseIntPipe, Post } from '@nestjs/common';
-import { CreateRecipeDto } from './dto/create-recipe.dto';
 import { RecipesService } from './recipes.service';
+import { CreateRecipeDto } from './dto/create-recipe.dto';
 
 @Controller('recipes')
 export class RecipesController {
@@ -22,7 +22,7 @@ export class RecipesController {
   }
 
   @Post()
-  create(@Body() body: CreateRecipeDto) {
+  async create(@Body() createRecipeDto: CreateRecipeDto) {
-    return this.recipesService.create(body);
+    return this.recipesService.create(createRecipeDto);
   }
 }

frontend/app/admin/products/page.tsx

@@ -2,13 +2,31 @@ import { fetchJson } from '../../../lib/api';
 import type { Product } from '../../../features/inventory/types';
 import CanonicalNameForm from './CanonicalNameForm';
 import MergePreviewForm from './MergePreviewForm';
+import Link from 'next/link';
 
 export default async function AdminProductsPage() {
   const products = await fetchJson<Product[]>('/api/products');
 
   return (
     <main style={{ padding: '1.5rem', maxWidth: '1100px', margin: '0 auto' }}>
-      <h1>Admin: Produkter</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Admin: Produkter</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
       <p>Här kan du granska och standardisera produktnamn.</p>
 
       <MergePreviewForm products={products} />

frontend/app/inventory/page.tsx

@@ -86,15 +86,8 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
 
   const inventoryPath = (() => {
     const params = new URLSearchParams();
-
+    if (location) params.set('location', location);
-    if (location) {
+    if (sort) params.set('sort', sort);
-      params.set('location', location);
-    }
-
-    if (sort) {
-      params.set('sort', sort);
-    }
-
     const query = params.toString();
     return query ? `/api/inventory?${query}` : '/api/inventory';
   })();
@@ -112,8 +105,25 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
   ];
 
   return (
-    <main style={{ padding: '1.5rem', maxWidth: '900px', margin: '0 auto' }}>
+    <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <h1>Hemmavaror</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Varor hemma</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
 
       <ProductForm />
       <InventoryForm products={products} />

frontend/app/page.tsx

@@ -2,12 +2,36 @@ import Link from 'next/link';
 
 export default function HomePage() {
   return (
-    <main style={{ padding: '2rem' }}>
+    <main style={{ padding: '2rem', maxWidth: '700px', margin: '0 auto' }}>
-      <h1>Recipe App</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-      <p>Det här är första riktiga grunden för projektet.</p>
+        <h1 style={{ margin: 0 }}>Recipe App</h1>
-      <p><Link href="/inventory">Gå till varor som finns hemma</Link></p>
+        <Link
-      <p><Link href="/admin/products">Gå till produktadmin</Link></p>
+          href="/recipes/create"
-      <p><Link href="/recipes">Gå till recept</Link></p>
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
+      <div style={{ display: 'grid', gap: '1rem' }}>
+        <Link href="/inventory" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till varor som finns hemma
+        </Link>
+        <Link href="/admin/products" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till produktadmin
+        </Link>
+        <Link href="/recipes" style={{ padding: '0.5rem', background: '#eee', borderRadius: '4px', textDecoration: 'none', color: '#222' }}>
+          Gå till recept
+        </Link>
+      </div>
     </main>
   );
 }

frontend/app/recipes/create/CreateRecipePage.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { fetchJson } from '../../../lib/api';
+
+export default function CreateRecipePage() {
+  const router = useRouter();
+  const [recipe, setRecipe] = useState({
+    name: '',
+    description: '',
+    instructions: '',
+    ingredients: [{ productId: 0, quantity: '', unit: '', note: '' }],
+  });
+  const [products, setProducts] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Hämta produkter vid sidladdning
+  useState(() => {
+    fetchJson('/api/products')
+      .then(setProducts)
+      .catch(console.error);
+  }, []);
+
+  const handleIngredientChange = (index: number, field: string, value: string | number) => {
+    const newIngredients = [...recipe.ingredients];
+    newIngredients[index] = { ...newIngredients[index], [field]: value };
+    setRecipe({ ...recipe, ingredients: newIngredients });
+  };
+
+  const addIngredient = () => {
+    setRecipe({
+      ...recipe,
+      ingredients: [...recipe.ingredients, { productId: 0, quantity: '', unit: '', note: '' }],
+    });
+  };
+
+  const removeIngredient = (index: number) => {
+    const newIngredients = [...recipe.ingredients];
+    newIngredients.splice(index, 1);
+    setRecipe({ ...recipe, ingredients: newIngredients });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+
+    // Konvertera quantity till number för varje ingrediens
+    const recipeToSend = {
+      ...recipe,
+      ingredients: recipe.ingredients.map((ing) => ({
+        ...ing,
+        quantity: Number(ing.quantity),
+      })),
+    };
+
+    try {
+      const response = await fetch('/api/recipes', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(recipeToSend),
+      });
+
+      if (!response.ok) {
+        throw new Error('Kunde inte spara receptet');
+      }
+
+      router.push('/recipes');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Lägg till nytt recept</h1>
+
+      {error && <p style={{ color: 'red' }}>{error}</p>}
+
+      <form onSubmit={handleSubmit} style={{ display: 'grid', gap: '1rem' }}>
+        <div style={{ display: 'grid', gap: '0.5rem' }}>
+          <label>
+            Receptnamn:
+            <input
+              type="text"
+              value={recipe.name}
+              onChange={(e) => setRecipe({ ...recipe, name: e.target.value })}
+              required
+              style={{ width: '100%', padding: '0.5rem' }}
+            />
+          </label>
+
+          <label>
+            Beskrivning:
+            <textarea
+              value={recipe.description}
+              onChange={(e) => setRecipe({ ...recipe, description: e.target.value })}
+              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+            />
+          </label>
+
+          <label>
+            Instruktioner:
+            <textarea
+              value={recipe.instructions}
+              onChange={(e) => setRecipe({ ...recipe, instructions: e.target.value })}
+              style={{ width: '100%', padding: '0.5rem', minHeight: '100px' }}
+            />
+          </label>
+        </div>
+
+        <h2>Ingredienser</h2>
+        {recipe.ingredients.map((ingredient, index) => (
+          <div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'center' }}>
+            <select
+              value={ingredient.productId}
+              onChange={(e) => handleIngredientChange(index, 'productId', Number(e.target.value))}
+              required
+              style={{ padding: '0.5rem' }}
+            >
+              <option value={0}>Välj produkt</option>
+              {products.map((product) => (
+                <option key={product.id} value={product.id}>
+                  {product.name}
+                </option>
+              ))}
+            </select>
+
+            <input
+              type="text"
+              placeholder="Mängd"
+              value={ingredient.quantity}
+              onChange={(e) => handleIngredientChange(index, 'quantity', e.target.value)}
+              required
+              style={{ padding: '0.5rem' }}
+            />
+
+            <input
+              type="text"
+              placeholder="Enhet (t.ex. g, st, dl)"
+              value={ingredient.unit}
+              onChange={(e) => handleIngredientChange(index, 'unit', e.target.value)}
+              required
+              style={{ padding: '0.5rem' }}
+            />
+
+            <input
+              type="text"
+              placeholder="Notering (valfritt)"
+              value={ingredient.note || ''}
+              onChange={(e) => handleIngredientChange(index, 'note', e.target.value)}
+              style={{ padding: '0.5rem' }}
+            />
+
+            <button type="button" onClick={() => removeIngredient(index)} style={{ padding: '0.5rem' }}>
+              Ta bort
+            </button>
+          </div>
+        ))}
+
+        {products.length === 0 && (
+          <div style={{ color: 'red' }}>
+            Kunde inte ladda produkter. Kontrollera API:et.
+          </div>
+        )}
+
+        <div style={{ display: 'flex', gap: '1rem' }}>
+          <button type="button" onClick={addIngredient} style={{ padding: '0.5rem' }}>
+            Lägg till ingrediens
+          </button>
+          <button type="submit" disabled={isLoading} style={{ padding: '0.5rem' }}>
+            {isLoading ? 'Sparar...' : 'Spara recept'}
+          </button>
+        </div>
+      </form>
+    </main>
+  );
+}

frontend/app/recipes/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { fetchJson } from '../../lib/api';
 import type { Recipe } from '../../features/inventory/types';
 import RecipePreview from './RecipePreview';
@@ -7,7 +8,24 @@ export default async function RecipesPage() {
 
   return (
     <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <h1>Recept</h1>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+        <h1 style={{ margin: 0 }}>Recept</h1>
+        <Link
+          href="/recipes/create"
+          style={{
+            padding: '0.5rem 1rem',
+            background: '#0070f3',
+            color: 'white',
+            borderRadius: '4px',
+            textDecoration: 'none',
+            fontWeight: 500,
+            fontSize: '1rem',
+            transition: 'background 0.2s',
+          }}
+        >
+          Lägg till nytt recept
+        </Link>
+      </div>
       <p>Här kan du jämföra recept mot nuvarande hemmavaror.</p>
       <RecipePreview recipes={recipes} />
     </main>