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>
2026-06-22 09:53:44 +02:00
commit 01a7ac8e0b
38 changed files with 9062 additions and 0 deletions
@@ -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"> &nbsp;— {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>
+  );
+}
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+import { updateArbeitszeit, deleteArbeitszeit } from '@/lib/repo';
+import { parseArbeitszeitInput } from '@/lib/validate';
+
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const id = parseInt((await params).id, 10);
+  if (isNaN(id)) return NextResponse.json({ error: 'Ungültige ID' }, { status: 400 });
+
+  try {
+    const input = parseArbeitszeitInput(await request.json());
+    const entry = updateArbeitszeit(id, input);
+    if (!entry) return NextResponse.json({ error: 'Nicht gefunden' }, { status: 404 });
+    return NextResponse.json(entry);
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : 'Datenbankfehler';
+    console.error('PUT /api/arbeitszeit/[id]:', error);
+    return NextResponse.json({ error: msg }, { status: 400 });
+  }
+}
+
+export async function DELETE(_request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const id = parseInt((await params).id, 10);
+  if (isNaN(id)) return NextResponse.json({ error: 'Ungültige ID' }, { status: 400 });
+
+  try {
+    const ok = deleteArbeitszeit(id);
+    if (!ok) return NextResponse.json({ error: 'Nicht gefunden' }, { status: 404 });
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('DELETE /api/arbeitszeit/[id]:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+import { listArbeitszeit, createArbeitszeit } from '@/lib/repo';
+import { parseArbeitszeitInput } from '@/lib/validate';
+
+export async function GET(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const { searchParams } = new URL(request.url);
+  const limit = Math.min(parseInt(searchParams.get('limit') || '15') || 15, 500);
+  const offset = Math.max(0, parseInt(searchParams.get('offset') || '0') || 0);
+  const month = searchParams.get('month') || undefined;
+
+  try {
+    const result = listArbeitszeit({ limit, offset, month });
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('GET /api/arbeitszeit:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    const input = parseArbeitszeitInput(await request.json());
+    const entry = createArbeitszeit(input);
+    return NextResponse.json(entry, { status: 201 });
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : 'Datenbankfehler';
+    console.error('POST /api/arbeitszeit:', error);
+    return NextResponse.json({ error: msg }, { status: 400 });
+  }
+}
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+import { deleteSession } from '@/lib/session';
+
+export async function POST() {
+  await deleteSession();
+  return NextResponse.json({ ok: true });
+}
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSession } from '@/lib/session';
+import { getPause, setPause } from '@/lib/repo';
+import { toNumber } from '@/lib/validate';
+
+export async function GET() {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    return NextResponse.json({ pause: getPause() });
+  } catch (error) {
+    console.error('GET /api/settings:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
+
+export async function PUT(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    const body = await request.json();
+    const pause = toNumber(body?.pause, NaN);
+    if (isNaN(pause) || pause < 0 || pause > 24) {
+      return NextResponse.json({ error: 'Ungültiger Pausenwert.' }, { status: 400 });
+    }
+    setPause(pause);
+    return NextResponse.json({ pause });
+  } catch (error) {
+    console.error('PUT /api/settings:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
@@ -0,0 +1,40 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@media print {
+  @page {
+    size: A4 portrait;
+    margin: 1.5cm;
+  }
+  body {
+    background: white;
+  }
+  table {
+    font-size: 0.72rem !important;
+    width: 95% !important;
+  }
+}
@@ -0,0 +1,20 @@
+import type { Metadata, Viewport } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Arbeitszeiterfassung',
+  description: 'Erfassung der Arbeitszeit',
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="de">
+      <body className="antialiased">{children}</body>
+    </html>
+  );
+}
@@ -0,0 +1,42 @@
+'use server';
+
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { verifyCredentials, getConfiguredUsername } from '@/lib/auth';
+import { createSession } from '@/lib/session';
+import { checkRateLimit } from '@/lib/ratelimit';
+
+export async function login(
+  _prevState: { error: string } | undefined,
+  formData: FormData
+): Promise<{ error: string }> {
+  const headersList = await headers();
+  const ip =
+    headersList.get('x-forwarded-for')?.split(',')[0].trim() ??
+    headersList.get('x-real-ip') ??
+    'unknown';
+
+  const { allowed, remainingMs } = checkRateLimit(ip);
+  if (!allowed) {
+    const minutes = Math.ceil(remainingMs / 60000);
+    return { error: `Zu viele Anmeldeversuche. Bitte ${minutes} Minute${minutes !== 1 ? 'n' : ''} warten.` };
+  }
+
+  const username = (formData.get('username') as string)?.trim();
+  const password = formData.get('password') as string;
+
+  if (!username || !password) {
+    return { error: 'Bitte Benutzer und Passwort eingeben.' };
+  }
+
+  if (!verifyCredentials(username, password)) {
+    return { error: 'Ungültiger Benutzer oder Passwort.' };
+  }
+
+  await createSession({
+    username: getConfiguredUsername(),
+    isAuthenticated: true,
+  });
+
+  redirect('/');
+}
@@ -0,0 +1,111 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+import { login } from './actions';
+import packageJson from '@/package.json';
+
+export default function LoginPage() {
+  const [state, loginAction, isPending] = useActionState(login, undefined);
+  const [showPassword, setShowPassword] = useState(false);
+
+  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' });
+
+  return (
+    <div className="min-h-screen bg-white py-4 px-4">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#EEF7EE]">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold">Arbeitszeiterfassung</h1>
+        </div>
+
+        <div className="flex justify-center py-10">
+          <div className="w-full max-w-sm bg-white border border-gray-300 rounded-xl shadow-md p-8">
+            <h2 className="text-xl font-semibold text-gray-900 mb-6 text-center">Anmeldung</h2>
+
+            <form action={loginAction} className="space-y-5">
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+                  Benutzer
+                </label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  defaultValue="Birgit"
+                  autoComplete="username"
+                  className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-green-600 focus:outline-none text-sm"
+                  placeholder="Benutzer"
+                  disabled={isPending}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  Passwort
+                </label>
+                <div className="relative">
+                  <input
+                    id="password"
+                    name="password"
+                    type={showPassword ? 'text' : 'password'}
+                    required
+                    autoComplete="current-password"
+                    className="w-full px-3 py-2 pr-10 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-green-600 focus:outline-none text-sm"
+                    placeholder="Passwort"
+                    disabled={isPending}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    tabIndex={-1}
+                    aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+                    className="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-800"
+                  >
+                    {showPassword ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 4.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {state?.error && (
+                <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
+                  {state.error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isPending}
+                className="w-full py-2 px-4 bg-[#86C28B] hover:bg-[#6FB075] text-black font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+              >
+                {isPending ? 'Anmeldung läuft...' : 'Anmelden'}
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+          <div>
+            <a href="mailto:rxf@gmx.de" className="text-green-700 hover:underline">
+              rxf@gmx.de
+            </a>
+          </div>
+          <div className="text-right">
+            Version {version} — {buildDate}
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}
@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation';
+import { getSession } from '@/lib/session';
+import MainClient from './MainClient';
+
+export default async function HomePage() {
+  const session = await getSession();
+  if (!session) redirect('/login');
+
+  return <MainClient username={session.username} />;
+}