49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
|
import { useState, useEffect } from 'react';
|
||
|
|
import { AppLayout } from '../components/AppLayout';
|
||
|
|
import { fetchObjects } from '../lib/api';
|
||
|
|
|
||
|
|
export function InventoryView() {
|
||
|
|
const [objects, setObjects] = useState<Awaited<ReturnType<typeof fetchObjects>>>([]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
fetchObjects().then(setObjects);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<AppLayout current="inventory" onNavigate={() => {}}>
|
||
|
|
<header className="header">
|
||
|
|
<h1 className="page-title">Inventory</h1>
|
||
|
|
</header>
|
||
|
|
<div className="card">
|
||
|
|
<table className="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Type</th>
|
||
|
|
<th>Vendor</th>
|
||
|
|
<th>Model</th>
|
||
|
|
<th>Status</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{objects.length === 0 && (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={5} className="empty">Nessun oggetto</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
{objects.map(o => (
|
||
|
|
<tr key={o.id}>
|
||
|
|
<td>{o.name}</td>
|
||
|
|
<td>{o.type}</td>
|
||
|
|
<td>{o.vendor ?? '-'}</td>
|
||
|
|
<td>{o.model ?? '-'}</td>
|
||
|
|
<td>{o.status ?? '-'}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</AppLayout>
|
||
|
|
);
|
||
|
|
}
|