@burdenoff/microfe-ecoimpacthub 2026.704.4 → 2026.704.5

package/dist/ecoimpacthub/pages/DashboardPage.js

@@ -3,60 +3,67 @@ import { Tooltip as t } from "../../node_modules/recharts/es6/component/Tooltip.
 import { ResponsiveContainer as n } from "../../node_modules/recharts/es6/component/ResponsiveContainer.js";
 import { Cell as r } from "../../node_modules/recharts/es6/component/Cell.js";
 import { LabelList as i } from "../../node_modules/recharts/es6/component/LabelList.js";
-import { Bar as ee } from "../../node_modules/recharts/es6/cartesian/Bar.js";
-import { XAxis as a } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
-import { YAxis as o } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
-import { BarChart as s } from "../../node_modules/recharts/es6/chart/BarChart.js";
+import { Bar as a } from "../../node_modules/recharts/es6/cartesian/Bar.js";
+import { CartesianGrid as o } from "../../node_modules/recharts/es6/cartesian/CartesianGrid.js";
+import { XAxis as s } from "../../node_modules/recharts/es6/cartesian/XAxis.js";
+import { YAxis as ee } from "../../node_modules/recharts/es6/cartesian/YAxis.js";
+import { BarChart as te } from "../../node_modules/recharts/es6/chart/BarChart.js";
 import { PageLayout as c } from "../components/PageLayout.js";
 import { MetricsCard as l } from "../components/MetricsCard.js";
-import { formatCo2e as u, formatEnumLabel as te, formatNumber as d, formatRelativeTime as f } from "../utils/formatters.js";
-import { StatusBadge as p } from "../components/StatusBadge.js";
-import { MiniBar as m } from "../components/MiniBar.js";
-import { LoadingView as h, Section as g } from "../components/StateViews.js";
-import { EmptyState as _ } from "../components/EmptyState.js";
+import { formatCo2e as u, formatEnumLabel as d, formatNumber as f, formatPercent as p, formatRelativeTime as m } from "../utils/formatters.js";
+import { StatusBadge as h } from "../components/StatusBadge.js";
+import { MiniBar as g } from "../components/MiniBar.js";
+import { LoadingView as ne, Section as _ } from "../components/StateViews.js";
+import { EmptyState as v } from "../components/EmptyState.js";
+import { Meter as re, SCOPE_HUE as y, ScopeLegend as ie, ScopeSplitBar as b } from "./carbonVisuals.js";
 import "../context/index.js";
-import { useEcoCarbonTotals as v, useEcoHabitatProjects as y, useEcoMeasurements as b, useEcoObservations as x, useEcoSensors as S, useEcoSites as C, useEcoSpecies as w } from "../hooks/useEcoImpactHubApi.js";
+import { useEcoCarbonTotals as x, useEcoHabitatProjects as ae, useEcoMeasurements as oe, useEcoObservations as S, useEcoSensors as C, useEcoSites as w, useEcoSpecies as se } from "../hooks/useEcoImpactHubApi.js";
 import "../hooks/index.js";
-import { useMemo as ne } from "react";
-import { ArrowRight as T, Binoculars as re, Factory as E, MapPin as ie, PawPrint as ae, Radio as D, ShieldCheck as O, Trees as k, TriangleAlert as A } from "lucide-react";
-import { jsx as j, jsxs as M } from "react/jsx-runtime";
-import { GlassCard as N } from "@burdenoff/fe-libs/ui";
+import { useMemo as ce } from "react";
+import { ArrowRight as T, Binoculars as E, Factory as D, MapPin as le, PawPrint as ue, Radio as de, ShieldCheck as fe, Trees as pe, TriangleAlert as O } from "lucide-react";
+import { Fragment as k, jsx as A, jsxs as j } from "react/jsx-runtime";
+import { GlassCard as M } from "@burdenoff/fe-libs/ui";
 //#region src/ecoimpacthub/pages/DashboardPage.tsx
-var P = new Set([
+var N = new Set([
 	"PLANNED",
 	"IN_PROGRESS",
 	"MONITORING"
-]), F = {
-	SCOPE_1: "var(--color-status-error-text)",
-	SCOPE_2: "var(--color-status-warning-text)",
-	SCOPE_3: "var(--color-accent)"
+]), P = {
+	LEAST_CONCERN: "var(--color-status-success-text)",
+	NEAR_THREATENED: "var(--color-accent-teal)",
+	VULNERABLE: "var(--color-status-warning-text)",
+	ENDANGERED: "var(--color-status-error-text)",
+	CRITICALLY_ENDANGERED: "var(--color-status-error-text)",
+	EXTINCT_IN_WILD: "var(--color-text-tertiary)",
+	DATA_DEFICIENT: "var(--color-text-tertiary)",
+	NOT_EVALUATED: "var(--color-text-tertiary)"
 };
-function I() {
-	let { navigateTo: I, currentUser: L } = e(), R = C({ pagination: {
+function F() {
+	let { navigateTo: F, currentUser: I } = e(), L = w({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), z = w({ pagination: {
+	} }), R = se({ pagination: {
 		limit: 100,
 		offset: 0
-	} }), B = y(), V = v(), H = b({
+	} }), z = ae(), B = x(), V = oe({
 		breachesOnly: !0,
 		pagination: {
 			limit: 6,
 			offset: 0
 		}
-	}), U = x({ pagination: {
+	}), me = S({ pagination: {
 		limit: 6,
 		offset: 0
-	} }), W = S(), G = R.data?.items ?? [], K = z.data?.items ?? [], q = B.data ?? [], J = W.data ?? [], oe = G.filter((e) => e.status === "ACTIVE").length, se = K.filter((e) => e.isPriority).length, Y = K.filter((e) => [
+	} }), he = C(), H = L.data?.items ?? [], U = R.data?.items ?? [], W = z.data ?? [], G = he.data ?? [], K = H.filter((e) => e.status === "ACTIVE").length, ge = U.filter((e) => e.isPriority).length, q = U.filter((e) => [
 		"VULNERABLE",
 		"ENDANGERED",
 		"CRITICALLY_ENDANGERED"
-	].includes(e.conservationStatus)).length, ce = q.filter((e) => P.has(e.status)).length, le = J.filter((e) => e.status === "ONLINE").length, X = J.filter((e) => [
+	].includes(e.conservationStatus)).length, J = W.filter((e) => N.has(e.status)).length, Y = G.filter((e) => e.status === "ONLINE").length, X = G.filter((e) => [
 		"OFFLINE",
 		"DEGRADED",
 		"MAINTENANCE"
-	].includes(e.status)).length, Z = ne(() => {
-		let e = V.data;
+	].includes(e.status)).length, Z = ce(() => {
+		let e = B.data;
 		return e ? [
 			{
 				scope: "SCOPE_1",
@@ -74,128 +81,231 @@ function I() {
 				kg: e.scope3
 			}
 		] : [];
-	}, [V.data]);
-	if (R.isLoading && z.isLoading && B.isLoading && V.isLoading) return /* @__PURE__ */ j(c, {
+	}, [B.data]);
+	if (L.isLoading && R.isLoading && z.isLoading && B.isLoading) return /* @__PURE__ */ A(c, {
 		title: "EcoImpactHub",
 		titleGradient: !0,
 		aurora: !0,
-		children: /* @__PURE__ */ j(h, { label: "Loading your impact overview…" })
+		children: /* @__PURE__ */ A(ne, { label: "Loading your impact overview…" })
 	});
-	let ue = L?.firstName || L?.name || "there", Q = H.data?.items ?? [], $ = U.data?.items ?? [];
-	return /* @__PURE__ */ M(c, {
+	let _e = I?.firstName || I?.name || "there", Q = V.data?.items ?? [], $ = me.data?.items ?? [];
+	return /* @__PURE__ */ j(c, {
 		title: "EcoImpactHub",
 		titleGradient: !0,
 		aurora: !0,
-		description: `Welcome back, ${ue} — your environment, conservation & sustainability control room.`,
+		description: `Welcome back, ${_e} — your environment, conservation & sustainability control room.`,
 		children: [
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ j("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6",
 				children: [
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(ie, { className: "h-5 w-5" }),
-						value: R.data?.pageInfo?.hasMore ? `${G.length}+` : d(G.length),
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(le, { className: "h-5 w-5" }),
+						value: L.data?.pageInfo?.hasMore ? `${H.length}+` : f(H.length),
 						label: "Monitored sites",
-						footer: /* @__PURE__ */ M("p", {
-							className: "text-xs text-text-tertiary",
-							children: [oe, " active"]
+						footer: /* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ A(g, {
+								value: H.length ? K / H.length * 100 : 0,
+								height: 4,
+								barClassName: "bg-action-primary-bg"
+							}), /* @__PURE__ */ j("p", {
+								className: "text-xs text-text-tertiary",
+								children: [/* @__PURE__ */ A("span", {
+									className: "tabular-nums text-text-secondary",
+									children: K
+								}), " active"]
+							})]
 						})
 					}),
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(ae, { className: "h-5 w-5" }),
-						value: z.data?.pageInfo?.hasMore ? `${K.length}+` : d(K.length),
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(ue, { className: "h-5 w-5" }),
+						value: R.data?.pageInfo?.hasMore ? `${U.length}+` : f(U.length),
 						label: "Species tracked",
-						accent: Y > 0 ? "warning" : void 0,
-						footer: /* @__PURE__ */ M("p", {
-							className: "text-xs text-text-tertiary",
-							children: [
-								se,
-								" priority · ",
-								Y,
-								" threatened"
-							]
+						accent: q > 0 ? "warning" : void 0,
+						footer: /* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ A(g, {
+								value: U.length ? q / U.length * 100 : 0,
+								height: 4,
+								barClassName: "bg-status-warning-text"
+							}), /* @__PURE__ */ j("p", {
+								className: "text-xs text-text-tertiary",
+								children: [
+									/* @__PURE__ */ A("span", {
+										className: "tabular-nums text-text-secondary",
+										children: ge
+									}),
+									" priority ·",
+									" ",
+									/* @__PURE__ */ A("span", {
+										className: "tabular-nums text-text-secondary",
+										children: q
+									}),
+									" threatened"
+								]
+							})]
 						})
 					}),
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(k, { className: "h-5 w-5" }),
-						value: d(ce),
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(pe, { className: "h-5 w-5" }),
+						value: f(J),
 						label: "Active habitat projects",
-						footer: /* @__PURE__ */ M("p", {
-							className: "text-xs text-text-tertiary",
-							children: [d(q.length), " total"]
+						footer: /* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ A(g, {
+								value: W.length ? J / W.length * 100 : 0,
+								height: 4,
+								barClassName: "bg-action-primary-bg"
+							}), /* @__PURE__ */ j("p", {
+								className: "text-xs text-text-tertiary",
+								children: [
+									/* @__PURE__ */ A("span", {
+										className: "tabular-nums text-text-secondary",
+										children: f(W.length)
+									}),
+									" ",
+									"total"
+								]
+							})]
 						})
 					}),
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(E, { className: "h-5 w-5" }),
-						value: V.data ? u(V.data.total) : "—",
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(D, { className: "h-5 w-5" }),
+						value: B.data ? u(B.data.total) : "—",
 						label: "Total footprint",
-						featured: !0
+						featured: !0,
+						footer: B.data && B.data.total > 0 ? /* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ A(b, {
+								scope1: B.data.scope1,
+								scope2: B.data.scope2,
+								scope3: B.data.scope3,
+								height: 6
+							}), /* @__PURE__ */ A("p", {
+								className: "text-xs text-text-tertiary",
+								children: "Scope 1 · 2 · 3 split"
+							})]
+						}) : void 0
 					}),
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(D, { className: "h-5 w-5" }),
-						value: d(le),
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(de, { className: "h-5 w-5" }),
+						value: f(Y),
 						label: "Sensors online",
 						accent: X > 0 ? "warning" : "success",
-						footer: /* @__PURE__ */ M("p", {
-							className: "text-xs text-text-tertiary",
-							children: [X, " need attention"]
+						footer: /* @__PURE__ */ j("div", {
+							className: "space-y-2",
+							children: [/* @__PURE__ */ A(g, {
+								value: G.length ? Y / G.length * 100 : 0,
+								height: 4,
+								barClassName: "bg-status-success-text"
+							}), /* @__PURE__ */ j("p", {
+								className: "text-xs text-text-tertiary",
+								children: [/* @__PURE__ */ A("span", {
+									className: "tabular-nums text-text-secondary",
+									children: X
+								}), " need attention"]
+							})]
 						})
 					}),
-					/* @__PURE__ */ j(l, {
-						icon: /* @__PURE__ */ j(A, { className: "h-5 w-5" }),
-						value: H.data?.pageInfo?.hasMore ? `${Q.length}+` : d(Q.length),
+					/* @__PURE__ */ A(l, {
+						icon: /* @__PURE__ */ A(O, { className: "h-5 w-5" }),
+						value: V.data?.pageInfo?.hasMore ? `${Q.length}+` : f(Q.length),
 						label: "Open breaches",
-						accent: Q.length > 0 ? "error" : "success"
+						accent: Q.length > 0 ? "error" : "success",
+						footer: /* @__PURE__ */ A("p", {
+							className: Q.length > 0 ? "text-xs font-medium text-status-error-text" : "text-xs text-text-tertiary",
+							children: Q.length > 0 ? "Needs attention" : "All parameters in range"
+						})
 					})
 				]
 			}),
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ j("div", {
 				className: "mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ M(N, {
+				children: [/* @__PURE__ */ j(M, {
 					treatment: "glass",
 					className: "p-6 lg:col-span-2",
-					children: [/* @__PURE__ */ M("div", {
-						className: "mb-4 flex items-center justify-between",
-						children: [/* @__PURE__ */ M("div", { children: [/* @__PURE__ */ j("h2", {
+					children: [/* @__PURE__ */ j("div", {
+						className: "mb-4 flex flex-wrap items-start justify-between gap-3",
+						children: [/* @__PURE__ */ j("div", { children: [/* @__PURE__ */ A("h2", {
 							className: "text-base font-semibold text-text-primary",
 							children: "Carbon footprint by scope"
-						}), /* @__PURE__ */ j("p", {
+						}), /* @__PURE__ */ A("p", {
 							className: "mt-0.5 text-sm text-text-secondary",
 							children: "GHG Protocol Scope 1 / 2 / 3 emissions (CO₂e)."
-						})] }), /* @__PURE__ */ M("button", {
-							type: "button",
-							onClick: () => I("carbon"),
-							className: "inline-flex items-center gap-1 text-sm font-medium text-accent hover:underline",
-							children: ["Ledger ", /* @__PURE__ */ j(T, { className: "h-4 w-4" })]
+						})] }), /* @__PURE__ */ j("div", {
+							className: "flex items-center gap-4",
+							children: [B.data && B.data.total > 0 && /* @__PURE__ */ j("div", {
+								className: "text-right",
+								children: [/* @__PURE__ */ A("p", {
+									className: "text-lg font-semibold tabular-nums text-text-primary",
+									children: u(B.data.total)
+								}), /* @__PURE__ */ A("p", {
+									className: "text-xs text-text-tertiary",
+									children: "total"
+								})]
+							}), /* @__PURE__ */ j("button", {
+								type: "button",
+								onClick: () => F("carbon"),
+								className: "inline-flex items-center gap-1 text-sm font-medium text-accent hover:underline",
+								children: ["Ledger ", /* @__PURE__ */ A(T, { className: "h-4 w-4" })]
+							})]
 						})]
-					}), Z.every((e) => e.kg === 0) ? /* @__PURE__ */ j(_, {
+					}), Z.every((e) => e.kg === 0) ? /* @__PURE__ */ A(v, {
 						illustration: "empty-data",
-						icon: /* @__PURE__ */ j(E, { className: "h-10 w-10" }),
+						icon: /* @__PURE__ */ A(D, { className: "h-10 w-10" }),
 						title: "No carbon entries yet",
 						description: "Record activity in the carbon ledger to see your Scope 1–3 footprint here."
-					}) : /* @__PURE__ */ j("div", {
+					}) : /* @__PURE__ */ j(k, { children: [/* @__PURE__ */ A("div", {
 						className: "h-56",
-						children: /* @__PURE__ */ j(n, {
+						children: /* @__PURE__ */ A(n, {
 							width: "100%",
 							height: "100%",
-							children: /* @__PURE__ */ M(s, {
+							children: /* @__PURE__ */ j(te, {
 								data: Z,
 								margin: {
-									top: 16,
+									top: 20,
 									right: 8,
 									left: 8,
 									bottom: 0
 								},
 								children: [
-									/* @__PURE__ */ j(a, {
+									/* @__PURE__ */ A("defs", { children: Z.map((e) => /* @__PURE__ */ j("linearGradient", {
+										id: `ecoScopeGrad-${e.scope}`,
+										x1: "0",
+										y1: "0",
+										x2: "0",
+										y2: "1",
+										children: [/* @__PURE__ */ A("stop", {
+											offset: "0%",
+											style: {
+												stopColor: y[e.scope],
+												stopOpacity: 1
+											}
+										}), /* @__PURE__ */ A("stop", {
+											offset: "100%",
+											style: {
+												stopColor: y[e.scope],
+												stopOpacity: .55
+											}
+										})]
+									}, e.scope)) }),
+									/* @__PURE__ */ A(o, {
+										vertical: !1,
+										stroke: "var(--color-border-seam)",
+										strokeOpacity: .6,
+										strokeDasharray: "3 4"
+									}),
+									/* @__PURE__ */ A(s, {
 										dataKey: "label",
 										tick: {
 											fill: "var(--color-text-secondary)",
 											fontSize: 12
 										},
 										axisLine: { stroke: "var(--color-border-seam)" },
-										tickLine: !1
+										tickLine: !1,
+										dy: 4
 									}),
-									/* @__PURE__ */ j(o, {
+									/* @__PURE__ */ A(ee, {
 										tick: {
 											fill: "var(--color-text-tertiary)",
 											fontSize: 11
@@ -205,7 +315,7 @@ function I() {
 										width: 48,
 										tickFormatter: (e) => e >= 1e3 ? `${Math.round(e / 1e3)}t` : `${e}`
 									}),
-									/* @__PURE__ */ j(t, {
+									/* @__PURE__ */ A(t, {
 										cursor: {
 											fill: "var(--color-bg-sunken)",
 											opacity: .4
@@ -218,149 +328,195 @@ function I() {
 										},
 										formatter: (e) => [u(e), "Emissions"]
 									}),
-									/* @__PURE__ */ M(ee, {
+									/* @__PURE__ */ j(a, {
 										dataKey: "kg",
 										radius: [
-											6,
-											6,
-											0,
-											0
+											8,
+											8,
+											2,
+											2
 										],
-										maxBarSize: 80,
-										children: [Z.map((e) => /* @__PURE__ */ j(r, { fill: F[e.scope] }, e.scope)), /* @__PURE__ */ j(i, {
+										maxBarSize: 72,
+										children: [Z.map((e) => /* @__PURE__ */ A(r, { fill: `url(#ecoScopeGrad-${e.scope})` }, e.scope)), /* @__PURE__ */ A(i, {
 											dataKey: "kg",
 											position: "top",
 											formatter: (e) => e > 0 ? u(e) : "",
 											style: {
 												fill: "var(--color-text-secondary)",
-												fontSize: 11
+												fontSize: 11,
+												fontWeight: 600
 											}
 										})]
 									})
 								]
 							})
 						})
-					})]
-				}), /* @__PURE__ */ M(N, {
+					}), /* @__PURE__ */ A(ie, {
+						data: Z,
+						className: "mt-4 border-t border-border-seam pt-4"
+					})] })]
+				}), /* @__PURE__ */ j(M, {
 					treatment: "glass",
 					className: "p-6",
-					children: [/* @__PURE__ */ M("div", {
-						className: "mb-4 flex items-center justify-between",
-						children: [/* @__PURE__ */ j("h2", {
-							className: "text-base font-semibold text-text-primary",
-							children: "Recent breaches"
-						}), /* @__PURE__ */ M("button", {
+					children: [/* @__PURE__ */ j("div", {
+						className: "mb-4 flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ j("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ A("h2", {
+								className: "text-base font-semibold text-text-primary",
+								children: "Recent breaches"
+							}), Q.length > 0 && /* @__PURE__ */ A("span", {
+								className: "rounded-full bg-status-error-bg-subtle px-2 py-0.5 text-xs font-medium tabular-nums text-status-error-text",
+								children: V.data?.pageInfo?.hasMore ? `${Q.length}+` : Q.length
+							})]
+						}), /* @__PURE__ */ j("button", {
 							type: "button",
-							onClick: () => I("monitoring"),
+							onClick: () => F("monitoring"),
 							className: "inline-flex items-center gap-1 text-sm font-medium text-accent hover:underline",
-							children: ["Monitoring ", /* @__PURE__ */ j(T, { className: "h-4 w-4" })]
+							children: ["Monitoring ", /* @__PURE__ */ A(T, { className: "h-4 w-4" })]
 						})]
-					}), Q.length === 0 ? /* @__PURE__ */ M("div", {
-						className: "flex flex-col items-center justify-center py-8 text-center",
-						children: [/* @__PURE__ */ j(O, { className: "h-10 w-10 text-status-success-text opacity-70" }), /* @__PURE__ */ j("p", {
-							className: "mt-3 text-sm text-text-secondary",
-							children: "No threshold breaches — all parameters within range."
-						})]
-					}) : /* @__PURE__ */ j("ul", {
-						className: "space-y-3",
-						children: Q.map((e) => /* @__PURE__ */ M("li", {
-							className: "flex items-start justify-between gap-3",
-							children: [/* @__PURE__ */ M("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ j("p", {
-									className: "truncate text-sm font-medium text-text-primary",
-									children: e.parameter
-								}), /* @__PURE__ */ M("p", {
-									className: "text-xs text-text-tertiary",
-									children: [
-										d(e.value),
-										" ",
-										e.unit,
-										" · ",
-										f(e.recordedAt)
-									]
+					}), Q.length === 0 ? /* @__PURE__ */ j("div", {
+						className: "flex flex-col items-center justify-center rounded-xl border border-dashed border-border-seam py-10 text-center",
+						children: [
+							/* @__PURE__ */ A("span", {
+								className: "flex size-12 items-center justify-center rounded-full bg-status-success-bg-subtle",
+								children: /* @__PURE__ */ A(fe, { className: "h-6 w-6 text-status-success-text" })
+							}),
+							/* @__PURE__ */ A("p", {
+								className: "mt-3 text-sm font-medium text-text-primary",
+								children: "All parameters in range"
+							}),
+							/* @__PURE__ */ A("p", {
+								className: "mt-1 text-xs text-text-tertiary",
+								children: "No open threshold breaches."
+							})
+						]
+					}) : /* @__PURE__ */ A("ul", {
+						className: "space-y-2.5",
+						children: Q.map((e) => /* @__PURE__ */ j("li", {
+							className: "flex items-start justify-between gap-3 rounded-xl bg-bg-sunken/50 p-3",
+							children: [/* @__PURE__ */ j("div", {
+								className: "flex min-w-0 items-start gap-2.5",
+								children: [/* @__PURE__ */ A("span", {
+									"aria-hidden": "true",
+									className: "mt-1.5 size-2 shrink-0 rounded-full bg-status-error-text motion-safe:animate-vc-glow-pulse"
+								}), /* @__PURE__ */ j("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ A("p", {
+										className: "truncate text-sm font-medium text-text-primary",
+										children: e.parameter
+									}), /* @__PURE__ */ j("p", {
+										className: "text-xs text-text-tertiary",
+										children: [
+											/* @__PURE__ */ j("span", {
+												className: "tabular-nums",
+												children: [
+													f(e.value),
+													" ",
+													e.unit
+												]
+											}),
+											" ",
+											"· ",
+											m(e.recordedAt)
+										]
+									})]
 								})]
-							}), /* @__PURE__ */ j(p, { status: "BREACH" })]
+							}), /* @__PURE__ */ A(h, { status: "BREACH" })]
 						}, e.id))
 					})]
 				})]
 			}),
-			/* @__PURE__ */ j(g, {
+			/* @__PURE__ */ A(_, {
 				title: "Recent field observations",
 				description: "Latest wildlife & biodiversity sightings recorded across your sites.",
-				action: /* @__PURE__ */ M("button", {
+				action: /* @__PURE__ */ j("button", {
 					type: "button",
-					onClick: () => I("observations"),
+					onClick: () => F("observations"),
 					className: "inline-flex items-center gap-1 text-sm font-medium text-accent hover:underline",
-					children: ["All observations ", /* @__PURE__ */ j(T, { className: "h-4 w-4" })]
+					children: ["All observations ", /* @__PURE__ */ A(T, { className: "h-4 w-4" })]
 				}),
-				children: $.length === 0 ? /* @__PURE__ */ j(_, {
+				children: $.length === 0 ? /* @__PURE__ */ A(v, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ j(re, { className: "h-10 w-10" }),
+					icon: /* @__PURE__ */ A(E, { className: "h-10 w-10" }),
 					title: "No observations yet",
 					description: "Record your first field observation to build your biodiversity dataset."
-				}) : /* @__PURE__ */ j("div", {
+				}) : /* @__PURE__ */ A("div", {
 					className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-					children: $.map((e) => /* @__PURE__ */ M(N, {
+					children: $.map((e) => /* @__PURE__ */ j(M, {
 						treatment: "plain",
-						className: "p-4",
-						children: [/* @__PURE__ */ M("div", {
+						className: "p-4 transition-shadow hover:shadow-float",
+						children: [/* @__PURE__ */ j("div", {
 							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ M("div", {
-								className: "min-w-0",
-								children: [/* @__PURE__ */ j("p", {
-									className: "truncate text-sm font-semibold text-text-primary",
-									children: e.species?.commonName ?? "Unknown species"
-								}), e.species?.scientificName && /* @__PURE__ */ j("p", {
-									className: "truncate text-xs italic text-text-tertiary",
-									children: e.species.scientificName
+							children: [/* @__PURE__ */ j("div", {
+								className: "flex min-w-0 items-start gap-2.5",
+								children: [/* @__PURE__ */ A("span", {
+									className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-accent",
+									children: /* @__PURE__ */ A(E, { className: "h-4 w-4" })
+								}), /* @__PURE__ */ j("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ A("p", {
+										className: "truncate text-sm font-semibold text-text-primary",
+										children: e.species?.commonName ?? "Unknown species"
+									}), e.species?.scientificName && /* @__PURE__ */ A("p", {
+										className: "truncate text-xs italic text-text-tertiary",
+										children: e.species.scientificName
+									})]
 								})]
-							}), /* @__PURE__ */ M("span", {
-								className: "shrink-0 rounded-full bg-bg-sunken px-2 py-0.5 text-xs tabular-nums text-text-secondary",
-								children: ["×", d(e.count)]
-							})]
-						}), /* @__PURE__ */ M("div", {
-							className: "mt-3 flex items-center justify-between",
-							children: [/* @__PURE__ */ j("span", {
-								className: "text-xs text-text-tertiary",
-								children: te(e.method)
 							}), /* @__PURE__ */ j("span", {
+								className: "shrink-0 rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-xs font-medium tabular-nums text-text-primary",
+								children: ["×", f(e.count)]
+							})]
+						}), /* @__PURE__ */ j("div", {
+							className: "mt-3 flex items-center justify-between border-t border-border-seam/70 pt-2.5",
+							children: [/* @__PURE__ */ A("span", {
+								className: "rounded-full bg-bg-sunken px-2 py-0.5 text-xs text-text-secondary",
+								children: d(e.method)
+							}), /* @__PURE__ */ A("span", {
 								className: "text-xs text-text-tertiary",
-								children: f(e.observedAt)
+								children: m(e.observedAt)
 							})]
 						})]
 					}, e.id))
 				})
 			}),
-			K.length > 0 && /* @__PURE__ */ j(g, {
+			U.length > 0 && /* @__PURE__ */ A(_, {
 				title: "Conservation status",
 				description: "Distribution of tracked species by IUCN-style status.",
-				children: /* @__PURE__ */ j(N, {
+				children: /* @__PURE__ */ A(M, {
 					treatment: "plain",
 					className: "p-6",
-					children: /* @__PURE__ */ j("div", {
-						className: "space-y-3",
+					children: /* @__PURE__ */ A("div", {
+						className: "space-y-3.5",
 						children: (() => {
 							let e = /* @__PURE__ */ new Map();
-							for (let t of K) e.set(t.conservationStatus, (e.get(t.conservationStatus) ?? 0) + 1);
-							let t = K.length;
-							return [...e.entries()].sort((e, t) => t[1] - e[1]).map(([e, n]) => /* @__PURE__ */ M("div", {
-								className: "flex items-center gap-4",
-								children: [
-									/* @__PURE__ */ j("div", {
-										className: "w-48 shrink-0",
-										children: /* @__PURE__ */ j(p, { status: e })
-									}),
-									/* @__PURE__ */ j(m, {
-										value: n / t * 100,
-										className: "flex-1"
-									}),
-									/* @__PURE__ */ j("span", {
-										className: "w-10 shrink-0 text-right text-sm tabular-nums text-text-secondary",
-										children: n
-									})
-								]
-							}, e));
+							for (let t of U) e.set(t.conservationStatus, (e.get(t.conservationStatus) ?? 0) + 1);
+							let t = U.length;
+							return [...e.entries()].sort((e, t) => t[1] - e[1]).map(([e, n]) => {
+								let r = n / t * 100, i = P[e] ?? "var(--color-text-tertiary)";
+								return /* @__PURE__ */ j("div", {
+									className: "flex items-center gap-3 sm:gap-4",
+									children: [
+										/* @__PURE__ */ A("div", {
+											className: "w-36 shrink-0 sm:w-48",
+											children: /* @__PURE__ */ A(h, { status: e })
+										}),
+										/* @__PURE__ */ A(re, {
+											value: r,
+											color: i,
+											className: "flex-1"
+										}),
+										/* @__PURE__ */ A("span", {
+											className: "w-9 shrink-0 text-right text-sm font-medium tabular-nums text-text-primary",
+											children: n
+										}),
+										/* @__PURE__ */ A("span", {
+											className: "hidden w-12 shrink-0 text-right text-xs tabular-nums text-text-tertiary sm:inline",
+											children: p(r)
+										})
+									]
+								}, e);
+							});
 						})()
 					})
 				})
@@ -369,6 +525,6 @@ function I() {
 	});
 }
 //#endregion
-export { I as DashboardPage };
+export { F as DashboardPage };
 
 //# sourceMappingURL=DashboardPage.js.map