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 bildirimleri shadcn bileşeni değildir; uygulama genelinde Sonner kullanılır (toast.success/error/info, renderer providers.tsx içindeki <Toaster>).
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 | Anlık | API (son 60 dk) |
RealtimeGaugeWidget | Anlık Gauge | API (son 60 dk) |
Realtime3PhaseWidget | 3 Faz | API (son 60 dk) |
RealtimePowerWidget | Güç Üçgeni | API (son 60 dk) |
OsosConsumptionChartWidget | Grafik | OSOS API (/api/osos/aggregated) |
MahsuplasmaBalanceWidget | Özet | Mahsuplaşma API (dashboard-summary) |
AddWidgetDialog | Form | — |
Veri yolu (düzeltme, 2026-07-29): "Realtime" widget'lar WebSocket
kullanmaz — veri, alt bölge sayfasında tek toplu istekle
(GET /api/subregions/{id}/widgets/data) veya tekil kullanımda per-widget
/api/widgets/{id}/data/* ucuyla HTTP üzerinden çekilir ve widget'ın
refresh_interval değerine göre tazelenir (useWidgetData). "Anlık" olması
verinin taze olmasından gelir: bu dört widget yalnızca son 60 dakika
içindeki ölçümü gösterir; daha eskisinde değer null + device_status
offline döner. Ayrıntı: docs-site/docs/api-reference/endpoints.md → Widgets.
Dönem etiketi istemcide üretilir: components/widgets/widgetPeriod.ts hem
efektif dönemi (getWidgetPeriod: config.period → time_range → 7d) hem de
ekrana yazılacak etiketi (formatWidgetPeriodLabel) tek yerden verir.
Yanıttaki period_label alanı sunucuda yalnız Türkçe üretilir
(Accept-Language ile değişmez), bu yüzden doğrudan ekrana basılmaz — i18n
anahtarı (widgets.period.*) kullanılır, alan yalnızca yedek metindir. Yeni bir
dönem eklenirken sözlük widgetPeriod.ts içinde genişletilir; Record<PeriodType,…>
olduğu için karşılığı yazılmadan derleme geçmez.
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