fix(web): remove mock data from dashboard telemetry/tasks/calendar (#656)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/widgets/CalendarWidget.tsx

@@ -4,61 +4,43 @@
 
 import { useState, useEffect } from "react";
 import { Calendar as CalendarIcon, Clock, MapPin } from "lucide-react";
-import type { WidgetProps } from "@mosaic/shared";
-
-interface Event {
-  id: string;
-  title: string;
-  startTime: string;
-  endTime?: string;
-  location?: string;
-  allDay: boolean;
-}
+import type { WidgetProps, Event } from "@mosaic/shared";
+import { fetchEvents } from "@/lib/api/events";
 
 export function CalendarWidget({ id: _id, config: _config }: WidgetProps): React.JSX.Element {
   const [events, setEvents] = useState<Event[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  // Mock data for now - will fetch from API later
   useEffect(() => {
-    setIsLoading(true);
-    const now = new Date();
-    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
+    let isMounted = true;
 
-    setTimeout(() => {
-      setEvents([
-        {
-          id: "1",
-          title: "Team Standup",
-          startTime: new Date(today.setHours(9, 0, 0, 0)).toISOString(),
-          endTime: new Date(today.setHours(9, 30, 0, 0)).toISOString(),
-          location: "Zoom",
-          allDay: false,
-        },
-        {
-          id: "2",
-          title: "Project Review",
-          startTime: new Date(today.setHours(14, 0, 0, 0)).toISOString(),
-          endTime: new Date(today.setHours(15, 0, 0, 0)).toISOString(),
-          location: "Conference Room A",
-          allDay: false,
-        },
-        {
-          id: "3",
-          title: "Sprint Planning",
-          startTime: new Date(tomorrow.setHours(10, 0, 0, 0)).toISOString(),
-          endTime: new Date(tomorrow.setHours(12, 0, 0, 0)).toISOString(),
-          allDay: false,
-        },
-      ]);
-      setIsLoading(false);
-    }, 500);
+    const loadEvents = async (): Promise<void> => {
+      setIsLoading(true);
+      try {
+        const data = await fetchEvents();
+        if (isMounted) {
+          setEvents(data);
+        }
+      } catch {
+        if (isMounted) {
+          setEvents([]);
+        }
+      } finally {
+        if (isMounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void loadEvents();
+
+    return (): void => {
+      isMounted = false;
+    };
   }, []);
 
-  const formatTime = (dateString: string): string => {
-    const date = new Date(dateString);
+  const formatTime = (dateValue: Date | string): string => {
+    const date = new Date(dateValue);
     return date.toLocaleTimeString("en-US", {
       hour: "numeric",
       minute: "2-digit",
@@ -66,8 +48,8 @@ export function CalendarWidget({ id: _id, config: _config }: WidgetProps): React
     });
   };
 
-  const formatDay = (dateString: string): string => {
-    const date = new Date(dateString);
+  const formatDay = (dateValue: Date | string): string => {
+    const date = new Date(dateValue);
     const today = new Date();
     const tomorrow = new Date(today);
     tomorrow.setDate(tomorrow.getDate() + 1);