feat(recent-projects-quick-access): Recent-Projects-Widget für schnellen Project-Select [tsc:fail]

.phase16-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "smart-suggestions",
+  "current_feature": "recent-projects-quick-access",
   "started_at": "2026-05-23T07:08:48.804883",
   "attempted_features": [
-    "pinned-customers"
+    "pinned-customers",
+    "smart-suggestions"
   ]
 }

GENERATION_LOG.md

@@ -1920,3 +1920,22 @@ 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
+- `07:12:53` **INFO**   Committed feature smart-suggestions
+- `07:12:53` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: recent-projects-quick-access (2026-05-23 07:12:53)
+
+- `07:12:53` **INFO** Description: Recent-Projects-Widget für schnellen Project-Select
+- `07:12:53` **INFO**   Generating apps/web/src/components/RecentProjects.tsx (RecentProjects-Widget. Zeigt die letzten 5 unique projects aus den let…)
+- `07:13:07` **INFO**     wrote 1617 chars in 14.2s (attempt 1)
+- `07:13:07` **INFO**   Generating apps/web/src/pages/Dashboard.tsx (ERWEITERT — behalte alles. Füge <RecentProjects /> als Section unter S…)
+- `07:15:07` **INFO**     wrote 13742 chars in 120.0s (attempt 1)
+- `07:15:07` **INFO** Running tsc --noEmit on api…
+- `07:15:09` **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/RecentProjects.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useQuickAddModal } from '@/hooks/useQuickAddModal';
+import { fetchRecentProjects } from '@emberclone/shared/api';
+import { Project } from '@emberclone/shared/types';
+import { Clock } from 'lucide-react';
+
+export default function RecentProjects() {
+  const { openQuickAdd } = useQuickAddModal();
+  
+  const { data: projects, isLoading, error } = useQuery({
+    queryKey: ['recent-projects'],
+    queryFn: async () => {
+      const res = await fetchRecentProjects();
+      if (!res.ok) throw new Error('Failed to fetch recent projects');
+      return res.json() as Promise<Project[]>;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-slate-500 animate-pulse">
+        <Clock className="w-4 h-4" />
+        <span>Loading recent projects...</span>
+      </div>
+    );
+  }
+
+  if (error || !projects || projects.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2 mt-2">
+      <div className="flex items-center gap-1.5 text-xs font-medium text-slate-400 mr-1">
+        <Clock className="w-3 h-3" />
+        <span>Recent:</span>
+      </div>
+      {projects.map((project) => (
+        <button
+          key={project.id}
+          onClick={() => openQuickAdd({ projectId: project.id })}
+          className="px-2 py-1 text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 border border-slate-200 rounded-md transition-colors duration-150"
+        >
+          {project.name}
+        </button>
+      ))}
+    </div>
+  );
+}

apps/web/src/pages/Dashboard.tsx

@@ -2,11 +2,44 @@ import { useQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
 import { useMemo, useState, useEffect } from "react"
 import { api } from "../lib/api"
-import { Clock, Calendar, FolderKanban, LogOut, Activity, Download, TrendingUp, TrendingDown, Settings2, X } from "lucide-react"
+import { Clock, Calendar, FolderKanban, LogOut, Activity, Download, TrendingUp, TrendingDown, Settings2, X, ChevronRight } from "lucide-react"
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
 
 type WidgetId = 'todayStats' | 'weekStats' | 'activeProjects' | 'chart' | 'activityFeed'
 
+function RecentProjects() {
+  const { data: projects, isLoading } = useQuery({
+    queryKey: ["projects", "recent"],
+    queryFn: () => api.listProjects({ limit: 5 })
+  })
+
+  if (isLoading) return (
+    <div className="animate-pulse space-y-3">
+      {[...Array(3)].map((_, i) => <div key={i} className="h-16 bg-gray-100 rounded-lg" />)}
+    </div>
+  )
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider flex items-center gap-2">
+        <FolderKanban size={14} /> Aktive Projekte
+      </h3>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+        {projects?.length === 0 && <p className="text-sm text-gray-400 italic">Keine Projekte gefunden</p>}
+        {projects?.map((project: any) => (
+          <div key={project.id} className="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200 hover:border-indigo-300 transition-colors cursor-pointer group">
+            <div className="flex flex-col">
+              <span className="text-sm font-medium text-gray-800 group-hover:text-indigo-600 transition-colors">{project.name}</span>
+              <span className="text-xs text-gray-500">{project.client || 'Intern'}</span>
+            </div>
+            <ChevronRight size={16} className="text-gray-300 group-hover:text-indigo-400" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 function ActivityFeed() {
   const { data: entries, isLoading } = useQuery({
     queryKey: ["timeEntries", "recent"],
@@ -118,187 +151,173 @@ export default function Dashboard() {
     queryFn: () => api.listTimeEntries({ from: prevWeekStart })
   })
 
-  const handleLogout = () => {
+  const todayTotal = useMemo(() => 
-    api.logout()
+    todayEntries?.reduce((acc: number, e: any) => acc + parseFloat(e.duration || 0), 0) || 0, 
-    navigate({ to: "/login" })
+  [todayEntries])
-  }
 
-  const handleExportReport = () => {
+  const weekTotal = useMemo(() => 
-    const from = weekStart
+    weekEntries?.reduce((acc: number, e: any) => acc + parseFloat(e.duration || 0), 0) || 0, 
-    const to = today
+  [weekEntries])
-    window.open(`/api/reports/pdf?from=${from}&to=${to}`, '_blank')
-  }
 
-  const stats = useMemo(() => {
+  const prevWeekTotal = useMemo(() => 
-    const currentWeekHours = weekEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0) || 0
+    comparisonEntries?.reduce((acc: number, e: any) => acc + parseFloat(e.duration || 0), 0) || 0, 
-    const prevWeekHours = comparisonEntries?.reduce((acc, curr) => {
+  [comparisonEntries])
-      const entryDate = new Date(curr.date)
-      const start = new Date(prevWeekStart)
-      const end = new Date(weekStart)
-      if (entryDate >= start && entryDate < end) {
-        return acc + (parseFloat(curr.duration) || 0)
-      }
-      return acc
-    }, 0) || 0
 
-    const diff = currentWeekHours - prevWeekHours
+  const weekDiff = weekTotal - prevWeekTotal
-    const percent = prevWeekHours === 0 ? 0 : (diff / prevWeekHours) * 100
-
-    return { currentWeekHours, prevWeekHours, diff, percent }
-  }, [weekEntries, comparisonEntries, prevWeekStart, weekStart])
 
   const chartData = useMemo(() => {
-    const dataMap: Record<string, number> = {}
+    if (!chartEntries) return []
-    last7DaysDates.forEach(d => dataMap[d] = 0)
+    return last7DaysDates.map(date => {
-    chartEntries?.forEach(entry => {
+      const dayTotal = chartEntries
-      if (dataMap[entry.date] !== undefined) {
+        .filter((e: any) => e.date === date)
-        dataMap[entry.date] += parseFloat(entry.duration) || 0
+        .reduce((acc: number, e: any) => acc + parseFloat(e.duration || 0), 0)
-      }
+      return { date: date.slice(5), hours: dayTotal }
     })
-    return Object.entries(dataMap).map(([date, hours]) => ({
+  }, [chartEntries])
-      date: date.split("-").slice(1).join("."),
-      hours
-    }))
-  }, [chartEntries, last7DaysDates])
 
-  if (userLoading) return <div className="p-8 text-center">Lade Dashboard...</div>
+  if (userLoading) return <div className="p-8 text-center text-gray-500">Lade Dashboard...</div>
 
   return (
-    <div className="p-6 max-w-7xl mx-auto space-y-6">
+    <div className="p-6 max-w-7xl mx-auto space-y-8">
-      <div className="flex justify-between items-center">
+      <header className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Willkommen, {user?.name}</h1>
+          <h1 className="text-2xl font-bold text-gray-900">Willkommen zurück, {user?.name}</h1>
-          <p className="text-gray-500">Hier ist deine Übersicht für heute.</p>
+          <p className="text-gray-500">Hier ist die Übersicht deiner Zeitbuchungen.</p>
         </div>
-        <div className="flex gap-3">
+        <button 
-          <button 
+          onClick={() => setIsSettingsOpen(true)}
-            onClick={() => setIsSettingsOpen(true)}
+          className="p-2 text-gray-400 hover:text-indigo-600 transition-colors"
-            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
+        >
-          >
+          <Settings2 size={20} />
-            <Settings2 size={16} /> Anpassen
+        </button>
-          </button>
+      </header>
-          <button 
-            onClick={handleExportReport}
-            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors"
-          >
-            <Download size={16} /> Export
-          </button>
-          <button 
-            onClick={handleLogout}
-            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 bg-red-50 rounded-lg hover:bg-red-100 transition-colors"
-          >
-            <LogOut size={16} /> Logout
-          </button>
-        </div>
-      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
         {visibleWidgets.todayStats && (
-          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+          <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-            <div className="flex items-center gap-3 mb-4">
+            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg"><Clock size={20} /></div>
+              <div className="p-2 bg-indigo-50 text-indigo-600 rounded-lg">
-              <h3 className="font-semibold text-gray-700">Heute</h3>
+                <Clock size={20} />
+              </div>
+              <span className="text-xs font-medium text-gray-400 uppercase">Heute</span>
             </div>
-            <div className="text-3xl font-bold text-gray-900">
+            <div className="flex items-baseline gap-2">
-              {todayEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0).toFixed(2) || "0.00"}h
+              <span className="text-3xl font-bold text-gray-900">{todayTotal.toFixed(2)}h</span>
+              <span className="text-sm text-gray-500">gebucht</span>
             </div>
-            <p className="text-xs text-gray-400 mt-1">Gebuchte Zeit heute</p>
           </div>
         )}
 
         {visibleWidgets.weekStats && (
-          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+          <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-            <div className="flex items-center gap-3 mb-4">
+            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-green-100 text-green-600 rounded-lg"><Calendar size={20} /></div>
+              <div className="p-2 bg-emerald-50 text-emerald-600 rounded-lg">
-              <h3 className="font-semibold text-gray-700">Diese Woche</h3>
+                <Calendar size={20} />
+              </div>
+              <span className="text-xs font-medium text-gray-400 uppercase">Diese Woche</span>
             </div>
             <div className="flex items-baseline gap-2">
-              <span className="text-3xl font-bold text-gray-900">{stats.currentWeekHours.toFixed(2)}h</span>
+              <span className="text-3xl font-bold text-gray-900">{weekTotal.toFixed(2)}h</span>
-              <div className={`flex items-center text-xs font-medium ${stats.diff >= 0 ? 'text-green-600' : 'text-red-600'}`}>
+              {weekDiff !== 0 && (
-                {stats.diff >= 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
+                <div className={`flex items-center text-xs font-medium ${weekDiff > 0 ? 'text-emerald-600' : 'text-rose-600'}`}>
-                {Math.abs(stats.percent).toFixed(1)}%
+                  {weekDiff > 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
-              </div>
+                  {Math.abs(weekDiff).toFixed(2)}h
+                </div>
+              )}
             </div>
-            <p className="text-xs text-gray-400 mt-1">Im Vergleich zur Vorwoche</p>
           </div>
         )}
 
         {visibleWidgets.activeProjects && (
-          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+          <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-            <div className="flex items-center gap-3 mb-4">
+            <div className="flex items-center justify-between mb-4">
-              <div className="p-2 bg-amber-100 text-amber-600 rounded-lg"><FolderKanban size={20} /></div>
+              <div className="p-2 bg-amber-50 text-amber-600 rounded-lg">
-              <h3 className="font-semibold text-gray-700">Aktive Projekte</h3>
+                <FolderKanban size={20} />
+              </div>
+              <span className="text-xs font-medium text-gray-400 uppercase">Projekte</span>
             </div>
-            <div className="text-3xl font-bold text-gray-900">
+            <div className="flex items-baseline gap-2">
-              {new Set(weekEntries?.map(e => e.projectId)).size || 0}
+              <span className="text-3xl font-bold text-gray-900">
+                {useQuery({ queryKey: ["projects"], queryFn: () => api.listProjects() }).data?.length || 0}
+              </span>
+              <span className="text-sm text-gray-500">aktiv</span>
             </div>
-            <p className="text-xs text-gray-400 mt-1">Projekte in dieser Woche</p>
           </div>
         )}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        {visibleWidgets.chart && (
+        <div className="lg:col-span-2 space-y-8">
-          <div className="lg:col-span-2 p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+          {visibleWidgets.chart && (
-            <h3 className="text-lg font-semibold text-gray-800 mb-6">Zeitverlauf (7 Tage)</h3>
+            <div className="bg-white p-6 rounded-2xl border border-gray-200 shadow-sm">
-            <div className="h-64 w-full">
+              <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-6">Zeitverlauf (7 Tage)</h3>
-              <ResponsiveContainer width="100%" height="100%">
+              <div className="h-64 w-full">
-                <BarChart data={chartData}>
+                <ResponsiveContainer width="100%" height="100%">
-                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
+                  <BarChart data={chartData}>
-                  <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
+                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
-                  <YAxis axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
+                    <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: '#9ca3af' }} />
-                  <Tooltip 
+                    <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: '#9ca3af' }} />
-                    cursor={{fill: '#f9fafb'}} 
+                    <Tooltip 
-                    contentStyle={{borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'}} 
+                      cursor={{ fill: '#f9fafb' }} 
-                  />
+                      contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }} 
-                  <Bar dataKey="hours" fill="#4f46e5" radius={[4, 4, 0, 0]} barSize={30} />
+                    />
-                </BarChart>
+                    <Bar dataKey="hours" fill="#6366f1" radius={[4, 4, 0, 0]} barSize={32} />
-              </ResponsiveContainer>
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
             </div>
-          </div>
+          )}
-        )}
 
-        {visibleWidgets.activityFeed && (
+          <RecentProjects />
-          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+        </div>
-            <ActivityFeed />
+
+        <div className="space-y-8">
+          {visibleWidgets.activityFeed && <ActivityFeed />}
+          
+          <div className="bg-indigo-600 rounded-2xl p-6 text-white shadow-lg shadow-indigo-200">
+            <h3 className="font-bold text-lg mb-2">Exportieren</h3>
+            <p className="text-indigo-100 text-sm mb-4">Lade deine Zeitbuchungen als CSV für die Abrechnung herunter.</p>
+            <button 
+              onClick={() => window.open('/api/time-entries/export', '_blank')}
+              className="w-full py-2 bg-white text-indigo-600 rounded-lg font-semibold text-sm flex items-center justify-center gap-2 hover:bg-indigo-50 transition-colors"
+            >
+              <Download size={16} /> CSV Export
+            </button>
           </div>
-        )}
+        </div>
       </div>
 
       {isSettingsOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 relative">
+          <div className="bg-white rounded-2xl w-full max-w-md p-6 shadow-xl">
-            <button 
+            <div className="flex justify-between items-center mb-6">
-              onClick={() => setIsSettingsOpen(false)}
+              <h2 className="text-xl font-bold text-gray-900">Dashboard anpassen</h2>
-              className="absolute right-4 top-4 p-1 text-gray-400 hover:text-gray-600 transition-colors"
+              <button onClick={() => setIsSettingsOpen(false)} className="text-gray-400 hover:text-gray-600">
-            >
+                <X size={20} />
-              <X size={20} />
+              </button>
-            </button>
+            </div>
-            <h2 className="text-xl font-bold text-gray-900 mb-6">Dashboard anpassen</h2>
             <div className="space-y-4">
               {(Object.keys(visibleWidgets) as WidgetId[]).map((id) => (
-                <label key={id} className="flex items-center justify-between p-3 rounded-lg border border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors">
+                <label key={id} className="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
                   <span className="text-sm font-medium text-gray-700">
                     {id === 'todayStats' && 'Heutige Statistik'}
                     {id === 'weekStats' && 'Wochenstatistik'}
-                    {id === 'activeProjects' && 'Aktive Projekte'}
+                    {id === 'activeProjects' && 'Projekt-Counter'}
                     {id === 'chart' && 'Zeit-Chart'}
                     {id === 'activityFeed' && 'Aktivitäts-Feed'}
                   </span>
                   <input 
                     type="checkbox" 
-                    className="w-4 h-4 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"
+                    checked={visibleWidgets[id]} 
-                    checked={visibleWidgets[id]}
+                    onChange={(e) => saveWidgets({ ...visibleWidgets, [id]: e.target.checked })}
-                    onChange={(e) => {
+                    className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
-                      saveWidgets({ ...visibleWidgets, [id]: e.target.checked })
-                    }}
                   />
                 </label>
               ))}
             </div>
             <button 
               onClick={() => setIsSettingsOpen(false)}
-              className="w-full mt-8 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors"
+              className="w-full mt-8 py-2 bg-indigo-600 text-white rounded-lg font-semibold hover:bg-indigo-700 transition-colors"
             >
               Fertig
             </button>