admin/werte-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
rxf
2026-03-06 09:14:51 +01:00
parent a27d130eaa
commit 0861368e4e
3 changed files with 81 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/page.tsx
View File

@@ -1,21 +1,16 @@
'use client';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import WerteForm from '@/components/WerteForm';
import WerteList from '@/components/WerteList';
import { WerteEntry } from '@/types/werte';
import packageJson from '@/package.json';
import LogoutButton from '@/components/LogoutButton';
import TabLayout from '@/components/TabLayout';
export default function Home() {
const [entries, setEntries] = useState<WerteEntry[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [selectedEntry, setSelectedEntry] = useState<WerteEntry | null>(null);
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(() => {
let isMounted = true;
@@ -81,23 +76,8 @@ export default function Home() {
};
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-[#FFFFDD]">
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">Werte - Log</h1>
<div className="flex gap-3 items-center">
<Link
href="/charts"
className="px-4 py-2 text-sm rounded-lg transition-colors shadow-md"
style={{ backgroundColor: '#374151', color: '#ffffff' }}
>
{'Verlauf ->'}
</Link>
<LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors shadow-md" />
</div>
</div>
<div className="mb-8">
<TabLayout>
<div className="mb-8">
<h2 className="text-xl font-semibold mb-4">Eingabe</h2>
<WerteForm onSuccess={handleSuccess} selectedEntry={selectedEntry} />
</div>
@@ -111,15 +91,6 @@ export default function Home() {
)}
</div>
<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>
</main>
</div>
</TabLayout>
);
}

22
components/ChartsClient.tsx
View File

@@ -1,12 +1,11 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import type { Options } from 'highcharts';
import { WerteEntry } from '@/types/werte';
import LogoutButton from '@/components/LogoutButton';
import TabLayout from '@/components/TabLayout';
const COLOR_ZUCKER = '#e67e22';
const COLOR_DRUCKS = '#c0392b';
@@ -209,21 +208,7 @@ export default function ChartsClient() {
} as Options;
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-[#FFFFDD]">
{/* Header */}
<div className="flex justify-between items-center mb-6">
<h1 className="text-3xl font-bold">Werte &ndash; Verlauf</h1>
<div className="flex gap-3 items-center">
<Link
href="/"
className="bg-[#85B7D7] hover:bg-[#6a9fc5] px-4 py-2 text-sm rounded-lg transition-colors shadow-md"
>
{'<- Eingabe'}
</Link>
<LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors shadow-md" />
</div>
</div>
<TabLayout>
{/* Date range picker */}
<div className="bg-white border border-black rounded-lg p-4 mb-6 flex flex-wrap gap-4 items-end">
@@ -283,7 +268,6 @@ export default function ChartsClient() {
</div>
</div>
)}
</main>
</div>
</TabLayout>
);
}

74
components/TabLayout.tsx Normal file
View File

@@ -0,0 +1,74 @@
'use client';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import LogoutButton from '@/components/LogoutButton';
import packageJson from '@/package.json';
interface TabLayoutProps {
children: React.ReactNode;
}
const TABS = [
{ href: '/', label: 'Eingabe' },
{ href: '/charts', label: 'Verlauf' },
];
export default function TabLayout({ children }: TabLayoutProps) {
const pathname = usePathname();
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: ~10% wider than the inner max-w-6xl (72rem → ~79rem), 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">Werte-Log</h1>
{/* Inner content constrained to max-w-6xl */}
<div className="max-w-6xl mx-auto">
{/* Tab bar */}
<div className="flex justify-between items-end">
<div className="flex">
{TABS.map(tab => {
const isActive = pathname === tab.href;
return (
<Link
key={tab.href}
href={tab.href}
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}
</Link>
);
})}
</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>
);
}