admin
d3718da1f8
Passkey-Login analog zu werte-next: auf der Login-Seite "Mit Passkey anmelden", Verwaltung der eigenen Passkeys im neuen Tab Einstellungen. Das Passwort bleibt als Alternative bestehen. - lib/webauthn.ts, lib/passkeys.ts sowie API-Routen unter /api/passkey - proxy.ts: /api/passkey/authenticate ohne Session erreichbar - TabLayout: dritter Tab Einstellungen (Index-Tabs statt Route wie werte) - RP-Konfiguration ueber AUSGABEN_RP_*, da sich die .env auf dem Server mit anderen Apps teilt, die RP_ID/RP_ORIGIN bereits belegen - Eigene Tabelle ausgaben_passkeys aus demselben Grund: werte-next nutzt in der gemeinsamen Datenbank RXF bereits die Tabelle passkeys - eslint.config.mjs auf die Flat-Config von eslint-config-next umgestellt Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
import LogoutButton from '@/components/LogoutButton';
|
|
import packageJson from '@/package.json';
|
|
|
|
interface Tab {
|
|
label: string;
|
|
index: number;
|
|
}
|
|
|
|
/** Tab-Index der Einstellungen (0/1 sind die Ausgaben-Typen Haushalt/Privat). */
|
|
export const SETTINGS_TAB = 2;
|
|
|
|
interface TabLayoutProps {
|
|
children: ReactNode;
|
|
activeTab: number;
|
|
onTabChange: (index: number) => void;
|
|
}
|
|
|
|
const TABS: Tab[] = [
|
|
{ label: 'Haushalt', index: 0 },
|
|
{ label: 'Privat', index: 1 },
|
|
{ label: 'Einstellungen', index: SETTINGS_TAB },
|
|
];
|
|
|
|
export default function TabLayout({ children, activeTab, onTabChange }: TabLayoutProps) {
|
|
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 py-8 px-4">
|
|
{/* Outer wrapper with border */}
|
|
<div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
|
|
|
|
{/* Page title */}
|
|
<h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Ausgaben - Log</h1>
|
|
|
|
{/* Inner content */}
|
|
<div className="max-w-6xl mx-auto">
|
|
|
|
{/* Tab bar */}
|
|
<div className="flex justify-between items-end">
|
|
<div className="flex">
|
|
{TABS.map(tab => {
|
|
const isActive = activeTab === tab.index;
|
|
return (
|
|
<button
|
|
key={tab.index}
|
|
onClick={() => onTabChange(tab.index)}
|
|
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1 transition-colors"
|
|
style={
|
|
isActive
|
|
? { backgroundColor: '#FFFFDD', color: '#000000', borderColor: '#000000', borderBottom: '2px solid #FFFFDD', marginBottom: '-2px', position: 'relative', zIndex: 10 }
|
|
: { backgroundColor: '#85B7D7', color: '#374151', borderColor: '#000000' }
|
|
}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="pb-1">
|
|
<LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg shadow-md" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content panel */}
|
|
<main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
|
|
{children}
|
|
</main>
|
|
|
|
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
|
|
<a href="mailto:rxf@gmx.de" className="hover:underline">
|
|
mailto:rxf@gmx.de
|
|
</a>
|
|
<div>Version {version} - {buildDate}</div>
|
|
</footer>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|