feat(dashboard-customization): Dashboard-Widget-Order via drag (oder simpler: visibility-to [tsc:fail]

.phase14-state.json

@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "time-spent-widget",
+  "current_feature": "dashboard-customization",
   "started_at": "2026-05-23T06:49:38.915806",
   "attempted_features": [
     "markdown-editor",
-    "quick-add-popover"
+    "quick-add-popover",
+    "time-spent-widget"
   ]
 }

GENERATION_LOG.md

@@ -1712,3 +1712,20 @@ 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:52:08` **INFO**   Committed feature time-spent-widget
+- `06:52:09` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: dashboard-customization (2026-05-23 06:52:09)
+
+- `06:52:09` **INFO** Description: Dashboard-Widget-Order via drag (oder simpler: visibility-toggles in Settings)
+- `06:52:09` **INFO**   Generating apps/web/src/pages/Dashboard.tsx (ERWEITERT — behalte alles. Füge oben rechts ein 'Anpassen'-Button: öff…)
+- `06:54:01` **INFO**     wrote 12695 chars in 112.4s (attempt 1)
+- `06:54:01` **INFO** Running tsc --noEmit on api…
+- `06:54:03` **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/pages/Dashboard.tsx

@@ -1,10 +1,12 @@
 import { useQuery } from "@tanstack/react-query"
 import { useNavigate } from "@tanstack/react-router"
-import { useMemo } from "react"
+import { useMemo, useState, useEffect } from "react"
 import { api } from "../lib/api"
-import { Clock, Calendar, FolderKanban, LogOut, Activity, Download, TrendingUp, TrendingDown } from "lucide-react"
+import { Clock, Calendar, FolderKanban, LogOut, Activity, Download, TrendingUp, TrendingDown, Settings2, X } from "lucide-react"
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
 
+type WidgetId = 'todayStats' | 'weekStats' | 'activeProjects' | 'chart' | 'activityFeed'
+
 function ActivityFeed() {
   const { data: entries, isLoading } = useQuery({
     queryKey: ["timeEntries", "recent"],
@@ -40,6 +42,30 @@ function ActivityFeed() {
 
 export default function Dashboard() {
   const navigate = useNavigate()
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [visibleWidgets, setVisibleWidgets] = useState<Record<WidgetId, boolean>>({
+    todayStats: true,
+    weekStats: true,
+    activeProjects: true,
+    chart: true,
+    activityFeed: true,
+  })
+
+  useEffect(() => {
+    const saved = localStorage.getItem('dashboard_widgets')
+    if (saved) {
+      try {
+        setVisibleWidgets(JSON.parse(saved))
+      } catch (e) {
+        console.error("Failed to parse dashboard widgets", e)
+      }
+    }
+  }, [])
+
+  const saveWidgets = (newWidgets: Record<WidgetId, boolean>) => {
+    setVisibleWidgets(newWidgets)
+    localStorage.setItem('dashboard_widgets', JSON.stringify(newWidgets))
+  }
 
   const today = new Date().toISOString().split("T")[0]
   
@@ -105,7 +131,6 @@ export default function Dashboard() {
 
   const stats = useMemo(() => {
     const currentWeekHours = weekEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0) || 0
-    
     const prevWeekHours = comparisonEntries?.reduce((acc, curr) => {
       const entryDate = new Date(curr.date)
       const start = new Date(prevWeekStart)
@@ -116,152 +141,170 @@ export default function Dashboard() {
       return acc
     }, 0) || 0
 
-    const delta = prevWeekHours === 0 ? 0 : ((currentWeekHours - prevWeekHours) / prevWeekHours) * 100
+    const diff = currentWeekHours - prevWeekHours
-    
+    const percent = prevWeekHours === 0 ? 0 : (diff / prevWeekHours) * 100
-    return {
+
-      currentWeekHours: currentWeekHours.toFixed(2),
+    return { currentWeekHours, prevWeekHours, diff, percent }
-      delta: delta.toFixed(1),
+  }, [weekEntries, comparisonEntries, prevWeekStart, weekStart])
-      isPositive: delta >= 0
-    }
-  }, [weekEntries, comparisonEntries])
 
   const chartData = useMemo(() => {
-    if (!chartEntries) return []
+    const dataMap: Record<string, number> = {}
-    
+    last7DaysDates.forEach(d => dataMap[d] = 0)
-    return last7DaysDates.map(date => {
+    chartEntries?.forEach(entry => {
-      const dayEntries = chartEntries.filter(e => e.date === date)
+      if (dataMap[entry.date] !== undefined) {
-      const totalHours = dayEntries.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0)
+        dataMap[entry.date] += parseFloat(entry.duration) || 0
-      
-      const d = new Date(date)
-      const dayName = d.toLocaleDateString('de-DE', { weekday: 'short' })
-      
-      return {
-        name: dayName,
-        hours: parseFloat(totalHours.toFixed(2)),
-        date
       }
     })
-  }, [chartEntries])
+    return Object.entries(dataMap).map(([date, hours]) => ({
+      date: date.split("-").slice(1).join("."),
+      hours
+    }))
+  }, [chartEntries, last7DaysDates])
 
-  if (userLoading || todayLoading || weekLoading || chartLoading) {
+  if (userLoading) return <div className="p-8 text-center">Lade Dashboard...</div>
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600" />
-      </div>
-    )
-  }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto space-y-8">
+    <div className="p-6 max-w-7xl mx-auto space-y-6">
-      <header className="flex justify-between items-center">
+      <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
+          <h1 className="text-2xl font-bold text-gray-900">Willkommen, {user?.name}</h1>
-          <p className="text-gray-500">Willkommen zurück, {user?.name}</p>
+          <p className="text-gray-500">Hier ist deine Übersicht für heute.</p>
         </div>
         <div className="flex gap-3">
           <button 
-            onClick={handleExportReport}
+            onClick={() => setIsSettingsOpen(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 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"
           >
-            <Download size={16} /> Export PDF
+            <Settings2 size={16} /> Anpassen
+          </button>
+          <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-4 py-2 bg-red-50 text-red-600 rounded-lg text-sm font-medium hover:bg-red-100 transition-colors"
+            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>
-      </header>
+      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+        {visibleWidgets.todayStats && (
-          <div className="flex items-center gap-4 mb-4">
+          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg">
+            <div className="flex items-center gap-3 mb-4">
-              <Clock size={20} />
+              <div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg"><Clock size={20} /></div>
+              <h3 className="font-semibold text-gray-700">Heute</h3>
             </div>
-            <span className="text-sm font-medium text-gray-500">Heute</span>
+            <div className="text-3xl font-bold text-gray-900">
-          </div>
+              {todayEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0).toFixed(2) || "0.00"}h
-          <div className="flex flex-col">
-            <span className="text-3xl font-bold text-gray-900">
-              {todayEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0).toFixed(2)}h
-            </span>
-            <div className="flex items-center gap-1 mt-2 text-xs font-medium">
-              {stats.isPositive ? <TrendingUp size={12} className="text-green-500" /> : <TrendingDown size={12} className="text-red-500" />}
-              <span className={stats.isPositive ? "text-green-600" : "text-red-600"}>
-                vs. Vorwoche: {stats.isPositive ? "+" : ""}{stats.delta}%
-              </span>
             </div>
+            <p className="text-xs text-gray-400 mt-1">Gebuchte Zeit heute</p>
           </div>
-        </div>
+        )}
 
-        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+        {visibleWidgets.weekStats && (
-          <div className="flex items-center gap-4 mb-4">
+          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="p-2 bg-blue-100 text-blue-600 rounded-lg">
+            <div className="flex items-center gap-3 mb-4">
-              <Calendar size={20} />
+              <div className="p-2 bg-green-100 text-green-600 rounded-lg"><Calendar size={20} /></div>
+              <h3 className="font-semibold text-gray-700">Diese Woche</h3>
             </div>
-            <span className="text-sm font-medium text-gray-500">Diese Woche</span>
+            <div className="flex items-baseline gap-2">
-          </div>
+              <span className="text-3xl font-bold text-gray-900">{stats.currentWeekHours.toFixed(2)}h</span>
-          <div className="flex flex-col">
+              <div className={`flex items-center text-xs font-medium ${stats.diff >= 0 ? 'text-green-600' : 'text-red-600'}`}>
-            <span className="text-3xl font-bold text-gray-900">{stats.currentWeekHours}h</span>
+                {stats.diff >= 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
-            <div className="flex items-center gap-1 mt-2 text-xs font-medium">
+                {Math.abs(stats.percent).toFixed(1)}%
-              {stats.isPositive ? <TrendingUp size={12} className="text-green-500" /> : <TrendingDown size={12} className="text-red-500" />}
+              </div>
-              <span className={stats.isPositive ? "text-green-600" : "text-red-600"}>
-                vs. Vorwoche: {stats.isPositive ? "+" : ""}{stats.delta}%
-              </span>
             </div>
+            <p className="text-xs text-gray-400 mt-1">Im Vergleich zur Vorwoche</p>
           </div>
-        </div>
+        )}
 
-        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+        {visibleWidgets.activeProjects && (
-          <div className="flex items-center gap-4 mb-4">
+          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
-            <div className="p-2 bg-purple-100 text-purple-600 rounded-lg">
+            <div className="flex items-center gap-3 mb-4">
-              <FolderKanban size={20} />
+              <div className="p-2 bg-amber-100 text-amber-600 rounded-lg"><FolderKanban size={20} /></div>
+              <h3 className="font-semibold text-gray-700">Aktive Projekte</h3>
             </div>
-            <span className="text-sm font-medium text-gray-500">Aktive Projekte</span>
+            <div className="text-3xl font-bold text-gray-900">
-          </div>
+              {new Set(weekEntries?.map(e => e.projectId)).size || 0}
-          <div className="flex flex-col">
-            <span className="text-3xl font-bold text-gray-900">
-              {new Set(weekEntries?.map(e => e.projectId)).size}
-            </span>
-            <div className="flex items-center gap-1 mt-2 text-xs font-medium text-gray-400">
-              Stabil im Vergleich zur Vorwoche
             </div>
+            <p className="text-xs text-gray-400 mt-1">Projekte in dieser Woche</p>
           </div>
-        </div>
+        )}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <div className="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+        {visibleWidgets.chart && (
-          <h3 className="text-lg font-semibold text-gray-900 mb-6">Stundenverlauf (7 Tage)</h3>
+          <div className="lg:col-span-2 p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
-          <div className="h-80 w-full">
+            <h3 className="text-lg font-semibold text-gray-800 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 
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
-                  dataKey="name" 
+                  <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
-                  axisLine={false} 
+                  <YAxis axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
-                  tickLine={false} 
+                  <Tooltip 
-                  tick={{ fill: '#9ca3af', fontSize: 12 }} 
+                    cursor={{fill: '#f9fafb'}} 
-                />
+                    contentStyle={{borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'}} 
-                <YAxis 
+                  />
-                  axisLine={false} 
+                  <Bar dataKey="hours" fill="#4f46e5" radius={[4, 4, 0, 0]} barSize={30} />
-                  tickLine={false} 
+                </BarChart>
-                  tick={{ fill: '#9ca3af', fontSize: 12 }} 
+              </ResponsiveContainer>
-                />
+            </div>
-                <Tooltip 
+          </div>
-                  cursor={{ fill: '#f9fafb' }}
+        )}
-                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
+
-                />
+        {visibleWidgets.activityFeed && (
-                <Bar dataKey="hours" fill="#4f46e5" radius={[4, 4, 0, 0]} barSize={40} />
+          <div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
-              </BarChart>
+            <ActivityFeed />
-            </ResponsiveContainer>
+          </div>
+        )}
+      </div>
+
+      {isSettingsOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 relative">
+            <button 
+              onClick={() => setIsSettingsOpen(false)}
+              className="absolute right-4 top-4 p-1 text-gray-400 hover:text-gray-600 transition-colors"
+            >
+              <X size={20} />
+            </button>
+            <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">
+                  <span className="text-sm font-medium text-gray-700">
+                    {id === 'todayStats' && 'Heutige Statistik'}
+                    {id === 'weekStats' && 'Wochenstatistik'}
+                    {id === 'activeProjects' && 'Aktive Projekte'}
+                    {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]}
+                    onChange={(e) => {
+                      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"
+            >
+              Fertig
+            </button>
           </div>
         </div>
-        <div className="bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
+      )}
-          <ActivityFeed />
-        </div>
-      </div>
     </div>
   )
 }