feat(project-detail-page): Project-Detail: zeigt Customer + alle TimeEntries des Projek [tsc:ok]

.phase5-state.json

@@ -1,7 +1,8 @@
 {
   "completed_features": [
-    "dark-mode-toggle"
+    "dark-mode-toggle",
+    "customer-detail-page"
   ],
-  "current_feature": "customer-detail-page",
+  "current_feature": "project-detail-page",
   "started_at": "2026-05-23T05:20:11.407108"
 }

GENERATION_LOG.md

@@ -561,3 +561,13 @@ undefined
 - `05:22:17` **INFO**     wrote 5138 chars in 39.8s (attempt 1)
 - `05:22:17` **INFO** Running tsc --noEmit on api…
 - `05:22:18` **INFO**   tsc clean ✓
+- `05:22:18` **INFO**   Committed feature customer-detail-page
+- `05:22:19` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: project-detail-page (2026-05-23 05:22:19)
+
+- `05:22:19` **INFO** Description: Project-Detail: zeigt Customer + alle TimeEntries des Projekts
+- `05:22:19` **INFO**   Generating apps/web/src/pages/ProjectDetail.tsx (ProjectDetail-Page. Header: name + linked customer. Section: TimeEntri…)
+- `05:22:50` **INFO**     wrote 3762 chars in 31.4s (attempt 1)
+- `05:22:50` **INFO** Running tsc --noEmit on api…
+- `05:22:52` **INFO**   tsc clean ✓

apps/web/src/pages/ProjectDetail.tsx

@@ -0,0 +1,88 @@
+import { useQuery } from "@tanstack/react-query"
+import { useParams, Link } from "@tanstack/react-router"
+import { api } from "../lib/api"
+
+export default function ProjectDetail() {
+  const { projectId } = useParams({ strict: false })
+
+  const { data: project, isLoading: projectLoading, isError: projectError } = useQuery({
+    queryKey: ["project", projectId],
+    queryFn: () => api.getProject(projectId!),
+    enabled: !!projectId,
+  })
+
+  const { data: entries, isLoading: entriesLoading } = useQuery({
+    queryKey: ["timeEntries", projectId],
+    queryFn: () => api.listTimeEntries({ projectId: projectId! }),
+    enabled: !!projectId,
+  })
+
+  if (projectLoading || entriesLoading) {
+    return <div className="p-6 text-gray-500">Loading project details...</div>
+  }
+
+  if (projectError || !project) {
+    return <div className="p-6 text-red-500">Project not found or error loading data.</div>
+  }
+
+  const totalHours = entries?.reduce((sum: number, entry: any) => sum + (entry.hours || 0), 0) || 0
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <Link to="/projects" className="text-sm text-blue-600 hover:underline mb-2 block">
+            ← Back to Projects
+          </Link>
+          <h1 className="text-3xl font-bold text-gray-900">{project.name}</h1>
+          <p className="text-gray-500">
+            Customer: <span className="font-medium text-gray-700">{project.customer?.name || "Unknown"}</span>
+          </p>
+        </div>
+        <div className="bg-blue-50 border border-blue-100 px-4 py-3 rounded-lg text-center">
+          <span className="block text-xs font-semibold text-blue-600 uppercase tracking-wider">Total Hours</span>
+          <span className="text-2xl font-bold text-blue-900">{totalHours.toFixed(2)}h</span>
+        </div>
+      </header>
+
+      <section className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+        <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
+          <h2 className="text-lg font-semibold text-gray-800">Time Entries</h2>
+        </div>
+        
+        <div className="overflow-x-auto">
+          <table className="w-full text-left border-collapse">
+            <thead className="bg-gray-50 border-b border-gray-200">
+              <tr>
+                <th className="px-6 py-3 text-sm font-semibold text-gray-600">Date</th>
+                <th className="px-6 py-3 text-sm font-semibold text-gray-600">Description</th>
+                <th className="px-6 py-3 text-sm font-semibold text-gray-600 text-right">Hours</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-100">
+              {entries && entries.length > 0 ? (
+                entries.map((entry: any) => (
+                  <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="px-6 py-4 text-sm text-gray-600">
+                      {new Date(entry.date).toLocaleDateString()}
+                    </td>
+                    <td className="px-6 py-4 text-sm text-gray-800">{entry.description}</td>
+                    <td className="px-6 py-4 text-sm text-gray-800 text-right font-medium">
+                      {entry.hours}h
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={3} className="px-6 py-10 text-center text-gray-400 italic">
+                    No time entries recorded for this project yet.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  )
+}