Refactor inventory forms to include unit and location options; update quantity input handling

frontend/app/admin/products/page.tsx

@@ -2,31 +2,13 @@ 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' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Admin: Produkter</h1>
-        <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/api/products/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export async function GET(request: NextRequest) {
+  const res = await fetch(`${API_BASE}/api/products`, {
+    method: 'GET',
+    cache: 'no-store',
+  });
+
+  const text = await res.text();
+
+  return new NextResponse(text, {
+    status: res.status,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

frontend/app/inventory/InventoryConsumeForm.tsx

@@ -38,10 +38,12 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
         onSubmit={(e) => {
           e.preventDefault();
           setError(null);
-
           const form = e.currentTarget;
           const formData = new FormData(form);
-
+          const raw = formData.get('amountUsed') as string;
+          const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
+          formData.set('amountUsed', String(quantity));
+          formData.set('unit', parsedUnit);
           startTransition(async () => {
             try {
               await consumeInventoryItem(formData);
@@ -67,9 +69,7 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
           <br />
           <input
             name="amountUsed"
-            type="number"
+            type="text"
-            step="0.01"
-            min="0.01"
             required
             style={{ width: '100%', padding: '0.5rem' }}
           />
@@ -110,3 +110,14 @@ export default function InventoryConsumeForm({ id, unit }: Props) {
     </div>
   );
 }
+
+function parseQuantityInput(input: string, defaultUnit: string) {
+  const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
+  if (!match) return { quantity: NaN, unit: defaultUnit };
+  let [, num, unit] = match;
+  num = num.replace(',', '.');
+  unit = unit || defaultUnit;
+  if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
+  if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
+  return { quantity: parseFloat(num), unit };
+}

frontend/app/inventory/InventoryEditForm.tsx

@@ -13,6 +13,38 @@ function toDateInputValue(value: string | null) {
   return value.slice(0, 10);
 }
 
+function parseQuantityInput(input: string, defaultUnit: string) {
+  const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
+  if (!match) return { quantity: NaN, unit: defaultUnit };
+  let [, num, unit] = match;
+  num = num.replace(',', '.');
+  unit = unit || defaultUnit;
+  if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
+  if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
+  return { quantity: parseFloat(num), unit };
+}
+
+const UNIT_OPTIONS = [
+  { value: '', label: 'Välj enhet' },
+  { value: 'g', label: 'g (gram)' },
+  { value: 'kg', label: 'kg (kilogram)' },
+  { value: 'hg', label: 'hg (hektogram)' },
+  { value: 'ml', label: 'ml (milliliter)' },
+  { value: 'dl', label: 'dl (deciliter)' },
+  { value: 'l', label: 'l (liter)' },
+  { value: 'st', label: 'st (styck)' },
+  { value: 'tsk', label: 'tsk (tesked)' },
+  { value: 'msk', label: 'msk (matsked)' },
+];
+
+const LOCATION_OPTIONS = [
+  { value: '', label: 'Välj plats' },
+  { value: 'Kyl', label: 'Kyl' },
+  { value: 'Frys', label: 'Frys' },
+  { value: 'Skafferi', label: 'Skafferi' },
+  { value: 'Annat', label: 'Annat' },
+];
+
 export default function InventoryEditForm({ item }: Props) {
   const [isEditing, setIsEditing] = useState(false);
   const [isPending, startTransition] = useTransition();
@@ -43,10 +75,13 @@ export default function InventoryEditForm({ item }: Props) {
         onSubmit={(e) => {
           e.preventDefault();
           setError(null);
-
           const form = e.currentTarget;
           const formData = new FormData(form);
-
+          const raw = formData.get('quantity') as string;
+          const unit = formData.get('unit') as string;
+          const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
+          formData.set('quantity', String(quantity));
+          formData.set('unit', parsedUnit);
           startTransition(async () => {
             try {
               await updateInventoryItem(formData);
@@ -79,9 +114,8 @@ export default function InventoryEditForm({ item }: Props) {
             <br />
             <input
               name="quantity"
-              type="number"
+              type="text"
-              step="0.01"
+              required
-              min="0"
               defaultValue={item.quantity}
               style={{ width: '100%', padding: '0.5rem' }}
             />
@@ -90,23 +124,33 @@ export default function InventoryEditForm({ item }: Props) {
           <label>
             Enhet
             <br />
-            <input
+            <select
               name="unit"
-              type="text"
               defaultValue={item.unit}
               style={{ width: '100%', padding: '0.5rem' }}
-            />
+            >
+              {UNIT_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
           </label>
 
           <label>
             Plats
             <br />
-            <input
+            <select
               name="location"
-              type="text"
               defaultValue={item.location || ''}
               style={{ width: '100%', padding: '0.5rem' }}
-            />
+            >
+              {LOCATION_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
           </label>
 
           <label>

frontend/app/inventory/InventoryForm.tsx

@@ -12,16 +12,51 @@ export default function InventoryForm({ products }: Props) {
   const [isPending, setIsPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const UNIT_OPTIONS = [
+    { value: '', label: 'Välj enhet' },
+    { value: 'g', label: 'g (gram)' },
+    { value: 'kg', label: 'kg (kilogram)' },
+    { value: 'hg', label: 'hg (hektogram)' },
+    { value: 'ml', label: 'ml (milliliter)' },
+    { value: 'dl', label: 'dl (deciliter)' },
+    { value: 'l', label: 'l (liter)' },
+    { value: 'st', label: 'st (styck)' },
+    { value: 'tsk', label: 'tsk (tesked)' },
+    { value: 'msk', label: 'msk (matsked)' },
+  ];
+
+  const LOCATION_OPTIONS = [
+    { value: '', label: 'Välj plats' },
+    { value: 'Kyl', label: 'Kyl' },
+    { value: 'Frys', label: 'Frys' },
+    { value: 'Skafferi', label: 'Skafferi' },
+    { value: 'Annat', label: 'Annat' },
+  ];
+
+  function parseQuantityInput(input: string, defaultUnit: string) {
+    const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
+    if (!match) return { quantity: NaN, unit: defaultUnit };
+    let [, num, unit] = match;
+    num = num.replace(',', '.');
+    unit = unit || defaultUnit;
+    if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
+    if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
+    return { quantity: parseFloat(num), unit };
+  }
+
   return (
     <form
       onSubmit={async (e) => {
         e.preventDefault();
         setError(null);
         setIsPending(true);
-
         const form = e.currentTarget;
         const formData = new FormData(form);
-
+        const raw = formData.get('quantity') as string;
+        const unit = formData.get('unit') as string;
+        const { quantity, unit: parsedUnit } = parseQuantityInput(raw, unit);
+        formData.set('quantity', String(quantity));
+        formData.set('unit', parsedUnit);
         try {
           await createInventoryItem(formData);
           form.reset();
@@ -60,9 +95,7 @@ export default function InventoryForm({ products }: Props) {
         <br />
         <input
           name="quantity"
-          type="number"
+          type="text"
-          step="0.01"
-          min="0"
           required
           style={{ width: '100%', padding: '0.5rem' }}
         />
@@ -71,24 +104,32 @@ export default function InventoryForm({ products }: Props) {
       <label>
         Enhet
         <br />
-        <input
+        <select
           name="unit"
-          type="text"
           required
-          placeholder="g, kg, st, dl..."
           style={{ width: '100%', padding: '0.5rem' }}
-        />
+        >
+          {UNIT_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
       </label>
 
       <label>
         Plats
         <br />
-        <select name="location" required style={{ width: '100%', padding: '0.5rem' }}>
+        <select
-          <option value="">Välj plats</option>
+          name="location"
-          <option value="Kyl">Kyl</option>
+          required
-          <option value="Frys">Frys</option>
+          style={{ width: '100%', padding: '0.5rem' }}
-          <option value="Skafferi">Skafferi</option>
+        >
-          <option value="Annat">Annat</option>
+          {LOCATION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
         </select>
       </label>
       

frontend/app/inventory/page.tsx

@@ -106,24 +106,7 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
 
   return (
     <main style={{ padding: '1.5rem', maxWidth: '1000px', margin: '0 auto' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Varor hemma</h1>
-        <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

@@ -3,24 +3,7 @@ import Link from 'next/link';
 export default function HomePage() {
   return (
     <main style={{ padding: '2rem', maxWidth: '700px', margin: '0 auto' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+      <h1 style={{ marginBottom: '1.5rem' }}>Recipe App</h1>
-        <h1 style={{ margin: 0 }}>Recipe App</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>
       <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

frontend/app/recipes/create/CreateRecipePage.tsx

@@ -11,7 +11,7 @@ export default function CreateRecipePage() {
     name: '',
     description: '',
     instructions: '',
-    ingredients: [{ productId: 0, quantity: '', unit: '', note: '' }],
+    ingredients: [{ productId: 0, quantity: '', unit: '', note: '', location: '' }],
   });
   const [products, setProducts] = useState<Product[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -32,7 +32,7 @@ export default function CreateRecipePage() {
   const addIngredient = () => {
     setRecipe({
       ...recipe,
-      ingredients: [...recipe.ingredients, { productId: 0, quantity: '', unit: '', note: '' }],
+      ingredients: [...recipe.ingredients, { productId: 0, quantity: '', unit: '', note: '', location: '' }],
     });
   };
 
@@ -75,6 +75,27 @@ export default function CreateRecipePage() {
     }
   };
 
+  const UNIT_OPTIONS = [
+    { value: '', label: 'Välj enhet' },
+    { value: 'g', label: 'g (gram)' },
+    { value: 'kg', label: 'kg (kilogram)' },
+    { value: 'hg', label: 'hg (hektogram)' },
+    { value: 'ml', label: 'ml (milliliter)' },
+    { value: 'dl', label: 'dl (deciliter)' },
+    { value: 'l', label: 'l (liter)' },
+    { value: 'st', label: 'st (styck)' },
+    { value: 'tsk', label: 'tsk (tesked)' },
+    { value: 'msk', label: 'msk (matsked)' },
+  ];
+
+  const LOCATION_OPTIONS = [
+    { value: '', label: 'Välj plats' },
+    { value: 'Kyl', label: 'Kyl' },
+    { value: 'Frys', label: 'Frys' },
+    { value: 'Skafferi', label: 'Skafferi' },
+    { value: 'Annat', label: 'Annat' },
+  ];
+
   return (
     <main style={{ padding: '1.5rem', maxWidth: '800px', margin: '0 auto' }}>
       <h1>Lägg till nytt recept</h1>
@@ -139,14 +160,18 @@ export default function CreateRecipePage() {
               style={{ padding: '0.5rem' }}
             />
 
-            <input
+            <select
-              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' }}
-            />
+            >
+              {UNIT_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
 
             <input
               type="text"

frontend/app/recipes/page.tsx

@@ -31,3 +31,14 @@ export default async function RecipesPage() {
     </main>
   );
 }
+
+function parseQuantityInput(input: string, defaultUnit: string) {
+  const match = input.trim().match(/^([\d.,]+)\s*([a-zA-Z]*)$/);
+  if (!match) return { quantity: NaN, unit: defaultUnit };
+  let [, num, unit] = match;
+  num = num.replace(',', '.');
+  unit = unit || defaultUnit;
+  if (defaultUnit === 'kg' && (unit === 'g' || unit === 'gram')) return { quantity: parseFloat(num) / 1000, unit: 'kg' };
+  if (defaultUnit === 'g' && (unit === 'kg' || unit === 'kilogram')) return { quantity: parseFloat(num) * 1000, unit: 'g' };
+  return { quantity: parseFloat(num), unit };
+}