feat(dashboard-customization): Dashboard-Widget-Order via drag (oder simpler: visibility-to [tsc:fail]
This commit is contained in:
parent
5a3619b2ed
commit
f2c38740b3
@ -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"
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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),
|
||||
delta: delta.toFixed(1),
|
||||
isPositive: delta >= 0
|
||||
}
|
||||
}, [weekEntries, comparisonEntries])
|
||||
return { currentWeekHours, prevWeekHours, diff, percent }
|
||||
}, [weekEntries, comparisonEntries, prevWeekStart, weekStart])
|
||||
|
||||
const chartData = useMemo(() => {
|
||||
if (!chartEntries) return []
|
||||
|
||||
return last7DaysDates.map(date => {
|
||||
const dayEntries = chartEntries.filter(e => e.date === date)
|
||||
const totalHours = dayEntries.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0)
|
||||
|
||||
const d = new Date(date)
|
||||
const dayName = d.toLocaleDateString('de-DE', { weekday: 'short' })
|
||||
|
||||
return {
|
||||
name: dayName,
|
||||
hours: parseFloat(totalHours.toFixed(2)),
|
||||
date
|
||||
const dataMap: Record<string, number> = {}
|
||||
last7DaysDates.forEach(d => dataMap[d] = 0)
|
||||
chartEntries?.forEach(entry => {
|
||||
if (dataMap[entry.date] !== undefined) {
|
||||
dataMap[entry.date] += parseFloat(entry.duration) || 0
|
||||
}
|
||||
})
|
||||
}, [chartEntries])
|
||||
return Object.entries(dataMap).map(([date, hours]) => ({
|
||||
date: date.split("-").slice(1).join("."),
|
||||
hours
|
||||
}))
|
||||
}, [chartEntries, last7DaysDates])
|
||||
|
||||
if (userLoading || todayLoading || weekLoading || chartLoading) {
|
||||
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>
|
||||
)
|
||||
}
|
||||
if (userLoading) return <div className="p-8 text-center">Lade Dashboard...</div>
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto space-y-8">
|
||||
<header className="flex justify-between items-center">
|
||||
<div className="p-6 max-w-7xl mx-auto space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-gray-500">Willkommen zurück, {user?.name}</p>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Willkommen, {user?.name}</h1>
|
||||
<p className="text-gray-500">Hier ist deine Übersicht für heute.</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleExportReport}
|
||||
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"
|
||||
onClick={() => setIsSettingsOpen(true)}
|
||||
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">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="p-2 bg-indigo-100 text-indigo-600 rounded-lg">
|
||||
<Clock size={20} />
|
||||
{visibleWidgets.todayStats && (
|
||||
<div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<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>
|
||||
<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 className="text-3xl font-bold text-gray-900">
|
||||
{todayEntries?.reduce((acc, curr) => acc + (parseFloat(curr.duration) || 0), 0).toFixed(2) || "0.00"}h
|
||||
</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">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="p-2 bg-blue-100 text-blue-600 rounded-lg">
|
||||
<Calendar size={20} />
|
||||
{visibleWidgets.weekStats && (
|
||||
<div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<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>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-3xl font-bold text-gray-900">{stats.currentWeekHours}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 className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-bold text-gray-900">{stats.currentWeekHours.toFixed(2)}h</span>
|
||||
<div className={`flex items-center text-xs font-medium ${stats.diff >= 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{stats.diff >= 0 ? <TrendingUp size={12} className="mr-1" /> : <TrendingDown size={12} className="mr-1" />}
|
||||
{Math.abs(stats.percent).toFixed(1)}%
|
||||
</div>
|
||||
</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">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="p-2 bg-purple-100 text-purple-600 rounded-lg">
|
||||
<FolderKanban size={20} />
|
||||
{visibleWidgets.activeProjects && (
|
||||
<div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<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>
|
||||
<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 className="text-3xl font-bold text-gray-900">
|
||||
{new Set(weekEntries?.map(e => e.projectId)).size || 0}
|
||||
</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="lg:col-span-2 bg-white p-6 rounded-xl border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-6">Stundenverlauf (7 Tage)</h3>
|
||||
<div className="h-80 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
|
||||
<XAxis
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: '#9ca3af', fontSize: 12 }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: '#9ca3af', fontSize: 12 }}
|
||||
/>
|
||||
<Tooltip
|
||||
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={40} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{visibleWidgets.chart && (
|
||||
<div className="lg:col-span-2 p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-6">Zeitverlauf (7 Tage)</h3>
|
||||
<div className="h-64 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f3f4f6" />
|
||||
<XAxis dataKey="date" axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
|
||||
<YAxis axisLine={false} tickLine={false} tick={{fontSize: 12, fill: '#9ca3af'}} />
|
||||
<Tooltip
|
||||
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>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{visibleWidgets.activityFeed && (
|
||||
<div className="p-6 bg-white rounded-xl border border-gray-200 shadow-sm">
|
||||
<ActivityFeed />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user