Wieland/Handwerksfreund_Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive mobile layout and drawer menu

Browse Source
This commit is contained in:
MarcWieland
2026-07-27 00:11:10 +02:00
parent 4588468ed6
commit a405bfb91f
7 changed files with 389 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/InventoryView.tsx
+37 -35
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { Package, AlertTriangle } from 'lucide-react';
import { AlertTriangle } from 'lucide-react';
export const InventoryView: React.FC = () => {
const parts = [
@@ -21,41 +21,43 @@ export const InventoryView: React.FC = () => {
<section className="content-card">
<h2 className="card-heading">Ersatzteilbestand & Bestellwarnungen</h2>
<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>
<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>
))}
</tbody>
</table>
</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>
</>
);