feat(time-spent-widget): Time-Spent-Summary-Widget (Today/Week/Month total) sidebar [tsc:fail]

.phase14-state.json

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

GENERATION_LOG.md

@@ -1695,3 +1695,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:51:43` **INFO**   Committed feature quick-add-popover
+- `06:51:43` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: time-spent-widget (2026-05-23 06:51:43)
+
+- `06:51:43` **INFO** Description: Time-Spent-Summary-Widget (Today/Week/Month total) sidebar
+- `06:51:43` **INFO**   Generating apps/web/src/components/TimeSpentSummary.tsx (TimeSpentSummary-Widget. Fetch entries + summarize per period (heute/w…)
+- `06:52:07` **INFO**     wrote 2624 chars in 23.5s (attempt 1)
+- `06:52:07` **INFO** Running tsc --noEmit on api…
+- `06:52:08` **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/TimeSpentSummary.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { 
+  type TimeEntry, 
+  type TimeSpentSummary 
+} from '@emberclone/shared';
+
+interface TimeSpentSummaryProps {
+  dailyTargetHours?: number;
+}
+
+const TimeSpentSummary: React.FC<TimeSpentSummaryProps> = ({ dailyTargetHours = 8 }) => {
+  const { data, isLoading, error } = useQuery<TimeSpentSummary>({
+    queryKey: ['time-spent-summary'],
+    queryFn: async () => {
+      const res = await fetch('/api/time/summary');
+      if (!res.ok) throw new Error('Failed to fetch summary');
+      return res.json();
+    },
+  });
+
+  if (isLoading) return <div className="w-64 p-4 text-sm text-gray-500 animate-pulse">Loading summary...</div>;
+  if (error) return <div className="w-64 p-4 text-sm text-red-500">Error loading summary</div>;
+
+  const periods = [
+    { label: 'Today', value: data?.today || 0, key: 'today' },
+    { label: 'This Week', value: data?.week || 0, key: 'week' },
+    { label: 'This Month', value: data?.month || 0, key: 'month' },
+  ];
+
+  const formatHours = (decimalHours: number) => {
+    const h = Math.floor(decimalHours);
+    const m = Math.round((decimalHours - h) * 60);
+    return `${h}h ${m}m`;
+  };
+
+  return (
+    <div className="w-64 p-4 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm">
+      <h3 className="text-sm font-semibold text-slate-900 dark:text-slate-100 mb-4">Time Spent</h3>
+      <div className="space-y-4">
+        {periods.map((period) => {
+          // For "Today", we compare against dailyTarget. For others, we just show the value.
+          const isToday = period.key === 'today';
+          const percentage = isToday 
+            ? Math.min((period.value / dailyTargetHours) * 100, 100) 
+            : 0;
+
+          return (
+            <div key={period.key} className="space-y-1.5">
+              <div className="flex justify-between text-xs">
+                <span className="text-slate-500 dark:text-slate-400">{period.label}</span>
+                <span className="font-medium text-slate-700 dark:text-slate-300">{formatHours(period.value)}</span>
+              </div>
+              {isToday && (
+                <div className="h-1.5 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
+                  <div 
+                    className="h-full bg-indigo-500 transition-all duration-500 ease-out" 
+                    style={{ width: `${percentage}%` }}
+                  />
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default TimeSpentSummary;