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

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"
-          step="0.01"
-          min="0"
+          type="text"
           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' }}>
-          <option value="">Välj plats</option>
-          <option value="Kyl">Kyl</option>
-          <option value="Frys">Frys</option>
-          <option value="Skafferi">Skafferi</option>
-          <option value="Annat">Annat</option>
+        <select
+          name="location"
+          required
+          style={{ width: '100%', padding: '0.5rem' }}
+        >
+          {LOCATION_OPTIONS.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
         </select>
       </label>