-
+
+ {/* Edit mode toggle — top right */}
+
+ setEditMode(!isEditMode)}
+ />
- {/* Empty state text (D-16) */}
-
- {t('empty')}
-
+ {/* Dashboard grid */}
+
+
+
- {/* Add widget button */}
-
+ {/* Add widget button (edit mode only) */}
+ {isEditMode && (
+
+
+
+ )}
+
+ {/* Widget catalog modal */}
+
setCatalogOpen(false)}
+ onAddWidget={(type: WidgetType) => {
+ addWidget(type);
+ }}
+ />
);
}
diff --git a/apps/web/src/components/dashboard/dashboard-grid.test.tsx b/apps/web/src/components/dashboard/dashboard-grid.test.tsx
index 70c4be7..cd97b6a 100644
--- a/apps/web/src/components/dashboard/dashboard-grid.test.tsx
+++ b/apps/web/src/components/dashboard/dashboard-grid.test.tsx
@@ -1,6 +1,10 @@
import { cleanup, render, screen } from '@testing-library/react';
import { afterEach, describe, expect, it, vi } from 'vitest';
+// Mock CSS imports that vitest cannot resolve
+vi.mock('react-grid-layout/css/styles.css', () => ({}));
+vi.mock('react-resizable/css/styles.css', () => ({}));
+
// Mock next-intl
vi.mock('next-intl', () => ({
useTranslations: (ns: string) => (key: string) => {
diff --git a/apps/web/src/components/dashboard/dashboard-grid.tsx b/apps/web/src/components/dashboard/dashboard-grid.tsx
new file mode 100644
index 0000000..5e15c76
--- /dev/null
+++ b/apps/web/src/components/dashboard/dashboard-grid.tsx
@@ -0,0 +1,129 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { Responsive } from 'react-grid-layout';
+import type { ResponsiveLayouts } from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { useTranslations } from 'next-intl';
+import { WIDGET_CONSTRAINTS, type WidgetType } from './widget-registry';
+import { WidgetWrapper } from './widgets/widget-wrapper';
+
+const BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
+const COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 };
+
+interface DashboardGridProps {
+ layouts: Record
>;
+ widgets: Array<{ id: string; widgetType: string; config: Record }>;
+ isEditMode: boolean;
+ onLayoutChange: (allLayouts: ResponsiveLayouts) => void;
+ onRemoveWidget: (id: string) => void;
+}
+
+/**
+ * Dashboard grid wrapper using react-grid-layout v2 Responsive component.
+ * Renders widgets in a draggable/resizable grid when in edit mode.
+ * Shows empty state when no widgets exist.
+ *
+ * v2 API: uses dragConfig/resizeConfig instead of isDraggable/isResizable.
+ */
+export function DashboardGrid({
+ layouts,
+ widgets,
+ isEditMode,
+ onLayoutChange,
+ onRemoveWidget,
+}: DashboardGridProps) {
+ const t = useTranslations('widgets');
+ const containerRef = useRef(null);
+ const [width, setWidth] = useState(1200);
+
+ // Measure container width (v2 requires explicit width — Pitfall 1)
+ useEffect(() => {
+ if (!containerRef.current) return;
+ const observer = new ResizeObserver((entries) => {
+ setWidth(entries[0].contentRect.width);
+ });
+ observer.observe(containerRef.current);
+ return () => observer.disconnect();
+ }, []);
+
+ // Empty state (D-02)
+ if (widgets.length === 0) {
+ return (
+
+
+
+
+
+ {t('emptyHeading')}
+
+
+ {t('emptyBody')}
+
+
+
onLayoutChange(allLayouts)}
+ >
+ {widgets.map((widget) => {
+ const constraints = WIDGET_CONSTRAINTS[widget.widgetType as WidgetType];
+ return (
+ l.i === widget.id) ?? {
+ x: 0,
+ y: 0,
+ w: constraints?.defaultW ?? 2,
+ h: constraints?.defaultH ?? 2,
+ }),
+ minW: constraints?.minW ?? 2,
+ minH: constraints?.minH ?? 2,
+ }}
+ >
+
+
+ );
+ })}
+
+
+ {/* Backdrop */}
+
+
+ {/* Dialog */}
+
e.stopPropagation()}
+ tabIndex={-1}
+ >
+ {/* Header */}
+
+
+ {t('catalogTitle')}
+
+
+
+
+ {/* 2x2 grid of widget type cards */}
+
+ {WIDGET_TYPES.map((type) => {
+ const def = WIDGET_REGISTRY[type];
+ const Icon = def.icon;
+ return (
+
+ );
+ })}
+
+
+
+ {label}
+
+ );
+}
+
+// --- Icon components (inline SVG, established project pattern) ---
+
+function ClockIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+function SearchIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+function CalendarIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+function NoteIcon({ className }: { className?: string }) {
+ return (
+
+ );
+}
+
+/**
+ * Registry of all widget types. Used by the widget catalog modal
+ * and the grid renderer to look up components and constraints.
+ *
+ * clock: Fully implemented this plan.
+ * search, calendar, note: Placeholder components — implemented in later plans.
+ */
+export const WIDGET_REGISTRY: Record = {
+ clock: {
+ type: 'clock',
+ nameKey: 'clock.name',
+ descriptionKey: 'clock.description',
+ icon: ClockIcon,
+ ...WIDGET_CONSTRAINTS.clock,
+ // Lazy import replaced at module level for clock
+ component: PlaceholderWidget, // Replaced below
+ },
+ search: {
+ type: 'search',
+ nameKey: 'search.name',
+ descriptionKey: 'search.description',
+ icon: SearchIcon,
+ ...WIDGET_CONSTRAINTS.search,
+ component: PlaceholderWidget,
+ },
+ calendar: {
+ type: 'calendar',
+ nameKey: 'calendar.name',
+ descriptionKey: 'calendar.description',
+ icon: CalendarIcon,
+ ...WIDGET_CONSTRAINTS.calendar,
+ component: PlaceholderWidget,
+ },
+ note: {
+ type: 'note',
+ nameKey: 'note.name',
+ descriptionKey: 'note.description',
+ icon: NoteIcon,
+ ...WIDGET_CONSTRAINTS.note,
+ component: PlaceholderWidget,
+ },
+};
+
+// Wire actual ClockWidget lazily to avoid circular deps
+// (import is deferred so widget-registry can be imported by tests without
+// pulling in the entire React tree)
+let clockWired = false;
+export function wireClockWidget(
+ component: ComponentType,
+) {
+ if (!clockWired) {
+ WIDGET_REGISTRY.clock.component = component;
+ clockWired = true;
+ }
+}
diff --git a/apps/web/src/components/dashboard/widgets/clock-widget.tsx b/apps/web/src/components/dashboard/widgets/clock-widget.tsx
new file mode 100644
index 0000000..ce532f0
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/clock-widget.tsx
@@ -0,0 +1,61 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { WidgetProps } from '../widget-registry';
+
+/**
+ * Digital clock widget displaying time in a configurable timezone.
+ * Uses Intl.DateTimeFormat — never computes UTC offsets manually (RESEARCH).
+ *
+ * Config:
+ * - timezone: IANA timezone string (default 'Europe/Berlin')
+ * - showDate: boolean (default false) — show date below time
+ */
+export function ClockWidget({ config }: WidgetProps) {
+ const timezone = (config.timezone as string) || 'Europe/Berlin';
+ const showDate = config.showDate === true;
+
+ const [now, setNow] = useState(() => new Date());
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ setNow(new Date());
+ }, 1000);
+ return () => clearInterval(timer);
+ }, []);
+
+ const timeFormatter = new Intl.DateTimeFormat('de-DE', {
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit',
+ timeZone: timezone,
+ });
+
+ const dateFormatter = new Intl.DateTimeFormat('de-DE', {
+ day: '2-digit',
+ month: 'long',
+ year: 'numeric',
+ timeZone: timezone,
+ });
+
+ return (
+
+
+ {showDate && (
+
+ {dateFormatter.format(now)}
+
+ )}
+
+ );
+}
diff --git a/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx b/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
new file mode 100644
index 0000000..b68c4b6
--- /dev/null
+++ b/apps/web/src/components/dashboard/widgets/widget-wrapper.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { WIDGET_REGISTRY, type WidgetType } from '../widget-registry';
+
+interface WidgetWrapperProps {
+ widget: {
+ id: string;
+ widgetType: string;
+ config: Record;
+ };
+ isEditMode: boolean;
+ onRemove: (id: string) => void;
+}
+
+/**
+ * Wrapper card for all dashboard widgets.
+ * In edit mode: shows drag handle (top) and delete button (top-right).
+ * Renders the actual widget component via WIDGET_REGISTRY lookup.
+ */
+export function WidgetWrapper({ widget, isEditMode, onRemove }: WidgetWrapperProps) {
+ const t = useTranslations('widgets');
+ const definition = WIDGET_REGISTRY[widget.widgetType as WidgetType];
+ const WidgetComponent = definition?.component;
+
+ return (
+
+ {/* Edit mode: drag handle */}
+ {isEditMode && (
+
+ )}
+
+ {/* Edit mode: delete button */}
+ {isEditMode && (
+
+ )}
+
+ {/* Widget body */}
+
+ {WidgetComponent ? (
+
+ ) : (
+
+ {widget.widgetType}
+
+ )}
+
+