gru/solar-pv-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: gru/solar-pv-dashboard:3bd706a548f32dd8ffdbdbc50cce78cd4ba582e4
Branches Tags
gru/solar-pv-dashboard:master
...
compare: gru/solar-pv-dashboard:master
Branches Tags
gru/solar-pv-dashboard:master
8 Commits
3bd706a548 ... master
Author SHA1 Message Date
Mateusz Gruszczyński 540d711461 cleanup 2026-03-27 08:58:19 +01:00
Mateusz Gruszczyński d992b9651c ux fixes 2026-03-27 08:37:08 +01:00
Mateusz Gruszczyński 16f6146834 ux fixes 2026-03-27 07:28:44 +01:00
Mateusz Gruszczyński b01259bc5f fix mobile 2026-03-26 23:03:11 +01:00
Mateusz Gruszczyński 6db6d2822e fix echart 2026-03-26 10:30:29 +01:00
Mateusz Gruszczyński bacf4ce8be fix echart 2026-03-26 10:26:38 +01:00
Mateusz Gruszczyński cf1827c111 fix echart 2026-03-26 10:20:46 +01:00
Mateusz Gruszczyński b13a35c310 fix echart 2026-03-26 10:19:23 +01:00
9 changed files with 368 additions and 495 deletions
Expand all files Collapse all files
deploy/nginx/default.conf
+3 -6
View File
@@ -10,9 +10,7 @@ server {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
add_header Cache-Control "no-store, no-cache" always;
}
location /assets/ {
@@ -32,8 +30,7 @@ server {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
proxy_hide_header etag;
add_header Cache-Control "no-store, no-cache" always;
}
}
frontend/nginx.conf
+4 -12
View File
@@ -19,9 +19,7 @@ server {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
add_header Cache-Control "no-store, no-cache" always;
}
location = /health {
@@ -31,22 +29,16 @@ server {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
add_header Cache-Control "no-store, no-cache" always;
}
location = /index.html {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
add_header Cache-Control "no-store, no-cache" always;
try_files $uri =404;
}
location / {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate" always;
add_header Pragma "no-cache" always;
add_header Expires "0" always;
add_header Cache-Control "no-store, no-cache" always;
try_files $uri $uri/ /index.html;
}
}
frontend/src/App.tsx
+76 -18
View File
@@ -20,6 +20,7 @@ import {
IconSettings,
IconSun,
IconTemperature,
IconUser,
IconX,
} from "./components/common/Icons";
import { api } from "./api/client";
@@ -60,7 +61,6 @@ const STORAGE_KEYS = {
liveWidgets: "pv-live-widgets-v4",
liveMetrics: "pv-live-metrics-v4",
archiveMetrics: "pv-archive-metrics-v4",
archiveAutoRefresh: "pv-archive-autorefresh-v1",
liveAutoRefresh: "pv-live-autorefresh-v1",
};
@@ -505,6 +505,7 @@ export default function App() {
const [theme, setTheme] = useState<ThemeMode>(() => getInitialTheme(undefined));
const [language, setLanguage] = useState<Language>(() => getInitialLanguage(undefined));
const [activeTab, setActiveTab] = useState<TabKey>(publicMode ? "kiosk" : "realtime");
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [realtimeRange, setRealtimeRange] = useState("today");
const [analyticsRange, setAnalyticsRange] = useState("30d");
const [bucket, setBucket] = useState("day");
@@ -518,7 +519,6 @@ export default function App() {
const [archiveRange, setArchiveRange] = useState("today");
const [liveMetrics, setLiveMetrics] = useState<string[]>(() => readStorage(STORAGE_KEYS.liveMetrics, DEFAULT_LIVE_METRICS));
const [archiveMetrics, setArchiveMetrics] = useState<string[]>(() => readStorage(STORAGE_KEYS.archiveMetrics, DEFAULT_LIVE_METRICS));
const [archiveAutoRefresh, setArchiveAutoRefresh] = useState<boolean>(() => readStorage<boolean>(STORAGE_KEYS.archiveAutoRefresh, true, (raw) => raw === "true"));
const [liveAutoRefresh, setLiveAutoRefresh] = useState<boolean>(() => readStorage<boolean>(STORAGE_KEYS.liveAutoRefresh, true, (raw) => raw === "true"));
const [liveWidgets, setLiveWidgets] = useState<LiveWidgetId[]>(() => getVisibleLiveWidgets(readStorage<LiveWidgetId[]>(STORAGE_KEYS.liveWidgets, DEFAULT_LIVE_WIDGETS)));
const [viewMode, setViewMode] = useState<ViewMode>(() => { const fromUrl = parseViewModeFromLocation(); return fromUrl === "kiosk" ? fromUrl : readStorage<ViewMode>(STORAGE_KEYS.viewMode, "normal", (raw) => (raw === "kiosk" ? "kiosk" : "normal")); });
@@ -572,11 +572,12 @@ export default function App() {
useEffect(() => { writeStorage(STORAGE_KEYS.liveWidgets, liveWidgets); }, [liveWidgets]);
useEffect(() => { writeStorage(STORAGE_KEYS.liveMetrics, liveMetrics); }, [liveMetrics]);
useEffect(() => { writeStorage(STORAGE_KEYS.archiveMetrics, archiveMetrics); }, [archiveMetrics]);
useEffect(() => { writeStorage(STORAGE_KEYS.archiveAutoRefresh, String(archiveAutoRefresh)); }, [archiveAutoRefresh]);
useEffect(() => { writeStorage(STORAGE_KEYS.liveAutoRefresh, String(liveAutoRefresh)); }, [liveAutoRefresh]);
useEffect(() => { setMobileMenuOpen(false); }, [activeTab, viewMode]);
const dataEnabled = authenticated || authEnabled === false;
const currentRole = publicMode ? null : (authQuery.data?.role ?? null);
const currentUserName = publicMode ? null : (authQuery.data?.display_name ?? authQuery.data?.user ?? null);
const isAdmin = authEnabled === false || currentRole === "admin";
const hasWarehouseAccess = !publicMode && isAdmin;
const hasSettingsAccess = !publicMode && isAdmin;
@@ -632,12 +633,11 @@ export default function App() {
const effectiveBucket = kioskActive ? effectiveKioskSettings.analytics_bucket : bucket;
const effectiveCompare = kioskActive ? effectiveKioskSettings.compare_mode : compare;
const historyQuery = useRealtimeHistory(effectiveRealtimeRange, dataEnabled, { publicKiosk: publicMode, pauseAutoRefresh: !liveAutoRefresh });
const archiveManualRangeActive = Boolean(archiveStart && archiveEnd);
const sanitizedCompareRanges = compareRanges.filter((item) => item.start && item.end);
const analyticsOptions = analyticsStart && analyticsEnd && !kioskActive ? { start: analyticsStart, end: analyticsEnd, publicKiosk: publicMode, compareRanges: effectiveCompare === "custom_multi" ? sanitizedCompareRanges : undefined } : { publicKiosk: publicMode, compareRanges: effectiveCompare === "custom_multi" ? sanitizedCompareRanges : undefined };
const analyticsQuery = useAnalytics(analyticsStart && analyticsEnd && !kioskActive ? "custom" : effectiveAnalyticsRange, effectiveBucket, effectiveCompare, dataEnabled, analyticsOptions);
const historical = useHistoricalImport(hasWarehouseAccess);
const archiveQuery = useRealtimeHistory(archiveStart && archiveEnd ? "custom" : archiveRange, dataEnabled, { start: archiveStart || undefined, end: archiveEnd || undefined, metrics: archiveMetrics, publicKiosk: publicMode, pauseAutoRefresh: !archiveAutoRefresh });
const archiveQuery = useRealtimeHistory(archiveStart && archiveEnd ? "custom" : archiveRange, dataEnabled, { start: archiveStart || undefined, end: archiveEnd || undefined, metrics: archiveMetrics, publicKiosk: publicMode, pauseAutoRefresh: true });
const rawRealtimeHistoryData = useMemo(() => trimSingleDayHistory(historyQuery.data, effectiveRealtimeRange), [historyQuery.data, effectiveRealtimeRange]);
const liveHistoryData = useMemo(() => filterHistoryByMetrics(rawRealtimeHistoryData, liveHistoryMetrics), [rawRealtimeHistoryData, liveHistoryMetrics]);
const archiveHistoryData = useMemo(() => filterHistoryByMetrics(trimSingleDayHistory(archiveQuery.data, archiveRange), archiveMetrics), [archiveQuery.data, archiveRange, archiveMetrics]);
@@ -772,12 +772,10 @@ export default function App() {
<div className="container-xl">
<div className="navbar-brand navbar-brand-autodark d-flex align-items-center gap-2"><span className="avatar avatar-sm bg-primary-lt text-primary border-0"><IconBolt size={18} /></span><div><div className="fw-bold">{config.app.site_name}</div><div className="text-secondary small">{t(language, "operatorPanel")}</div></div></div>
<div className="navbar-nav flex-row order-md-last align-items-center gap-2">
<span className={`badge ${connected ? "bg-green-lt text-green" : "bg-yellow-lt text-yellow"}`}>{connected ? t(language, "connected") : t(language, "disconnected")}</span>
{!publicMode && currentRole ? <span className={`badge ${isAdmin ? "bg-primary-lt text-primary" : "bg-azure-lt text-azure"}`}>{currentRole}</span> : null}
<button className="btn btn-icon btn-ghost-secondary" onClick={() => setTheme((current) => (current === "dark" ? "light" : "dark"))} title={t(language, "theme")}>{theme === "dark" ? <IconSun size={18} /> : <IconMoon size={18} />}</button>
<button className="btn btn-icon btn-ghost-secondary" onClick={() => setLanguage((current) => (current === "pl" ? "en" : "pl"))} title={t(language, "language")}><IconLanguage size={18} /></button>
{!publicMode ? <button className="btn btn-sm pv-navbar-action" onClick={() => setViewMode((current) => (current === "normal" ? "kiosk" : "normal"))}><IconDeviceDesktop size={16} className="me-1" />{viewMode === "normal" ? t(language, "openKiosk") : t(language, "exitKiosk")}</button> : null}
{!publicMode ? <button className="btn btn-sm pv-navbar-action" onClick={() => logoutMutation.mutate()}><IconLogout size={16} className="me-1" />{t(language, "signOut")}</button> : null}
{!publicMode ? <button className="btn btn-sm pv-navbar-action" onClick={() => setViewMode((current) => (current === "normal" ? "kiosk" : "normal"))} aria-label={viewMode === "normal" ? t(language, "openKiosk") : t(language, "exitKiosk")} title={viewMode === "normal" ? t(language, "openKiosk") : t(language, "exitKiosk")}><span className="pv-navbar-action-icon">{viewMode === "normal" ? <IconDeviceDesktop size={18} /> : <IconX size={18} />}</span><span className="pv-navbar-action-label">{viewMode === "normal" ? t(language, "openKiosk") : t(language, "exitKiosk")}</span></button> : null}
{!publicMode ? <button className="btn btn-sm pv-navbar-action" onClick={() => logoutMutation.mutate()} aria-label={t(language, "signOut")} title={t(language, "signOut")}><span className="pv-navbar-action-icon"><IconLogout size={18} /></span><span className="pv-navbar-action-label">{t(language, "signOut")}</span></button> : null}
</div>
</div>
</header>
@@ -793,20 +791,60 @@ export default function App() {
const subnavRefreshControls = activeTab === "realtime"
? <div className="pv-subnav-refresh-group"><RefreshModeSwitch language={language} autoEnabled={liveAutoRefresh} onChange={setLiveAutoRefresh} compact /></div>
: activeTab === "archive"
? <div className="pv-subnav-refresh-group"><RefreshModeSwitch language={language} autoEnabled={archiveAutoRefresh} onChange={setArchiveAutoRefresh} compact /></div>
: null;
const footer = !publicMode ? (
<footer className="pv-footer border-top">
<div className="container-xl">
<div className="pv-footer-shell">
<div className="pv-footer-item">
<span className={`badge ${connected ? "bg-green-lt text-green" : "bg-yellow-lt text-yellow"}`}>{connected ? t(language, "connected") : t(language, "disconnected")}</span>
<span className="pv-footer-text">{language === "en" ? "API connection" : "Połączenie z API"}</span>
</div>
<div className="pv-footer-item">
<span className="pv-footer-icon" aria-hidden="true"><IconUser size={16} /></span>
<span className="pv-footer-text">{language === "en" ? "Logged user:" : "Zalogowany:"} <strong>{currentUserName || (authEnabled === false ? (language === "en" ? "Authentication disabled" : "Autoryzacja wyłączona") : "—")}</strong></span>
{currentRole ? <span className={`badge ${isAdmin ? "bg-primary-lt text-primary" : "bg-azure-lt text-azure"}`}>{currentRole}</span> : null}
</div>
<div className="pv-footer-item pv-footer-item--muted">
<IconClockHour4 size={16} />
<span className="pv-footer-text">{t(language, "updatedAt")}: {formatDateTime(lastUpdated, locale)}</span>
</div>
</div>
</div>
</footer>
) : null;
const menu = (
<div className="pv-subnav border-bottom">
<div className="container-xl">
<div className="pv-subnav-shell d-flex flex-wrap align-items-center justify-content-between gap-3 py-2">
<div className="d-flex flex-wrap gap-2">
<div className="pv-subnav-shell py-2">
<div className="pv-subnav-mobile-top">
<button
className={`btn pv-mobile-menu-toggle ${mobileMenuOpen ? "active" : ""}`}
onClick={() => setMobileMenuOpen((current) => !current)}
aria-expanded={mobileMenuOpen}
aria-label={language === "en" ? "Toggle navigation menu" : "Przełącz menu nawigacji"}
>
<span className="pv-mobile-menu-toggle-icon" aria-hidden="true">
<span />
<span />
<span />
</span>
<span>{language === "en" ? "Menu" : "Menu"}</span>
</button>
{subnavRefreshControls}
</div>
<div className={`pv-subnav-main ${mobileMenuOpen ? "is-open" : ""}`}>
<div className="pv-subnav-tabs">
{menuTabs.map((item) => (
<button
key={item.id}
className={`btn pv-menu-tab ${activeTab === item.id ? "active" : ""}`}
onClick={() => setActiveTab(item.id)}
onClick={() => {
setActiveTab(item.id);
setMobileMenuOpen(false);
}}
>
<span className="pv-menu-tab-icon">{item.icon}</span>
<span>{item.label}</span>
@@ -814,7 +852,7 @@ export default function App() {
))}
</div>
<div className="pv-subnav-side">
{subnavRefreshControls}
<div className="pv-subnav-refresh-desktop">{subnavRefreshControls}</div>
<div className="pv-menu-meta">
<IconClockHour4 size={16} />
<span>{t(language, "updatedAt")}: {formatDateTime(lastUpdated, locale)}</span>
@@ -823,6 +861,7 @@ export default function App() {
</div>
</div>
</div>
</div>
);
if (viewMode === "kiosk" || publicMode) {
@@ -833,7 +872,7 @@ export default function App() {
<div className="page">{navbar}{menu}<div className="page-wrapper"><div className="page-body"><div className="container-xl">
{activeTab === "realtime" && <><PageHeader title={t(language, "realtimeOverview")} subtitle={t(language, "realtimeSubtitle")}><div className="pv-page-header-range-grid pv-page-header-range-grid--single"><SegmentedSelect label={t(language, "liveRange")} value={realtimeRange} onChange={setRealtimeRange} options={liveRangeOptions(language)} /></div></PageHeader><div className="row row-cards g-3">{effectiveLiveWidgets.map((widgetId) => renderLiveWidget(widgetId))}</div></>}
{activeTab === "archive" && <><PageHeader title={language === "en" ? "Historical live data" : "Dane chwilowe z historii"} subtitle={language === "en" ? "Browse all instant metrics and zoom the chart with touch gestures or the slider below." : "Przeglądaj metryki chwilowe i przybliżaj wykres gestem szczypania albo suwakiem pod wykresem."}><div className="pv-page-header-range-grid"><SegmentedSelect label={language === "en" ? "Day" : "Dzień"} value={SINGLE_DAY_ARCHIVE_KEYS.has(archiveRange) ? archiveRange : ""} onChange={(value) => { setArchiveRange(value); applyArchivePreset(value, setArchiveStart, setArchiveEnd); setArchiveAutoRefresh(true); }} options={archiveQuickRangeOptions(language)} /><SelectField label={language === "en" ? "Last period" : "Ostatnie dni"} value={archiveListRangeOptions(language).some((item) => item.key === archiveRange) ? archiveRange : ""} onChange={(value) => { setArchiveRange(value); applyArchivePreset(value, setArchiveStart, setArchiveEnd); setArchiveAutoRefresh(true); }} options={[{ key: "", label: language === "en" ? "Choose range" : "Wybierz zakres" }, ...archiveListRangeOptions(language), { key: "custom", label: language === "en" ? "Custom range" : "Własny zakres" }]} /></div></PageHeader><div className="row row-cards g-3"><div className="col-12"><LiveHistoryPanel data={archiveHistoryData} language={language} theme={theme} title={language === "en" ? "Historical chart" : "Wykres historyczny"} subtitle={SINGLE_DAY_ARCHIVE_KEYS.has(archiveRange) ? (language === "en" ? "Single-day view is automatically trimmed to active data hours." : "Widok dnia jest automatycznie przycinany do aktywnych godzin danych.") : (language === "en" ? "Raw instant metrics from InfluxDB only." : "Tylko surowe metryki chwilowe z InfluxDB.")} footer={<div className="pv-chart-footer-controls"><div className="pv-date-field"><label className="form-label small mb-1">{language === "en" ? "From" : "Od"}</label><input className="form-control pv-date-input" type="datetime-local" value={archiveStart} onChange={(e) => { setArchiveRange("custom"); setArchiveStart(e.target.value); setArchiveAutoRefresh(false); }} /></div><div className="pv-date-field"><label className="form-label small mb-1">{language === "en" ? "To" : "Do"}</label><input className="form-control pv-date-input" type="datetime-local" value={archiveEnd} onChange={(e) => { setArchiveRange("custom"); setArchiveEnd(e.target.value); setArchiveAutoRefresh(false); }} /></div><div className="pv-chart-footer-status"><span className={`badge ${archiveAutoRefresh && !archiveManualRangeActive ? "bg-green-lt text-green" : "bg-amber-lt text-amber"}`}>{archiveAutoRefresh && !archiveManualRangeActive ? (language === "en" ? "Auto refresh active" : "Auto-odświeżanie aktywne") : (language === "en" ? "Auto refresh paused" : "Auto-odświeżanie zatrzymane")}</span><div className="text-secondary small">{archiveManualRangeActive ? (language === "en" ? "Manual date range disables automatic refresh until you switch it back on." : "Ręczny zakres dat zatrzymuje auto-odświeżanie, dopóki nie włączysz go ponownie.") : (language === "en" ? "Use the picker below to freeze the chart on a chosen time window." : "Użyj pickera poniżej, aby zamrozić wykres na wybranym zakresie czasu.")}</div></div></div>} /></div><div className="col-12"><MetricSelectorCard language={language} title={language === "en" ? "Metrics under chart" : "Metryki pod wykresem"} items={chartMetricCandidates.filter((item) => item.metric_id !== "energy_total")} selected={archiveMetrics.filter((item) => item !== "energy_total")} onChange={setArchiveMetrics} /></div></div></>}
{activeTab === "archive" && <><PageHeader title={language === "en" ? "Historical live data" : "Dane chwilowe z historii"} subtitle={language === "en" ? "Browse all instant metrics and zoom the chart with touch gestures or the slider below." : "Przeglądaj metryki chwilowe i przybliżaj wykres gestem szczypania albo suwakiem pod wykresem."}><div className="pv-page-header-range-grid"><SegmentedSelect label={language === "en" ? "Day" : "Dzień"} value={SINGLE_DAY_ARCHIVE_KEYS.has(archiveRange) ? archiveRange : ""} onChange={(value) => { setArchiveRange(value); applyArchivePreset(value, setArchiveStart, setArchiveEnd); }} options={archiveQuickRangeOptions(language)} /><SelectField label={language === "en" ? "Last period" : "Ostatnie dni"} value={archiveListRangeOptions(language).some((item) => item.key === archiveRange) ? archiveRange : ""} onChange={(value) => { setArchiveRange(value); applyArchivePreset(value, setArchiveStart, setArchiveEnd); }} options={[{ key: "", label: language === "en" ? "Choose range" : "Wybierz zakres" }, ...archiveListRangeOptions(language), { key: "custom", label: language === "en" ? "Custom range" : "Własny zakres" }]} /></div></PageHeader><div className="row row-cards g-3"><div className="col-12"><LiveHistoryPanel chartKey={[archiveRange, archiveStart, archiveEnd, archiveMetrics.join(",")].join("|")} data={archiveHistoryData} language={language} theme={theme} title={language === "en" ? "Historical chart" : "Wykres historyczny"} subtitle={SINGLE_DAY_ARCHIVE_KEYS.has(archiveRange) ? (language === "en" ? "Single-day view is automatically trimmed to active data hours." : "Widok dnia jest automatycznie przycinany do aktywnych godzin danych.") : (language === "en" ? "Raw instant metrics from InfluxDB only." : "Tylko surowe metryki chwilowe z InfluxDB.")} footer={<div className="pv-chart-footer-controls"><div className="pv-date-field"><label className="form-label small mb-1">{language === "en" ? "From" : "Od"}</label><input className="form-control pv-date-input" type="datetime-local" value={archiveStart} onChange={(e) => { setArchiveRange("custom"); setArchiveStart(e.target.value); }} /></div><div className="pv-date-field"><label className="form-label small mb-1">{language === "en" ? "To" : "Do"}</label><input className="form-control pv-date-input" type="datetime-local" value={archiveEnd} onChange={(e) => { setArchiveRange("custom"); setArchiveEnd(e.target.value); }} /></div><div className="pv-chart-footer-status"><span className="badge bg-blue-lt text-blue">{language === "en" ? "Refresh on change" : "Odświeżanie po zmianie"}</span><div className="text-secondary small">{language === "en" ? "This chart reloads only when you change the range or selected metrics." : "Ten wykres przeładowuje się tylko po zmianie zakresu albo wybranych metryk."}</div></div></div>} /></div><div className="col-12"><MetricSelectorCard language={language} title={language === "en" ? "Metrics under chart" : "Metryki pod wykresem"} items={chartMetricCandidates.filter((item) => item.metric_id !== "energy_total")} selected={archiveMetrics.filter((item) => item !== "energy_total")} onChange={setArchiveMetrics} /></div></div></>}
{activeTab === "analytics" && <><PageHeader title={t(language, "analyticsOverview")} subtitle={t(language, "analyticsSubtitle")}><div className="pv-filter-grid"><SegmentedSelect label={t(language, "range")} value={analyticsStart && analyticsEnd ? "custom" : analyticsRange} onChange={(value) => { if (value !== "custom") { setAnalyticsRange(value); setAnalyticsStart(""); setAnalyticsEnd(""); } }} options={[...config.capabilities.ranges.filter((item) => !["6h", "24h", "48h", "1d", "3d", "14d", "60d", "ytd"].includes(item.key)).map((item) => ({ key: item.key, label: translateRangeLabel(language, item.key, item.label) })), { key: "custom", label: language === "en" ? "Custom" : "Ręczny" }]} /><SegmentedSelect label={t(language, "bucket")} value={bucket} onChange={setBucket} options={config.capabilities.buckets.map((item) => ({ key: item.key, label: translateBucket(language, item.key) }))} /><SelectField label={language === "en" ? "Comparison" : "Porównanie"} value={compare} onChange={setCompare} options={comparisonOptions(language)} /></div></PageHeader>{analyticsStart || analyticsEnd || (analyticsRange === "custom") || compare === "custom_multi" ? <div className="card pv-card mb-3"><div className="card-body d-flex flex-column gap-3"><div className="row g-3"><div className="col-md-3 pv-date-field"><label className="form-label">{language === "en" ? "Start" : "Od"}</label><input className="form-control pv-date-input" type="datetime-local" value={analyticsStart} onChange={(e) => setAnalyticsStart(e.target.value)} /></div><div className="col-md-3 pv-date-field"><label className="form-label">{language === "en" ? "End" : "Do"}</label><input className="form-control pv-date-input" type="datetime-local" value={analyticsEnd} onChange={(e) => setAnalyticsEnd(e.target.value)} /></div><div className="col-md-6 d-flex align-items-end"><button className="btn btn-outline-secondary" onClick={() => { setAnalyticsStart(""); setAnalyticsEnd(""); }}>{language === "en" ? "Use preset range" : "Wróć do gotowych zakresów"}</button></div></div>{compare === "custom_multi" ? <div className="border rounded-3 p-3"><div className="fw-semibold mb-3">{language === "en" ? "Comparison ranges" : "Zakresy porównawcze"}</div><div className="row g-3">{compareRanges.map((item, index) => <div className="col-12" key={item.key}><div className="row g-2 align-items-end"><div className="col-md-3"><label className="form-label">{language === "en" ? `Range ${index + 1} label` : `Etykieta ${index + 1}`}</label><input className="form-control" value={item.label} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, label: e.target.value } : current))} /></div><div className="col-md-3 pv-date-field"><label className="form-label">{language === "en" ? "From" : "Od"}</label><input className="form-control pv-date-input" type="datetime-local" value={item.start} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, start: e.target.value } : current))} /></div><div className="col-md-3 pv-date-field"><label className="form-label">{language === "en" ? "To" : "Do"}</label><input className="form-control pv-date-input" type="datetime-local" value={item.end} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, end: e.target.value } : current))} /></div><div className="col-md-3"><button className="btn btn-outline-secondary w-100" onClick={() => setCompareRanges(compareRanges.length > 1 ? compareRanges.filter((current) => current.key !== item.key) : compareRanges)}>{language === "en" ? "Remove range" : "Usuń zakres"}</button></div></div></div>)}<div className="col-12"><button className="btn btn-primary" onClick={() => setCompareRanges([...compareRanges, { key: `cmp_${Date.now()}`, label: `${language === "en" ? "Range" : "Zakres"} ${compareRanges.length + 1}`, start: "", end: "" }])}>{language === "en" ? "Add range" : "Dodaj zakres"}</button></div></div></div> : null}</div></div> : null}<div className="row row-cards g-3"><div className="col-12"><SummaryCards summary={summary} language={language} locale={locale} compareLabel={comparisonOptions(language).find((item) => item.key === compare)?.label ?? compare} /></div><div className="col-12">{allWidgets.production}</div><div className="col-12">{allWidgets.comparison}</div></div></>}
@@ -842,7 +881,7 @@ export default function App() {
{activeTab === "kiosk" && <><PageHeader title={t(language, "kiosk")} subtitle={language === "en" ? "Choose kiosk type, tune ranges and arrange sections." : "Wybierz typ kiosku, ustaw zakresy i ułóż sekcje."} /><div className="row row-cards g-3"><div className="col-12 col-xxl-8"><KioskSettingsEditorPanel language={language} value={kioskEditorMode === "public" ? publicKioskDraft : privateKioskDraft} onChange={(value) => applyKioskDraftChange(kioskEditorMode, value)} onModeChange={setKioskEditorMode} selectedMode={kioskEditorMode} labels={widgetLabels} buckets={config.capabilities.buckets} compareModes={config.capabilities.comparison_modes} saving={saveKioskSettingsMutation.isPending && saveKioskSettingsMutation.variables?.mode === kioskEditorMode} dirty={currentKioskDirty} canSave={canPersistCurrentKioskSettings} saveNotice={kioskSaveNotice[kioskEditorMode]} onSave={saveCurrentKioskSettings} onReset={() => resetKioskDraft(kioskEditorMode)} allowPublicMode={isAdmin} chartItems={chartMetricCandidates} heroItems={blockMetricCandidates} /></div><div className="col-12 col-xxl-4"><KioskLinkPanel language={language} publicKioskUrl={publicKioskUrl} privateKioskUrl={privateKioskUrl} publicSettings={publicKioskDraft} privateSettings={privateKioskDraft} showPublicLink={isAdmin} /></div></div></>}
{activeTab === "settings" && <><PageHeader title={t(language, "settings")} subtitle={language === "en" ? "Friendlier settings layout with interactive LIVE ordering, homepage blocks and diagnostics." : "Przyjaźniejszy układ ustawień z interaktywną kolejnością LIVE, blokami strony głównej i diagnostyką."} /><div className="row row-cards g-3"><div className="col-12 col-xxl-4"><AppearancePanel language={language} setLanguage={setLanguage} theme={theme} setTheme={setTheme} viewMode={viewMode} setViewMode={setViewMode} userName={authQuery.data?.display_name ?? authQuery.data?.user ?? ""} /></div><div className="col-12 col-xxl-8"><LiveSectionVisibilityPanel language={language} selected={effectiveLiveWidgets} onChange={setLiveWidgets} /></div><div className="col-12"><BlockVisibilityPanel language={language} items={blockMetricCandidates} config={blockConfig} onChange={setBlockConfig} /></div><div className="col-12"><LiveChartMetricsPanel language={language} items={chartMetricCandidates.filter((item) => item.metric_id !== "energy_total")} selected={liveMetrics.filter((item) => item !== "energy_total")} onChange={setLiveMetrics} /></div><div className="col-12"><DiagnosticPanel language={language} locale={locale} data={diagnosticsQuery.data} loading={diagnosticsQuery.isLoading} onRefresh={() => diagnosticsQuery.refetch()} /></div>{isAdmin ? <div className="col-12"><AdminUsersPanel language={language} users={usersQuery.data?.items ?? []} currentUsername={authQuery.data?.user ?? null} newUser={newUser} onNewUserChange={setNewUser} onCreate={() => createUserMutation.mutate()} passwordReset={passwordReset} onPasswordResetChange={setPasswordReset} onResetPassword={() => resetPasswordMutation.mutate()} onRoleChange={(username, role) => updateUserRoleMutation.mutate({ username, role })} roleUpdating={updateUserRoleMutation.isPending} /></div> : null}</div></>}
</div></div></div></div>
</div></div></div>{footer}</div>
);
}
@@ -879,7 +918,26 @@ function translateRangeLabel(language: Language, key: string, fallback: string):
function HeroCards({ cards, locale, language }: { cards: SnapshotPayload["hero_cards"]; locale: string; language: Language }) { return <div className="row row-cards g-3">{cards.map((card) => <div key={card.metric_id} className="col-12 col-sm-6 col-xl-3"><div className="card pv-card pv-hero-card h-100"><div className="card-body"><div className="d-flex align-items-center justify-content-between mb-3"><span className="avatar avatar-sm bg-primary-lt text-primary border-0">{iconForMetric(card.metric_id)}</span><span className="badge bg-primary-lt text-primary text-uppercase">{card.unit || "live"}</span></div><div className="text-secondary text-uppercase small mb-1">{labelForMetric(language, card.metric_id, card.label)}</div><div className="display-6 fw-bold mb-1">{formatValue(card.value, card.unit, 2, locale)}</div><div className="text-secondary small">{card.subtitle}</div></div></div></div>)}</div>; }
function QuickMetrics({ metrics, locale, language }: { metrics: MetricValue[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "quickMetrics")}</h3></div><div className="card-body d-flex flex-column gap-3">{metrics.map((metric) => <div key={metric.metric_id} className="d-flex align-items-center justify-content-between"><div><div className="fw-medium">{labelForMetric(language, metric.metric_id, metric.label)}</div><div className="text-secondary small">{metric.unit}</div></div><div className="fw-semibold">{formatValue(metric.value, metric.unit, 2, locale)}</div></div>)}</div></div>; }
function StatusStat({ label, value }: { label: string; value: string }) { return <div className="col-6 col-lg-4 col-xl-2"><div className="border rounded-3 p-3 h-100"><div className="text-secondary small mb-1">{label}</div><div className="fw-semibold">{value}</div></div></div>; }
function LiveHistoryPanel({ data, language, theme, title, subtitle, footer, freezeUpdates = false }: { data?: HistoryPayload; language: Language; theme: ThemeMode; title: string; subtitle: string; footer?: ReactNode; freezeUpdates?: boolean }) { const [displayData, setDisplayData] = useState<HistoryPayload | undefined>(data); const latestIncomingRef = useRef<HistoryPayload | undefined>(data); useEffect(() => { latestIncomingRef.current = data; if (!freezeUpdates) setDisplayData(data); }, [data, freezeUpdates]); const chartOption = useMemo(() => buildLiveHistoryOption(displayData, theme, language), [displayData, theme, language]); return <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{title}</h3><div className="text-secondary small">{subtitle}</div></div></div><div className="card-body"><EChart option={chartOption} className="pv-chart" />{footer ? <div className="mt-3 pt-3 border-top">{footer}</div> : null}</div></div>; }
function LiveHistoryPanel({ data, language, theme, title, subtitle, footer, freezeUpdates = false, chartKey }: { data?: HistoryPayload; language: Language; theme: ThemeMode; title: string; subtitle: string; footer?: ReactNode; freezeUpdates?: boolean; chartKey?: string }) {
const [displayData, setDisplayData] = useState<HistoryPayload | undefined>(data);
useEffect(() => {
if (!freezeUpdates) {
setDisplayData(data);
}
}, [data, freezeUpdates]);
useEffect(() => {
if (!freezeUpdates && chartKey) {
setDisplayData(data);
}
}, [chartKey, data, freezeUpdates]);
const resolvedData = freezeUpdates ? displayData : data;
const chartOption = useMemo(() => buildLiveHistoryOption(resolvedData, theme, language), [resolvedData, theme, language]);
return <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{title}</h3><div className="text-secondary small">{subtitle}</div></div></div><div className="card-body"><EChart key={chartKey} option={chartOption} className="pv-chart" />{footer ? <div className="mt-3 pt-3 border-top">{footer}</div> : null}</div></div>;
}
function SystemStatus({ items, locale, language }: { items: MetricValue[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "systemStatus")}</h3></div><div className="card-body d-flex flex-column gap-3">{items.map((metric) => <div key={metric.metric_id} className="d-flex align-items-center justify-content-between gap-3 status-row border rounded-3 px-3 py-2"><div><div className="fw-medium">{labelForMetric(language, metric.metric_id, metric.label)}</div><div className="text-secondary small">{metric.unit || metric.status}</div></div><div className="fw-semibold">{formatValue(metric.value, metric.unit, 2, locale)}</div></div>)}</div></div>; }
function StringPanels({ rows, locale, language }: { rows: SnapshotGroupRow[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "strings")}</h3></div><div className="card-body"><div className="row g-3">{rows.map((row) => <div key={row.id} className="col-12 col-md-6"><div className="string-panel border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">{row.label}</div><div className="d-flex flex-column gap-2">{Object.values(row.values).map((metric) => <div key={metric.metric_id} className="d-flex justify-content-between"><span>{labelForMetric(language, metric.metric_id, metric.label)}</span><span className="fw-medium">{formatValue(metric.value, metric.unit, 2, locale)}</span></div>)}</div></div></div>)}</div></div></div>; }
function StatusDot({ ok }: { ok: boolean }) { return <span className={`d-inline-block rounded-circle ${ok ? "bg-green" : "bg-yellow"}`} style={{ width: 10, height: 10 }} />; }
frontend/src/App.tsx.bak
-433
View File
@@ -1,433 +0,0 @@
import { useEffect, useMemo, useRef, useState, type ReactElement, type ReactNode } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { EChartsOption } from "echarts";
import {
IconArrowsMove,
IconBolt,
IconChartBar,
IconChecklist,
IconClockHour4,
IconDatabaseImport,
IconDeviceDesktop,
IconHistory,
IconLanguage,
IconLayoutDashboard,
IconLock,
IconLogin2,
IconLogout,
IconMoon,
IconPlayerPlay,
IconRefresh,
IconSettings,
IconSun,
IconTemperature,
IconX,
} from "./components/common/Icons";
import { api } from "./api/client";
import { EChart } from "./components/common/EChart";
import { labelForMetric, localeForLanguage, normalizeLanguage, t, translateCompareMode, type Language } from "./i18n";
import { useAnalytics, useDashboardConfig, useHistoricalImport, useRealtimeHistory, useRealtimeSocket } from "./hooks";
import { formatDateTime, formatDurationShort, formatPercent, formatShortTime, formatValue } from "./lib/format";
import type {
AnalyticsPayload,
AuthStatus,
AuthUsersPayload,
BucketPoint,
DashboardConfig,
DistributionPayload,
HistoryPayload,
HistoricalStatus,
KioskSettingsPayload,
MetricValue,
SnapshotGroupRow,
SnapshotPayload,
} from "./types";
type ThemeMode = "light" | "dark";
type TabKey = "realtime" | "archive" | "analytics" | "warehouse" | "kiosk" | "settings";
type ViewMode = "normal" | "kiosk";
type WidgetId = "hero" | "quickMetrics" | "history" | "status" | "strings" | "production" | "comparison" | "distribution" | "importStatus";
type BlockTarget = "hero" | "quick";
const STORAGE_KEYS = {
theme: "pv-theme-v4",
language: "pv-language-v4",
kioskWidgets: "pv-kiosk-widgets-v4",
viewMode: "pv-view-mode-v4",
blockConfig: "pv-block-config-v4",
liveMetrics: "pv-live-metrics-v4",
archiveMetrics: "pv-archive-metrics-v4",
};
const DEFAULT_KIOSK_WIDGETS: WidgetId[] = ["hero", "history", "strings", "status", "production", "comparison", "importStatus"];
const DEFAULT_BLOCK_CONFIG: Record<BlockTarget, string[]> = {
hero: ["ac_power", "dc_power_total", "energy_today", "energy_total"],
quick: ["energy_today", "energy_yesterday", "energy_total", "dc_power_total", "today_vs_yesterday"],
};
const DEFAULT_LIVE_METRICS = ["ac_power", "string_1_power", "string_2_power"];
const PUBLIC_KIOSK = new URL(window.location.href).searchParams.get("publicKiosk") === "1";
const widgetOrder: Array<{ id: WidgetId; tab: TabKey; icon: typeof IconLayoutDashboard }> = [
{ id: "hero", tab: "realtime", icon: IconLayoutDashboard },
{ id: "quickMetrics", tab: "realtime", icon: IconChecklist },
{ id: "history", tab: "realtime", icon: IconHistory },
{ id: "status", tab: "realtime", icon: IconBolt },
{ id: "strings", tab: "realtime", icon: IconArrowsMove },
{ id: "production", tab: "analytics", icon: IconChartBar },
{ id: "comparison", tab: "analytics", icon: IconRefresh },
{ id: "distribution", tab: "analytics", icon: IconChartBar },
{ id: "importStatus", tab: "warehouse", icon: IconDatabaseImport },
];
function readStorage<T>(key: string, fallback: T, parser?: (raw: string) => T): T {
try {
const raw = window.localStorage.getItem(key);
if (!raw) return fallback;
return parser ? parser(raw) : (JSON.parse(raw) as T);
} catch {
return fallback;
}
}
function writeStorage<T>(key: string, value: T): void {
try { window.localStorage.setItem(key, typeof value === "string" ? value : JSON.stringify(value)); } catch {}
}
function parseViewModeFromLocation(): ViewMode {
const url = new URL(window.location.href);
return url.searchParams.get("mode") === "kiosk" ? "kiosk" : "normal";
}
function syncViewModeToLocation(mode: ViewMode): void {
const url = new URL(window.location.href);
if (mode === "kiosk") url.searchParams.set("mode", "kiosk"); else url.searchParams.delete("mode");
window.history.replaceState({}, "", url.toString());
}
function iconForMetric(metricId: string) {
if (metricId.includes("temp")) return <IconTemperature size={18} />;
if (metricId.includes("energy")) return <IconChartBar size={18} />;
return <IconBolt size={18} />;
}
function buildWidgetLabel(language: Language, widgetId: WidgetId): string {
const labels: Record<WidgetId, string> = {
hero: language === "en" ? "Hero metrics" : "Karty hero",
quickMetrics: t(language, "quickMetrics"),
history: t(language, "chartPowerHistory"),
status: t(language, "systemStatus"),
strings: t(language, "strings"),
production: t(language, "chartProduction"),
comparison: t(language, "chartComparison"),
distribution: t(language, "chartDistribution"),
importStatus: language === "en" ? "Data warehouse" : "Hurtownia danych",
};
return labels[widgetId];
}
function buildTablerChartTheme(theme: ThemeMode) {
return theme === "dark"
? { text: "#cbd5e1", grid: "rgba(255,255,255,0.08)", tooltip: "rgba(15, 23, 42, 0.96)", series: ["#4dabf7", "#20c997", "#f59f00", "#e64980", "#9775fa", "#ff922b", "#66d9e8", "#adb5bd", "#94d82d", "#ffa8a8"] }
: { text: "#334155", grid: "rgba(15,23,42,0.12)", tooltip: "rgba(255,255,255,0.98)", series: ["#206bc4", "#2fb344", "#f59f00", "#d63384", "#7950f2", "#fd7e14", "#1098ad", "#868e96", "#74b816", "#fa5252"] };
}
function buildLiveHistoryOption(history: HistoryPayload | undefined, theme: ThemeMode, language: Language): EChartsOption {
const palette = buildTablerChartTheme(theme);
const series = history?.series ?? [];
return {
color: palette.series,
tooltip: { trigger: "axis", backgroundColor: palette.tooltip, borderColor: palette.grid, textStyle: { color: palette.text } },
legend: { top: 0, textStyle: { color: palette.text }, itemGap: 16 },
grid: { left: 12, right: 16, top: 48, bottom: 12, containLabel: true },
xAxis: { type: "category", boundaryGap: false, axisLabel: { color: palette.text }, axisLine: { lineStyle: { color: palette.grid } }, data: (series[0]?.points ?? []).map((point: any) => formatShortTime(point.timestamp, localeForLanguage(language))) },
yAxis: { type: "value", axisLabel: { color: palette.text }, splitLine: { lineStyle: { color: palette.grid } } },
series: series.map((item, index) => ({ name: item.label, type: "line", smooth: true, connectNulls: true, showSymbol: false, lineStyle: { width: index === 0 ? 3 : 2 }, emphasis: { focus: "series" }, data: item.points.map((point: any) => point.value) })),
};
}
function buildBarOption(points: BucketPoint[], unit: string, theme: ThemeMode, language: Language): EChartsOption {
const palette = buildTablerChartTheme(theme);
return {
color: [palette.series[0]],
tooltip: { trigger: "axis", backgroundColor: palette.tooltip, borderColor: palette.grid, textStyle: { color: palette.text }, valueFormatter: (value) => formatValue(Number(value), unit, 2, localeForLanguage(language)) },
grid: { left: 12, right: 16, top: 16, bottom: 40, containLabel: true },
xAxis: { type: "category", axisLabel: { color: palette.text, rotate: points.length > 12 ? 32 : 0 }, axisLine: { lineStyle: { color: palette.grid } }, data: points.map((point) => point.label) },
yAxis: { type: "value", name: unit, nameTextStyle: { color: palette.text }, axisLabel: { color: palette.text }, splitLine: { lineStyle: { color: palette.grid } } },
series: [{ type: "bar", barMaxWidth: 24, itemStyle: { borderRadius: [6, 6, 0, 0] }, data: points.map((point) => point.value) }],
};
}
function buildComparisonOption(data: AnalyticsPayload | undefined, theme: ThemeMode, language: Language): EChartsOption {
const palette = buildTablerChartTheme(theme);
const current = data?.current ?? [];
const comparisonSeries = (data?.comparisons?.length ? data.comparisons : [{ key: data?.compare_mode ?? "comparison", label: t(language, "comparisonPeriod"), points: data?.comparison ?? [] }]).filter((item) => item.points?.length).map((item) => ({ ...item, label: translateCompareMode(language, item.label || item.key) }));
return {
color: palette.series,
tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, backgroundColor: palette.tooltip, borderColor: palette.grid, textStyle: { color: palette.text } },
legend: { top: 0, textStyle: { color: palette.text } },
grid: { left: 16, right: 20, top: 42, bottom: 18, containLabel: true },
xAxis: { type: "category", axisLabel: { color: palette.text, interval: 0, rotate: current.length > 12 ? 35 : 0 }, axisLine: { lineStyle: { color: palette.grid } }, data: current.map((point) => point.label) },
yAxis: { type: "value", axisLabel: { color: palette.text }, splitLine: { lineStyle: { color: palette.grid } } },
series: [
{ name: t(language, "currentPeriod"), type: "bar", barMaxWidth: 18, data: current.map((point) => point.value) },
...comparisonSeries.map((seriesItem, index) => ({ name: seriesItem.label, type: "bar" as const, barMaxWidth: 18, data: current.map((_, pointIndex) => seriesItem.points[pointIndex]?.value ?? 0), itemStyle: { opacity: index === 0 ? 0.9 : 0.75 } })),
],
};
}
function buildPieOption(data: DistributionPayload | undefined, theme: ThemeMode): EChartsOption {
const palette = buildTablerChartTheme(theme);
const slices = [...(data?.slices ?? [])].sort((a, b) => b.value - a.value).slice(0, 12);
return {
color: palette.series,
tooltip: { trigger: "axis", axisPointer: { type: "shadow" }, backgroundColor: palette.tooltip, borderColor: palette.grid, textStyle: { color: palette.text } },
grid: { left: 16, right: 28, top: 8, bottom: 8, containLabel: true },
xAxis: { type: "value", axisLabel: { color: palette.text }, splitLine: { lineStyle: { color: palette.grid } } },
yAxis: { type: "category", axisLabel: { color: palette.text }, data: slices.map((item) => item.label) },
series: [{ type: "bar", data: slices.map((item) => ({ value: item.value, label: { show: true, position: "right", formatter: `${item.share}%`, color: palette.text } })), barMaxWidth: 22, itemStyle: { borderRadius: [0, 6, 6, 0] } }],
};
}
function liveRangeOptions(language: Language) {
return [
{ key: "today", label: language === "en" ? "Today" : "Dziś" },
{ key: "yesterday", label: language === "en" ? "Yesterday" : "Wczoraj" },
{ key: "6h", label: "6h" },
{ key: "12h", label: "12h" },
{ key: "24h", label: "24h" },
{ key: "48h", label: "48h" },
{ key: "7d", label: "7d" },
];
}
function analyticsRangeOptions(language: Language) {
return [
{ key: "today", label: language === "en" ? "Today" : "Dziś" },
{ key: "yesterday", label: language === "en" ? "Yesterday" : "Wczoraj" },
{ key: "7d", label: "7d" },
{ key: "30d", label: "30d" },
{ key: "90d", label: "90d" },
{ key: "365d", label: language === "en" ? "365 days" : "365 dni" },
];
}
function archiveRangeOptions(language: Language) {
return [
{ key: "1d", label: language === "en" ? "1 day" : "1 dzień" },
{ key: "3d", label: "3d" },
{ key: "7d", label: "7d" },
{ key: "14d", label: "14d" },
{ key: "30d", label: "30d" },
{ key: "60d", label: "60d" },
{ key: "custom", label: language === "en" ? "Custom" : "Ręczny" },
];
}
function getInitialTheme(config?: DashboardConfig): ThemeMode {
return readStorage<ThemeMode>(STORAGE_KEYS.theme, (config?.defaults.theme as ThemeMode) ?? "dark", (raw) => (raw === "light" ? "light" : "dark"));
}
function getInitialLanguage(config?: DashboardConfig): Language {
return normalizeLanguage(readStorage<string>(STORAGE_KEYS.language, config?.defaults.language ?? "pl", (raw) => raw));
}
function getVisibleWidgets(ids: WidgetId[]): WidgetId[] { const base = ids.filter((id, index) => ids.indexOf(id) === index); return base.length > 0 ? base : DEFAULT_KIOSK_WIDGETS; }
function toWidgetIds(ids: string[]): WidgetId[] { return getVisibleWidgets(ids.filter((id): id is WidgetId => widgetOrder.some((item) => item.id === id as WidgetId))); }
function getMetricCandidates(snapshot: SnapshotPayload, config?: DashboardConfig) {
const fromConfig = (config?.visible_entities ?? [])
.filter((item) => item.kind === "gauge")
.map((item) => ({ metric_id: item.metric_id, label: item.label, unit: item.unit }));
const map = new Map<string, { metric_id: string; label: string; unit: string }>();
fromConfig.forEach((item) => map.set(item.metric_id, item));
return [...map.values()];
}
export default function App() {
const queryClient = useQueryClient();
const publicMode = PUBLIC_KIOSK;
const authQuery = useQuery<AuthStatus>({ queryKey: ["auth-status", publicMode], queryFn: api.getAuthStatus, staleTime: 20_000, retry: false, enabled: !publicMode });
const authEnabled = publicMode ? false : (authQuery.data?.enabled ?? true);
const authenticated = publicMode ? true : (authQuery.data ? (!authEnabled || authQuery.data.authenticated) : false);
const configQuery = useDashboardConfig(authenticated || authEnabled === false);
const config = configQuery.data;
const privateKioskSettingsQuery = useQuery<KioskSettingsPayload>({ queryKey: ["kiosk-settings", "private"], queryFn: () => api.getKioskSettings("private"), enabled: authenticated || authEnabled === false, staleTime: 30_000 });
const publicKioskSettingsQuery = useQuery<KioskSettingsPayload>({ queryKey: ["kiosk-settings", "public"], queryFn: () => api.getKioskSettings("public"), enabled: authenticated || authEnabled === false || publicMode, staleTime: 30_000 });
const [theme, setTheme] = useState<ThemeMode>(() => getInitialTheme(undefined));
const [language, setLanguage] = useState<Language>(() => getInitialLanguage(undefined));
const [activeTab, setActiveTab] = useState<TabKey>(publicMode ? "kiosk" : "realtime");
const [realtimeRange, setRealtimeRange] = useState("6h");
const [analyticsRange, setAnalyticsRange] = useState("30d");
const [bucket, setBucket] = useState("day");
const [compare, setCompare] = useState("previous_year");
const [analyticsStart, setAnalyticsStart] = useState("");
const [analyticsEnd, setAnalyticsEnd] = useState("");
const [compareRanges, setCompareRanges] = useState<Array<{ key: string; label: string; start: string; end: string }>>([{ key: "cmp_1", label: "Porównanie 1", start: "", end: "" }, { key: "cmp_2", label: "Porównanie 2", start: "", end: "" }]);
const [archiveStart, setArchiveStart] = useState("");
const [archiveEnd, setArchiveEnd] = useState("");
const [archiveRange, setArchiveRange] = useState("1d");
const [liveMetrics, setLiveMetrics] = useState<string[]>(() => readStorage(STORAGE_KEYS.liveMetrics, DEFAULT_LIVE_METRICS));
const [archiveMetrics, setArchiveMetrics] = useState<string[]>(() => readStorage(STORAGE_KEYS.archiveMetrics, DEFAULT_LIVE_METRICS));
const [viewMode, setViewMode] = useState<ViewMode>(() => { const fromUrl = parseViewModeFromLocation(); return fromUrl === "kiosk" ? fromUrl : readStorage<ViewMode>(STORAGE_KEYS.viewMode, "normal", (raw) => (raw === "kiosk" ? "kiosk" : "normal")); });
const [kioskWidgets, setKioskWidgets] = useState<WidgetId[]>(() => getVisibleWidgets(readStorage<WidgetId[]>(STORAGE_KEYS.kioskWidgets, DEFAULT_KIOSK_WIDGETS)));
const [kioskEditorMode, setKioskEditorMode] = useState<"private" | "public">("private");
const [privateKioskDraft, setPrivateKioskDraft] = useState<KioskSettingsPayload>({ mode: "private", widgets: DEFAULT_KIOSK_WIDGETS, realtime_range: "12h", analytics_range: "30d", analytics_bucket: "day", compare_mode: "none" });
const [publicKioskDraft, setPublicKioskDraft] = useState<KioskSettingsPayload>({ mode: "public", widgets: DEFAULT_KIOSK_WIDGETS, realtime_range: "12h", analytics_range: "30d", analytics_bucket: "day", compare_mode: "none" });
const [blockConfig, setBlockConfig] = useState<Record<BlockTarget, string[]>>(() => readStorage(STORAGE_KEYS.blockConfig, DEFAULT_BLOCK_CONFIG));
const [loginForm, setLoginForm] = useState({ username: "", password: "" });
const [loginError, setLoginError] = useState<string | null>(null);
const [newUser, setNewUser] = useState({ username: "", display_name: "", password: "", role: "user" });
const [passwordReset, setPasswordReset] = useState<{ username: string; password: string }>({ username: "", password: "" });
const initializedRef = useRef(false);
useEffect(() => {
if (!config || initializedRef.current) return;
initializedRef.current = true;
setActiveTab((config.defaults.tab as TabKey) || (publicMode ? "kiosk" : "realtime"));
setRealtimeRange(config.defaults.realtime_range);
setAnalyticsRange(config.defaults.analytics_range);
setBucket(config.defaults.analytics_bucket);
setTheme((current) => current || ((config.defaults.theme as ThemeMode) ?? "dark"));
setLanguage((current) => current || normalizeLanguage(config.defaults.language));
}, [config, publicMode]);
useEffect(() => { if (privateKioskSettingsQuery.data) setPrivateKioskDraft(privateKioskSettingsQuery.data); }, [privateKioskSettingsQuery.data]);
useEffect(() => { if (publicKioskSettingsQuery.data) setPublicKioskDraft(publicKioskSettingsQuery.data); }, [publicKioskSettingsQuery.data]);
useEffect(() => { document.documentElement.setAttribute("data-bs-theme", theme); document.body.setAttribute("data-bs-theme", theme); writeStorage(STORAGE_KEYS.theme, theme); }, [theme]);
useEffect(() => { writeStorage(STORAGE_KEYS.language, language); }, [language]);
useEffect(() => { syncViewModeToLocation(viewMode); writeStorage(STORAGE_KEYS.viewMode, viewMode); }, [viewMode]);
useEffect(() => { writeStorage(STORAGE_KEYS.kioskWidgets, kioskWidgets); }, [kioskWidgets]);
useEffect(() => { writeStorage(STORAGE_KEYS.blockConfig, blockConfig); }, [blockConfig]);
useEffect(() => { writeStorage(STORAGE_KEYS.liveMetrics, liveMetrics); }, [liveMetrics]);
useEffect(() => { writeStorage(STORAGE_KEYS.archiveMetrics, archiveMetrics); }, [archiveMetrics]);
const dataEnabled = authenticated || authEnabled === false;
const { snapshot, connected, lastUpdated } = useRealtimeSocket(dataEnabled);
const metricCandidates = useMemo(() => getMetricCandidates(snapshot, config), [snapshot, config]);
useEffect(() => {
if (!metricCandidates.length) return;
const allowed = new Set(metricCandidates.map((item) => item.metric_id));
setLiveMetrics((current) => {
const filtered = current.filter((item) => allowed.has(item));
return filtered.length ? filtered : metricCandidates.slice(0, 3).map((item) => item.metric_id);
});
setArchiveMetrics((current) => {
const filtered = current.filter((item) => allowed.has(item));
return filtered.length ? filtered : metricCandidates.slice(0, 3).map((item) => item.metric_id);
});
}, [metricCandidates]);
const liveHistoryMetrics = useMemo(() => liveMetrics.filter((item) => item !== "inverter_temp"), [liveMetrics]);
const effectiveKioskSettings = publicMode ? publicKioskDraft : privateKioskDraft;
const kioskActive = publicMode || viewMode === "kiosk";
const effectiveKioskWidgets = toWidgetIds(kioskActive ? effectiveKioskSettings.widgets : kioskWidgets);
const effectiveRealtimeRange = kioskActive ? effectiveKioskSettings.realtime_range : realtimeRange;
const effectiveAnalyticsRange = kioskActive ? effectiveKioskSettings.analytics_range : analyticsRange;
const effectiveBucket = kioskActive ? effectiveKioskSettings.analytics_bucket : bucket;
const effectiveCompare = kioskActive ? effectiveKioskSettings.compare_mode : compare;
const historyQuery = useRealtimeHistory(effectiveRealtimeRange, dataEnabled, { metrics: liveHistoryMetrics, publicKiosk: publicMode });
const sanitizedCompareRanges = compareRanges.filter((item) => item.start && item.end);
const analyticsOptions = analyticsStart && analyticsEnd && !kioskActive ? { start: analyticsStart, end: analyticsEnd, publicKiosk: publicMode, compareRanges: effectiveCompare === "custom_multi" ? sanitizedCompareRanges : undefined } : { publicKiosk: publicMode, compareRanges: effectiveCompare === "custom_multi" ? sanitizedCompareRanges : undefined };
const analyticsQuery = useAnalytics(analyticsStart && analyticsEnd && !kioskActive ? "custom" : effectiveAnalyticsRange, effectiveBucket, effectiveCompare, dataEnabled, analyticsOptions);
const historical = useHistoricalImport(dataEnabled && !publicMode);
const archiveQuery = useRealtimeHistory(archiveStart && archiveEnd ? "custom" : archiveRange, dataEnabled, { start: archiveStart || undefined, end: archiveEnd || undefined, metrics: archiveMetrics, publicKiosk: publicMode });
const usersQuery = useQuery<AuthUsersPayload>({ queryKey: ["auth-users"], queryFn: api.getUsers, enabled: dataEnabled && (authQuery.data?.role === "admin"), staleTime: 15_000 });
const loginMutation = useMutation({ mutationFn: () => api.login(loginForm.username, loginForm.password), onSuccess: async () => { setLoginError(null); setLoginForm((value) => ({ ...value, password: "" })); await queryClient.invalidateQueries({ queryKey: ["auth-status"] }); await queryClient.invalidateQueries({ queryKey: ["dashboard-config"] }); }, onError: (error: Error) => setLoginError(parseError(error) || t(language, "loginError")) });
const logoutMutation = useMutation({ mutationFn: api.logout, onSuccess: async () => { await queryClient.clear(); await queryClient.invalidateQueries({ queryKey: ["auth-status"] }); } });
const createUserMutation = useMutation({ mutationFn: () => api.createUser(newUser), onSuccess: async () => { setNewUser({ username: "", display_name: "", password: "", role: "user" }); await usersQuery.refetch(); } });
const resetPasswordMutation = useMutation({ mutationFn: () => api.resetUserPassword(passwordReset.username, passwordReset.password), onSuccess: async () => { setPasswordReset({ username: "", password: "" }); await usersQuery.refetch(); } });
const saveKioskSettingsMutation = useMutation({ mutationFn: (payload: KioskSettingsPayload) => api.saveKioskSettings(payload), onSuccess: async (_, payload) => { await queryClient.invalidateQueries({ queryKey: ["kiosk-settings", payload.mode] }); } });
const locale = localeForLanguage(language);
const widgetLabels = useMemo(() => { const map = new Map<WidgetId, string>(); for (const item of widgetOrder) map.set(item.id, buildWidgetLabel(language, item.id)); return map; }, [language]);
const summary = analyticsQuery.production.data?.summary;
const topStatus = snapshot.status ?? [];
const heroCards = snapshot.hero_cards.filter((card) => blockConfig.hero.includes(card.metric_id));
const quickMetrics = Object.values(snapshot.kpis ?? {}).filter((metric) => blockConfig.quick.includes(metric.metric_id));
const isAdmin = authQuery.data?.role === "admin";
const kioskUrl = `${window.location.origin}${window.location.pathname}?mode=kiosk&publicKiosk=1`;
const allWidgets: Record<WidgetId, ReactElement | null> = {
hero: <HeroCards cards={heroCards} locale={locale} language={language} />,
quickMetrics: <QuickMetrics metrics={quickMetrics} locale={locale} language={language} />,
history: <LiveHistoryPanel data={historyQuery.data} language={language} theme={theme} title={t(language, "chartPowerHistory")} subtitle={t(language, "realtimeSubtitle")} />,
status: <StatusPanel metrics={topStatus} locale={locale} language={language} />,
strings: <StringsPanel rows={snapshot.strings} locale={locale} language={language} />,
production: <ProductionPanel data={analyticsQuery.production.data} language={language} theme={theme} />,
comparison: compare !== "none" ? <ComparisonPanel data={analyticsQuery.production.data} language={language} theme={theme} /> : null,
distribution: <DistributionPanel data={analyticsQuery.distribution.data} language={language} theme={theme} locale={locale} />,
importStatus: <HistoricalPanel status={historical.status.data} language={language} locale={locale} compact />,
};
const renderWidget = (widgetId: WidgetId) => { const content = allWidgets[widgetId]; if (!content) return null; return <div key={widgetId} className={widgetId === "hero" ? "col-12" : widgetId === "history" ? "col-12 col-xxl-8" : "col-12 col-xxl-4"}>{content}</div>; };
if ((!publicMode && authQuery.isLoading) || (authEnabled && !authenticated && loginMutation.isPending)) return <LoadingScreen language={language} />;
if (authEnabled && !authenticated) return <LoginPage language={language} theme={theme} form={loginForm} onChange={setLoginForm} onSubmit={() => loginMutation.mutate()} onThemeToggle={() => setTheme((current) => (current === "dark" ? "light" : "dark"))} onLanguageToggle={() => setLanguage((current) => (current === "pl" ? "en" : "pl"))} loading={loginMutation.isPending} error={loginError} />;
if (configQuery.isLoading || !config) return <LoadingScreen language={language} />;
const navbar = (
<header className="navbar navbar-expand-md d-print-none pv-navbar">
<div className="container-xl">
<div className="navbar-brand navbar-brand-autodark d-flex align-items-center gap-2"><span className="avatar avatar-sm bg-primary-lt text-primary border-0"><IconBolt size={18} /></span><div><div className="fw-bold">{config.app.site_name}</div><div className="text-secondary small">{t(language, "operatorPanel")}</div></div></div>
<div className="navbar-nav flex-row order-md-last align-items-center gap-2">
<span className={`badge ${connected ? "bg-green-lt text-green" : "bg-yellow-lt text-yellow"}`}>{connected ? t(language, "connected") : t(language, "disconnected")}</span>
<button className="btn btn-icon btn-ghost-secondary" onClick={() => setTheme((current) => (current === "dark" ? "light" : "dark"))} title={t(language, "theme")}>{theme === "dark" ? <IconSun size={18} /> : <IconMoon size={18} />}</button>
<button className="btn btn-icon btn-ghost-secondary" onClick={() => setLanguage((current) => (current === "pl" ? "en" : "pl"))} title={t(language, "language")}><IconLanguage size={18} /></button>
{!publicMode ? <button className="btn btn-outline-primary" onClick={() => setViewMode((current) => (current === "normal" ? "kiosk" : "normal"))}><IconDeviceDesktop size={18} className="me-1" />{viewMode === "normal" ? t(language, "openKiosk") : t(language, "exitKiosk")}</button> : null}
{!publicMode ? <button className="btn btn-outline-secondary" onClick={() => logoutMutation.mutate()}><IconLogout size={18} className="me-1" />{t(language, "signOut")}</button> : null}
</div>
</div>
</header>
);
const menu = (
<div className="navbar-expand-md pv-subnav border-bottom"><div className="container-xl"><div className="navbar-collapse"><ul className="navbar-nav">
<NavItem icon={<IconLayoutDashboard size={18} />} active={activeTab === "realtime"} onClick={() => setActiveTab("realtime")} label={language === "en" ? "Live" : "Live"} />
<NavItem icon={<IconHistory size={18} />} active={activeTab === "archive"} onClick={() => setActiveTab("archive")} label={language === "en" ? "Historical live" : "Dane chwilowe"} />
<NavItem icon={<IconChartBar size={18} />} active={activeTab === "analytics"} onClick={() => setActiveTab("analytics")} label={t(language, "analytics")} />
<NavItem icon={<IconDatabaseImport size={18} />} active={activeTab === "warehouse"} onClick={() => setActiveTab("warehouse")} label={language === "en" ? "Data warehouse" : "Hurtownia danych"} />
<NavItem icon={<IconDeviceDesktop size={18} />} active={activeTab === "kiosk"} onClick={() => setActiveTab("kiosk")} label={t(language, "kiosk")} />
<NavItem icon={<IconSettings size={18} />} active={activeTab === "settings"} onClick={() => setActiveTab("settings")} label={t(language, "settings")} />
</ul><div className="ms-auto text-secondary small d-none d-md-flex align-items-center gap-2"><IconClockHour4 size={16} />{t(language, "updatedAt")}: {formatDateTime(lastUpdated, locale)}</div></div></div></div>
);
if (viewMode === "kiosk" || publicMode) {
return <div className="page kiosk-shell"><div className="container-fluid py-3 px-3 px-xl-4"><div className="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3"><div><div className="h2 mb-0">{config.app.site_name}</div><div className="text-secondary">{t(language, "kioskHint")}</div></div><div className="d-flex gap-2"><button className="btn btn-primary" onClick={() => requestFullscreen()}><IconDeviceDesktop size={18} className="me-1" />{t(language, "fullscreen")}</button>{!publicMode ? <button className="btn btn-outline-secondary" onClick={() => setViewMode("normal")}><IconX size={18} className="me-1" />{t(language, "exitKiosk")}</button> : null}</div></div><div className="row row-cards g-3">{effectiveKioskWidgets.map((widgetId) => renderWidget(widgetId))}</div></div></div>;
}
return (
<div className="page">{navbar}{menu}<div className="page-wrapper"><div className="page-body"><div className="container-xl">
{activeTab === "realtime" && <><PageHeader title={t(language, "realtimeOverview")} subtitle={t(language, "realtimeSubtitle")}><SegmentedSelect label={t(language, "liveRange")} value={realtimeRange} onChange={setRealtimeRange} options={liveRangeOptions(language)} /></PageHeader><div className="row row-cards g-3">{renderWidget("hero")}<div className="col-12 col-xl-4">{allWidgets.quickMetrics}</div><div className="col-12 col-xl-8">{allWidgets.history}</div><div className="col-12 col-xl-4">{allWidgets.status}</div><div className="col-12 col-xl-8">{allWidgets.strings}</div></div></>}
{activeTab === "archive" && <><PageHeader title={language === "en" ? "Historical live data" : "Dane chwilowe z historii"} subtitle={language === "en" ? "Browse all instant metrics for any past period." : "Podgląd metryk chwilowych dla dowolnego okresu, nie tylko live."}><div className="d-flex flex-wrap gap-2 align-items-end"><SegmentedSelect label={language === "en" ? "Range" : "Zakres"} value={archiveStart && archiveEnd ? "custom" : archiveRange} onChange={(value) => { setArchiveRange(value); applyArchivePreset(value, setArchiveStart, setArchiveEnd); }} options={archiveRangeOptions(language)} /><div><label className="form-label small mb-1">{language === "en" ? "From" : "Od"}</label><input className="form-control form-control-sm" type="datetime-local" value={archiveStart} onChange={(e) => { setArchiveRange("custom"); setArchiveStart(e.target.value); }} /></div><div><label className="form-label small mb-1">{language === "en" ? "To" : "Do"}</label><input className="form-control form-control-sm" type="datetime-local" value={archiveEnd} onChange={(e) => { setArchiveRange("custom"); setArchiveEnd(e.target.value); }} /></div></div></PageHeader><div className="row row-cards g-3"><div className="col-12 col-xl-4"><MetricSelectorCard language={language} title={language === "en" ? "Metrics on chart" : "Metryki na wykresie"} items={metricCandidates.filter((item) => item.metric_id !== "energy_total")} selected={archiveMetrics.filter((item) => item !== "energy_total")} onChange={setArchiveMetrics} /></div><div className="col-12 col-xl-8"><LiveHistoryPanel data={archiveQuery.data} language={language} theme={theme} title={language === "en" ? "Historical chart" : "Wykres historyczny"} subtitle={language === "en" ? "Raw instant metrics from InfluxDB only." : "Tylko surowe metryki chwilowe z InfluxDB."} /></div></div></>}
{activeTab === "analytics" && <><PageHeader title={t(language, "analyticsOverview")} subtitle={t(language, "analyticsSubtitle")}><div className="d-flex flex-wrap gap-2 align-items-end"><SegmentedSelect label={t(language, "range")} value={analyticsStart && analyticsEnd ? "custom" : analyticsRange} onChange={(value) => { if (value !== "custom") { setAnalyticsRange(value); setAnalyticsStart(""); setAnalyticsEnd(""); } }} options={[...config.capabilities.ranges.filter((item) => !["6h", "24h"].includes(item.key)).map((item) => ({ key: item.key, label: item.label })), { key: "custom", label: language === "en" ? "Custom" : "Ręczny" }]} /><SegmentedSelect label={t(language, "bucket")} value={bucket} onChange={setBucket} options={config.capabilities.buckets.map((item) => ({ key: item.key, label: translateBucket(language, item.key) }))} /><SegmentedSelect label={language === "en" ? "Comparison" : "Porównanie"} value={compare} onChange={setCompare} options={comparisonOptions(language)} /></div></PageHeader>{analyticsStart || analyticsEnd || (analyticsRange === "custom") || compare === "custom_multi" ? <div className="card pv-card mb-3"><div className="card-body d-flex flex-column gap-3"><div className="row g-3"><div className="col-md-3"><label className="form-label">{language === "en" ? "Start" : "Od"}</label><input className="form-control" type="datetime-local" value={analyticsStart} onChange={(e) => setAnalyticsStart(e.target.value)} /></div><div className="col-md-3"><label className="form-label">{language === "en" ? "End" : "Do"}</label><input className="form-control" type="datetime-local" value={analyticsEnd} onChange={(e) => setAnalyticsEnd(e.target.value)} /></div><div className="col-md-6 d-flex align-items-end"><button className="btn btn-outline-secondary" onClick={() => { setAnalyticsStart(""); setAnalyticsEnd(""); }}>{language === "en" ? "Use preset range" : "Wróć do gotowych zakresów"}</button></div></div>{compare === "custom_multi" ? <div className="border rounded-3 p-3"><div className="fw-semibold mb-3">{language === "en" ? "Comparison ranges" : "Zakresy porównawcze"}</div><div className="row g-3">{compareRanges.map((item, index) => <div className="col-12" key={item.key}><div className="row g-2 align-items-end"><div className="col-md-3"><label className="form-label">{language === "en" ? `Range ${index + 1} label` : `Etykieta ${index + 1}`}</label><input className="form-control" value={item.label} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, label: e.target.value } : current))} /></div><div className="col-md-3"><label className="form-label">{language === "en" ? "From" : "Od"}</label><input className="form-control" type="datetime-local" value={item.start} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, start: e.target.value } : current))} /></div><div className="col-md-3"><label className="form-label">{language === "en" ? "To" : "Do"}</label><input className="form-control" type="datetime-local" value={item.end} onChange={(e) => setCompareRanges(compareRanges.map((current) => current.key === item.key ? { ...current, end: e.target.value } : current))} /></div><div className="col-md-3"><button className="btn btn-outline-secondary w-100" onClick={() => setCompareRanges(compareRanges.length > 1 ? compareRanges.filter((current) => current.key !== item.key) : compareRanges)}>{language === "en" ? "Remove range" : "Usuń zakres"}</button></div></div></div>)}<div className="col-12"><button className="btn btn-primary" onClick={() => setCompareRanges([...compareRanges, { key: `cmp_${Date.now()}`, label: `${language === "en" ? "Range" : "Zakres"} ${compareRanges.length + 1}`, start: "", end: "" }])}>{language === "en" ? "Add range" : "Dodaj zakres"}</button></div></div></div> : null}</div></div> : null}<div className="row row-cards g-3"><div className="col-12"><SummaryCards summary={summary} language={language} locale={locale} compareLabel={comparisonOptions(language).find((item) => item.key === compare)?.label ?? compare} /></div><div className="col-12 col-xxl-8">{allWidgets.production}</div><div className="col-12 col-xxl-4">{allWidgets.distribution}</div>{compare !== "none" ? <div className="col-12">{allWidgets.comparison}</div> : null}</div></>}
{activeTab === "warehouse" && <><PageHeader title={language === "en" ? "Data warehouse" : "Hurtownia danych"} subtitle={language === "en" ? "Historical import and coverage." : "Import historyczny i pokrycie danych."} /><div className="row row-cards g-3"><div className="col-12 col-xxl-8"><HistoricalPanel status={historical.status.data} language={language} locale={locale} /></div><div className="col-12 col-xxl-4"><ImportControls status={historical.status.data} language={language} onStart={(payload) => historical.start.mutate(payload)} onSyncNow={() => historical.syncNow.mutate()} onCancel={() => historical.cancel.mutate()} /></div></div></>}
{activeTab === "kiosk" && <><PageHeader title={t(language, "kiosk")} subtitle={language === "en" ? "Kiosk layout and public access." : "Układ kiosku i dostęp publiczny."} /><div className="row row-cards g-3"><div className="col-12 col-xxl-8"><KioskSettingsEditorPanel language={language} value={kioskEditorMode === "public" ? publicKioskDraft : privateKioskDraft} onChange={(value) => kioskEditorMode === "public" ? setPublicKioskDraft(value) : setPrivateKioskDraft(value)} onModeChange={setKioskEditorMode} selectedMode={kioskEditorMode} labels={widgetLabels} buckets={config.capabilities.buckets} compareModes={config.capabilities.comparison_modes} saving={saveKioskSettingsMutation.isPending && saveKioskSettingsMutation.variables?.mode === kioskEditorMode} onSave={() => saveKioskSettingsMutation.mutate(kioskEditorMode === "public" ? publicKioskDraft : privateKioskDraft)} /></div><div className="col-12 col-xxl-4"><KioskLinkPanel language={language} kioskUrl={kioskUrl} settings={publicKioskDraft} /></div></div></>}
{activeTab === "settings" && <><PageHeader title={t(language, "settings")} subtitle={language === "en" ? "Appearance, metric blocks and admin users." : "Wygląd, bloki metryk i użytkownicy."} /><div className="row row-cards g-3"><div className="col-12 col-xxl-4"><AppearanceSecurityPanel language={language} theme={theme} setTheme={setTheme} viewMode={viewMode} setViewMode={setViewMode} authEnabled={config.auth?.enabled ?? false} userName={authQuery.data?.display_name ?? authQuery.data?.user ?? ""} /></div><div className="col-12 col-xxl-8"><div className="row g-3"><div className="col-12"><LiveChartMetricsPanel language={language} items={metricCandidates.filter((item) => item.metric_id !== "energy_total")} selected={liveMetrics.filter((item) => item !== "energy_total")} onChange={setLiveMetrics} /></div><div className="col-12"><BlockVisibilityPanel language={language} items={metricCandidates} config={blockConfig} onChange={setBlockConfig} /></div></div></div>{isAdmin ? <div className="col-12"><AdminUsersPanel language={language} users={usersQuery.data?.items ?? []} newUser={newUser} onNewUserChange={setNewUser} onCreate={() => createUserMutation.mutate()} passwordReset={passwordReset} onPasswordResetChange={setPasswordReset} onResetPassword={() => resetPasswordMutation.mutate()} /></div> : null}</div></>}
</div></div></div></div>
);
}
function parseError(error: Error): string | null { const match = error.message.match(/"detail"\s*:\s*"([^"]+)"/); return match?.[1] ?? error.message; }
function requestFullscreen() { const element = document.documentElement as HTMLElement & { webkitRequestFullscreen?: () => Promise<void> | void; msRequestFullscreen?: () => Promise<void> | void; }; if (element.requestFullscreen) { void element.requestFullscreen(); return; } if (element.webkitRequestFullscreen) { void element.webkitRequestFullscreen(); return; } if (element.msRequestFullscreen) void element.msRequestFullscreen(); }
function translateBucket(language: Language, key: string): string { const map: Record<string, { pl: string; en: string }> = { day: { pl: "Dzień", en: "Day" }, week: { pl: "Tydzień", en: "Week" }, month: { pl: "Miesiąc", en: "Month" }, year: { pl: "Rok", en: "Year" } }; return map[key]?.[language] ?? key; }
function comparisonOptions(language: Language) { return [{ key: "none", label: translateCompareMode(language, "none") }, { key: "previous_period", label: translateCompareMode(language, "previous_period") }, { key: "previous_year", label: translateCompareMode(language, "previous_year") }, { key: "previous_year_2", label: translateCompareMode(language, "previous_year_2") }, { key: "previous_year_3", label: translateCompareMode(language, "previous_year_3") }, { key: "previous_month_12", label: translateCompareMode(language, "previous_month_12") }, { key: "previous_month_24", label: translateCompareMode(language, "previous_month_24") }, { key: "custom_multi", label: translateCompareMode(language, "custom_multi") }]; }
function applyArchivePreset(rangeKey: string, setStart: (value: string) => void, setEnd: (value: string) => void) {
if (rangeKey !== "custom") {
setStart("");
setEnd("");
}
}
function LoadingScreen({ language }: { language: Language }) { return <div className="page page-center"><div className="container container-tight py-4 text-center"><div className="spinner-border text-primary mb-3" role="status" /><div className="text-secondary">{t(language, "loading")}…</div></div></div>; }
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 <div className="page page-center login-page-shell"><div className="container container-tight py-4"><div className="text-center mb-4"><div className="avatar avatar-xl bg-primary-lt text-primary mb-3 border-0 mx-auto"><IconBolt size={28} /></div><h1 className="h2 mb-1">{t(language, "loginTitle")}</h1><div className="text-secondary">{t(language, "loginSubtitle")}</div></div><div className="card card-md login-card"><div className="card-body"><div className="d-flex justify-content-end gap-2 mb-3"><button className="btn btn-icon btn-ghost-secondary" onClick={onThemeToggle}>{theme === "dark" ? <IconSun size={18} /> : <IconMoon size={18} />}</button><button className="btn btn-icon btn-ghost-secondary" onClick={onLanguageToggle}><IconLanguage size={18} /></button></div><div className="mb-3"><label className="form-label">{t(language, "username")}</label><input className="form-control" value={form.username} onChange={(event) => onChange({ ...form, username: event.target.value })} autoComplete="username" /></div><div className="mb-3"><label className="form-label">{t(language, "password")}</label><input className="form-control" type="password" value={form.password} onChange={(event) => onChange({ ...form, password: event.target.value })} autoComplete="current-password" onKeyDown={(event) => event.key === "Enter" && onSubmit()} /></div>{error ? <div className="alert alert-danger py-2">{error}</div> : null}<button className="btn btn-primary w-100" onClick={onSubmit} disabled={loading}><IconLogin2 size={18} className="me-1" />{t(language, "signIn")}</button></div></div></div></div>; }
function NavItem({ icon, active, onClick, label }: { icon: ReactElement; active: boolean; onClick: () => void; label: string }) { return <li className="nav-item"><button className={`nav-link border-0 bg-transparent pv-nav-link ${active ? "active" : ""}`} onClick={onClick}><span className="pv-nav-icon">{icon}</span><span className="pv-nav-title">{label}</span></button></li>; }
function PageHeader({ title, subtitle, children }: { title: string; subtitle: string; children?: ReactNode }) { return <div className="page-header d-print-none mb-3"><div className="row align-items-center"><div className="col"><div className="page-pretitle">PV Insight</div><h2 className="page-title mb-1">{title}</h2><div className="text-secondary">{subtitle}</div></div>{children ? <div className="col-auto ms-auto">{children}</div> : null}</div></div>; }
function SegmentedSelect({ label, value, onChange, options }: { label: string; value: string; onChange: (value: string) => void; options: Array<{ key: string; label: string }> }) { return <div className="btn-list align-items-center flex-nowrap"><span className="text-secondary small me-2 d-none d-md-inline">{label}</span><div className="btn-group">{options.map((option) => <button key={option.key} className={`btn btn-sm ${value === option.key ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => onChange(option.key)}>{option.label}</button>)}</div></div>; }
function HeroCards({ cards, locale, language }: { cards: SnapshotPayload["hero_cards"]; locale: string; language: Language }) { return <div className="row row-cards g-3">{cards.map((card) => <div key={card.metric_id} className="col-12 col-sm-6 col-xl-3"><div className="card pv-card pv-hero-card h-100"><div className="card-body"><div className="d-flex align-items-center justify-content-between mb-3"><span className="avatar avatar-sm bg-primary-lt text-primary border-0">{iconForMetric(card.metric_id)}</span><span className="badge bg-primary-lt text-primary text-uppercase">{card.unit || "live"}</span></div><div className="text-secondary text-uppercase small mb-1">{labelForMetric(language, card.metric_id, card.label)}</div><div className="display-6 fw-bold mb-1">{formatValue(card.value, card.unit, card.unit === "kWh" ? 2 : 2, locale)}</div><div className="text-secondary small">{card.subtitle}</div></div></div></div>)}</div>; }
function QuickMetrics({ metrics, locale, language }: { metrics: MetricValue[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "quickMetrics")}</h3></div><div className="list-group list-group-flush list-group-hoverable">{metrics.map((metric) => <div className="list-group-item" key={metric.metric_id}><div className="row align-items-center"><div className="col-auto text-primary">{iconForMetric(metric.metric_id)}</div><div className="col text-truncate"><div className="fw-medium">{labelForMetric(language, metric.metric_id, metric.label)}</div><div className="text-secondary small">{metric.unit || t(language, "status")}</div></div><div className="col-auto fw-semibold">{formatValue(metric.value, metric.unit, 2, locale)}</div></div></div>)}</div></div>; }
function LiveHistoryPanel({ data, language, theme, title, subtitle }: { data?: HistoryPayload; language: Language; theme: ThemeMode; title: string; subtitle: string }) { return <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{title}</h3><div className="text-secondary small">{subtitle}</div></div></div><div className="card-body"><EChart option={buildLiveHistoryOption(data, theme, language)} className="pv-chart" /></div></div>; }
function StatusPanel({ metrics, locale, language }: { metrics: MetricValue[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "systemStatus")}</h3></div><div className="card-body d-flex flex-column gap-3">{metrics.map((metric) => <div key={metric.metric_id} className="d-flex justify-content-between align-items-center border rounded-3 px-3 py-2 status-row"><div><div className="fw-medium">{labelForMetric(language, metric.metric_id, metric.label)}</div><div className="text-secondary small">{metric.unit || t(language, "status")}</div></div><div className="fw-semibold">{formatValue(metric.value, metric.unit, 2, locale)}</div></div>)}</div></div>; }
function StringsPanel({ rows, locale, language }: { rows: SnapshotGroupRow[]; locale: string; language: Language }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "strings")}</h3></div><div className="card-body"><div className="row g-3">{rows.length === 0 ? <div className="col-12 text-secondary">{t(language, "noDataDescription")}</div> : rows.map((row) => <div className="col-12 col-md-6" key={row.id}><div className="border rounded-3 p-3 h-100 string-panel"><div className="d-flex align-items-center justify-content-between mb-3"><div className="fw-semibold">{row.label}</div><span className="badge bg-azure-lt text-azure">DC</span></div><div className="d-flex flex-column gap-2">{Object.values(row.values).map((metric) => <div key={metric.metric_id} className="d-flex justify-content-between small"><span className="text-secondary">{labelForMetric(language, metric.metric_id, metric.label)}</span><span className="fw-medium">{formatValue(metric.value, metric.unit, 2, locale)}</span></div>)}</div></div></div>)}</div></div></div>; }
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 <div className="row row-cards g-3">{items.map((item) => <div className="col-12 col-sm-6 col-xl-3" key={item.key}><div className="card pv-card h-100"><div className="card-body"><div className="text-secondary text-uppercase small mb-1">{item.key}</div><div className="h2 mb-0">{item.value}</div>{item.badge ? <div className="mt-2"><span className="badge bg-primary-lt text-primary">{item.badge}</span></div> : null}</div></div></div>)}</div>; }
function ProductionPanel({ data, language, theme }: { data?: AnalyticsPayload; language: Language; theme: ThemeMode }) { return <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{t(language, "chartProduction")}</h3><div className="text-secondary small">{t(language, "chartProductionSubtitle")}</div></div></div><div className="card-body"><EChart option={buildBarOption(data?.current ?? [], data?.unit ?? "kWh", theme, language)} className="pv-chart" /></div></div>; }
function ComparisonPanel({ data, language, theme }: { data?: AnalyticsPayload; language: Language; theme: ThemeMode }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "chartComparison")}</h3></div><div className="card-body"><EChart option={buildComparisonOption(data, theme, language)} className="pv-chart" /></div></div>; }
function DistributionPanel({ data, language, theme, locale }: { data?: DistributionPayload; language: Language; theme: ThemeMode; locale: string }) { return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{t(language, "chartDistribution")}</h3></div><div className="card-body"><div className="mb-3 fw-semibold">{formatValue(data?.total, data?.unit ?? "kWh", 2, locale)}</div><EChart option={buildPieOption(data, theme)} className="pv-chart-sm" /></div></div>; }
function HistoricalPanel({ status, language, locale, compact = false }: { status?: HistoricalStatus; language: Language; locale: string; compact?: boolean }) { if (!status) return <div className="card pv-card h-100"><div className="card-body text-secondary">{t(language, "noDataDescription")}</div></div>; return <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{language === "en" ? "Data warehouse" : "Hurtownia danych"}</h3><div className="text-secondary small">{t(language, "importArchiveSubtitle")}</div></div></div><div className="card-body d-flex flex-column gap-4"><div className="row g-3"><StatusStat label={t(language, "status")} value={status.message || status.state} /><StatusStat label={t(language, "coverage")} value={formatPercent(status.coverage.coverage_pct ?? 0, 1, locale)} /><StatusStat label={t(language, "importedDays")} value={formatValue(status.coverage.imported_days, "", 0, locale)} /><StatusStat label={t(language, "missingDays")} value={formatValue(status.coverage.missing_days, "", 0, locale)} /><StatusStat label={t(language, "throughput")} value={`${formatValue(status.avg_days_per_minute ?? 0, "", 1, locale)} / min`} /><StatusStat label={t(language, "eta")} value={formatDurationShort(status.estimated_remaining_seconds, locale)} /></div>{!compact ? <><div><div className="d-flex justify-content-between small mb-2"><span className="text-secondary">{t(language, "activeChunk")}</span><span className="fw-medium">{status.active_chunk_index}/{status.total_chunks}</span></div><div className="progress progress-sm"><div className="progress-bar" style={{ width: `${Math.min((status.processed_days / Math.max(status.total_days, 1)) * 100, 100)}%` }} /></div></div><div className="row g-3"><div className="col-12 col-xl-6"><div className="table-responsive"><table className="table table-vcenter card-table table-sm"><thead><tr><th>{t(language, "recentChunks")}</th><th>{t(language, "status")}</th><th className="text-end">kWh</th></tr></thead><tbody>{status.recent_chunks.map((chunk) => <tr key={`${chunk.chunk_index}-${chunk.start_date}`}><td><div className="fw-medium">#{chunk.chunk_index}</div><div className="text-secondary small">{chunk.start_date} → {chunk.end_date}</div></td><td>{chunk.state}</td><td className="text-end">{formatValue(chunk.energy_kwh, "kWh", 2, locale)}</td></tr>)}</tbody></table></div></div><div className="col-12 col-xl-6"><div className="list-group list-group-flush">{status.recent_events.map((event, index) => <div className="list-group-item px-0" key={`${event.timestamp}-${index}`}><div className="d-flex justify-content-between gap-2"><div><div className="fw-medium">{event.title}</div><div className="text-secondary small">{event.message}</div></div><div className="text-secondary small text-nowrap">{formatShortTime(event.timestamp, locale)}</div></div></div>)}</div></div></div></> : null}</div></div>; }
function StatusStat({ label, value }: { label: string; value: string }) { return <div className="col-6 col-md-4 col-xl-2"><div className="border rounded-3 px-3 py-2 h-100 bg-body-tertiary"><div className="text-secondary small mb-1">{label}</div><div className="fw-semibold">{value}</div></div></div>; }
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 <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{language === "en" ? "Import controls" : "Sterowanie importem"}</h3></div><div className="card-body d-flex flex-column gap-3"><div><label className="form-label">{t(language, "startDate")}</label><input className="form-control" type="date" value={startDate} onChange={(event) => setStartDate(event.target.value)} /></div><div><label className="form-label">{t(language, "endDate")}</label><input className="form-control" type="date" value={endDate} onChange={(event) => setEndDate(event.target.value)} /></div><div><label className="form-label">{t(language, "chunkDays")}</label><input className="form-control" type="number" min={1} max={31} value={chunkDays} onChange={(event) => setChunkDays(event.target.value)} /></div><div className="d-grid gap-2"><button className="btn btn-primary" onClick={() => onStart({ start_date: startDate || undefined, end_date: endDate || undefined, chunk_days: Number(chunkDays) || undefined, force: true })}><IconPlayerPlay size={18} className="me-1" />{t(language, "startImport")}</button><button className="btn btn-outline-secondary" onClick={onSyncNow}><IconRefresh size={18} className="me-1" />{t(language, "syncMissing")}</button><button className="btn btn-outline-danger" onClick={onCancel} disabled={!status?.running}><IconX size={18} className="me-1" />{t(language, "cancel")}</button></div></div></div>; }
function KioskLayoutPanel({ language, widgets, onChange, labels }: { language: Language; widgets: WidgetId[]; onChange: (value: WidgetId[]) => void; labels: Map<WidgetId, string>; }) { 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 <div className="card pv-card h-100"><div className="card-header"><div><h3 className="card-title">{t(language, "kioskLayout")}</h3><div className="text-secondary small">{t(language, "kioskLayoutSubtitle")}</div></div></div><div className="card-body"><div className="alert alert-info py-2">{t(language, "saveLayout")}</div><div className="row g-3"><div className="col-12 col-lg-7"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">{t(language, "selected")}</div><div className="d-flex flex-column gap-2">{selected.map((id) => <div key={id} className="d-flex align-items-center justify-content-between gap-2 border rounded-3 px-3 py-2 bg-body-tertiary"><span>{labels.get(id)}</span><div className="btn-list"><button className="btn btn-sm btn-outline-secondary" onClick={() => move(id, -1)}>{t(language, "moveUp")}</button><button className="btn btn-sm btn-outline-secondary" onClick={() => move(id, 1)}>{t(language, "moveDown")}</button><button className="btn btn-sm btn-outline-danger" onClick={() => toggle(id)}><IconX size={16} /></button></div></div>)}</div></div></div><div className="col-12 col-lg-5"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">{t(language, "available")}</div><div className="d-flex flex-wrap gap-2">{unselected.map((id) => <button key={id} className="btn btn-outline-primary" onClick={() => toggle(id)}>{labels.get(id)}</button>)}</div></div></div></div></div></div>; }
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<WidgetId, string>; buckets: Array<{ key: string; label: string }>; compareModes: string[]; saving: boolean; }) { const widgets = toWidgetIds(value.widgets); return <div className="d-flex flex-column gap-3"><div className="card pv-card"><div className="card-header"><h3 className="card-title">{language === "en" ? "Kiosk settings" : "Ustawienia kiosku"}</h3></div><div className="card-body d-flex flex-column gap-3"><div className="btn-group w-100"><button className={`btn ${selectedMode === "private" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => onModeChange("private")}>{language === "en" ? "Logged-in kiosk" : "Kiosk prywatny"}</button><button className={`btn ${selectedMode === "public" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => onModeChange("public")}>{language === "en" ? "Public kiosk" : "Kiosk publiczny"}</button></div><div className="row g-3"><div className="col-12 col-md-6"><label className="form-label small mb-1">{language === "en" ? "Live chart range" : "Zakres wykresu live"}</label><select className="form-select" value={value.realtime_range} onChange={(e) => onChange({ ...value, realtime_range: e.target.value })}>{liveRangeOptions(language).map((item) => <option key={item.key} value={item.key}>{item.label}</option>)}</select></div><div className="col-12 col-md-6"><label className="form-label small mb-1">{language === "en" ? "Analytics range" : "Zakres analityki"}</label><select className="form-select" value={value.analytics_range} onChange={(e) => onChange({ ...value, analytics_range: e.target.value })}>{analyticsRangeOptions(language).map((item) => <option key={item.key} value={item.key}>{item.label}</option>)}</select></div><div className="col-12 col-md-6"><label className="form-label small mb-1">Bucket</label><select className="form-select" value={value.analytics_bucket} onChange={(e) => onChange({ ...value, analytics_bucket: e.target.value })}>{buckets.map((item) => <option key={item.key} value={item.key}>{item.label}</option>)}</select></div><div className="col-12 col-md-6"><label className="form-label small mb-1">{language === "en" ? "Comparison" : "Porównanie"}</label><select className="form-select" value={value.compare_mode} onChange={(e) => onChange({ ...value, compare_mode: e.target.value })}><option value="none">{translateCompareMode(language, "none")}</option>{compareModes.filter((item) => item !== "none").map((item) => <option key={item} value={item}>{translateCompareMode(language, item)}</option>)}</select></div></div><div className="d-flex justify-content-end"><button className="btn btn-primary" onClick={onSave} disabled={saving}>{saving ? (language === "en" ? "Saving..." : "Zapisywanie...") : (language === "en" ? "Save kiosk settings" : "Zapisz ustawienia kiosku")}</button></div></div></div><KioskLayoutPanel language={language} widgets={widgets} onChange={(widgetsValue) => onChange({ ...value, widgets: widgetsValue })} labels={labels} /></div>; }
function KioskLinkPanel({ language, kioskUrl, settings }: { language: Language; kioskUrl: string; settings: KioskSettingsPayload }) { const [copied, setCopied] = useState(false); return <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{language === "en" ? "Public kiosk link" : "Publiczny link kiosku"}</h3></div><div className="card-body d-flex flex-column gap-3"><div className="text-secondary small">{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."}</div><input className="form-control" value={kioskUrl} readOnly /><div className="small text-secondary">{language === "en" ? "Current public ranges:" : "Aktualne zakresy publiczne:"} live {settings.realtime_range}, analytics {settings.analytics_range}</div><button className="btn btn-primary" onClick={async () => { await navigator.clipboard.writeText(kioskUrl); setCopied(true); window.setTimeout(() => setCopied(false), 1500); }}>{copied ? (language === "en" ? "Copied" : "Skopiowano") : (language === "en" ? "Copy link" : "Kopiuj link")}</button></div></div>; }
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 <div className="d-flex flex-column gap-3"><div className="card pv-card"><div className="card-header"><h3 className="card-title">{t(language, "theme")}</h3></div><div className="card-body d-flex flex-column gap-3"><div className="btn-group w-100"><button className={`btn ${theme === "light" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => setTheme("light")}>{t(language, "light")}</button><button className={`btn ${theme === "dark" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => setTheme("dark")}>{t(language, "dark")}</button></div></div></div><div className="card pv-card"><div className="card-header"><h3 className="card-title">{t(language, "viewMode")}</h3></div><div className="card-body d-flex flex-column gap-3"><div className="btn-group w-100"><button className={`btn ${viewMode === "normal" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => setViewMode("normal")}>{t(language, "normalMode")}</button><button className={`btn ${viewMode === "kiosk" ? "btn-primary" : "btn-outline-secondary"}`} onClick={() => setViewMode("kiosk")}>{t(language, "kioskMode")}</button></div></div></div><div className="card pv-card"><div className="card-header"><h3 className="card-title">{t(language, "security")}</h3></div><div className="card-body d-flex flex-column gap-2"><div className="d-flex align-items-center gap-2 fw-medium"><IconLock size={18} /> {authEnabled ? t(language, "authEnabled") : t(language, "authDisabled")}</div><div className="text-secondary small">{language === "en" ? "Admin user management is available below." : "Zarządzanie użytkownikami admina jest dostępne niżej."}</div>{userName ? <div className="badge bg-primary-lt text-primary align-self-start">{userName}</div> : null}</div></div></div>; }
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 <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{title}</h3></div><div className="card-body d-flex flex-column gap-2">{items.map((item) => <label key={item.metric_id} className="form-check"><input className="form-check-input" type="checkbox" checked={selected.includes(item.metric_id)} onChange={() => toggle(item.metric_id)} /><span className="form-check-label">{item.label} <span className="text-secondary small">{item.unit}</span></span></label>)}</div></div>; }
function LiveChartMetricsPanel({ language, items, selected, onChange }: { language: Language; items: Array<{ metric_id: string; label: string; unit: string }>; selected: string[]; onChange: (value: string[]) => void; }) { return <MetricSelectorCard language={language} title={language === "en" ? "Live chart metrics" : "Metryki wykresu live"} items={items} selected={selected} onChange={onChange} />; }
function BlockVisibilityPanel({ language, items, config, onChange }: { language: Language; items: Array<{ metric_id: string; label: string; unit: string }>; config: Record<BlockTarget, string[]>; onChange: (value: Record<BlockTarget, string[]>) => 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 <div className="card pv-card h-100"><div className="card-header"><h3 className="card-title">{language === "en" ? "Metric visibility in blocks" : "Widoczność metryk w blokach"}</h3></div><div className="card-body"><div className="row g-3"><div className="col-12 col-xl-6"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">Hero metrics</div>{items.map((item) => <label key={`hero-${item.metric_id}`} className="form-check d-block mb-2"><input className="form-check-input" type="checkbox" checked={config.hero.includes(item.metric_id)} onChange={() => toggle("hero", item.metric_id)} /><span className="form-check-label">{item.label}</span></label>)}</div></div><div className="col-12 col-xl-6"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">Quick metrics</div>{items.map((item) => <label key={`quick-${item.metric_id}`} className="form-check d-block mb-2"><input className="form-check-input" type="checkbox" checked={config.quick.includes(item.metric_id)} onChange={() => toggle("quick", item.metric_id)} /><span className="form-check-label">{item.label}</span></label>)}</div></div></div></div></div>; }
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 <div className="card pv-card"><div className="card-header"><h3 className="card-title">{language === "en" ? "Admin user management" : "Zarządzanie użytkownikami"}</h3></div><div className="card-body"><div className="row g-3"><div className="col-12 col-xl-6"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">{language === "en" ? "Create user" : "Dodaj użytkownika"}</div><div className="row g-2"><div className="col-md-6"><input className="form-control" placeholder={language === "en" ? "Username" : "Login"} value={newUser.username} onChange={(e) => onNewUserChange({ ...newUser, username: e.target.value })} /></div><div className="col-md-6"><input className="form-control" placeholder={language === "en" ? "Display name" : "Nazwa"} value={newUser.display_name} onChange={(e) => onNewUserChange({ ...newUser, display_name: e.target.value })} /></div><div className="col-md-6"><input className="form-control" type="password" placeholder={language === "en" ? "Password" : "Hasło"} value={newUser.password} onChange={(e) => onNewUserChange({ ...newUser, password: e.target.value })} /></div><div className="col-md-6"><select className="form-select" value={newUser.role} onChange={(e) => onNewUserChange({ ...newUser, role: e.target.value })}><option value="user">user</option><option value="admin">admin</option></select></div><div className="col-12"><button className="btn btn-primary" onClick={onCreate}>{language === "en" ? "Create user" : "Dodaj użytkownika"}</button></div></div></div></div><div className="col-12 col-xl-6"><div className="border rounded-3 p-3 h-100"><div className="fw-semibold mb-3">{language === "en" ? "Reset password" : "Zmiana hasła"}</div><div className="row g-2"><div className="col-md-6"><select className="form-select" value={passwordReset.username} onChange={(e) => onPasswordResetChange({ ...passwordReset, username: e.target.value })}><option value="">{language === "en" ? "Select user" : "Wybierz użytkownika"}</option>{users.map((user) => <option key={user.username} value={user.username}>{user.username}</option>)}</select></div><div className="col-md-6"><input className="form-control" type="password" placeholder={language === "en" ? "New password" : "Nowe hasło"} value={passwordReset.password} onChange={(e) => onPasswordResetChange({ ...passwordReset, password: e.target.value })} /></div><div className="col-12"><button className="btn btn-outline-primary" onClick={onResetPassword}>{language === "en" ? "Reset password" : "Zmień hasło"}</button></div></div></div></div><div className="col-12"><div className="table-responsive"><table className="table table-vcenter card-table"><thead><tr><th>{language === "en" ? "Username" : "Login"}</th><th>{language === "en" ? "Display name" : "Nazwa"}</th><th>Role</th><th>{language === "en" ? "Updated" : "Aktualizacja"}</th></tr></thead><tbody>{users.map((user) => <tr key={user.username}><td>{user.username}</td><td>{user.display_name}</td><td><span className="badge bg-primary-lt text-primary">{user.role}</span></td><td>{formatDateTime(user.updated_at, language === "en" ? "en-GB" : "pl-PL")}</td></tr>)}</tbody></table></div></div></div></div></div>; }
frontend/src/components/common/EChart.tsx
+3 -1
View File
@@ -29,7 +29,9 @@ export function EChart({ option, className = "h-80 w-full" }: EChartProps) {
return;
}
chartRef.current.setOption(option, { notMerge: false, lazyUpdate: true });
chartRef.current.clear();
chartRef.current.setOption(option, { notMerge: true, lazyUpdate: false });
chartRef.current.resize();
}, [option]);
useEffect(() => {
frontend/src/components/common/EChart.tsx.bak2
+49
View File
@@ -0,0 +1,49 @@
import { useEffect, useRef } from "react";
import * as echarts from "echarts";
import type { EChartsOption } from "echarts";
interface EChartProps {
option: EChartsOption;
className?: string;
}
export function EChart({ option, className = "h-80 w-full" }: EChartProps) {
const ref = useRef<HTMLDivElement | null>(null);
const chartRef = useRef<echarts.EChartsType | null>(null);
useEffect(() => {
if (!ref.current || chartRef.current) {
return;
}
chartRef.current = echarts.init(ref.current);
return () => {
chartRef.current?.dispose();
chartRef.current = null;
};
}, []);
useEffect(() => {
if (!chartRef.current) {
return;
}
chartRef.current.setOption(option, { notMerge: false, lazyUpdate: true });
}, [option]);
useEffect(() => {
if (!ref.current || !chartRef.current) {
return;
}
const observer = new ResizeObserver(() => chartRef.current?.resize());
observer.observe(ref.current);
return () => {
observer.disconnect();
};
}, []);
return <div ref={ref} className={className} />;
}
frontend/src/components/common/Icons.tsx
+3
View File
@@ -76,6 +76,9 @@ export function IconSun(props: IconProps) {
export function IconTemperature(props: IconProps) {
return <BaseIcon {...props}><path d="M14 14.76V5a2 2 0 0 0-4 0v9.76a4 4 0 1 0 4 0z" /></BaseIcon>;
}
export function IconUser(props: IconProps) {
return <BaseIcon {...props}><path d="M20 21a8 8 0 0 0-16 0" /><circle cx="12" cy="8" r="4" /></BaseIcon>;
}
export function IconX(props: IconProps) {
return <BaseIcon {...props}><path d="M18 6L6 18" /><path d="M6 6l12 12" /></BaseIcon>;
}
frontend/src/index.css
+213 -6
View File
@@ -111,6 +111,16 @@ body {
.page-body {
padding-top: 0.75rem;
}
.pv-navbar-action {
gap: 0;
min-width: 2.5rem;
padding-inline: 0.7rem !important;
}
.pv-navbar-action-label {
display: none;
}
}
@@ -158,6 +168,28 @@ body {
background: rgba(127, 127, 127, 0.18) !important;
}
.pv-navbar-action {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-width: 0;
}
.pv-navbar-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
}
.pv-navbar-action-label {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.pv-filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
@@ -220,6 +252,28 @@ body {
min-height: 4rem;
}
.pv-subnav-mobile-top {
display: none;
}
.pv-subnav-main {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem;
width: 100%;
min-width: 0;
}
.pv-subnav-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
min-width: 0;
}
.pv-menu-tab {
display: inline-flex !important;
align-items: center;
@@ -262,6 +316,11 @@ body {
margin-left: auto;
}
.pv-subnav-refresh-desktop {
display: flex;
min-width: 0;
}
.pv-subnav-refresh-group {
display: flex;
flex-wrap: wrap;
@@ -281,30 +340,178 @@ body {
min-width: 0;
}
.pv-mobile-menu-toggle {
display: none !important;
align-items: center;
gap: 0.65rem;
border-color: transparent !important;
border-radius: 0.85rem !important;
padding: 0.7rem 0.9rem !important;
background: rgba(127, 127, 127, 0.1) !important;
color: inherit !important;
font-weight: 600;
}
.pv-mobile-menu-toggle:hover,
.pv-mobile-menu-toggle:focus,
.pv-mobile-menu-toggle.active {
background: rgba(127, 127, 127, 0.16) !important;
}
.pv-mobile-menu-toggle-icon {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 0.2rem;
width: 1rem;
min-width: 1rem;
}
.pv-mobile-menu-toggle-icon span {
display: block;
width: 100%;
height: 2px;
border-radius: 999px;
background: currentColor;
transform-origin: center;
transition: transform 0.18s ease, opacity 0.18s ease;
}
.pv-mobile-menu-toggle.active .pv-mobile-menu-toggle-icon span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.pv-mobile-menu-toggle.active .pv-mobile-menu-toggle-icon span:nth-child(2) {
opacity: 0;
}
.pv-mobile-menu-toggle.active .pv-mobile-menu-toggle-icon span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
.pv-navbar-action--icon-only {
width: 2.5rem;
min-width: 2.5rem;
padding-inline: 0 !important;
}
.pv-footer {
margin-top: auto;
padding: 0.9rem 0;
background: color-mix(in srgb, var(--tblr-bg-surface, #fff) 86%, transparent);
backdrop-filter: blur(14px);
}
.pv-footer-shell {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.85rem 1rem;
min-height: 3rem;
}
.pv-footer-item {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.pv-footer-item--muted {
color: var(--tblr-secondary);
}
.pv-footer-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tblr-secondary);
}
.pv-footer-text {
min-width: 0;
}
@media (max-width: 1200px) {
.pv-subnav-side {
width: 100%;
justify-content: space-between;
margin-left: 0;
}
}
@media (max-width: 992px) {
@media (max-width: 768px) {
.pv-footer-shell {
flex-direction: column;
align-items: flex-start;
}
.pv-subnav-shell {
min-height: auto;
}
.pv-subnav-mobile-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.pv-mobile-menu-toggle {
display: inline-flex !important;
}
.pv-subnav-main {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-top: 0.75rem;
}
.pv-subnav-tabs {
display: none;
width: 100%;
flex-direction: column;
gap: 0.5rem;
}
.pv-subnav-main.is-open .pv-subnav-tabs {
display: flex;
}
.pv-menu-tab {
width: 100%;
justify-content: flex-start;
border-radius: 0.9rem !important;
padding: 0.75rem 0.95rem !important;
}
.pv-subnav-side {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
margin-left: 0;
}
.pv-subnav-refresh-group {
width: 100%;
flex-direction: column;
align-items: stretch;
.pv-subnav-refresh-desktop {
display: none;
}
.pv-subnav-mobile-top .pv-subnav-refresh-group {
flex: 1 1 220px;
justify-content: flex-end;
}
.pv-menu-meta {
width: 100%;
justify-content: center;
justify-content: flex-start;
white-space: normal;
font-size: 0.8125rem;
}
}
frontend/vite.config.ts
+1 -3
View File
@@ -3,9 +3,7 @@ import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
const noStoreHeaders = {
"Cache-Control": "no-store, no-cache, must-revalidate, proxy-revalidate",
Pragma: "no-cache",
Expires: "0",
"Cache-Control": "no-store, no-cache"
};
export default defineConfig({