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/DispatchingView.tsx
+34 -32
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { CalendarDays, Plus, UserCheck } from 'lucide-react';
import { Plus, UserCheck } from 'lucide-react';
export const DispatchingView: React.FC = () => {
const scheduleData = [
@@ -30,42 +30,44 @@ export const DispatchingView: React.FC = () => {
</header>
<section className="content-card">
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', gap: '10px' }}>
<h2 className="card-heading" style={{ margin: 0 }}>Tagesdisposition (Heute)</h2>
<span style={{ fontSize: '0.9rem', color: '#64748b', fontWeight: 600 }}>10 Monteure im System</span>
</div>
<table className="orders-table">
<thead>
<tr>
<th>Uhrzeit</th>
<th>Monteur</th>
<th>Kunde</th>
<th>Aufgabe / Tätigkeit</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{scheduleData.map((item, idx) => (
<tr key={idx}>
<td style={{ fontWeight: 600, color: '#2563eb' }}>{item.time}</td>
<td style={{ fontWeight: 600, color: '#0f172a' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<UserCheck size={16} color="#64748b" />
{item.technician}
</div>
</td>
<td>{item.customer}</td>
<td style={{ color: '#475569' }}>{item.task}</td>
<td>
<span className={`badge ${item.status === 'In Bearbeitung' ? 'badge-in-progress' : 'badge-scheduled'}`}>
{item.status}
</span>
</td>
<div className="table-responsive">
<table className="orders-table">
<thead>
<tr>
<th>Uhrzeit</th>
<th>Monteur</th>
<th>Kunde</th>
<th>Aufgabe / Tätigkeit</th>
<th>Status</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{scheduleData.map((item, idx) => (
<tr key={idx}>
<td style={{ fontWeight: 600, color: '#2563eb' }}>{item.time}</td>
<td style={{ fontWeight: 600, color: '#0f172a' }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<UserCheck size={16} color="#64748b" />
{item.technician}
</div>
</td>
<td>{item.customer}</td>
<td style={{ color: '#475569' }}>{item.task}</td>
<td>
<span className={`badge ${item.status === 'In Bearbeitung' ? 'badge-in-progress' : 'badge-scheduled'}`}>
{item.status}
</span>
</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</>
);