nilsjohan/recipe-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance pantry management with new features and UI improvements

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-21 16:09:33 +02:00
parent 69f05e6b43
commit 2acf66e4c4
7 changed files with 221 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/matsedel/MealPlanClient.tsx
+21 -10
View File
@@ -25,7 +25,7 @@ type InventoryCompareItem = {
unit: string;
available: number;
missing: number;
status: 'enough' | 'missing';
status: 'enough' | 'missing' | 'pantry';
};
function getWeekDates(offset = 0): string[] {
@@ -228,7 +228,7 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
<p style={{ color: '#888', margin: 0 }}>Laddar ingredienser...</p>
) : (() => {
// Berika varje rad med inventariestatus
type DisplayStatus = 'enough' | 'partial' | 'missing';
type DisplayStatus = 'enough' | 'partial' | 'missing' | 'pantry';
const enriched = shopping.map((item) => {
const cmp = inventoryCompare.find(
(c) => c.productId === item.productId && c.unit === item.unit,
@@ -236,7 +236,10 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
let displayStatus: DisplayStatus = 'missing';
let buyQty = item.quantity;
if (cmp) {
if (cmp.available >= cmp.required) {
if (cmp.status === 'pantry') {
displayStatus = 'pantry';
buyQty = 0;
} else if (cmp.available >= cmp.required) {
displayStatus = 'enough';
buyQty = 0;
} else if (cmp.available > 0) {
@@ -247,12 +250,13 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
return { ...item, cmp, displayStatus, buyQty };
});
const order: Record<DisplayStatus, number> = { missing: 0, partial: 1, enough: 2 };
const order: Record<DisplayStatus, number> = { missing: 0, partial: 1, enough: 2, pantry: 3 };
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 pantryCount = enriched.filter((e) => e.displayStatus === 'pantry').length;
const hasCompare = inventoryCompare.length > 0;
const fmtQty = (n: number) => (n % 1 === 0 ? String(n) : n.toFixed(1));
@@ -265,6 +269,7 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
{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>}
{pantryCount > 0 && <span style={{ color: '#555', fontWeight: 600 }}>📦 {pantryCount} baslager</span>}
{missingCount === 0 && partialCount === 0 && (
<span style={{ color: '#1f5f2c', fontWeight: 600 }}>✅ Du har allt hemma!</span>
)}
@@ -276,8 +281,9 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
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 ? '⚠️' : '✅';
const isPantry = item.displayStatus === 'pantry';
const bg = isMissing ? '#ffeaea' : isPartial ? '#fff8e6' : isPantry ? '#f5f5f5' : '#ecf8ee';
const icon = isMissing ? '❌' : isPartial ? '⚠️' : isPantry ? '📦' : '✅';
return (
<li
@@ -293,8 +299,8 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
fontSize: '0.88rem',
}}
>
{hasCompare && <span title={isEnough ? 'Finns hemma' : isPartial ? 'Delvis hemma' : 'Saknas'}>{icon}</span>}
<span style={{ color: isEnough ? '#555' : '#111' }}>
{hasCompare && <span title={isEnough ? 'Finns hemma' : isPartial ? 'Delvis hemma' : isPantry ? 'Baslager — alltid hemma' : 'Saknas'}>{icon}</span>}
<span style={{ color: (isEnough || isPantry) ? '#555' : '#111' }}>
<strong>{item.name}</strong>
{isPartial && item.cmp && (
<span style={{ color: '#7a5000', fontSize: '0.8rem', marginLeft: '0.4rem' }}>
@@ -306,9 +312,14 @@ export default function MealPlanClient({ recipes }: { recipes: Recipe[] }) {
(finns hemma)
</span>
)}
{isPantry && (
<span style={{ color: '#888', fontSize: '0.8rem', marginLeft: '0.4rem' }}>
(baslager)
</span>
)}
</span>
<span style={{ fontWeight: 600, whiteSpace: 'nowrap', color: isEnough ? '#888' : '#111' }}>
{isEnough
<span style={{ fontWeight: 600, whiteSpace: 'nowrap', color: (isEnough || isPantry) ? '#888' : '#111' }}>
{(isEnough || isPantry)
? '—'
: `${fmtQty(item.buyQty)} ${item.unit}`}
</span>