MarcWieland
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
|
|
export const InventoryView: React.FC = () => {
|
|
const parts = [
|
|
{ name: 'Buderus Logamax plus GB172-24', category: 'Gas-Brennwertgerät', stock: 4, minStock: 2, status: 'Ausreichend' },
|
|
{ name: 'Bosch EasyControl CT200', category: 'Raumthermostat', stock: 1, minStock: 3, status: 'Nachbestellen' },
|
|
{ name: 'Honeywell Hauswasserfilter FF06', category: 'Wasserfilter', stock: 0, minStock: 2, status: 'Kritisch' },
|
|
{ name: 'Grundfos Magna3 32-120 F', category: 'Heizungsumwälzpumpe', stock: 6, minStock: 3, status: 'Ausreichend' },
|
|
{ name: 'Viessmann Vitodens 200-W', category: 'Gas-Brennwertgerät', stock: 2, minStock: 2, status: 'Ausreichend' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<header className="header-bar">
|
|
<h1 className="header-title">Lager & Teileverwaltung</h1>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#ef4444', fontWeight: 600, fontSize: '0.9rem' }}>
|
|
<AlertTriangle size={18} /> 2 Bestandswarnungen
|
|
</div>
|
|
</header>
|
|
|
|
<section className="content-card">
|
|
<h2 className="card-heading">Ersatzteilbestand & Bestellwarnungen</h2>
|
|
<div className="table-responsive">
|
|
<table className="orders-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Artikelbezeichnung</th>
|
|
<th>Kategorie</th>
|
|
<th>Lagerbestand</th>
|
|
<th>Mindestbestand</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{parts.map((p, idx) => (
|
|
<tr key={idx}>
|
|
<td style={{ fontWeight: 600, color: '#0f172a' }}>{p.name}</td>
|
|
<td style={{ color: '#64748b' }}>{p.category}</td>
|
|
<td style={{ fontWeight: 700, color: p.stock <= p.minStock ? '#ef4444' : '#0f172a' }}>
|
|
{p.stock} Stk.
|
|
</td>
|
|
<td>{p.minStock} Stk.</td>
|
|
<td>
|
|
<span className={`badge ${
|
|
p.status === 'Kritisch' || p.status === 'Nachbestellen'
|
|
? 'badge-scheduled'
|
|
: 'badge-in-progress'
|
|
}`} style={{
|
|
backgroundColor: p.status === 'Kritisch' ? '#fef2f2' : p.status === 'Nachbestellen' ? '#fffbeb' : '#dcfce7',
|
|
color: p.status === 'Kritisch' ? '#991b1b' : p.status === 'Nachbestellen' ? '#b45309' : '#15803d'
|
|
}}>
|
|
{p.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|