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

2026-05-23 04:47:04 +02:00 · 2026-05-23 04:47:04 +02:00 · e4e1d693e1
commit e4e1d693e1
parent 6358b511f4
3 changed files with 146 additions and 23 deletions
--- a/.phase2-state.json
+++ b/.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"
  ]
 }
--- a/GENERATION_LOG.md
+++ b/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
--- a/apps/web/src/pages/Dashboard.tsx
+++ b/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">
+        <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">
-        <div className="col-span-1 md:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-gray-200">
-          <h2 className="text-xl font-semibold text-gray-700 mb-2">
-            Hallo, {user?.name || "Benutzer"}!
-          </h2>
-          <p className="text-gray-500">
-            Willkommen zurück in deinem EmberClone. Hier ist die Übersicht deiner heutigen Aktivitäten.
-          </p>
+      <main className="max-w-7xl mx-auto space-y-8">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Card 1: Heute */}
+          <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">Heute</p>
+              <div className="mt-2 flex items-baseline gap-2">
+                <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>

-        <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200 flex flex-col justify-center items-center text-center">
-          <span className="text-sm font-medium text-gray-500 uppercase tracking-wider">
-            Heutige Einträge
-          </span>
-          <span className="text-5xl font-bold text-indigo-600 mt-2">
-            {entries?.length || 0}
-          </span>
+          {/* 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 rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-100">
+            <h2 className="text-lg font-semibold text-gray-800">Letzte 5 Einträge</h2>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left">
+              <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>