Recipe-app main
This commit is contained in:
@@ -0,0 +1,294 @@
|
||||
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';
|
||||
|
||||
function formatDate(value: string | null) {
|
||||
if (!value) return null;
|
||||
return new Date(value).toLocaleDateString('sv-SE');
|
||||
}
|
||||
|
||||
function getBestBeforeStatus(bestBeforeDate: string | null) {
|
||||
if (!bestBeforeDate) {
|
||||
return {
|
||||
label: 'Ingen bäst före angiven',
|
||||
color: '#666',
|
||||
background: '#f5f5f5',
|
||||
border: '#ddd',
|
||||
};
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const bestBefore = new Date(bestBeforeDate);
|
||||
|
||||
today.setHours(0, 0, 0, 0);
|
||||
bestBefore.setHours(0, 0, 0, 0);
|
||||
|
||||
const diffMs = bestBefore.getTime() - today.getTime();
|
||||
const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffDays < 0) {
|
||||
return {
|
||||
label: 'Utgången',
|
||||
color: '#8b0000',
|
||||
background: '#ffeaea',
|
||||
border: '#f1b5b5',
|
||||
};
|
||||
}
|
||||
|
||||
if (diffDays <= 3) {
|
||||
return {
|
||||
label: 'Snart utgången',
|
||||
color: '#8a4b00',
|
||||
background: '#fff4e5',
|
||||
border: '#f0cf9b',
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
label: 'OK',
|
||||
color: '#1f5f2c',
|
||||
background: '#ecf8ee',
|
||||
border: '#b9e0bf',
|
||||
};
|
||||
}
|
||||
|
||||
type InventoryPageProps = {
|
||||
searchParams?: Promise<{
|
||||
location?: string;
|
||||
sort?: string;
|
||||
}>;
|
||||
};
|
||||
|
||||
function buildInventoryUrl(location?: string, sort?: string) {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (location) {
|
||||
params.set('location', location);
|
||||
}
|
||||
|
||||
if (sort) {
|
||||
params.set('sort', sort);
|
||||
}
|
||||
|
||||
const query = params.toString();
|
||||
return query ? `/inventory?${query}` : '/inventory';
|
||||
}
|
||||
|
||||
export default async function InventoryPage({ searchParams }: InventoryPageProps) {
|
||||
const resolvedSearchParams = searchParams ? await searchParams : {};
|
||||
const location = resolvedSearchParams.location || '';
|
||||
const sort = resolvedSearchParams.sort || '';
|
||||
|
||||
const inventoryPath = (() => {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (location) {
|
||||
params.set('location', location);
|
||||
}
|
||||
|
||||
if (sort) {
|
||||
params.set('sort', sort);
|
||||
}
|
||||
|
||||
const query = params.toString();
|
||||
return query ? `/api/inventory?${query}` : '/api/inventory';
|
||||
})();
|
||||
|
||||
const [inventory, products] = await Promise.all([
|
||||
fetchJson<InventoryItem[]>(inventoryPath),
|
||||
fetchJson<Product[]>('/api/products'),
|
||||
]);
|
||||
|
||||
const locationOptions = ['', 'Kyl', 'Frys', 'Skafferi'];
|
||||
const sortOptions = [
|
||||
{ value: '', label: 'Senast tillagda' },
|
||||
{ value: 'bestBeforeAsc', label: 'Bäst före Stigande' },
|
||||
{ value: 'bestBeforeDesc', label: 'Bäst före Fallande' },
|
||||
];
|
||||
|
||||
return (
|
||||
<main style={{ padding: '1.5rem', maxWidth: '900px', margin: '0 auto' }}>
|
||||
<h1>Hemmavaror</h1>
|
||||
|
||||
<ProductForm />
|
||||
<InventoryForm products={products} />
|
||||
|
||||
<section style={{ marginBottom: '1.5rem' }}>
|
||||
<h2>Filter och sortering</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: 'grid',
|
||||
gap: '1rem',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
alignItems: 'start',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Plats</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
{locationOptions.map((option) => {
|
||||
const isActive = location === option;
|
||||
const label = option === '' ? 'Alla' : option;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={option || 'alla'}
|
||||
href={buildInventoryUrl(option || undefined, sort || undefined)}
|
||||
style={{
|
||||
padding: '0.45rem 0.75rem',
|
||||
borderRadius: '999px',
|
||||
border: '1px solid #ddd',
|
||||
textDecoration: 'none',
|
||||
color: '#111',
|
||||
background: isActive ? '#efefef' : '#fff',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Sortering</div>
|
||||
<div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
|
||||
{sortOptions.map((option) => {
|
||||
const isActive = sort === option.value;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={option.value || 'default'}
|
||||
href={buildInventoryUrl(location || undefined, option.value || undefined)}
|
||||
style={{
|
||||
padding: '0.45rem 0.75rem',
|
||||
borderRadius: '999px',
|
||||
border: '1px solid #ddd',
|
||||
textDecoration: 'none',
|
||||
color: '#111',
|
||||
background: isActive ? '#efefef' : '#fff',
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user