feat: Add optional note field to ingredient parsing and update related components

backend/src/quick-import/parsers/base.parser.ts

@@ -9,6 +9,7 @@ export interface ParsedRecipe {
     quantity: number;
     unit: string;
     name: string;
+    note?: string;
   }>;
   instructions?: string;
 }
@@ -29,61 +30,119 @@ export abstract class RecipeParser {
    * Hanterar format som:
    * - "3 ägg"
    * - "150 g lax"
+   * - "1/2 citron"
    * - "1 msk senap"
    * - "salt och peppar"
+   * - "1 förp handskalade räkor i lake (à 570 g)"
    */
   protected parseIngredientLine(line: string): {
     quantity: number;
     unit: string;
     name: string;
+    note?: string;
   } | null {
-    const cleaned = line.replace(/<[^>]+>/g, '').trim();
+    let cleaned = line.replace(/<[^>]+>/g, '').trim();
     if (!cleaned) return null;
 
     // Kända enheter
     const knownUnits = [
-      'g', 'kg', 'hg', 'ml', 'dl', 'l',
+      'g', 'kg', 'hg', 'mg', 'ml', 'dl', 'l', 'tl',
       'st', 'tsk', 'msk', 'krm', 'matsked', 'tesked',
       'pris', 'portion', 'burk', 'förp', 'paket',
     ];
 
-    // Försök extrahera: [quantity] [unit?] [productName]
+    // Extrahera parentetisk info
-    // Regex: början med valfri mängd, sedan valfritt ord (potentiell enhet), sedan resten
+    let parentheticalText = '';
-    const match = cleaned.match(/^([\d.,]+)?\s*([a-zåäö]*)\s*(.*)$/i);
+    const parentheteMatch = cleaned.match(/\s*\(([^)]*)\)/);
+    if (parentheteMatch) {
+      parentheticalText = parentheteMatch[1].trim();
+      cleaned = cleaned.replace(/\s*\([^)]*\)/, '').trim();
+    }
 
-    if (!match) {
+    // Hantera bråkdelar: "1/2" eller "1 / 2"
+    const fractionMatch = cleaned.match(/^([\d.]+)\s*\/\s*([\d.]+)/);
+    let quantity = 0;
+    let remainingText = cleaned;
+
+    if (fractionMatch) {
+      const numerator = parseFloat(fractionMatch[1]);
+      const denominator = parseFloat(fractionMatch[2]);
+      quantity = numerator / denominator;
+      remainingText = cleaned.substring(fractionMatch[0].length).trim();
+    } else {
+      const numberMatch = remainingText.match(/^([\d.,]+)/);
+      if (numberMatch) {
+        quantity = parseFloat(numberMatch[1].replace(',', '.'));
+        remainingText = remainingText.substring(numberMatch[0].length).trim();
+      }
+    }
+
+    // Extrahera potentiell enhet
+    let potentialUnit = '';
+    let productName = remainingText;
+
+    if (remainingText) {
+      const unitMatch = remainingText.match(/^([a-zåäö]+)\b/i);
+      if (unitMatch) {
+        const candidateUnit = unitMatch[1].toLowerCase();
+        if (knownUnits.includes(candidateUnit)) {
+          potentialUnit = candidateUnit;
+          productName = remainingText.substring(candidateUnit.length).trim();
+        }
+      }
+    }
+
+    // Analysera parenthetical text för måttenhet
+    let parenthHasUnit = false;
+    if (parentheticalText) {
+      for (const unit of knownUnits) {
+        if (parentheticalText.toLowerCase().includes(unit)) {
+          parenthHasUnit = true;
+          break;
+        }
+      }
+    }
+
+    let note: string | undefined = undefined;
+
+    // Om vi hade quantity i huvuddelen och parenthetical innehåller unit
+    // → spara parenthetical som note
+    if (quantity > 0 && parenthHasUnit) {
+      note = parentheticalText;
+    }
+
+    // Om ingen mängd i huvuddelen men parenthetical hade både mängd och unit
+    // → parse parenthetical som quantity + unit
+    if (quantity === 0 && parentheticalText) {
+      const parenthMatch = parentheticalText.match(/^[\D]*?([\d.,]+)?\s*([a-zåäö]*)?\s*(.*)$/i);
+      if (parenthMatch) {
+        let pQuantity = parenthMatch[1] ? parseFloat(parenthMatch[1].replace(',', '.')) : 0;
+        let pUnit = parenthMatch[2]?.toLowerCase() || '';
+        let pRest = parenthMatch[3]?.trim() || '';
+
+        if (knownUnits.includes(pUnit) && pQuantity > 0) {
+          quantity = pQuantity;
+          potentialUnit = pUnit;
+          note = parentheticalText;
+        }
+      }
+    }
+
+    // Om ingen mängd och enhet, bara returna produktnamnet
+    if (quantity === 0) {
       return {
         quantity: 0,
-        unit: 'st',
+        unit: '',
         name: cleaned,
+        note: parentheticalText || undefined,
       };
     }
 
-    let quantity = match[1] ? parseFloat(match[1].replace(',', '.')) : 0;
-    let potentialUnit = match[2]?.toLowerCase().trim() || '';
-    let productName = match[3]?.trim() || '';
-
-    // Om potentialUnit är inte en känd enhet, lägg det tillbaka i produktnamnet
-    if (potentialUnit && !knownUnits.includes(potentialUnit)) {
-      productName = potentialUnit + (productName ? ' ' + productName : '');
-      potentialUnit = '';
-    }
-
-    // Om inget produktnamn men vi hade potentialUnit, denna är faktiskt produktnamnet
-    if (!productName && potentialUnit) {
-      productName = potentialUnit;
-      potentialUnit = '';
-    }
-
-    // Fallback: om vi har mängd men inget annat, vara produktnamn
-    if (quantity > 0 && !potentialUnit && !productName) {
-      return null; // Ogiltigt
-    }
-
     return {
       quantity,
-      unit: potentialUnit || 'st',
+      unit: potentialUnit,
       name: productName,
+      note: note,
     };
   }
 }

backend/src/quick-import/parsers/generic.parser.ts

@@ -43,7 +43,7 @@ export class GenericRecipeParser extends RecipeParser {
   private extractFromJsonLd(recipe: any): ParsedRecipe {
     const name = recipe.name || '';
 
-    const ingredients: Array<{ quantity: number; unit: string; name: string }> = [];
+    const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
       for (const ing of recipe.recipeIngredient) {
         const parsed = this.parseIngredientLine(ing);
@@ -91,7 +91,7 @@ export class GenericRecipeParser extends RecipeParser {
     }
 
     // Försöka extrahera ingredienser från vanliga strukturer
-    const ingredients: Array<{ quantity: number; unit: string; name: string }> = [];
+    const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     
     // Testa olika ingredient-selectors
     const ingredientPatterns = [

backend/src/quick-import/parsers/ica.parser.ts

@@ -46,7 +46,7 @@ export class IcaRecipeParser extends RecipeParser {
     const name = recipe.name || '';
 
     // Extrahera ingredienser
-    const ingredients: Array<{ quantity: number; unit: string; name: string }> = [];
+    const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
       for (const ing of recipe.recipeIngredient) {
         const parsed = this.parseIngredientLine(ing);
@@ -96,7 +96,7 @@ export class IcaRecipeParser extends RecipeParser {
       }
     }
 
-    const ingredients: Array<{ quantity: number; unit: string; name: string }> = [];
+    const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
     const ingredientRegex =
       /<li[^>]*class="[^"]*ingredient[^"]*"[^>]*>([^<]+)<\/li>/gi;
     let match;

backend/src/quick-import/quick-import.service.ts

@@ -155,6 +155,7 @@ export class QuickImportService {
         quantity: number;
         unit: string;
         name: string;
+        note?: string;
       }>;
       instructions?: string;
     },
@@ -178,7 +179,8 @@ export class QuickImportService {
       for (const ing of recipe.ingredients) {
         const quantity = ing.quantity > 0 ? `${ing.quantity} ` : '';
         const unit = ing.unit ? `${ing.unit} ` : '';
-        lines.push(`- ${quantity}${unit}${ing.name}`);
+        const note = ing.note ? ` (${ing.note})` : '';
+        lines.push(`- ${quantity}${unit}${ing.name}${note}`);
       }
       lines.push('');
     }

frontend/app/recipes/create/CreateRecipePage.tsx

@@ -126,6 +126,7 @@ export default function CreateRecipePage() {
     { value: 'st', label: 'st (styck)' },
     { value: 'tsk', label: 'tsk (tesked)' },
     { value: 'msk', label: 'msk (matsked)' },
+    { value: 'krm', label: 'krm (kryddmått)' },
   ];
 
   const LOCATION_OPTIONS = [

frontend/app/recipes/import/ImportRecipePage.tsx

@@ -44,6 +44,7 @@ const UNIT_OPTIONS = [
   { value: 'st', label: 'st (styck)' },
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
+  { value: 'krm', label: 'krm (kryddmått)' },
 ];
 
 type Step = 'input' | 'review' | 'saving';

frontend/app/recipes/write/WriteRecipePage.tsx

@@ -43,6 +43,7 @@ const UNIT_OPTIONS = [
   { value: 'st', label: 'st (styck)' },
   { value: 'tsk', label: 'tsk (tesked)' },
   { value: 'msk', label: 'msk (matsked)' },
+  { value: 'krm', label: 'krm (kryddmått)' },
 ];
 
 type Step = 'input' | 'review' | 'saving';
@@ -60,6 +61,7 @@ export default function WriteRecipePage() {
   const [isParsing, setIsParsing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [showDebugPanel, setShowDebugPanel] = useState(false);
 
   useEffect(() => {
     // Hämta produkter från databas
@@ -310,6 +312,65 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
       {/* STEG 2: Granskning */}
       {step === 'review' && parsed && (
         <section style={{ display: 'grid', gap: '1.5rem' }}>
+          {/* Debug Panel - Import Output */}
+          <details
+            open={showDebugPanel}
+            onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
+            style={{
+              border: '1px solid #ddd',
+              borderRadius: '8px',
+              padding: '1rem',
+              background: '#f9f9f9',
+            }}
+          >
+            <summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.95rem', color: '#666' }}>
+              🔍 Import Debug Output {showDebugPanel ? '▼' : '▶'}
+            </summary>
+            <div style={{ marginTop: '1rem', display: 'grid', gap: '1rem' }}>
+              {/* Raw Markdown */}
+              <div>
+                <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Raw Markdown:</h4>
+                <pre
+                  style={{
+                    background: 'white',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '0.75rem',
+                    fontSize: '0.8rem',
+                    overflow: 'auto',
+                    maxHeight: '200px',
+                    margin: 0,
+                    fontFamily: 'monospace',
+                    color: '#333',
+                  }}
+                >
+                  {markdown}
+                </pre>
+              </div>
+
+              {/* Parse Results as JSON */}
+              <div>
+                <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Parse Result:</h4>
+                <pre
+                  style={{
+                    background: 'white',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '0.75rem',
+                    fontSize: '0.75rem',
+                    overflow: 'auto',
+                    maxHeight: '250px',
+                    margin: 0,
+                    fontFamily: 'monospace',
+                    color: '#333',
+                  }}
+                >
+                  {JSON.stringify(parsed, null, 2)}
+                </pre>
+              </div>
+            </div>
+          </details>
+
           {/* Receptdetaljer */}
           <div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
             <h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>