feat(matplan): enhance shopping list with inventory status indicators and summary
This commit is contained in:
Nils-Johan Gynther
@@ -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' }}>
|
||||
{shopping.map((item) => (
|
||||
<li
|
||||
key={`${item.productId}-${item.unit}`}
|
||||
style={{ display: 'flex', gap: '0.5rem', alignItems: 'baseline' }}
|
||||
>
|
||||
<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>
|
||||
) : (() => {
|
||||
// Berika varje rad med inventariestatus
|
||||
type DisplayStatus = 'enough' | 'partial' | 'missing';
|
||||
const enriched = shopping.map((item) => {
|
||||
const cmp = inventoryCompare.find(
|
||||
(c) => c.productId === item.productId && c.unit === item.unit,
|
||||
);
|
||||
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 };
|
||||
});
|
||||
|
||||
{/* 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>
|
||||
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' }}>
|
||||
{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: 'grid',
|
||||
gridTemplateColumns: hasCompare ? '1.5rem 1fr auto' : '1fr auto',
|
||||
alignItems: 'center',
|
||||
gap: '0.5rem',
|
||||
padding: '0.4rem 0.6rem',
|
||||
borderRadius: '6px',
|
||||
background: hasCompare ? bg : 'transparent',
|
||||
fontSize: '0.88rem',
|
||||
}}
|
||||
>
|
||||
{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: '#7a5000', fontSize: '0.8rem', marginLeft: '0.4rem' }}>
|
||||
({fmtQty(item.cmp.available)} av {fmtQty(item.cmp.required)} {item.unit} hemma)
|
||||
</span>
|
||||
)}
|
||||
{isEnough && (
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
<ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.4rem' }}>
|
||||
{inventoryCompare.map((item) => (
|
||||
<li
|
||||
key={`${item.productId}-${item.unit}`}
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0.4rem 0.6rem',
|
||||
borderRadius: '6px',
|
||||
background: item.status === 'missing' ? '#ffeaea' : '#ecf8ee',
|
||||
fontSize: '0.88rem',
|
||||
flexWrap: 'wrap',
|
||||
gap: '0.25rem',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<strong>{item.name}</strong>
|
||||
{' '}
|
||||
<span style={{ color: '#555' }}>
|
||||
{item.required % 1 === 0 ? item.required : item.required.toFixed(1)} {item.unit} behövs
|
||||
{' · '}
|
||||
{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' && (
|
||||
<span style={{ color: '#1f5f2c', fontWeight: 600 }}>✓</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
})()
|
||||
}
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user