.

components/ChartsClient.tsx

@@ -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>
   );
 }