Mit grafischer Auswertung

app/api/werte/route.ts

@@ -9,9 +9,20 @@ export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams;
     const limit = parseInt(searchParams.get('limit') || '10', 10);
-    
-    const sql = `SELECT ID, DATE_FORMAT(Datum, '%Y-%m-%d') as Datum, Zeit, Zucker, Essen, Gewicht, DruckD, DruckS, Puls FROM ${TABLE} ORDER BY Datum DESC, Zeit DESC LIMIT ${limit}`;
-    const rows = await query(sql);
+    const from = searchParams.get('from');
+    const to = searchParams.get('to');
+
+    let sql: string;
+    let params: (string | number)[] = [];
+
+    if (from && to) {
+      sql = `SELECT ID, DATE_FORMAT(Datum, '%Y-%m-%d') as Datum, Zeit, Zucker, Essen, Gewicht, DruckD, DruckS, Puls FROM ${TABLE} WHERE Datum BETWEEN ? AND ? ORDER BY Datum ASC, Zeit ASC`;
+      params = [from, to];
+    } else {
+      sql = `SELECT ID, DATE_FORMAT(Datum, '%Y-%m-%d') as Datum, Zeit, Zucker, Essen, Gewicht, DruckD, DruckS, Puls FROM ${TABLE} ORDER BY Datum DESC, Zeit DESC LIMIT ${limit}`;
+    }
+
+    const rows = await query(sql, params);
     
     return NextResponse.json(
       { success: true, data: rows },

app/charts/page.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const ChartsClient = dynamic(() => import('@/components/ChartsClient'), {
+  ssr: false,
+  loading: () => (
+    <div className="min-h-screen bg-white flex items-center justify-center">
+      <span className="text-gray-500">Lade Grafiken…</span>
+    </div>
+  ),
+});
+
+export default function ChartsPage() {
+  return <ChartsClient />;
+}

app/globals.css

@@ -1,5 +1,7 @@
 /* stylelint-disable at-rule-no-unknown */
 @import "tailwindcss";
+@source "../components/**/*.tsx";
+@source "../app/**/*.tsx";
 
 :root {
   --background: #ffffff;

app/page.tsx

@@ -1,6 +1,7 @@
 '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';
@@ -84,7 +85,16 @@ export default function Home() {
       <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>
-          <LogoutButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm rounded-lg transition-colors shadow-md" />
+          <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">