Bileşen Kataloğu
114 React bileşeni, kategorilere göre gruplandırılmıştır.
UI Temel Bileşenler (components/ui/)
shadcn/ui (Radix UI primitives) tabanlı 30+ bileşen:
button, card, dialog, input, label, select, tabs, dropdown-menu, checkbox, radio-group, switch, progress, separator, sheet, alert, alert-dialog, textarea, badge, table, popover, date-range-picker, calendar, form, chart-skeleton, accordion, avatar, slider, tooltip, toast
Layout (components/layout/)
| Bileşen | Açıklama |
|---|---|
dashboard-layout | Ana wrapper: sidebar + header + main content. Responsive (desktop sidebar, mobil drawer) |
hierarchical-sidebar | Bölge/alt bölge ağaç navigasyonu. Collapse/expand, sticky |
mobile-sidebar | Sheet drawer (768px altı). Swipe gesture desteği |
header | Üst bar: logout, kullanıcı bilgisi, bildirim zili, hamburger menü |
Dashboard Widget'ları (components/widgets/)
| Bileşen | Tip | Veri Kaynağı |
|---|---|---|
WidgetRenderer | Dispatch | — |
DeviceReadRateWidget | Statik | API |
ConsumptionChartWidget | Grafik | API |
ConsumptionNumericWidget | Sayısal | API |
CostChartWidget | Grafik | API |
CostNumericWidget | Sayısal | API |
ReactiveGaugeWidget | Gauge | API |
ReactiveNumericWidget | Sayısal | API |
RealtimeValueWidget | Canlı | WebSocket |
RealtimeGaugeWidget | Canlı Gauge | WebSocket |
Realtime3PhaseWidget | 3 Faz | WebSocket |
RealtimePowerWidget | Güç Üçgeni | WebSocket |
AddWidgetDialog | Form | — |
Cihaz Dashboard'ları (components/device-dashboards/)
Sofar Hibrit İnverter
SofarDashboard, BMSIdentityCard, BatteryStatusCard, InverterStatusCard, EnergyFlowDiagram, EnergyStatisticsPanel, PVInputPanel, SafetyParamsCard, SofarControlPanel, TimedChargeEditor, TimeSharingRuleEditor, EnergyModeSelector
MCCB (MTM5M Devre Kesici)
MCCBDashboard, BreakerStatusCard, BreakerControlPanel, ProtectionSettingsPanel, TerminalTemperatures, TripHistoryPanel, MeasurementGaugeCard, MeasurementTrendChart, PowerTrendMini
Varkombi (Reaktif Kompanzasyon)
VarkombiDashboard, VarkombiStatusCard, CompensationStepsPanel, RealtimeMeasurementsPanel, EnergyCountersPanel, PowerFactorPanel, ReactiveRatioPanel
SLD Bileşenleri (components/sld/)
| Bileşen | Açıklama |
|---|---|
SldCanvas | React Flow ana canvas |
DeviceHierarchySldCanvas | Hiyerarşik SLD |
BusbarNode | Busbar/switchboard |
GeneratorNode | Jeneratör |
TransformerNode | Transformatör |
LoadNode | Yük |
BreakerNode | Devre kesici |
AnalyzerNode | Enerji analizörü |
MeterNode | Ölçüm cihazı |
PanelNode | Kontrol paneli |
Zigbee Bileşenleri (components/zigbee/)
ZigbeeGatewayCard, ZigbeeDeviceList, ZigbeeDeviceCard, ZigbeeDeviceCardLive, DeviceControlPanel, EnergyChart, EnergyStats, ConnectionStatus, ZigbeeStatusBadge
Gateway Bileşenleri (components/gateways/)
ShareGatewayDialog, TransferOwnershipDialog, UnclaimGatewayDialog, OTATriggerDialog, OTAHistoryPanel, OTAProgressTracker