gemma: generate apps/web/src/pages/Dashboard.tsx

apps/web/src/pages/Dashboard.tsx

@@ -0,0 +1,64 @@
+import { useQuery } from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
+import { api } from "../lib/api"
+
+export default function Dashboard() {
+  const navigate = useNavigate()
+
+  const { data: user, isLoading: userLoading } = useQuery({
+    queryKey: ["me"],
+    queryFn: () => api.getMe()
+  })
+
+  const { data: entries, isLoading: entriesLoading } = useQuery({
+    queryKey: ["timeEntries", "today"],
+    queryFn: () => api.listTimeEntries({ date: new Date().toISOString().split("T")[0] })
+  })
+
+  const handleLogout = () => {
+    api.logout()
+    navigate({ to: "/login" })
+  }
+
+  if (userLoading || entriesLoading) {
+    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>
+    )
+  }
+
+  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>
+        <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"
+        >
+          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>
+        </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>
+        </div>
+      </main>
+    </div>
+  )
+}