-
-
+ const toggleTheme = () => {
+ setTheme((current) => (current === "dark" ? "light" : "dark"));
+ };
-
-
+ const isDark = theme === "dark";
-
- {children}
-
-
-
-
-
+ return (
+
+
+
- );
+
+
+
+
+
+ {children({
+ theme,
+ snapshots: telemetry.snapshots,
+ })}
+
+
+
+
+
+
+ );
}
\ No newline at end of file
diff --git a/src/features/climate/components/DashboardClimateSection.tsx b/src/features/climate/components/DashboardClimateSection.tsx
new file mode 100644
index 0000000..4efd6d3
--- /dev/null
+++ b/src/features/climate/components/DashboardClimateSection.tsx
@@ -0,0 +1,105 @@
+import { Gauge, Thermometer, Waves } from "lucide-react";
+import type { DashboardOverview } from "../../dashboard/types/DashboardOverview";
+import { StatusPill } from "../../dashboard/components/StatusPill";
+
+type Props = {
+ zones: DashboardOverview["climate"]["zones"];
+};
+
+function formatValue(value: number | null, unit: string, decimals = 1) {
+ if (value === null) return "--";
+ return `${value.toFixed(decimals)} ${unit}`;
+}
+
+export function DashboardClimateSection({ zones }: Props) {
+ return (
+
+
+
+ Clima por Zona
+
+
+ Temperatura, humidade, CO₂ e estados principais dos equipamentos.
+
+
+ {zones.map((zone) => (
+
+
+
+ Zona {zone.zoneNumber}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+type MiniValueProps = {
+ icon: React.ElementType;
+ label: string;
+ value: string;
+};
+
+function MiniValue({ icon: Icon, label, value }: MiniValueProps) {
+ return (
+
+
+
+ {label}
+
+
+ {value}
+
+
+ );
+}
+
+type OpeningBarProps = {
+ label: string;
+ value: number | null;
+};
+
+function OpeningBar({ label, value }: OpeningBarProps) {
+ const safeValue = value ?? 0;
+
+ return (
+
+
+ {label}
+ {value === null ? "--" : `${value.toFixed(0)}%`}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/features/dashboard/components/DashboardMeteoSection.tsx b/src/features/dashboard/components/DashboardMeteoSection.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/features/dashboard/components/DashboardOperationsSection.tsx b/src/features/dashboard/components/DashboardOperationsSection.tsx
new file mode 100644
index 0000000..71fadc8
--- /dev/null
+++ b/src/features/dashboard/components/DashboardOperationsSection.tsx
@@ -0,0 +1,60 @@
+import { Droplets, Lightbulb, Power } from "lucide-react";
+import type { DashboardOverview } from "../types/DashboardOverview";
+
+type Props = {
+ irrigation?: DashboardOverview["irrigation"];
+ lighting?: DashboardOverview["lighting"];
+};
+
+export function DashboardOperationsSection({ irrigation, lighting }: Props) {
+ return (
+
+ );
+}
+
+type OperationCardProps = {
+ title: string;
+ value: string;
+ subtitle: string;
+ icon: React.ElementType;
+};
+
+function OperationCard({ title, value, subtitle, icon: Icon }: OperationCardProps) {
+ return (
+
+
+
+
+ {value}
+
+
+
+ {subtitle}
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/features/dashboard/components/DashboardTrendChart.tsx b/src/features/dashboard/components/DashboardTrendChart.tsx
new file mode 100644
index 0000000..87470f6
--- /dev/null
+++ b/src/features/dashboard/components/DashboardTrendChart.tsx
@@ -0,0 +1,180 @@
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from "recharts";
+import type { HistorianDashboardResponse } from "../../../types/historian";
+
+type ChartSeries = {
+ key: string;
+ label: string;
+ color: string;
+};
+
+type DashboardTrendChartProps = {
+ title: string;
+ subtitle: string;
+ data: HistorianDashboardResponse | null;
+ series: ChartSeries[];
+ theme: "dark" | "light";
+};
+
+export function DashboardTrendChart({
+ title,
+ subtitle,
+ data,
+ series,
+ theme,
+}: DashboardTrendChartProps) {
+ const isDark = theme === "dark";
+ const chartData = buildChartData(data, series);
+
+ return (
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+
+
+ {series.map((item) => (
+
+
+
+ {item.label}
+
+
+ ))}
+
+
+
+
+
+
+
+ {series.map((item) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {series.map((item) => (
+
+ ))}
+
+
+
+
+ );
+}
+
+function buildChartData(
+ data: HistorianDashboardResponse | null,
+ series: ChartSeries[],
+) {
+ if (!data) return [];
+
+ const pointsByTimestamp = new Map
>();
+
+ for (const item of series) {
+ const points = data.series[item.key] ?? [];
+
+ for (const point of points) {
+ const timestamp = point.timestamp;
+ const existing = pointsByTimestamp.get(timestamp) ?? {
+ timestamp,
+ time: formatTime(timestamp),
+ };
+
+ existing[item.label] = point.numericValue ?? 0;
+ pointsByTimestamp.set(timestamp, existing);
+ }
+ }
+
+ return Array.from(pointsByTimestamp.values()).sort((a, b) =>
+ String(a.timestamp).localeCompare(String(b.timestamp)),
+ );
+}
+
+function formatTime(timestamp: string) {
+ return new Date(timestamp).toLocaleTimeString("pt-PT", {
+ hour: "2-digit",
+ minute: "2-digit",
+ });
+}
+
+function gradientId(label: string) {
+ return `gradient-${label
+ .toLowerCase()
+ .replace(/\s+/g, "-")
+ .replace(/\./g, "")}`;
+}
\ No newline at end of file
diff --git a/src/features/dashboard/components/StatusPill.tsx b/src/features/dashboard/components/StatusPill.tsx
new file mode 100644
index 0000000..cafeaf0
--- /dev/null
+++ b/src/features/dashboard/components/StatusPill.tsx
@@ -0,0 +1,31 @@
+type StatusPillProps = {
+ active: boolean | null | undefined;
+ activeLabel?: string;
+ inactiveLabel?: string;
+};
+
+export function StatusPill({
+ active,
+ activeLabel = "Ativo",
+ inactiveLabel = "Inativo",
+}: StatusPillProps) {
+ if (active === null || active === undefined) {
+ return (
+
+ --
+
+ );
+ }
+
+ return (
+
+ {active ? activeLabel : inactiveLabel}
+
+ );
+}
\ No newline at end of file
diff --git a/src/features/dashboard/hooks/useDashboardOverviewStream.ts b/src/features/dashboard/hooks/useDashboardOverviewStream.ts
new file mode 100644
index 0000000..e9f620e
--- /dev/null
+++ b/src/features/dashboard/hooks/useDashboardOverviewStream.ts
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import { Client } from "@stomp/stompjs";
+import type { DashboardOverview } from "../types/DashboardOverview";
+
+export function useDashboardOverviewStream() {
+ const [overview, setOverview] = useState(null);
+ const [connected, setConnected] = useState(false);
+
+ useEffect(() => {
+ const client = new Client({
+ brokerURL: "ws://localhost:18450/ws",
+ reconnectDelay: 3000,
+
+ onConnect: () => {
+ setConnected(true);
+
+ client.subscribe("/topic/dashboard/overview", (frame) => {
+ const payload = JSON.parse(frame.body) as DashboardOverview;
+
+ console.log("dashboard overview", payload);
+
+ setOverview(payload);
+ });
+ },
+
+ onWebSocketClose: () => {
+ setConnected(false);
+ },
+
+ onStompError: () => {
+ setConnected(false);
+ },
+ });
+
+ client.activate();
+
+ return () => {
+ client.deactivate();
+ };
+ }, []);
+
+ return {
+ connected,
+ overview,
+ };
+}
\ No newline at end of file
diff --git a/src/features/dashboard/hooks/useHistorianDashboard.ts b/src/features/dashboard/hooks/useHistorianDashboard.ts
new file mode 100644
index 0000000..f574c10
--- /dev/null
+++ b/src/features/dashboard/hooks/useHistorianDashboard.ts
@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { fetchHistorianDashboard } from "../../../lib/api/historianApi";
+import type { HistorianDashboardResponse } from "../../../types/historian";
+
+type UseHistorianDashboardOptions = {
+ keys: string[];
+ minutesBack?: number;
+ refreshIntervalMs?: number;
+};
+
+export function useHistorianDashboard({
+ keys,
+ minutesBack = 30,
+ refreshIntervalMs = 15000,
+}: UseHistorianDashboardOptions) {
+ const [data, setData] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+
+ async function load() {
+ try {
+ const to = new Date();
+ const from = new Date(to.getTime() - minutesBack * 60 * 1000);
+
+ const result = await fetchHistorianDashboard(
+ keys,
+ from.toISOString(),
+ to.toISOString(),
+ );
+
+ if (!cancelled) {
+ setData(result);
+ setError(null);
+ }
+ } catch (err) {
+ if (!cancelled) {
+ setError(err instanceof Error ? err : new Error("Historian error"));
+ }
+ } finally {
+ if (!cancelled) {
+ setLoading(false);
+ }
+ }
+ }
+
+ load();
+
+ const interval = window.setInterval(load, refreshIntervalMs);
+
+ return () => {
+ cancelled = true;
+ window.clearInterval(interval);
+ };
+ }, [keys.join("|"), minutesBack, refreshIntervalMs]);
+
+ return { data, loading, error };
+}
\ No newline at end of file
diff --git a/src/features/dashboard/pages/DashboardPage.tsx b/src/features/dashboard/pages/DashboardPage.tsx
new file mode 100644
index 0000000..a12d438
--- /dev/null
+++ b/src/features/dashboard/pages/DashboardPage.tsx
@@ -0,0 +1,512 @@
+import {
+ Activity,
+ CloudRain,
+ Droplets,
+ Fan,
+ Lightbulb,
+ Sun,
+ Thermometer,
+ Wind,
+ Zap,
+} from "lucide-react";
+import { MetricCard } from "../../../components/cards/MetricCard";
+import { DashboardTrendChart } from "../components/DashboardTrendChart";
+import { useDashboardOverviewStream } from "../hooks/useDashboardOverviewStream";
+import { useHistorianDashboard } from "../hooks/useHistorianDashboard";
+
+type DashboardPageProps = {
+ theme: "dark" | "light";
+};
+
+const historianKeys = [
+ "meteo.exterior_temperature",
+ "meteo.exterior_humidity",
+ "meteo.radiation",
+ "climate.zone_1.temperature",
+ "climate.zone_1.humidity",
+];
+
+function formatNumber(value: number | null | undefined, decimals = 1) {
+ if (value === null || value === undefined) return "--";
+ return value.toFixed(decimals);
+}
+
+function formatBoolean(value: boolean | null | undefined) {
+ if (value === null || value === undefined) return "--";
+ return value ? "Sim" : "Não";
+}
+
+export function DashboardPage({ theme }: DashboardPageProps) {
+ const { overview, connected } = useDashboardOverviewStream();
+
+ const { data: historianData } = useHistorianDashboard({
+ keys: historianKeys,
+ minutesBack: 30,
+ refreshIntervalMs: 15000,
+ });
+
+ const meteo = overview?.meteo;
+ const zones = overview?.climate.zones ?? [];
+ const zoneOne = zones[0];
+
+ const isDark = theme === "dark";
+
+ const onlineZoneCount = zones.filter(
+ (zone) => zone.temperature !== null || zone.humidity !== null,
+ ).length;
+
+ const validZoneTemperatures = zones
+ .map((zone) => zone.temperature)
+ .filter((value): value is number => value !== null);
+
+ const averageZoneTemperature =
+ validZoneTemperatures.length > 0
+ ? validZoneTemperatures.reduce((sum, value) => sum + value, 0) /
+ validZoneTemperatures.length
+ : null;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Estado Operacional
+
+
+ Resumo rápido da instalação.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Próximos Desenvolvimentos
+
+
+ Espaço preparado para eventos, alarmes, programas e depósitos.
+
+
+
+
+
+
+
+
+
+ {main}
+
+
+
+ {label}
+
+
+
+ {items.map(([key, value]) => (
+
+
+ {key}
+
+
+ {value}
+
+
+ ))}
+
+
+
+ {label}
+
+
+
+ {value}
+
+
+ );
+}
+
+type PlaceholderPanelProps = {
+ theme: "dark" | "light";
+ title: string;
+ text: string;
+};
+
+function PlaceholderPanel({ theme, title, text }: PlaceholderPanelProps) {
+ const isDark = theme === "dark";
+
+ return (
+
+
+ {title}
+
+
+ {text}
+
+