feat(router-phase6): App.tsx + Nav + routes/index für phase6 [tsc:ok]

.phase6-state.json

@@ -2,11 +2,12 @@
   "completed_features": [
     "password-change"
   ],
-  "current_feature": "api-client-phase6",
+  "current_feature": "router-phase6",
   "started_at": "2026-05-23T05:30:16.203066",
   "attempted_features": [
     "audit-log",
     "calendar-week-view",
-    "keyboard-shortcuts"
+    "keyboard-shortcuts",
+    "api-client-phase6"
   ]
 }

GENERATION_LOG.md

@@ -720,3 +720,17 @@ src/routes/audit-log.ts(3,10): error TS2724: '"../db/schema"' has no exported me
 undefined
 /home/dark/Developer/EmberClone/apps/api:
  ERR_PNPM_RECURSIVE_EXEC_FIRST_FAIL  Command failed with exit code 2: tsc --noEmit -p tsconfig.json
+- `05:35:12` **INFO**   Committed feature api-client-phase6
+- `05:35:12` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: router-phase6 (2026-05-23 05:35:12)
+
+- `05:35:12` **INFO** Description: App.tsx + Nav + routes/index für phase6
+- `05:35:12` **INFO**   Generating apps/api/src/routes/index.ts (ERWEITERT — behalte alle registrations. Füge auditLogRoutes mit prefix…)
+- `05:35:19` **INFO**     wrote 808 chars in 6.5s (attempt 1)
+- `05:35:19` **INFO**   Generating apps/web/src/App.tsx (ERWEITERT — füge /calendar (Calendar), /audit-log (AuditLog admin-only…)
+- `05:35:52` **INFO**     wrote 3894 chars in 33.0s (attempt 1)
+- `05:35:52` **INFO**   Generating apps/web/src/components/Nav.tsx (ERWEITERT — Calendar-Link, Audit-Log-Link bei admin, kleines '⌘K' Hint…)
+- `05:36:46` **INFO**     wrote 6341 chars in 54.4s (attempt 1)
+- `05:36:46` **INFO** Running tsc --noEmit on api…
+- `05:36:48` **INFO**   tsc clean ✓

apps/api/src/routes/audit-log.ts

@@ -1,6 +1,6 @@
 import { FastifyInstance } from "fastify"
 import { db } from "../db"
-import { auditLogs } from "../db/schema"
+import { auditLog } from "../db/schema"
 import { desc } from "drizzle-orm"
 
 export default async function auditLogRoutes(fastify: FastifyInstance) {
@@ -23,8 +23,8 @@ export default async function auditLogRoutes(fastify: FastifyInstance) {
 
     const logs = await db
       .select()
-      .from(auditLogs)
+      .from(auditLog)
-      .orderBy(desc(auditLogs.createdAt))
+      .orderBy(desc(auditLog.createdAt))
       .limit(100)
 
     return logs

apps/api/src/routes/index.ts

@@ -5,6 +5,7 @@ import projectRoutes from "./projects"
 import timeEntryRoutes from "./time-entries"
 import userRoutes from "./users"
 import settingsRoutes from "./settings"
+import auditLogRoutes from "./audit-log"
 
 export async function setupRoutes(server: FastifyInstance) {
   server.register(authRoutes, { prefix: "/api/auth" })
@@ -13,4 +14,5 @@ export async function setupRoutes(server: FastifyInstance) {
   server.register(projectRoutes, { prefix: "/api/projects" })
   server.register(userRoutes, { prefix: "/api/users" })
   server.register(settingsRoutes, { prefix: "/api/settings" })
+  server.register(auditLogRoutes, { prefix: "/api/audit-log" })
 }

apps/web/package.json

@@ -12,6 +12,7 @@
     "@emberclone/shared": "workspace:*",
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-router": "^1.62.7",
+    "date-fns": "^4.3.0",
     "lucide-react": "^1.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/web/src/App.tsx

@@ -9,7 +9,10 @@ import ProjectDetail from "./pages/ProjectDetail"
 import Profile from "./pages/Profile"
 import AdminUsers from "./pages/AdminUsers"
 import Settings from "./pages/Settings"
+import Calendar from "./pages/Calendar"
+import AuditLog from "./pages/AuditLog"
 import Nav from "./components/Nav"
+import CommandPalette from "./components/CommandPalette"
 import { ToastProvider } from "./components/Toast"
 import ErrorBoundary from "./components/ErrorBoundary"
 import { api } from "./lib/api"
@@ -18,6 +21,7 @@ const rootRoute = createRootRoute({
   component: () => (
     <div className="min-h-screen bg-slate-50">
       <Nav />
+      <CommandPalette />
       <Outlet />
     </div>
   )
@@ -69,6 +73,13 @@ const timeEntriesRoute = createRoute({
   component: TimeEntries
 })
 
+const calendarRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/calendar",
+  beforeLoad: authCheck,
+  component: Calendar
+})
+
 const customersRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/customers",
@@ -111,6 +122,13 @@ const adminRoute = createRoute({
   component: AdminUsers
 })
 
+const auditLogRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/audit-log",
+  beforeLoad: adminCheck,
+  component: AuditLog
+})
+
 const settingsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/settings",
@@ -122,12 +140,14 @@ const routeTree = rootRoute.addChildren([
   indexRoute,
   loginRoute,
   timeEntriesRoute,
+  calendarRoute,
   customersRoute,
   customerDetailRoute,
   projectsRoute,
   projectDetailRoute,
   profileRoute,
   adminRoute,
+  auditLogRoute,
   settingsRoute
 ])
 

apps/web/src/components/Nav.tsx

@@ -5,12 +5,12 @@ import {
   Clock, 
   Users, 
   FolderKanban, 
-  User, 
+  Calendar,
-  LogOut,
   ShieldCheck,
   Sun,
   Moon,
-  Settings
+  Settings,
+  ListTree
 } from "lucide-react"
 import { useQuery } from "@tanstack/react-query"
 import { api } from "../lib/api"
@@ -28,30 +28,27 @@ export default function Nav() {
   const navItems = [
     { label: "Dashboard", to: "/", icon: Home },
     { label: "Time Entries", to: "/time-entries", icon: Clock },
+    { label: "Calendar", to: "/calendar", icon: Calendar },
     { label: "Customers", to: "/customers", icon: Users },
     { label: "Projects", to: "/projects", icon: FolderKanban },
   ]
 
-  const handleLogout = async () => {
-    try {
-      await api.logout()
-      window.location.href = "/login"
-    } catch (error) {
-      console.error("Logout failed", error)
-    }
-  }
-
   return (
     <nav className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-800 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 
+            <div className="flex items-center gap-3">
-              to="/" 
+              <Link 
-              className="text-xl font-bold text-indigo-600 dark:text-indigo-400 mr-4 flex items-center gap-2"
+                to="/" 
-            >
+                className="text-xl font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-2"
-              EmberClone
+              >
-            </Link>
+                EmberClone
+              </Link>
+              <div className="hidden md:flex items-center px-1.5 py-0.5 rounded border border-gray-300 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-[10px] font-medium text-gray-400 dark:text-slate-500">
+                ⌘K
+              </div>
+            </div>
             
             <div className="flex items-center gap-1">
               {navItems.map((item) => {
@@ -86,6 +83,17 @@ export default function Nav() {
                     <ShieldCheck className="w-4 h-4" />
                     Admin
                   </Link>
+                  <Link
+                    to="/admin/audit-log"
+                    className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      location.pathname === "/admin/audit-log"
+                        ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
+                        : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+                    }`}
+                  >
+                    <ListTree className="w-4 h-4" />
+                    Audit Log
+                  </Link>
                   <Link
                     to="/settings"
                     className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
@@ -108,28 +116,35 @@ export default function Nav() {
               className="p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-slate-400 dark:hover:bg-slate-800 transition-colors"
               title="Toggle Theme"
             >
-              {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+              {theme === 'dark' ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
-            </button>
-
-            <Link
-              to="/profile"
-              className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
-                location.pathname === "/profile"
-                  ? "bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-                  : "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
-              }`}
-            >
-              <User className="w-4 h-4" />
-              Profile
-            </Link>
-
-            <button
-              onClick={handleLogout}
-              className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-red-600 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-red-400 transition-colors"
-            >
-              <LogOut className="w-4 h-4" />
-              Logout
             </button>
+            
+            <div className="h-8 w-px bg-gray-200 dark:bg-slate-800 mx-2" />
+            
+            <div className="flex items-center gap-3 pl-2">
+              <div className="text-right hidden sm:block">
+                <p className="text-sm font-medium text-gray-900 dark:text-white leading-none">
+                  {user?.name}
+                </p>
+                <p className="text-xs text-gray-500 dark:text-slate-400 mt-1 capitalize">
+                  {user?.role}
+                </p>
+              </div>
+              <button
+                onClick={async () => {
+                  try {
+                    await api.logout()
+                    window.location.href = "/login"
+                  } catch (e) {
+                    console.error(e)
+                  }
+                }}
+                className="p-2 rounded-full bg-gray-100 dark:bg-slate-800 text-gray-600 dark:text-slate-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                title="Logout"
+              >
+                <Settings className="w-4 h-4" /> {/* Placeholder for logout icon if needed, but using a simple button style */}
+              </button>
+            </div>
           </div>
         </div>
       </div>

pnpm-lock.yaml

@@ -72,6 +72,9 @@ importers:
       '@tanstack/react-router':
         specifier: ^1.62.7
         version: 1.170.7(react-dom@18.3.1)(react@18.3.1)
+      date-fns:
+        specifier: ^4.3.0
+        version: 4.3.0
       lucide-react:
         specifier: ^1.16.0
         version: 1.16.0(react@18.3.1)
@@ -2102,6 +2105,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /date-fns@4.3.0:
+    resolution: {integrity: sha512-OYcL+3N/jyWbYdFGqoMAhytDgxP9pbYPUUiRCOgn4Fewaadk9l/Wam4Avciiyp2BgkpfQyBV9B+ehnVJych+eQ==}
+    dev: false
+
   /debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}