50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { AppLayout } from '../components/AppLayout';
|
|
import { fetchObjects } from '../lib/api';
|
|
import type { NetObject, ViewKey } from '../types';
|
|
|
|
export function InventoryView({ onNavigate }: { onNavigate: (v: ViewKey) => void }) {
|
|
const [objects, setObjects] = useState<NetObject[]>([]);
|
|
|
|
useEffect(() => {
|
|
fetchObjects().then(setObjects);
|
|
}, []);
|
|
|
|
return (
|
|
<AppLayout current="inventory" onNavigate={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: NetObject) => (
|
|
<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>
|
|
);
|
|
}
|