Edgecom Design System

Sortable

Drag-and-drop lists and boards for reordering items.

List with handles

A reorderable list dragged by explicit handles.

Consumption Overview

Electricity usage across all sites

electricity

Monthly Cost Report

Energy cost breakdown by site

report

Emissions Summary

GHG emissions and net-zero progress

gas

Water Consumption

Submeter water usage trends

water

Peak Demand Widget

Live peak demand by facility

electricity

Nested groups

Reorderable items organized into nested groups.

Commodities

Electricity

Water

Gas

IAQ

Metrics

Consumption

Peak Demand

Emissions

Sites

HQ – Bay Street

Warehouse B

Chiller Plant

Notification priority

Drag notification channels to set their priority order.

Notification Priority

Drag to reorder by priority. Top channels are tried first.

Send alarm notifications via email

Peak Demand Alerts

Notify when demand nears threshold

SMS

Critical alarm text messages

Slack

Post alerts to Slack channels

DR Event Reminders

Notify before demand-response events

Task columns (drag between)

A kanban board where tasks drag between columns.

Pending Tasks

Investigate peak demand alarm at HQ – Bay Street.

Finalize Q3 energy cost report.

Schedule DR event readiness review.

Reconcile submeter data for Warehouse B.

Set net-zero emissions targets by site.

Completed Tasks

Onboard Calgary Plant 2 meters.

Prepare M&V baseline report.

Resolve meter offline alarm at Chiller Plant.

Verify utility bill anomaly for Toronto DC.

Review tariff change for Alberta market.

API reference

Drag-and-drop reordering: Sortable provides context, SortableItem wraps each entry, and SortableOverlay renders the dragged preview.

Anatomy

`Sortable`	Root managing drag context, sensors, and reordering.
`SortableItem`	A draggable list entry, keyed by its value.
`SortableItemHandle`	A grip element that binds the drag listeners.
`SortableOverlay`	Portalled floating preview of the dragged item.