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

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
-              type="text"
-              placeholder="Enhet (t.ex. g, st, dl)"
+            <select
               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"