Nils-Johan Gynther
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useCallback } from 'react';
|
|
import type { InventoryItem, Product } from '../../../../features/inventory/types';
|
|
import InventoryList from '../../../inventory/InventoryList';
|
|
import InventoryForm from '../../../inventory/InventoryForm';
|
|
import { useAuthFetch } from '../../../../lib/use-auth-fetch';
|
|
|
|
export default function InventoryView() {
|
|
const [inventory, setInventory] = useState<InventoryItem[]>([]);
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const authFetch = useAuthFetch();
|
|
|
|
const load = useCallback(async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const [invRes, prodRes] = await Promise.all([
|
|
authFetch('/api/inventory'),
|
|
fetch('/api/products'),
|
|
]);
|
|
if (!invRes.ok) throw new Error('Kunde inte hämta inventarie');
|
|
if (!prodRes.ok) throw new Error('Kunde inte hämta produkter');
|
|
const [inv, prods] = await Promise.all([invRes.json(), prodRes.json()]);
|
|
setInventory(inv);
|
|
setProducts(prods);
|
|
} catch (e) {
|
|
setError(e instanceof Error ? e.message : 'Okänt fel');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [authFetch]);
|
|
|
|
useEffect(() => { load(); }, [load]);
|
|
|
|
if (loading) return <p style={{ color: '#888' }}>Laddar inventarie…</p>;
|
|
if (error) return <p style={{ color: '#c00' }}>{error}</p>;
|
|
|
|
return (
|
|
<div>
|
|
<p style={{ color: '#555', marginBottom: '1rem' }}>
|
|
Lägg till, redigera och ta bort varor i ditt inventarie.
|
|
</p>
|
|
|
|
{/* Formulär för att lägga till vara — viker ut sig vid klick */}
|
|
<InventoryForm products={products} onCreated={load} />
|
|
|
|
{/* Lista med redigera/ta bort per rad */}
|
|
<InventoryList inventory={inventory} onDeleted={load} />
|
|
</div>
|
|
);
|
|
}
|