{t(language, "loading")}…

; } function LoginPage({ language, theme, form, onChange, onSubmit, onThemeToggle, onLanguageToggle, loading, error }: { language: Language; theme: ThemeMode; form: { username: string; password: string }; onChange: (value: { username: string; password: string }) => void; onSubmit: () => void; onThemeToggle: () => void; onLanguageToggle: () => void; loading: boolean; error: string | null; }) { return

{t(language, "loginTitle")}

{t(language, "loginSubtitle")}

{t(language, "username")} onChange({ ...form, username: event.target.value })} autoComplete="username" />

{t(language, "password")} onChange({ ...form, password: event.target.value })} autoComplete="current-password" onKeyDown={(event) => event.key === "Enter" && onSubmit()} />

{error ?

{error}

: null}

; } function NavItem({ icon, active, onClick, label }: { icon: ReactElement; active: boolean; onClick: () => void; label: string }) { return

; } function PageHeader({ title, subtitle, children }: { title: string; subtitle: string; children?: ReactNode }) { return

PV Insight

{title}

{subtitle}

{children ?

{children}

: null}

; } function SegmentedSelect({ label, value, onChange, options }: { label: string; value: string; onChange: (value: string) => void; options: Array<{ key: string; label: string }> }) { return

{label}

{options.map((option) => )}

; } function HeroCards({ cards, locale, language }: { cards: SnapshotPayload["hero_cards"]; locale: string; language: Language }) { return

{cards.map((card) =>

{iconForMetric(card.metric_id)}{card.unit || "live"}

{labelForMetric(language, card.metric_id, card.label)}

{formatValue(card.value, card.unit, card.unit === "kWh" ? 2 : 2, locale)}

{card.subtitle}

)}

; } function QuickMetrics({ metrics, locale, language }: { metrics: MetricValue[]; locale: string; language: Language }) { return

{t(language, "quickMetrics")}

{metrics.map((metric) =>

{iconForMetric(metric.metric_id)}

{labelForMetric(language, metric.metric_id, metric.label)}

{metric.unit || t(language, "status")}

{formatValue(metric.value, metric.unit, 2, locale)}

)}

; } function LiveHistoryPanel({ data, language, theme, title, subtitle }: { data?: HistoryPayload; language: Language; theme: ThemeMode; title: string; subtitle: string }) { return

{title}

{subtitle}

; } function StatusPanel({ metrics, locale, language }: { metrics: MetricValue[]; locale: string; language: Language }) { return

{t(language, "systemStatus")}

{metrics.map((metric) =>

{labelForMetric(language, metric.metric_id, metric.label)}

{metric.unit || t(language, "status")}

{formatValue(metric.value, metric.unit, 2, locale)}

)}

; } function StringsPanel({ rows, locale, language }: { rows: SnapshotGroupRow[]; locale: string; language: Language }) { return

{t(language, "strings")}

{rows.length === 0 ?

{t(language, "noDataDescription")}

: rows.map((row) =>

{row.label}

{Object.values(row.values).map((metric) =>

{labelForMetric(language, metric.metric_id, metric.label)}{formatValue(metric.value, metric.unit, 2, locale)}

)}

; } function SummaryCards({ summary, language, locale, compareLabel }: { summary?: AnalyticsPayload["summary"]; language: Language; locale: string; compareLabel: string }) { const items = [{ key: t(language, "summaryTotal"), value: formatValue(summary?.total, summary?.unit ?? "kWh", 2, locale), badge: compareLabel }, { key: t(language, "summaryAverage"), value: formatValue(summary?.average_bucket, summary?.unit ?? "kWh", 2, locale) }, { key: t(language, "summaryBest"), value: summary ? `${summary.best_bucket_label} · ${formatValue(summary.best_bucket_value, summary.unit, 2, locale)}` : "--" }, { key: t(language, "summaryCo2"), value: formatValue(summary?.co2_saved_kg, "kg", 1, locale) }]; return

{items.map((item) =>

{item.key}

{item.value}

{item.badge ?

{item.badge}

: null}

)}

; } function ProductionPanel({ data, language, theme }: { data?: AnalyticsPayload; language: Language; theme: ThemeMode }) { return

{t(language, "chartProduction")}

{t(language, "chartProductionSubtitle")}

; } function ComparisonPanel({ data, language, theme }: { data?: AnalyticsPayload; language: Language; theme: ThemeMode }) { return

{t(language, "chartComparison")}

; } function DistributionPanel({ data, language, theme, locale }: { data?: DistributionPayload; language: Language; theme: ThemeMode; locale: string }) { return

{t(language, "chartDistribution")}

{formatValue(data?.total, data?.unit ?? "kWh", 2, locale)}

; } function HistoricalPanel({ status, language, locale, compact = false }: { status?: HistoricalStatus; language: Language; locale: string; compact?: boolean }) { if (!status) return

{t(language, "noDataDescription")}

; return

{language === "en" ? "Data warehouse" : "Hurtownia danych"}

{t(language, "importArchiveSubtitle")}

{!compact ? <>

{t(language, "activeChunk")}{status.active_chunk_index}/{status.total_chunks}

{status.recent_chunks.map((chunk) => )}

{t(language, "recentChunks")}	{t(language, "status")}	kWh
#{chunk.chunk_index} {chunk.start_date} → {chunk.end_date}	{chunk.state}	{formatValue(chunk.energy_kwh, "kWh", 2, locale)}

{status.recent_events.map((event, index) =>

{event.title}

{event.message}

{formatShortTime(event.timestamp, locale)}

)}

: null}

; } function StatusStat({ label, value }: { label: string; value: string }) { return

{label}

{value}

; } function ImportControls({ status, language, onStart, onSyncNow, onCancel }: { status?: HistoricalStatus; language: Language; onStart: (payload: { start_date?: string; end_date?: string; chunk_days?: number; force?: boolean }) => void; onSyncNow: () => void; onCancel: () => void; }) { const [startDate, setStartDate] = useState(status?.available_start_date ?? ""); const [endDate, setEndDate] = useState(status?.available_end_date ?? ""); const [chunkDays, setChunkDays] = useState(String(status?.default_chunk_days ?? 7)); useEffect(() => { if (!status) return; setStartDate((current) => current || status.available_start_date || ""); setEndDate((current) => current || status.available_end_date || ""); setChunkDays((current) => current || String(status.default_chunk_days || 7)); }, [status]); return

{language === "en" ? "Import controls" : "Sterowanie importem"}

{t(language, "startDate")} setStartDate(event.target.value)} />

{t(language, "endDate")} setEndDate(event.target.value)} />

{t(language, "chunkDays")} setChunkDays(event.target.value)} />

; } function KioskLayoutPanel({ language, widgets, onChange, labels }: { language: Language; widgets: WidgetId[]; onChange: (value: WidgetId[]) => void; labels: Map; }) { const available = widgetOrder.map((item) => item.id); const selected = widgets; const unselected = available.filter((item) => !selected.includes(item)); const move = (id: WidgetId, direction: -1 | 1) => { const index = selected.indexOf(id); if (index === -1) return; const target = index + direction; if (target < 0 || target >= selected.length) return; const next = [...selected]; [next[index], next[target]] = [next[target], next[index]]; onChange(next); }; const toggle = (id: WidgetId) => { if (selected.includes(id)) { const next = selected.filter((item) => item !== id); onChange(next.length ? next : selected); return; } onChange([...selected, id]); }; return

{t(language, "kioskLayout")}

{t(language, "kioskLayoutSubtitle")}

{t(language, "saveLayout")}

{t(language, "selected")}

{selected.map((id) =>

{labels.get(id)}

)}

{t(language, "available")}

{unselected.map((id) => )}

; } function KioskSettingsEditorPanel({ language, value, onChange, onSave, selectedMode, onModeChange, labels, buckets, compareModes, saving }: { language: Language; value: KioskSettingsPayload; onChange: (value: KioskSettingsPayload) => void; onSave: () => void; selectedMode: "public" | "private"; onModeChange: (value: "public" | "private") => void; labels: Map; buckets: Array<{ key: string; label: string }>; compareModes: string[]; saving: boolean; }) { const widgets = toWidgetIds(value.widgets); return

{language === "en" ? "Kiosk settings" : "Ustawienia kiosku"}

{language === "en" ? "Live chart range" : "Zakres wykresu live"}

{language === "en" ? "Analytics range" : "Zakres analityki"}

Bucket

{language === "en" ? "Comparison" : "Porównanie"}

onChange({ ...value, widgets: widgetsValue })} labels={labels} />

; } function KioskLinkPanel({ language, kioskUrl, settings }: { language: Language; kioskUrl: string; settings: KioskSettingsPayload }) { const [copied, setCopied] = useState(false); return

{language === "en" ? "Public kiosk link" : "Publiczny link kiosku"}

{language === "en" ? "This link opens kiosk mode without login for read-only public display." : "Ten link otwiera kiosk bez logowania, tylko do publicznego podglądu."}

{language === "en" ? "Current public ranges:" : "Aktualne zakresy publiczne:"} live {settings.realtime_range}, analytics {settings.analytics_range}

; } function AppearanceSecurityPanel({ language, theme, setTheme, viewMode, setViewMode, authEnabled, userName }: { language: Language; theme: ThemeMode; setTheme: (value: ThemeMode) => void; viewMode: ViewMode; setViewMode: (value: ViewMode) => void; authEnabled: boolean; userName: string; }) { return

{t(language, "theme")}

{t(language, "viewMode")}

{t(language, "security")}

{authEnabled ? t(language, "authEnabled") : t(language, "authDisabled")}

{language === "en" ? "Admin user management is available below." : "Zarządzanie użytkownikami admina jest dostępne niżej."}

{userName ?

{userName}

: null}

; } function MetricSelectorCard({ language, title, items, selected, onChange }: { language: Language; title: string; items: Array<{ metric_id: string; label: string; unit: string }>; selected: string[]; onChange: (value: string[]) => void; }) { const toggle = (metricId: string) => onChange(selected.includes(metricId) ? selected.filter((item) => item !== metricId) : [...selected, metricId]); return

{title}

{items.map((item) => toggle(item.metric_id)} />{item.label} {item.unit})}

; } function LiveChartMetricsPanel({ language, items, selected, onChange }: { language: Language; items: Array<{ metric_id: string; label: string; unit: string }>; selected: string[]; onChange: (value: string[]) => void; }) { return ; } function BlockVisibilityPanel({ language, items, config, onChange }: { language: Language; items: Array<{ metric_id: string; label: string; unit: string }>; config: Record; onChange: (value: Record) => void; }) { const toggle = (target: BlockTarget, metricId: string) => { const selected = config[target]; onChange({ ...config, [target]: selected.includes(metricId) ? selected.filter((item) => item !== metricId) : [...selected, metricId] }); }; return

{language === "en" ? "Metric visibility in blocks" : "Widoczność metryk w blokach"}

Hero metrics

{items.map((item) => toggle("hero", item.metric_id)} />{item.label})}

Quick metrics

{items.map((item) => toggle("quick", item.metric_id)} />{item.label})}

; } function AdminUsersPanel({ language, users, newUser, onNewUserChange, onCreate, passwordReset, onPasswordResetChange, onResetPassword }: { language: Language; users: AuthUsersPayload["items"]; newUser: { username: string; display_name: string; password: string; role: string }; onNewUserChange: (value: { username: string; display_name: string; password: string; role: string }) => void; onCreate: () => void; passwordReset: { username: string; password: string }; onPasswordResetChange: (value: { username: string; password: string }) => void; onResetPassword: () => void; }) { return

{language === "en" ? "Admin user management" : "Zarządzanie użytkownikami"}

{language === "en" ? "Create user" : "Dodaj użytkownika"}

onNewUserChange({ ...newUser, username: e.target.value })} />

onNewUserChange({ ...newUser, display_name: e.target.value })} />

onNewUserChange({ ...newUser, password: e.target.value })} />

{language === "en" ? "Reset password" : "Zmiana hasła"}

onPasswordResetChange({ ...passwordReset, password: e.target.value })} />

{users.map((user) => )}

{language === "en" ? "Username" : "Login"}	{language === "en" ? "Display name" : "Nazwa"}	Role	{language === "en" ? "Updated" : "Aktualizacja"}
{user.username}	{user.display_name}	{user.role}	{formatDateTime(user.updated_at, language === "en" ? "en-GB" : "pl-PL")}

; }