feat(breadcrumb-navigation): Breadcrumb-Komponente, top der Detail-Pages [tsc:fail]

.phase13-state.json

@@ -1,5 +1,8 @@
 {
   "completed_features": [],
-  "current_feature": "undo-toast",
+  "current_feature": "breadcrumb-navigation",
-  "started_at": "2026-05-23T06:42:42.473991"
+  "started_at": "2026-05-23T06:42:42.473991",
+  "attempted_features": [
+    "undo-toast"
+  ]
 }

GENERATION_LOG.md

@@ -1578,3 +1578,24 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy
+- `06:43:08` **INFO**   Committed feature undo-toast
+- `06:43:08` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: breadcrumb-navigation (2026-05-23 06:43:08)
+
+- `06:43:08` **INFO** Description: Breadcrumb-Komponente, top der Detail-Pages
+- `06:43:08` **INFO**   Generating apps/web/src/components/Breadcrumb.tsx (Breadcrumb-Component. Props: items: [{label, to?}] (last item ohne to …)
+- `06:43:17` **INFO**     wrote 1079 chars in 8.9s (attempt 1)
+- `06:43:17` **INFO**   Generating apps/web/src/pages/CustomerDetail.tsx (ERWEITERT — behalte alles. Füge <Breadcrumb items={[{label:'Dashboard'…)
+- `06:43:59` **INFO**     wrote 5385 chars in 41.9s (attempt 1)
+- `06:43:59` **INFO**   Generating apps/web/src/pages/ProjectDetail.tsx (ERWEITERT — behalte alles. Füge analog Breadcrumb mit Projects-Pfad.…)
+- `06:44:44` **INFO**     wrote 5201 chars in 45.0s (attempt 1)
+- `06:44:44` **INFO** Running tsc --noEmit on api…
+- `06:44:46` **WARN**   tsc errors:
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTypeProvider>, opts: { ...; }, done: (err?: Error | undefined) => void): void'.
+  Overload 2 of 3, '(plugin: FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginAsync<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, FastifyBaseLogger, FastifyTy

apps/web/src/components/Breadcrumb.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Link } from '@tanstack/react-router';
+
+export type BreadcrumbItem = {
+  label: string;
+  to?: string;
+};
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+}
+
+export default function Breadcrumb({ items }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className="flex items-center space-x-2 text-sm text-gray-500">
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <React.Fragment key={item.label}>
+            {item.to && !isLast ? (
+              <Link
+                to={item.to}
+                className="hover:text-gray-900 transition-colors"
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span className="text-gray-900 font-medium">{item.label}</span>
+            )}
+            
+            {!isLast && (
+              <span className="text-gray-400" aria-hidden="true">
+                &gt;
+              </span>
+            )}
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+}

apps/web/src/pages/CustomerDetail.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { useParams, Link } from "@tanstack/react-router"
 import { api } from "../lib/api"
+import { Breadcrumb } from "../components/Breadcrumb"
 import type { Customer, Project, TimeEntry } from "@emberclone/shared"
 
 export default function CustomerDetail() {
@@ -33,6 +34,14 @@ export default function CustomerDetail() {
 
   return (
     <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <Breadcrumb 
+        items={[
+          { label: 'Dashboard', to: '/' },
+          { label: 'Customers', to: '/customers' },
+          { label: customer.name }
+        ]} 
+      />
+
       <header className="flex justify-between items-start">
         <div>
           <Link to="/customers" className="text-sm text-blue-600 hover:underline mb-2 block">
@@ -89,13 +98,13 @@ export default function CustomerDetail() {
                   {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">
+                        <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-600">
+                        <td className="px-6 py-4 text-sm text-gray-900 font-medium">
-                          {entry.projectName || "Unassigned"}
+                          {entry.projectName || 'Unknown Project'}
                         </td>
-                        <td className="px-6 py-4 text-sm text-gray-900 text-right font-medium">
+                        <td className="px-6 py-4 text-sm text-gray-600 text-right">
                           {entry.hours}h
                         </td>
                       </tr>

apps/web/src/pages/ProjectDetail.tsx

@@ -53,11 +53,14 @@ export default function ProjectDetail() {
 
   return (
     <div className="p-6 max-w-6xl mx-auto space-y-8">
+      <nav className="flex items-center space-x-2 text-sm text-gray-500 mb-4">
+        <Link to="/projects" className="hover:text-blue-600 transition-colors">Projects</Link>
+        <span>/</span>
+        <span className="text-gray-900 font-medium truncate">{project.name}</span>
+      </nav>
+
       <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
-        <div>
+        <div className="space-y-1">
-          <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>
@@ -87,7 +90,7 @@ export default function ProjectDetail() {
                 </BarChart>
               </ResponsiveContainer>
             ) : (
-              <div className="h-full flex items-center justify-center text-gray-400 italic">No data available for chart</div>
+              <div className="h-full flex items-center justify-center text-gray-400 italic">No time entries available for this project.</div>
             )}
           </div>
         </section>
@@ -98,60 +101,16 @@ export default function ProjectDetail() {
             {topContributors.length > 0 ? (
               topContributors.map(([name, hours]) => (
                 <div key={name} className="flex items-center justify-between">
-                  <div className="flex items-center gap-3">
+                  <span className="text-gray-700 font-medium">{name}</span>
-                    <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-xs font-bold text-gray-600">
+                  <span className="text-gray-500 text-sm">{hours.toFixed(2)}h</span>
-                      {name.charAt(0)}
-                    </div>
-                    <span className="text-sm font-medium text-gray-700">{name}</span>
-                  </div>
-                  <span className="text-sm font-semibold text-gray-900">{hours.toFixed(1)}h</span>
                 </div>
               ))
             ) : (
-              <div className="text-center py-8 text-gray-400 italic text-sm">No contributors yet</div>
+              <div className="text-gray-400 italic text-sm">No contributors found.</div>
             )}
           </div>
         </section>
       </div>
-
-      <section className="bg-white rounded-xl 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">
-              {timeEntries.length > 0 ? (
-                timeEntries.map((entry) => (
-                  <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>
   )
 }