feat(customer-detail-page): Customer-Detail: zeigt Projekte + letzte Time-Entries des Ku [tsc:ok]

.phase5-state.json

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

GENERATION_LOG.md

@@ -549,3 +549,15 @@ undefined
 - `05:21:06` **INFO**     wrote 4485 chars in 40.0s (attempt 1)
 - `05:21:06` **INFO** Running tsc --noEmit on api…
 - `05:21:08` **INFO**   tsc clean ✓
+- `05:21:08` **INFO**   Committed feature dark-mode-toggle
+- `05:21:08` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: customer-detail-page (2026-05-23 05:21:08)
+
+- `05:21:08` **INFO** Description: Customer-Detail: zeigt Projekte + letzte Time-Entries des Kunden
+- `05:21:08` **INFO**   Generating apps/api/src/routes/customers.ts (ERWEITERT — behalte CRUD. Füge GET /:id/projects (alle Projekte zum Ku…)
+- `05:21:37` **INFO**     wrote 3254 chars in 29.2s (attempt 1)
+- `05:21:37` **INFO**   Generating apps/web/src/pages/CustomerDetail.tsx (CustomerDetail-Page. Liest customerId aus URL-Param. Zeigt: Customer-H…)
+- `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 ✓

apps/api/src/routes/customers.ts

@@ -1,7 +1,7 @@
 import { FastifyInstance } from "fastify"
 import { db } from "../db"
-import { customers } from "../db/schema"
+import { customers, projects, timeEntries } from "../db/schema"
-import { eq, and } from "drizzle-orm"
+import { eq, and, inArray, desc } from "drizzle-orm"
 import { z } from "zod"
 
 const CustomerSchema = z.object({
@@ -48,6 +48,42 @@ export default async function customerRoutes(fastify: FastifyInstance) {
     return customer
   })
 
+  fastify.get("/:id/projects", async (request, reply) => {
+    const { id } = request.params as { id: string }
+
+    const results = await db
+      .select()
+      .from(projects)
+      .where(eq(projects.customerId, id))
+      .orderBy(projects.name)
+
+    return results
+  })
+
+  fastify.get("/:id/time-entries", async (request, reply) => {
+    const { id } = request.params as { id: string }
+
+    const customerProjects = await db
+      .select({ id: projects.id })
+      .from(projects)
+      .where(eq(projects.customerId, id))
+
+    if (customerProjects.length === 0) {
+      return []
+    }
+
+    const projectIds = customerProjects.map((p) => p.id)
+
+    const results = await db
+      .select()
+      .from(timeEntries)
+      .where(inArray(timeEntries.projectId, projectIds))
+      .orderBy(desc(timeEntries.startTime))
+      .limit(50)
+
+    return results
+  })
+
   fastify.post("/", async (request, reply) => {
     const body = CustomerSchema.parse(request.body)
 

apps/web/src/pages/CustomerDetail.tsx

@@ -0,0 +1,118 @@
+import { useQuery } from "@tanstack/react-query"
+import { useParams, Link } from "@tanstack/react-router"
+import { api } from "../lib/api"
+import type { Customer, Project, TimeEntry } from "@emberclone/shared"
+
+export default function CustomerDetail() {
+  const { customerId } = useParams({ from: "/customers/$customerId" })
+
+  const { data: customer, isLoading: customerLoading, isError: customerError } = useQuery({
+    queryKey: ["customer", customerId],
+    queryFn: () => api.getCustomer(customerId!)
+  })
+
+  const { data: projects, isLoading: projectsLoading } = useQuery({
+    queryKey: ["customerProjects", customerId],
+    queryFn: () => api.getCustomerProjects(customerId!),
+    enabled: !!customerId
+  })
+
+  const { data: entries, isLoading: entriesLoading } = useQuery({
+    queryKey: ["customerEntries", customerId],
+    queryFn: () => api.getCustomerTimeEntries(customerId!),
+    enabled: !!customerId
+  })
+
+  if (customerLoading || projectsLoading || entriesLoading) {
+    return <div className="p-6 text-gray-500">Loading customer details...</div>
+  }
+
+  if (customerError || !customer) {
+    return <div className="p-6 text-red-500">Customer not found or error loading data.</div>
+  }
+
+  return (
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <header className="flex justify-between items-start">
+        <div>
+          <Link to="/customers" className="text-sm text-blue-600 hover:underline mb-2 block">
+            ← Back to Customers
+          </Link>
+          <h1 className="text-3xl font-bold text-gray-900">{customer.name}</h1>
+          <p className="text-gray-500">Customer ID: {customer.id}</p>
+        </div>
+        <div className="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 border border-green-200">
+          Active
+        </div>
+      </header>
+
+      <section className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-1 space-y-6">
+          <div className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
+            <h2 className="text-lg font-semibold mb-4">Projects</h2>
+            {projects && projects.length > 0 ? (
+              <ul className="space-y-3">
+                {projects.map((project: Project) => (
+                  <li key={project.id}>
+                    <Link 
+                      to="/projects/$projectId" 
+                      params={{ projectId: project.id }}
+                      className="block p-3 rounded-md border border-gray-100 bg-gray-50 hover:bg-blue-50 hover:border-blue-200 transition-colors text-sm font-medium text-gray-700 hover:text-blue-700"
+                    >
+                      {project.name}
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            ) : (
+              <p className="text-sm text-gray-500 italic">No projects assigned to this customer.</p>
+            )}
+          </div>
+        </div>
+
+        <div className="lg:col-span-2">
+          <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+            <div className="p-6 border-b border-gray-200">
+              <h2 className="text-lg font-semibold">Recent Time Entries</h2>
+              <p className="text-sm text-gray-500">Showing the last 20 entries</p>
+            </div>
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Date</th>
+                    <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider">Project</th>
+                    <th className="px-6 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider text-right">Hours</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200">
+                  {entries && entries.length > 0 ? (
+                    entries.map((entry: TimeEntry) => (
+                      <tr key={entry.id} className="hover:bg-gray-50 transition-colors">
+                        <td className="px-6 py-4 text-sm text-gray-900">
+                          {new Date(entry.date).toLocaleDateString()}
+                        </td>
+                        <td className="px-6 py-4 text-sm text-gray-600">
+                          {entry.projectName || "Unassigned"}
+                        </td>
+                        <td className="px-6 py-4 text-sm text-gray-900 text-right font-medium">
+                          {entry.hours}h
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan={3} className="px-6 py-10 text-center text-sm text-gray-500 italic">
+                        No time entries found for this customer.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}