Initiale Arbeitszeiterfassung (Next.js 16 + SQLite)
Web-App zur Erfassung der Arbeitszeit, Layout/Architektur an Projekt logbuch angelehnt, mit grüner Grundfarbe und SQLite3 statt MySQL. - Eingabemaske: Datum (mit Wochentag), Ort (Kunde FFM/Homeoffice/Andrena), Beginn/Ende, Reisezeit, Vertriebsunterstützung (default 2h), Kommentar (max 500) - Berechnung: Arbeitszeit = Ende-Beginn; Mehrarbeit = Arbeitszeit - 8h - Pause - Pause als globale Einstellung (Einstellungen-Tab) - Tabs Eingabe/Liste/Einstellungen, letzte 10 Einträge unter der Maske - Single-User-Login (Benutzer Birgit + Passwort fest in .env), JWT-Cookie via jose - better-sqlite3, Docker-Setup für docker.citysensor.de Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import type { ArbeitszeitEintrag } from '@/types/arbeitszeit';
|
||||
import ArbeitszeitForm from '@/components/ArbeitszeitForm';
|
||||
import ArbeitszeitList from '@/components/ArbeitszeitList';
|
||||
import Einstellungen from '@/components/Einstellungen';
|
||||
import packageJson from '@/package.json';
|
||||
|
||||
interface Props {
|
||||
username: string;
|
||||
}
|
||||
|
||||
type Tab = 'eingabe' | 'liste' | 'einstellungen';
|
||||
|
||||
export default function MainClient({ username }: Props) {
|
||||
const [activeTab, setActiveTab] = useState<Tab>('eingabe');
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const [editEntry, setEditEntry] = useState<ArbeitszeitEintrag | null>(null);
|
||||
const [pause, setPause] = useState(0.5);
|
||||
|
||||
const version = packageJson.version;
|
||||
const buildDate =
|
||||
process.env.NEXT_PUBLIC_BUILD_DATE ||
|
||||
new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/settings')
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((data) => { if (data && typeof data.pause === 'number') setPause(data.pause); })
|
||||
.catch(() => {});
|
||||
}, []);
|
||||
|
||||
function handleSaved() {
|
||||
setRefreshKey((k) => k + 1);
|
||||
setEditEntry(null);
|
||||
}
|
||||
|
||||
function handleEdit(entry: ArbeitszeitEintrag) {
|
||||
setEditEntry(entry);
|
||||
setActiveTab('eingabe');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch('/api/logout', { method: 'POST' });
|
||||
window.location.href = '/login';
|
||||
}
|
||||
|
||||
const tabs: { id: Tab; label: string }[] = [
|
||||
{ id: 'eingabe', label: 'Eingabe' },
|
||||
{ id: 'liste', label: 'Liste' },
|
||||
{ id: 'einstellungen', label: 'Einstellungen' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-white py-1 px-2 sm:py-2 sm:px-4 print:p-0">
|
||||
<main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-3 sm:p-4 bg-[#EEF7EE] print:max-w-none print:border-0 print:p-0 print:bg-white">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-start sm:items-center mb-3 gap-2 print:hidden">
|
||||
<h1 className="text-xl sm:text-2xl font-bold leading-tight text-gray-900">
|
||||
Arbeitszeiterfassung
|
||||
<span className="hidden sm:inline text-base font-normal text-gray-600"> — {username}</span>
|
||||
</h1>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="text-xs sm:text-sm px-2 sm:px-3 py-1.5 bg-red-600 hover:bg-red-700 rounded-lg text-white shrink-0"
|
||||
>
|
||||
Abmelden
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 mb-3 border-b border-gray-200 print:hidden">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => {
|
||||
setActiveTab(tab.id);
|
||||
if (tab.id === 'eingabe') setEditEntry(null);
|
||||
}}
|
||||
className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
|
||||
activeTab === tab.id
|
||||
? 'border-[#86C28B] text-gray-900'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Eingabe-Tab */}
|
||||
{activeTab === 'eingabe' && (
|
||||
<>
|
||||
{editEntry && (
|
||||
<div className="mb-3 text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2">
|
||||
Eintrag bearbeiten (ID {editEntry.id})
|
||||
</div>
|
||||
)}
|
||||
<ArbeitszeitForm
|
||||
key={editEntry?.id ?? 'new'}
|
||||
editEntry={editEntry}
|
||||
pause={pause}
|
||||
onSaved={handleSaved}
|
||||
onCancel={() => setEditEntry(null)}
|
||||
/>
|
||||
|
||||
{/* Letzte 10 Einträge unter der Eingabemaske */}
|
||||
<div className="mt-5 border-t-2 border-gray-300 pt-4">
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h2 className="text-sm font-semibold text-gray-600">Letzte Einträge</h2>
|
||||
<button
|
||||
onClick={() => setActiveTab('liste')}
|
||||
className="text-xs text-green-700 hover:underline"
|
||||
>
|
||||
Alle anzeigen →
|
||||
</button>
|
||||
</div>
|
||||
<ArbeitszeitList
|
||||
pause={pause}
|
||||
refreshKey={refreshKey}
|
||||
onEdit={handleEdit}
|
||||
limit={10}
|
||||
compact
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Liste-Tab */}
|
||||
{activeTab === 'liste' && (
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
|
||||
<ArbeitszeitList pause={pause} refreshKey={refreshKey} onEdit={handleEdit} limit={100} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Einstellungen-Tab */}
|
||||
{activeTab === 'einstellungen' && (
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3">
|
||||
<h2 className="text-sm font-semibold text-gray-900 mb-3">Einstellungen</h2>
|
||||
<Einstellungen pause={pause} onPauseChange={setPause} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<footer className="mt-6 flex justify-between items-center text-xs sm:text-sm text-gray-600 px-1 sm:px-4 print:hidden">
|
||||
<a href="mailto:rxf@gmx.de" className="text-green-700 hover:underline">rxf@gmx.de</a>
|
||||
<div className="text-right">v{version} — {buildDate}</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user