refactor: harden calendar sync and add dashboard widget

webui/package.json

@@ -21,7 +21,7 @@
     "lucide-react": "^1.23.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": ">=7.18.2 <8",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.7.2",
     "vite": "^6.0.6"

webui/src/features/calendar/UpcomingEventsWidget.tsx

@@ -0,0 +1,110 @@
+import { useCallback } from "react";
+import { CalendarDays, MapPin } from "lucide-react";
+import { Link } from "react-router-dom";
+import {
+  DashboardWidgetList,
+  DismissibleAlert,
+  LoadingFrame,
+  useDashboardWidgetData,
+  type ApiSettings,
+  type DashboardWidgetConfiguration
+} from "@govoplan/core-webui";
+import {
+  listCalendarEvents,
+  type CalendarEvent
+} from "../../api/calendar";
+
+export default function UpcomingEventsWidget({
+  settings,
+  refreshKey,
+  configuration
+}: {
+  settings: ApiSettings;
+  refreshKey: number;
+  configuration: DashboardWidgetConfiguration;
+}) {
+  const maxItems = numberSetting(configuration.maxItems, 5, 1, 12);
+  const daysAhead = numberSetting(configuration.daysAhead, 14, 1, 90);
+  const showLocation = configuration.showLocation !== false;
+  const load = useCallback(async () => {
+    const start = new Date();
+    const end = new Date(start);
+    end.setDate(end.getDate() + daysAhead);
+    const response = await listCalendarEvents(settings, {
+      start_at: start.toISOString(),
+      end_at: end.toISOString()
+    });
+    return [...response.events]
+      .filter((event) => event.status !== "cancelled")
+      .sort(
+        (left, right) =>
+          new Date(left.start_at).getTime() - new Date(right.start_at).getTime()
+      )
+      .slice(0, maxItems);
+  }, [daysAhead, maxItems, settings]);
+  const { data: events, loading, error } = useDashboardWidgetData(
+    load,
+    refreshKey
+  );
+
+  return (
+    <LoadingFrame loading={loading} label="Loading upcoming calendar events">
+      {error && (
+        <DismissibleAlert tone="warning" resetKey={error}>
+          {error}
+        </DismissibleAlert>
+      )}
+      <DashboardWidgetList
+        emptyText={`No events in the next ${daysAhead} days.`}
+        items={(events ?? []).map((event) => ({
+          id: event.id,
+          title: event.summary,
+          detail:
+            showLocation && event.location ? (
+              <>
+                <MapPin size={12} aria-hidden="true" /> {event.location}
+              </>
+            ) : undefined,
+          meta: eventTimeLabel(event),
+          leading: <CalendarDays size={17} aria-hidden="true" />,
+          to: "/calendar"
+        }))}
+      />
+      <div className="dashboard-contribution-footer">
+        <Link className="btn btn-secondary" to="/calendar">
+          Open calendar
+        </Link>
+      </div>
+    </LoadingFrame>
+  );
+}
+
+function eventTimeLabel(event: CalendarEvent): string {
+  const start = new Date(event.start_at);
+  if (event.all_day) {
+    return new Intl.DateTimeFormat(undefined, {
+      weekday: "short",
+      day: "2-digit",
+      month: "short"
+    }).format(start);
+  }
+  return new Intl.DateTimeFormat(undefined, {
+    weekday: "short",
+    day: "2-digit",
+    month: "short",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(start);
+}
+
+function numberSetting(
+  value: unknown,
+  fallback: number,
+  minimum: number,
+  maximum: number
+): number {
+  const numeric = typeof value === "number" ? value : Number(value);
+  return Number.isFinite(numeric)
+    ? Math.max(minimum, Math.min(maximum, Math.floor(numeric)))
+    : fallback;
+}

webui/src/module.ts

@@ -1,8 +1,13 @@
 import { createElement, lazy } from "react";
-import type { CalendarPickerUiCapability, PlatformWebModule } from "@govoplan/core-webui";
+import type {
+  CalendarPickerUiCapability,
+  DashboardWidgetsUiCapability,
+  PlatformWebModule
+} from "@govoplan/core-webui";
 import "./styles/calendar.css";
 import { generatedTranslations } from "./i18n/generatedTranslations";
 import CalendarPicker from "./features/calendar/CalendarPicker";
+import UpcomingEventsWidget from "./features/calendar/UpcomingEventsWidget";
 
 const CalendarPage = lazy(() => import("./features/calendar/CalendarPage"));
 
@@ -13,6 +18,60 @@ const translations = {
 };
 
 const calendarPicker: CalendarPickerUiCapability = { CalendarPicker };
+const calendarDashboardWidgets: DashboardWidgetsUiCapability = {
+  widgets: [
+    {
+      id: "calendar.upcoming",
+      surfaceId: "calendar.widget.upcoming",
+      title: "Upcoming events",
+      description: "The next events across visible calendars.",
+      moduleId: "calendar",
+      category: "Planning",
+      order: 40,
+      defaultVisible: false,
+      defaultSize: "medium",
+      supportedSizes: ["medium", "wide"],
+      anyOf: eventRead,
+      refreshIntervalMs: 60_000,
+      defaultConfiguration: {
+        maxItems: 5,
+        daysAhead: 14,
+        showLocation: true
+      },
+      configurationFields: [
+        {
+          id: "maxItems",
+          label: "Maximum events",
+          kind: "number",
+          min: 1,
+          max: 12,
+          step: 1,
+          required: true
+        },
+        {
+          id: "daysAhead",
+          label: "Days ahead",
+          kind: "number",
+          min: 1,
+          max: 90,
+          step: 1,
+          required: true
+        },
+        {
+          id: "showLocation",
+          label: "Show locations",
+          kind: "boolean"
+        }
+      ],
+      render: ({ settings, refreshKey, configuration }) =>
+        createElement(UpcomingEventsWidget, {
+          settings,
+          refreshKey,
+          configuration
+        })
+    }
+  ]
+};
 
 export const calendarModule: PlatformWebModule = {
   id: "calendar",
@@ -21,11 +80,21 @@ export const calendarModule: PlatformWebModule = {
   dependencies: ["access"],
   optionalDependencies: ["mail", "tasks", "scheduling", "appointments", "workflow", "notifications", "dms", "connectors"],
   translations,
+  viewSurfaces: [
+    {
+      id: "calendar.widget.upcoming",
+      moduleId: "calendar",
+      kind: "section",
+      label: "Upcoming events widget",
+      order: 40
+    }
+  ],
   navItems: [{ to: "/calendar", label: "i18n:govoplan-calendar.calendar.adab5090", iconName: "calendar", anyOf: eventRead, order: 55 }],
   routes: [
   { path: "/calendar", anyOf: eventRead, order: 55, render: ({ settings, auth }) => createElement(CalendarPage, { settings, auth }) }],
   uiCapabilities: {
-    "calendar.picker": calendarPicker
+    "calendar.picker": calendarPicker,
+    "dashboard.widgets": calendarDashboardWidgets
   }
 
 };