feat(matplan): enhance shopping list with inventory status indicators and summary

NEXT_STEPS.md

@@ -16,7 +16,7 @@
 | Matplanering (veckovy, inköpslista) | ✅ Klart |
 | Matplan — portionsjustering per dag | ✅ Klart |
 | Matplan — inventariejämförelse (backend) | ✅ Klart |
-| Matplan — inventariejämförelse (frontend-vy) | ⚠️ Grundläggande, saknar ✅/⚠️/❌-status |
+| Matplan — inventariejämförelse (frontend-vy) | ✅ Klart (✅/⚠️/❌ integrerat i inköpslistan) |
 | Baslager (lista, lägg till, ta bort) | ✅ Klart |
 | Admin: Produkter (edit, merge, duplicate, restore, reset) | ✅ Klart |
 | Admin: Bulk-kategorisering | ✅ Klart |
@@ -61,13 +61,15 @@ Idag har alla inloggade användare samma behörighetsnivå — ett säkerhetspro
 - **Frontend — admin-UI (`/admin/users/`):** Lista användare, skapa nya konton (namn, e-post, lösenord, roll), ändra roll, avaktivera konto
 - **Frontend — skyddade routes:** `/admin/*` kräver admin-roll; omdirigerar annars till startsidan
 
-### 3. Matplan-vy (frontend-polish)
+### 3. Matplan-vy (frontend-polish) ✅
-**Mål:** Ge användare tydlig feedback på lagerstatus och underlätta inköp.
+**Klart.**
 
-Backend-endpointen `GET /api/meal-plan/inventory-compare?from=...&to=...` finns och fungerar. Det som saknas är en tydlig frontend-vy:
+Inköpslistan och inventariejämförelsen är sammanslagna till en enhetlig vy med tre statusnivåer:
-- Visa inköpslistan med statusindikatorer: ✅ Finns hemma / ⚠️ Delvis / ❌ Saknas
+- ❌ Saknas helt — visar hur mycket som behövs köpas
-- Aggregera `inventory-compare`-svaret per ingrediens över hela veckan
+- ⚠️ Delvis hemma — visar hur mycket mer som behövs + vad som finns
-- Möjlig placering: ny flik i matplanen eller sidopanel i veckovy
+- ✅ Finns hemma — markeras nedtonat, ingen köpindikering
+
+Listan sorteras automatiskt: saknade ingredienser överst, hemma-ingredienser underst. En sammanfattningsrad visar totalt antal per statuskategori.
 
 ### 4. Teknisk skuld (underhåll)
 **Mål:** Minska komplexitet och risk för buggar.

frontend/app/matplan/MealPlanClient.tsx

@@ -217,7 +217,7 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
             })}
           </div>
 
-          {/* Samlad ingredienslista */}
+          {/* Inköpslista med lagerstatus */}
           <section style={{ border: '1px solid #dee2e6', borderRadius: '8px', padding: '1rem' }}>
             <h2 style={{ margin: '0 0 0.75rem', fontSize: '1.1rem' }}>
               Inköpslista ({plannedCount} {plannedCount === 1 ? 'recept' : 'recept'} planerade)
@@ -226,80 +226,101 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
               <p style={{ color: '#888', margin: 0 }}>Välj recept ovan för att se en samlad ingredienslista.</p>
             ) : shopping.length === 0 ? (
               <p style={{ color: '#888', margin: 0 }}>Laddar ingredienser...</p>
-            ) : (
+            ) : (() => {
-              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.35rem' }}>
+                // Berika varje rad med inventariestatus
-                {shopping.map((item) => (
+                type DisplayStatus = 'enough' | 'partial' | 'missing';
-                  <li
+                const enriched = shopping.map((item) => {
-                    key={`${item.productId}-${item.unit}`}
+                  const cmp = inventoryCompare.find(
-                    style={{ display: 'flex', gap: '0.5rem', alignItems: 'baseline' }}
+                    (c) => c.productId === item.productId && c.unit === item.unit,
-                  >
-                    <span style={{ fontWeight: 600, minWidth: '70px', textAlign: 'right' }}>
-                      {item.quantity % 1 === 0 ? item.quantity : item.quantity.toFixed(1)} {item.unit}
-                    </span>
-                    <span>{item.name}</span>
-                  </li>
-                ))}
-              </ul>
-            )}
-          </section>
-
-          {/* Inventariejämförelse */}
-          {plannedCount > 0 && inventoryCompare.length > 0 && (
-            <section style={{ border: '1px solid #dee2e6', borderRadius: '8px', padding: '1rem' }}>
-              <h2 style={{ margin: '0 0 0.5rem', fontSize: '1.1rem' }}>Inventariegranskning</h2>
-              <p style={{ margin: '0 0 0.75rem', fontSize: '0.85rem', color: '#666' }}>
-                Vad du har hemma vs. vad veckans recept kräver.
-              </p>
-              {(() => {
-                const missingCount = inventoryCompare.filter((i) => i.status === 'missing').length;
-                return missingCount === 0 ? (
-                  <p style={{ color: '#1f5f2c', fontWeight: 600, margin: '0 0 0.75rem' }}>
-                    ✓ Du har allt hemma!
-                  </p>
-                ) : (
-                  <p style={{ color: '#8b0000', fontWeight: 600, margin: '0 0 0.75rem' }}>
-                    {missingCount} ingrediens{missingCount !== 1 ? 'er' : ''} saknas eller räcker inte
-                  </p>
                   );
-              })()}
+                  let displayStatus: DisplayStatus = 'missing';
+                  let buyQty = item.quantity;
+                  if (cmp) {
+                    if (cmp.available >= cmp.required) {
+                      displayStatus = 'enough';
+                      buyQty = 0;
+                    } else if (cmp.available > 0) {
+                      displayStatus = 'partial';
+                      buyQty = cmp.missing;
+                    }
+                  }
+                  return { ...item, cmp, displayStatus, buyQty };
+                });
+
+                const order: Record<DisplayStatus, number> = { missing: 0, partial: 1, enough: 2 };
+                enriched.sort((a, b) => order[a.displayStatus] - order[b.displayStatus] || a.name.localeCompare(b.name, 'sv'));
+
+                const missingCount = enriched.filter((e) => e.displayStatus === 'missing').length;
+                const partialCount = enriched.filter((e) => e.displayStatus === 'partial').length;
+                const enoughCount  = enriched.filter((e) => e.displayStatus === 'enough').length;
+                const hasCompare   = inventoryCompare.length > 0;
+
+                const fmtQty = (n: number) => (n % 1 === 0 ? String(n) : n.toFixed(1));
+
+                return (
+                  <>
+                    {/* Sammanfattning */}
+                    {hasCompare && (
+                      <div style={{ display: 'flex', gap: '1rem', marginBottom: '0.75rem', flexWrap: 'wrap', fontSize: '0.85rem' }}>
+                        {missingCount > 0 && <span style={{ color: '#8b0000', fontWeight: 600 }}>❌ {missingCount} saknas</span>}
+                        {partialCount > 0 && <span style={{ color: '#7a5000', fontWeight: 600 }}>⚠️ {partialCount} delvis hemma</span>}
+                        {enoughCount  > 0 && <span style={{ color: '#1f5f2c', fontWeight: 600 }}>✅ {enoughCount} hemma</span>}
+                        {missingCount === 0 && partialCount === 0 && (
+                          <span style={{ color: '#1f5f2c', fontWeight: 600 }}>✅ Du har allt hemma!</span>
+                        )}
+                      </div>
+                    )}
+
                     <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
-                {inventoryCompare.map((item) => (
+                      {enriched.map((item) => {
+                        const isMissing = item.displayStatus === 'missing';
+                        const isPartial = item.displayStatus === 'partial';
+                        const isEnough  = item.displayStatus === 'enough';
+                        const bg        = isMissing ? '#ffeaea' : isPartial ? '#fff8e6' : '#ecf8ee';
+                        const icon      = isMissing ? '❌' : isPartial ? '⚠️' : '✅';
+
+                        return (
                           <li
                             key={`${item.productId}-${item.unit}`}
                             style={{
-                      display: 'flex',
+                              display: 'grid',
-                      justifyContent: 'space-between',
+                              gridTemplateColumns: hasCompare ? '1.5rem 1fr auto' : '1fr auto',
                               alignItems: 'center',
+                              gap: '0.5rem',
                               padding: '0.4rem 0.6rem',
                               borderRadius: '6px',
-                      background: item.status === 'missing' ? '#ffeaea' : '#ecf8ee',
+                              background: hasCompare ? bg : 'transparent',
                               fontSize: '0.88rem',
-                      flexWrap: 'wrap',
-                      gap: '0.25rem',
                             }}
                           >
-                    <span>
+                            {hasCompare && <span title={isEnough ? 'Finns hemma' : isPartial ? 'Delvis hemma' : 'Saknas'}>{icon}</span>}
+                            <span style={{ color: isEnough ? '#555' : '#111' }}>
                               <strong>{item.name}</strong>
-                      {' '}
+                              {isPartial && item.cmp && (
-                      <span style={{ color: '#555' }}>
+                                <span style={{ color: '#7a5000', fontSize: '0.8rem', marginLeft: '0.4rem' }}>
-                        {item.required % 1 === 0 ? item.required : item.required.toFixed(1)} {item.unit} behövs
+                                  ({fmtQty(item.cmp.available)} av {fmtQty(item.cmp.required)} {item.unit} hemma)
-                        {' · '}
-                        {item.available % 1 === 0 ? item.available : item.available.toFixed(1)} {item.unit} hemma
-                      </span>
-                    </span>
-                    {item.status === 'missing' && item.missing > 0 && (
-                      <span style={{ color: '#8b0000', fontWeight: 600, whiteSpace: 'nowrap' }}>
-                        Saknar {item.missing % 1 === 0 ? item.missing : item.missing.toFixed(1)} {item.unit}
                                 </span>
                               )}
-                    {item.status === 'enough' && (
+                              {isEnough && (
-                      <span style={{ color: '#1f5f2c', fontWeight: 600 }}>✓</span>
+                                <span style={{ color: '#888', fontSize: '0.8rem', marginLeft: '0.4rem' }}>
+                                  (finns hemma)
+                                </span>
                               )}
+                            </span>
+                            <span style={{ fontWeight: 600, whiteSpace: 'nowrap', color: isEnough ? '#888' : '#111' }}>
+                              {isEnough
+                                ? '—'
+                                : `${fmtQty(item.buyQty)} ${item.unit}`}
+                            </span>
                           </li>
-                ))}
+                        );
+                      })}
                     </ul>
+                  </>
+                );
+              })()
+            }
           </section>
-          )}
         </>
       )}
     </div>