Molecules — composed UI building blocks

This page documents the Molecules located in app/frontend/src/components/molecules and gives a concise explanation of each molecule’s responsibility and typical props.

Molecules index

• EventTypeCreateDialog.tsx

  • Purpose: Dialog that guides creation of a new event type (form-driven).
  • Typical props: isOpen | onClose | onCreate | initialValues.
  • Notes: Composes atom inputs and form actions, uses EventTypeCreateDialog styling and validation.

• EventCreationDialog.tsx

  • Purpose: Full event creation dialog for scheduling events.
  • Typical props: isOpen | onClose | onCreate | initialEvent.
  • Notes: Composes recurrence editor, date/time inputs, and molecule-level validation.

• EditCalendarEntityDialog.tsx

  • Purpose: Edit dialog for calendar entities (events/tasks) with shared fields.
  • Typical props: isOpen | entity | onSave | onCancel.
  • Notes: Re-uses atoms and molecules, styles in EditCalendarEntityDialog.scss.

• TaskTypeCreateDialog.tsx

  • Purpose: Dialog to create new task types, similar to EventTypeCreateDialog but for tasks.
  • Typical props: isOpen | onClose | onCreate | initialValues.

• DashboardLayout.tsx

  • Purpose: Layout molecule composing header, sidebar and main content regions for dashboards.
  • Typical props: children | sidebarContent | className.
  • Notes: Uses DashboardLayout.scss for responsive behavior, not a full page but reusable across dashboard routes.

• CalendarTable.tsx

  • Purpose: Renders a calendar grid/table used by calendar views (days/weeks/months).
  • Typical props: events | viewDate | onEventClick | onCellClick | className.
  • Notes: Handles layout and event placement, keep rendering logic test-covered.

• FormActions.tsx

  • Purpose: Small molecule that renders consistent form action buttons (save/cancel) and states.
  • Typical props: onSave | onCancel | isSaving | saveLabel | cancelLabel.
  • Notes: Styles in FormActions.scss, use across dialogs and forms.

• Sidebar.tsx

  • Purpose: Reusable sidebar component providing navigation and contextual controls.
  • Typical props: items | activeItem | onSelect | className.
  • Notes: Uses Sidebar.scss, keep items data-driven and minimal logic in the molecule.

• RoomStatusPanel.tsx

  • Purpose: Dialog panel that displays the real-time status of a room, including ongoing events/tasks, upcoming usage, and task-specific check-in actions.
  • Typical props: open | onClose | roomUUID | roomEvents | roomTasks.
  • Notes:
    • Aggregates event and task timing to determine what’s happening now vs. next.
    • Supports task selection, recurrence display, and conditional check-in actions via QR codes.
    • Integrates permission checks and optionally renders check-in history (CheckInHistoryTable).

• CheckInHistoryTable.tsx

  • Purpose: Displays a compact, read-only table visualizing check-in history for a recurring task over a configurable time window.
  • Required Props: taskUUID.
  • Notes:
    • Derives recurrence occurrences client-side.
    • Supports adjustable history range via multiplier controls