feat(dashboard-stats): Dashboard mit echten Statistiken statt Placeholder [tsc:fail]

.phase2-state.json

@@ -1,10 +1,11 @@
 {
   "completed_features": [],
-  "current_feature": "router-with-new-pages",
+  "current_feature": "dashboard-stats",
   "started_at": "2026-05-23T04:42:59.289476",
   "attempted_features": [
     "customers-crud",
     "projects-crud",
-    "api-client-extensions"
+    "api-client-extensions",
+    "router-with-new-pages"
   ]
 }

GENERATION_LOG.md

@@ -284,3 +284,31 @@ src/routes/customers.ts(14,49): error TS7006: Parameter 'reply' implicitly has a
 src/routes/customers.ts(22,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
 src/routes/customers.ts(22,27): error TS7006: Parameter 'request' implicitly has an 'any' type.
 src/routes/customers.ts(22,36): error TS7006: Parameter
+- `04:46:07` **INFO**   Committed feature router-with-new-pages
+- `04:46:07` **INFO**   Pushed: rc=0
+- `04:46:07` **WARN** ⚠️  Feature router-with-new-pages partial — moving on
+
+## Feature: dashboard-stats (2026-05-23 04:46:07)
+
+- `04:46:07` **INFO** Description: Dashboard mit echten Statistiken statt Placeholder
+- `04:46:07` **INFO** Files: 1
+- `04:46:07` **INFO**   Generating apps/web/src/pages/Dashboard.tsx (ÜBERARBEITETER Dashboard. Drei Karten oben: (1) 'Heute' — Gesamtstunde…)
+- `04:47:03` **INFO**     wrote 6545 chars in 55.9s (attempt 1)
+- `04:47:03` **INFO** Running tsc --noEmit on api…
+- `04:47:04` **WARN**   tsc errors:
+src/routes/auth.ts(9,11): error TS2339: Property 'post' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(9,33): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(9,42): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/auth.ts(22,27): error TS2339: Property 'jwt' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(44,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(44,29): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(44,38): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/auth.ts(70,11): error TS2339: Property 'post' does not exist on type 'FastifyPluginAsync'.
+src/routes/auth.ts(70,34): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/auth.ts(70,43): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/customers.ts(14,11): error TS2339: Property 'addHook' does not exist on type 'FastifyPluginAsync'.
+src/routes/customers.ts(14,40): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/customers.ts(14,49): error TS7006: Parameter 'reply' implicitly has an 'any' type.
+src/routes/customers.ts(22,11): error TS2339: Property 'get' does not exist on type 'FastifyPluginAsync'.
+src/routes/customers.ts(22,27): error TS7006: Parameter 'request' implicitly has an 'any' type.
+src/routes/customers.ts(22,36): error TS7006: Parameter

apps/web/src/pages/Dashboard.tsx

@@ -1,18 +1,36 @@
 import { useQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { api } from "../lib/api"
+import { Clock, Calendar, FolderKanban, LogOut } from "lucide-react"
 
 export default function Dashboard() {
   const navigate = useNavigate()
 
+  const today = new Date().toISOString().split("T")[0]
+  
+  const getStartOfWeek = () => {
+    const d = new Date()
+    const day = d.getDay()
+    const diff = d.getDate() - day + (day === 0 ? -6 : 1)
+    const start = new Date(d.setDate(diff))
+    return start.toISOString().split("T")[0]
+  }
+
+  const weekStart = getStartOfWeek()
+
   const { data: user, isLoading: userLoading } = useQuery({
     queryKey: ["me"],
     queryFn: () => api.getMe()
   })
 
-  const { data: entries, isLoading: entriesLoading } = useQuery({
+  const { data: todayEntries, isLoading: todayLoading } = useQuery({
     queryKey: ["timeEntries", "today"],
-    queryFn: () => api.listTimeEntries({ date: new Date().toISOString().split("T")[0] })
+    queryFn: () => api.listTimeEntries({ date: today })
+  })
+
+  const { data: weekEntries, isLoading: weekLoading } = useQuery({
+    queryKey: ["timeEntries", "week"],
+    queryFn: () => api.listTimeEntries({ from: weekStart })
   })
 
   const handleLogout = () => {
@@ -20,43 +38,119 @@ export default function Dashboard() {
     navigate({ to: "/login" })
   }
 
-  if (userLoading || entriesLoading) {
+  if (userLoading || todayLoading || weekLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900" />
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600" />
       </div>
     )
   }
 
+  const calcHours = (entries: any[]) => 
+    entries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0) || 0
+
+  const todayHours = calcHours(todayEntries || [])
+  const weekHours = calcHours(weekEntries || [])
+  const activeProjects = new Set((weekEntries || []).map(e => e.projectId)).size
+  const avgDailyHours = (weekHours / 5).toFixed(1)
+
+  const lastFiveEntries = (weekEntries || []).slice(-5).reverse()
+
   return (
     <div className="min-h-screen bg-gray-50 p-6">
       <header className="flex justify-between items-center mb-8 max-w-7xl mx-auto">
-        <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
+        <div>
+          <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
+          <p className="text-sm text-gray-500">Willkommen zurück, {user?.name}!</p>
+        </div>
         <button
           onClick={handleLogout}
-          className="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 transition-colors"
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 transition-colors"
         >
+          <LogOut size={16} />
           Logout
         </button>
       </header>
 
-      <main className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
+      <main className="max-w-7xl mx-auto space-y-8">
-        <div className="col-span-1 md:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-gray-200">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <h2 className="text-xl font-semibold text-gray-700 mb-2">
+          {/* Card 1: Heute */}
-            Hallo, {user?.name || "Benutzer"}!
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex items-start justify-between">
-          </h2>
+            <div>
-          <p className="text-gray-500">
+              <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">Heute</p>
-            Willkommen zurück in deinem EmberClone. Hier ist die Übersicht deiner heutigen Aktivitäten.
+              <div className="mt-2 flex items-baseline gap-2">
-          </p>
+                <span className="text-3xl font-bold text-gray-900">{todayHours.toFixed(2)}h</span>
+                <span className="text-sm text-gray-400">{todayEntries?.length || 0} Einträge</span>
+              </div>
+            </div>
+            <div className="p-3 bg-indigo-50 text-indigo-600 rounded-lg">
+              <Clock size={24} />
+            </div>
+          </div>
+
+          {/* Card 2: Diese Woche */}
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex items-start justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">Diese Woche</p>
+              <div className="mt-2 flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-gray-900">{weekHours.toFixed(2)}h</span>
+                <span className="text-sm text-gray-400">Ø {avgDailyHours}h / Tag</span>
+              </div>
+            </div>
+            <div className="p-3 bg-green-50 text-green-600 rounded-lg">
+              <Calendar size={24} />
+            </div>
+          </div>
+
+          {/* Card 3: Aktive Projekte */}
+          <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex items-start justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-500 uppercase tracking-wider">Aktive Projekte</p>
+              <div className="mt-2 flex items-baseline gap-2">
+                <span className="text-3xl font-bold text-gray-900">{activeProjects}</span>
+                <span className="text-sm text-gray-400">diese Woche</span>
+              </div>
+            </div>
+            <div className="p-3 bg-blue-50 text-blue-600 rounded-lg">
+              <FolderKanban size={24} />
+            </div>
+          </div>
         </div>
 
-        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex flex-col justify-center items-center text-center">
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
-          <span className="text-sm font-medium text-gray-500 uppercase tracking-wider">
+          <div className="px-6 py-4 border-b border-gray-100">
-            Heutige Einträge
+            <h2 className="text-lg font-semibold text-gray-800">Letzte 5 Einträge</h2>
-          </span>
+          </div>
-          <span className="text-5xl font-bold text-indigo-600 mt-2">
+          <div className="overflow-x-auto">
-            {entries?.length || 0}
+            <table className="w-full text-left">
-          </span>
+              <thead className="bg-gray-50 text-xs uppercase text-gray-500 font-medium">
+                <tr>
+                  <th className="px-6 py-3">Datum</th>
+                  <th className="px-6 py-3">Projekt</th>
+                  <th className="px-6 py-3">Beschreibung</th>
+                  <th className="px-6 py-3 text-right">Dauer</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-100">
+                {lastFiveEntries.length > 0 ? (
+                  lastFiveEntries.map((entry) => (
+                    <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
+                      <td className="px-6 py-4 text-sm text-gray-600">{entry.date}</td>
+                      <td className="px-6 py-4 text-sm font-medium text-gray-800">{entry.projectName || "Unbekannt"}</td>
+                      <td className="px-6 py-4 text-sm text-gray-500">{entry.description}</td>
+                      <td className="px-6 py-4 text-sm text-right font-semibold text-gray-700">{entry.duration}h</td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={4} className="px-6 py-8 text-center text-gray-400 text-sm">
+                      Keine aktuellen Einträge gefunden.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </main>
     </div>