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

Add InventoryList component for improved inventory display and search functionality

Browse Source
This commit is contained in:
Nils-Johan Gynther
2026-04-10 18:57:21 +02:00
parent dd17656e4c
commit 33cb4e5328
2 changed files with 181 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/inventory/page.tsx
+2 -106
View File
@@ -1,11 +1,9 @@
import InventoryForm from './InventoryForm';
import InventoryEditForm from './InventoryEditForm';
import InventoryConsumeForm from './InventoryConsumeForm';
import ProductForm from './ProductForm';
import Link from 'next/link';
import { fetchJson } from '../../lib/api';
import type { InventoryItem, Product } from '../../features/inventory/types';
import InventoryConsumptionHistory from './InventoryConsumptionHistory';
import InventoryList from './InventoryList';
function formatDate(value: string | null) {
if (!value) return null;
@@ -179,109 +177,7 @@ export default async function InventoryPage({ searchParams }: InventoryPageProps
</div>
</section>
<section>
<h2>Aktuella hemmavaror (inventory)</h2>
{inventory.length === 0 ? (
<p>Inga hemmavaror för det valda filtret.</p>
) : (
<div style={{ display: 'grid', gap: '0.75rem' }}>
{inventory.map((item) => {
const bestBeforeStatus = getBestBeforeStatus(item.bestBeforeDate);
return (
<article
key={item.id}
style={{
border: `1px solid ${bestBeforeStatus.border}`,
borderRadius: '10px',
padding: '1rem',
display: 'flex',
flexDirection: 'column',
gap: '0.6rem',
background: '#fff',
boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
gap: '1rem',
flexWrap: 'wrap',
}}
>
<div>
<strong style={{ fontSize: '1rem' }}>
{item.product.canonicalName || item.product.name}
</strong>
<div style={{ marginTop: '0.2rem', color: '#444' }}>
{item.quantity} {item.unit}
</div>
</div>
<div
style={{
padding: '0.3rem 0.6rem',
borderRadius: '999px',
background: bestBeforeStatus.background,
color: bestBeforeStatus.color,
border: `1px solid ${bestBeforeStatus.border}`,
fontSize: '0.85rem',
fontWeight: 600,
whiteSpace: 'nowrap',
}}
>
{bestBeforeStatus.label}
</div>
</div>
<div
style={{
display: 'grid',
gap: '0.35rem',
color: '#333',
}}
>
{item.location ? <div>Plats: {item.location}</div> : null}
{item.brand ? <div>Varumärke: {item.brand}</div> : null}
<div>Öppnad: {item.opened ? 'Ja' : 'Nej'}</div>
{item.suitableFor ? (
<div>Passar till: {item.suitableFor}</div>
) : null}
{item.bestBeforeDate ? (
<div>Bäst före: {formatDate(item.bestBeforeDate)}</div>
) : null}
{item.comment ? <div>Kommentar: {item.comment}</div> : null}</div>
<div
style={{
marginTop: '0.75rem',
paddingTop: '0.75rem',
borderTop: '1px solid #eee',
display: 'flex',
gap: '0.75rem',
flexWrap: 'wrap',
alignItems: 'center',
justifyContent: 'flex-start',
}}
>
<InventoryEditForm item={item} />
<InventoryConsumeForm id={item.id} unit={item.unit} />
<InventoryConsumptionHistory id={item.id} />
</div>
</article>
);
})}
</div>
)}
</section>
<InventoryList inventory={inventory} />
</main>
);
}