feat(router-with-new-pages): Erweitere App.tsx Routes um /customers, /projects + Navigati [tsc:fail]

.phase2-state.json

@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "api-client-extensions",
+  "current_feature": "router-with-new-pages",
   "started_at": "2026-05-23T04:42:59.289476",
   "attempted_features": [
     "customers-crud",
-    "projects-crud"
+    "projects-crud",
+    "api-client-extensions"
   ]
 }

GENERATION_LOG.md

@@ -254,3 +254,33 @@ 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:45:33` **INFO**   Committed feature api-client-extensions
+- `04:45:34` **INFO**   Pushed: rc=0
+- `04:45:34` **WARN** ⚠️  Feature api-client-extensions partial — moving on
+
+## Feature: router-with-new-pages (2026-05-23 04:45:34)
+
+- `04:45:34` **INFO** Description: Erweitere App.tsx Routes um /customers, /projects + Navigation
+- `04:45:34` **INFO** Files: 2
+- `04:45:34` **INFO**   Generating apps/web/src/components/Nav.tsx (Top-Nav-Bar React-Component. Links: Dashboard /, TimeEntries /time-ent…)
+- `04:45:50` **INFO**     wrote 1961 chars in 16.0s (attempt 1)
+- `04:45:50` **INFO**   Generating apps/web/src/App.tsx (ERWEITERTE Router-Setup. Behalte bestehende Routes (/, /login, /time-e…)
+- `04:46:05` **INFO**     wrote 1776 chars in 15.7s (attempt 1)
+- `04:46:05` **INFO** Running tsc --noEmit on api…
+- `04:46:07` **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

apps/web/src/App.tsx

@@ -2,11 +2,15 @@ import { createRootRoute, createRoute, createRouter, RouterProvider, Outlet, red
 import Dashboard from "./pages/Dashboard"
 import Login from "./pages/Login"
 import TimeEntries from "./pages/TimeEntries"
+import Customers from "./pages/Customers"
+import Projects from "./pages/Projects"
+import Nav from "./components/Nav"
 import { api } from "./lib/api"
 
 const rootRoute = createRootRoute({
   component: () => (
     <div className="min-h-screen bg-slate-50">
+      <Nav />
       <Outlet />
     </div>
   )
@@ -18,10 +22,7 @@ const loginRoute = createRoute({
   component: Login
 })
 
-const indexRoute = createRoute({
+const authCheck = async () => {
-  getParentRoute: () => rootRoute,
-  path: "/",
-  beforeLoad: async () => {
   try {
     await api.getMe()
   } catch (error: any) {
@@ -29,29 +30,42 @@ const indexRoute = createRoute({
       throw redirect({ to: "/login" })
     }
   }
-  },
+}
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  beforeLoad: authCheck,
   component: Dashboard
 })
 
 const timeEntriesRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/time-entries",
-  beforeLoad: async () => {
+  beforeLoad: authCheck,
-    try {
-      await api.getMe()
-    } catch (error: any) {
-      if (error.status === 401) {
-        throw redirect({ to: "/login" })
-      }
-    }
-  },
   component: TimeEntries
 })
 
+const customersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/customers",
+  beforeLoad: authCheck,
+  component: Customers
+})
+
+const projectsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/projects",
+  beforeLoad: authCheck,
+  component: Projects
+})
+
 const routeTree = rootRoute.addChildren([
   indexRoute,
   loginRoute,
-  timeEntriesRoute
+  timeEntriesRoute,
+  customersRoute,
+  projectsRoute
 ])
 
 const router = createRouter({

apps/web/src/components/Nav.tsx

@@ -0,0 +1,64 @@
+import React from "react"
+import { Link, useLocation } from "@tanstack/react-router"
+import { api } from "../lib/api"
+
+export default function Nav() {
+  const location = useLocation()
+
+  const navItems = [
+    { label: "Dashboard", to: "/" },
+    { label: "Time Entries", to: "/time-entries" },
+    { label: "Customers", to: "/customers" },
+    { label: "Projects", to: "/projects" },
+  ]
+
+  const handleLogout = async () => {
+    await api.logout()
+    window.location.href = "/login"
+  }
+
+  return (
+    <nav className="bg-white border-b border-gray-200 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16">
+          <div className="flex items-center gap-8">
+            <Link 
+              to="/" 
+              className="text-xl font-bold text-indigo-600 mr-4"
+            >
+              EmberClone
+            </Link>
+            
+            <div className="flex items-center gap-1">
+              {navItems.map((item) => {
+                const isActive = location.pathname === item.to
+                return (
+                  <Link
+                    key={item.to}
+                    to={item.to}
+                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive 
+                        ? "bg-indigo-50 text-indigo-700" 
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                )
+              })}
+            </div>
+          </div>
+
+          <div className="flex items-center">
+            <button
+              onClick={handleLogout}
+              className="text-sm font-medium text-gray-500 hover:text-red-600 transition-colors px-3 py-2"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}