MarcWieland
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Clock, CheckCircle } from 'lucide-react';
|
|
|
|
export const TimeTrackingView: React.FC = () => {
|
|
const timeEntries = [
|
|
{ date: '26.07.2026', technician: 'Max Müller', customer: 'Max Mustermann', activity: 'Heizungswartung', hours: '4.5 Std.', status: 'Freigegeben' },
|
|
{ date: '26.07.2026', technician: 'Stefan Bauer', customer: 'Anja Klein', activity: 'Thermostat-Kalibrierung', hours: '2.0 Std.', status: 'Freigegeben' },
|
|
{ date: '26.07.2026', technician: 'Tom Gerber', customer: 'Hausverwaltung Schmidt', activity: 'Leitungsspülung', hours: '3.5 Std.', status: 'Offen zur Prüfung' },
|
|
{ date: '25.07.2026', technician: 'Max Müller', customer: 'Bäckerei Hoffmann GmbH', activity: 'Pumpentausch', hours: '6.0 Std.', status: 'Abgerechnet' },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<header className="header-bar">
|
|
<h1 className="header-title">Zeiterfassung & Stundenzettel</h1>
|
|
<span style={{ fontWeight: 600, color: '#10b981' }}>Gesamtstunden Heute: 16.0 Std.</span>
|
|
</header>
|
|
|
|
<section className="content-card">
|
|
<h2 className="card-heading">Erfasste Arbeitszeiten der Monteure</h2>
|
|
<table className="orders-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Monteur</th>
|
|
<th>Kunde / Projekt</th>
|
|
<th>Tätigkeit</th>
|
|
<th>Dauer</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{timeEntries.map((e, idx) => (
|
|
<tr key={idx}>
|
|
<td style={{ color: '#64748b' }}>{e.date}</td>
|
|
<td style={{ fontWeight: 600, color: '#0f172a' }}>{e.technician}</td>
|
|
<td>{e.customer}</td>
|
|
<td style={{ color: '#334155' }}>{e.activity}</td>
|
|
<td style={{ fontWeight: 700, color: '#2563eb' }}>{e.hours}</td>
|
|
<td>
|
|
<span className={`badge ${
|
|
e.status === 'Freigegeben' || e.status === 'Abgerechnet' ? 'badge-in-progress' : 'badge-scheduled'
|
|
}`}>
|
|
{e.status}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</>
|
|
);
|
|
};
|