diff --git a/ui/unifi-components.ts b/ui/unifi-components.ts
new file mode 100644
index 0000000..5b2b09d
--- /dev/null
+++ b/ui/unifi-components.ts
@@ -0,0 +1,286 @@
+// --- BEGIN UNIFI THEME ---
+// Reusable UniFi-style UI components for GenieACS
+// These are new files and do not conflict with upstream components.
+
+import { ClosureComponent, Children } from "mithril";
+import { m } from "./components.ts";
+
+// ─── Status helpers ────────────────────────────────────────────────────────
+
+export type DeviceStatus = "online" | "warning" | "offline" | "unknown";
+
+/**
+ * Determines the online status of a device based on its _lastInform timestamp.
+ * < 5 min → online
+ * < 15 min → warning
+ * ≥ 15 min → offline
+ * missing → unknown
+ */
+export function getDeviceStatus(
+ device: Record,
+): DeviceStatus {
+ const lastInform = device["_lastInform"] as number | undefined;
+ if (!lastInform) return "unknown";
+ const age = Date.now() - lastInform;
+ if (age < 5 * 60 * 1000) return "online";
+ if (age < 15 * 60 * 1000) return "warning";
+ return "offline";
+}
+
+const STATUS_LABEL: Record = {
+ online: "Online",
+ warning: "Recent",
+ offline: "Offline",
+ unknown: "Never",
+};
+
+// ─── TR-069 parameter accessor ─────────────────────────────────────────────
+
+/**
+ * Safely reads the first value from a TR-069 parameter object.
+ * Tries multiple path keys and returns the first non-null hit.
+ */
+export function getParam(
+ device: Record,
+ ...paths: string[]
+): string | null {
+ for (const path of paths) {
+ const entry = device[path];
+ if (entry == null) continue;
+ if (
+ typeof entry === "object" &&
+ (entry as Record)["value"] != null
+ ) {
+ const v = (entry as Record)["value"];
+ if (Array.isArray(v) && v[0] != null) return String(v[0]);
+ }
+ }
+ return null;
+}
+
+/**
+ * Returns a human-readable device name (alias → serial → device ID).
+ */
+export function getDeviceName(device: Record): string {
+ return (
+ getParam(device, "_deviceId._Alias") ??
+ getParam(device, "DeviceID.SerialNumber") ??
+ (device["DeviceID.ID"] as string) ??
+ "Unknown Device"
+ );
+}
+
+/**
+ * Returns the device model string (ProductClass → ModelName → Manufacturer).
+ */
+export function getDeviceModel(device: Record): string {
+ const mfr = getParam(device, "DeviceID.Manufacturer") ?? "";
+ const product =
+ getParam(
+ device,
+ "DeviceID.ProductClass",
+ "InternetGatewayDevice.DeviceInfo.ModelName",
+ "Device.DeviceInfo.ModelName",
+ ) ?? "";
+ return [mfr, product].filter(Boolean).join(" ") || "Unknown Model";
+}
+
+/**
+ * Returns a relative human-readable time label (e.g. "2 minutes ago").
+ */
+export function timeAgo(ts: number): string {
+ const seconds = Math.floor((Date.now() - ts) / 1000);
+ if (seconds < 5) return "just now";
+ if (seconds < 60) return `${seconds}s ago`;
+ const minutes = Math.floor(seconds / 60);
+ if (minutes < 60) return `${minutes}m ago`;
+ const hours = Math.floor(minutes / 60);
+ if (hours < 24) return `${hours}h ago`;
+ const days = Math.floor(hours / 24);
+ return `${days}d ago`;
+}
+
+// ─── StatusDot ─────────────────────────────────────────────────────────────
+
+interface StatusDotAttrs {
+ status: DeviceStatus;
+}
+
+export const statusDot: ClosureComponent = () => ({
+ view: (vnode) =>
+ m(`span.unifi-status-dot.unifi-status-dot--${vnode.attrs.status}`),
+});
+
+// ─── StatusBadge ───────────────────────────────────────────────────────────
+
+interface StatusBadgeAttrs {
+ status: DeviceStatus;
+}
+
+export const statusBadge: ClosureComponent = () => ({
+ view: (vnode) => {
+ const s = vnode.attrs.status;
+ return m(
+ `span.unifi-status-badge.unifi-status-badge--${s}`,
+ m(`span.unifi-status-dot.unifi-status-dot--${s}`, {
+ style: "width:7px;height:7px;box-shadow:none;",
+ }),
+ STATUS_LABEL[s],
+ );
+ },
+});
+
+// ─── StatCard ──────────────────────────────────────────────────────────────
+
+interface StatCardAttrs {
+ label: string;
+ value: number | string;
+ colorClass?: string;
+}
+
+export const statCard: ClosureComponent = () => ({
+ view: (vnode) =>
+ m(
+ "div.unifi-stat-card",
+ m("div.unifi-stat-card__label", vnode.attrs.label),
+ m(
+ `div.unifi-stat-card__value${vnode.attrs.colorClass ? "." + vnode.attrs.colorClass : ""}`,
+ vnode.attrs.value,
+ ),
+ ),
+});
+
+// ─── DeviceCard ────────────────────────────────────────────────────────────
+
+interface DeviceCardAttrs {
+ device: Record;
+ onclick?: (e: MouseEvent) => void;
+}
+
+export const deviceCard: ClosureComponent = () => ({
+ view: (vnode) => {
+ const device = vnode.attrs.device;
+ const status = getDeviceStatus(device);
+ const name = getDeviceName(device);
+ const model = getDeviceModel(device);
+ const lastInform = device["_lastInform"] as number | undefined;
+ const deviceId = device["DeviceID.ID"] as string;
+
+ // WAN IP – try TR-098 then TR-181
+ const wanIp =
+ getParam(
+ device,
+ "InternetGatewayDevice.WANDevice.1.WANConnectionDevice.1.WANIPConnection.1.ExternalIPAddress",
+ "InternetGatewayDevice.WANDevice.1.WANConnectionDevice.1.WANPPPConnection.1.ExternalIPAddress",
+ "Device.IP.Interface.1.IPv4Address.1.IPAddress",
+ "Device.PPP.Interface.1.IPCPLocalIPAddress",
+ ) ?? null;
+
+ // WiFi SSID – try TR-098 then TR-181
+ const ssid =
+ getParam(
+ device,
+ "InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.SSID",
+ "InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.SSID",
+ "Device.WiFi.SSID.1.SSID",
+ "Device.WiFi.SSID.2.SSID",
+ ) ?? null;
+
+ // Firmware
+ const firmware =
+ getParam(
+ device,
+ "InternetGatewayDevice.DeviceInfo.SoftwareVersion",
+ "Device.DeviceInfo.SoftwareVersion",
+ ) ?? null;
+
+ // Tags
+ const tags = device["_tags"] as Record | undefined;
+ const activeTags = tags
+ ? Object.entries(tags)
+ .filter(([, v]) => v)
+ .map(([k]) => k)
+ : [];
+
+ function row(label: string, value: string | null): Children {
+ return m("div.unifi-device-card__row", [
+ m("span.unifi-device-card__row-label", label),
+ m(
+ `span.unifi-device-card__row-value${value == null ? ".empty" : ""}`,
+ value ?? "—",
+ ),
+ ]);
+ }
+
+ return m(
+ "div.unifi-device-card",
+ { onclick: vnode.attrs.onclick },
+ [
+ // Header
+ m("div.unifi-device-card__header", [
+ m(statusDot, { status }),
+ m("div", { style: "flex:1;overflow:hidden;" }, [
+ m("p.unifi-device-card__name", { title: name }, name),
+ m("p.unifi-device-card__model", model),
+ ]),
+ m(statusBadge, { status }),
+ ]),
+
+ // Body
+ m("div.unifi-device-card__body", [
+ wanIp !== null && row("WAN", wanIp),
+ ssid !== null && row("WiFi", ssid),
+ firmware !== null && row("FW", firmware),
+ row(
+ "ID",
+ typeof deviceId === "string" ? deviceId.slice(0, 30) : null,
+ ),
+ ]),
+
+ // Footer
+ m("div.unifi-device-card__footer", [
+ m(
+ "span",
+ lastInform
+ ? `Last seen ${timeAgo(lastInform)}`
+ : "Never connected",
+ ),
+ activeTags.length > 0 &&
+ m(
+ "div.unifi-device-card__tags",
+ activeTags.slice(0, 3).map((t) => m("span.unifi-tag", t)),
+ ),
+ ]),
+ ],
+ );
+ },
+});
+
+// ─── PageSizeSelector ──────────────────────────────────────────────────────
+
+interface PageSizeSelectorAttrs {
+ value: number;
+ options: number[];
+ onChange: (n: number) => void;
+}
+
+export const pageSizeSelector: ClosureComponent = () => ({
+ view: (vnode) =>
+ m("div.unifi-page-size-selector", [
+ m("span", "Per page:"),
+ m(
+ "select",
+ {
+ value: vnode.attrs.value,
+ onchange: (e: Event) =>
+ vnode.attrs.onChange(
+ Number((e.target as HTMLSelectElement).value),
+ ),
+ },
+ vnode.attrs.options.map((n) =>
+ m("option", { value: n, selected: n === vnode.attrs.value }, String(n)),
+ ),
+ ),
+ ]),
+});
+// --- END UNIFI THEME ---
diff --git a/ui/unifi-device-detail-page.ts b/ui/unifi-device-detail-page.ts
new file mode 100644
index 0000000..38948f9
--- /dev/null
+++ b/ui/unifi-device-detail-page.ts
@@ -0,0 +1,279 @@
+// --- BEGIN UNIFI THEME ---
+// UniFi-style device detail page.
+// This file REPLACES device-page.ts in the router without modifying the
+// original, preserving upstream merge-friendliness.
+// All TR-069 parameter rendering is delegated to the original device-page
+// component; this wrapper adds the UniFi header/action-bar on top.
+
+import { ClosureComponent, Children } from "mithril";
+import { m } from "./components.ts";
+import { icon } from "./tailwind-utility-components.ts";
+import { device as deviceConfig } from "./config.ts";
+import * as store from "./store.ts";
+import * as notifications from "./notifications.ts";
+import { queueTask } from "./task-queue.ts";
+import Expression from "../lib/common/expression.ts";
+import Path from "../lib/common/path.ts";
+import {
+ statusBadge,
+ getDeviceStatus,
+ getDeviceName,
+ getDeviceModel,
+ getParam,
+ timeAgo,
+} from "./unifi-components.ts";
+
+export function init(
+ args: Record,
+): Promise> {
+ if (!window.authorizer.hasAccess("devices", 2)) {
+ return Promise.reject(
+ new Error("You are not authorized to view this page"),
+ );
+ }
+
+ return Promise.resolve({
+ deviceId: args.id,
+ deviceFilter: new Expression.Binary(
+ "=",
+ new Expression.Parameter(Path.parse("DeviceID.ID")),
+ new Expression.Literal(args.id as string),
+ ),
+ });
+}
+
+interface Attrs {
+ deviceId: string;
+ deviceFilter: Expression;
+}
+
+// ─── KV pair helper ────────────────────────────────────────────────────────
+
+function kv(label: string, value: string | null): Children {
+ return m("div", [
+ m("div.unifi-detail-kv__label", label),
+ m(
+ `div.unifi-detail-kv__value${value == null ? ".empty" : ""}`,
+ value ?? "—",
+ ),
+ ]);
+}
+
+// ─── Action helper ─────────────────────────────────────────────────────────
+
+function actionBtn(
+ label: string,
+ className: string,
+ disabled: boolean,
+ onClick: () => void,
+): Children {
+ return m(
+ `button.unifi-btn.${className}`,
+ { disabled, onclick: onClick },
+ label,
+ );
+}
+
+// ─── Component ─────────────────────────────────────────────────────────────
+
+export const component: ClosureComponent = () => {
+ let actionsPending = false;
+
+ return {
+ view: (vnode) => {
+ const deviceId = vnode.attrs.deviceId;
+ document.title = `${deviceId} — Devices — GenieACS`;
+
+ const dev = store.fetch("devices", vnode.attrs.deviceFilter);
+
+ // While loading
+ if (!dev.value || !dev.value.length) {
+ if (!dev.fulfilling) {
+ return m(
+ "p",
+ { style: "color:#e53935;font-weight:bold;" },
+ `No such device: ${deviceId}`,
+ );
+ }
+ return m("loading", { queries: [dev] }, m("div", { style: "height:100px" }));
+ }
+
+ const device = dev.value[0];
+ const status = getDeviceStatus(device);
+ const name = getDeviceName(device);
+ const model = getDeviceModel(device);
+ const lastInform = device["_lastInform"] as number | undefined;
+ const canWrite = window.authorizer.hasAccess("devices", 3);
+
+ // Key TR-069 fields
+ const serial =
+ getParam(device, "DeviceID.SerialNumber") ??
+ getParam(
+ device,
+ "InternetGatewayDevice.DeviceInfo.SerialNumber",
+ "Device.DeviceInfo.SerialNumber",
+ );
+ const firmware = getParam(
+ device,
+ "InternetGatewayDevice.DeviceInfo.SoftwareVersion",
+ "Device.DeviceInfo.SoftwareVersion",
+ );
+ const wanIp = getParam(
+ device,
+ "InternetGatewayDevice.WANDevice.1.WANConnectionDevice.1.WANIPConnection.1.ExternalIPAddress",
+ "InternetGatewayDevice.WANDevice.1.WANConnectionDevice.1.WANPPPConnection.1.ExternalIPAddress",
+ "Device.IP.Interface.1.IPv4Address.1.IPAddress",
+ );
+ const ssid = getParam(
+ device,
+ "InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.SSID",
+ "Device.WiFi.SSID.1.SSID",
+ );
+ const hardwareVersion = getParam(
+ device,
+ "InternetGatewayDevice.DeviceInfo.HardwareVersion",
+ "Device.DeviceInfo.HardwareVersion",
+ );
+ const uptime = getParam(
+ device,
+ "InternetGatewayDevice.DeviceInfo.UpTime",
+ "Device.DeviceInfo.UpTime",
+ );
+
+ // ── Router icon ────────────────────────────────────────────────────
+ const routerIcon = m(
+ "div.unifi-device-detail-header__icon",
+ m(icon, { name: "nav-devices", class: "h-7 w-7" }),
+ );
+
+ // ── Header bar ─────────────────────────────────────────────────────
+ const header = m("div.unifi-device-detail-header", [
+ // Back link
+ m(
+ "a.unifi-back-link",
+ { href: "#!/devices" },
+ m(icon, { name: "nav-back", class: "h-4 w-4" }),
+ " Back to Devices",
+ ),
+
+ m("div.unifi-device-detail-header__top", [
+ routerIcon,
+ m("div.unifi-device-detail-header__info", [
+ m("h1.unifi-device-detail-header__name", name),
+ m("div.unifi-device-detail-header__meta", [
+ m(statusBadge, { status }),
+ model && m("span", model),
+ serial && m("span", `S/N: ${serial}`),
+ lastInform &&
+ m(
+ "span",
+ { title: new Date(lastInform).toLocaleString() },
+ `Last seen: ${timeAgo(lastInform)}`,
+ ),
+ ]),
+ ]),
+ // Actions
+ canWrite &&
+ m("div.unifi-device-detail-header__actions", [
+ actionBtn(
+ "Reboot",
+ "unifi-btn--secondary",
+ actionsPending,
+ () => {
+ actionsPending = true;
+ queueTask({ name: "reboot", device: deviceId });
+ notifications.push(
+ "success",
+ `Reboot task queued for ${name}`,
+ );
+ setTimeout(() => {
+ actionsPending = false;
+ m.redraw();
+ }, 2000);
+ },
+ ),
+ actionBtn(
+ "Factory Reset",
+ "unifi-btn--danger",
+ actionsPending,
+ () => {
+ if (
+ !confirm(
+ `Factory reset ${name}? This will erase all configuration.`,
+ )
+ )
+ return;
+ actionsPending = true;
+ queueTask({ name: "factoryReset", device: deviceId });
+ notifications.push(
+ "success",
+ `Factory reset task queued for ${name}`,
+ );
+ setTimeout(() => {
+ actionsPending = false;
+ m.redraw();
+ }, 2000);
+ },
+ ),
+ actionBtn(
+ "Refresh",
+ "unifi-btn--secondary",
+ actionsPending,
+ () => {
+ actionsPending = true;
+ store.setTimestamp(Date.now());
+ setTimeout(() => {
+ actionsPending = false;
+ m.redraw();
+ }, 1500);
+ },
+ ),
+ ]),
+ ]),
+
+ // Key-value grid
+ m("div.unifi-device-detail-header__kv", [
+ kv("WAN IP", wanIp),
+ kv("WiFi SSID", ssid),
+ kv("Firmware", firmware),
+ kv("Hardware", hardwareVersion),
+ uptime != null &&
+ kv(
+ "Uptime",
+ (() => {
+ const s = Number(uptime);
+ if (isNaN(s)) return uptime;
+ const d = Math.floor(s / 86400);
+ const h = Math.floor((s % 86400) / 3600);
+ const m2 = Math.floor((s % 3600) / 60);
+ return [d && `${d}d`, h && `${h}h`, `${m2}m`]
+ .filter(Boolean)
+ .join(" ");
+ })(),
+ ),
+ kv("Device ID", deviceId),
+ ]),
+ ]);
+
+ // ── Original device-page content (all configured panels) ────────────
+ const conf = deviceConfig;
+ const cmps = [];
+ for (const c of Object.values(conf)) {
+ cmps.push(
+ m.context(
+ { device: dev.value[0], deviceQuery: dev },
+ store.evaluateExpression(c["type"], {}).value as string,
+ c as any,
+ ),
+ );
+ }
+
+ const content = m("div.unifi-device-content", [
+ m("div.device-page", cmps),
+ ]);
+
+ return m("div", [header, content]);
+ },
+ };
+};
+// --- END UNIFI THEME ---
diff --git a/ui/unifi-devices-page.ts b/ui/unifi-devices-page.ts
new file mode 100644
index 0000000..2c2c774
--- /dev/null
+++ b/ui/unifi-devices-page.ts
@@ -0,0 +1,389 @@
+// --- BEGIN UNIFI THEME ---
+// UniFi-style card grid for the Devices listing.
+// This file REPLACES devices-page.ts in the router but DOES NOT modify
+// the original file, keeping upstream merges clean.
+// Data-fetching uses the same store.fetch/count API as the original.
+
+import { ClosureComponent, Children } from "mithril";
+import { m } from "./components.ts";
+import { pageSize as DEFAULT_PAGE_SIZE, index as indexConfig } from "./config.ts";
+import filterComponent from "./filter-component.ts";
+import * as store from "./store.ts";
+import { queueTask, stageDownload } from "./task-queue.ts";
+import * as notifications from "./notifications.ts";
+import Expression, { extractPaths } from "../lib/common/expression.ts";
+import memoize from "../lib/common/memoize.ts";
+import * as smartQuery from "./smart-query.ts";
+import {
+ deviceCard,
+ statCard,
+ pageSizeSelector,
+ getDeviceStatus,
+ getDeviceName,
+} from "./unifi-components.ts";
+
+const unpackSmartQuery = memoize((query: Expression) => {
+ return query.evaluate((e) => {
+ if (e instanceof Expression.FunctionCall) {
+ if (e.name === "Q") {
+ if (
+ e.args[0] instanceof Expression.Literal &&
+ e.args[1] instanceof Expression.Literal
+ ) {
+ return smartQuery.unpack(
+ "devices",
+ e.args[0].value as string,
+ e.args[1].value as string,
+ );
+ }
+ }
+ }
+ return e;
+ });
+});
+
+// Filters for counting online / warning / offline devices
+const ONLINE_FILTER = Expression.parse(
+ "IS NOT NULL(_lastInform) AND _lastInform > NOW() - 300000",
+);
+const WARNING_FILTER = Expression.parse(
+ "IS NOT NULL(_lastInform) AND _lastInform > NOW() - 900000 AND _lastInform <= NOW() - 300000",
+);
+const OFFLINE_FILTER = Expression.parse(
+ "IS NOT NULL(_lastInform) AND _lastInform <= NOW() - 900000",
+);
+
+export function init(args: Record): Promise {
+ return new Promise((resolve, reject) => {
+ if (!window.authorizer.hasAccess("devices", 2))
+ return void reject(
+ new Error("You are not authorized to view this page"),
+ );
+
+ let filter: Expression = null;
+ let sort: Record = null;
+ if (args.hasOwnProperty("filter"))
+ filter = Expression.parse(args["filter"] as string);
+ if (args.hasOwnProperty("sort"))
+ sort = JSON.parse(args["sort"] as string);
+
+ const indexParameters = indexConfig;
+ if (!indexParameters.length) {
+ indexParameters.push({
+ label: "ID",
+ parameter: Expression.parse("DeviceID.ID"),
+ unsortable: false,
+ raw: {},
+ });
+ }
+ resolve({ filter, indexParameters, sort });
+ });
+}
+
+function renderBulkActions(selected: Set): Children {
+ const disabled = !selected.size;
+ const s = selected.size;
+
+ function btn(
+ label: string,
+ title: string,
+ cls: string,
+ onClick: () => void,
+ ): Children {
+ return m(
+ `button.unifi-btn.${cls}`,
+ { title, disabled, onclick: onClick },
+ label,
+ );
+ }
+
+ return [
+ btn("Reboot", `Reboot ${s} device(s)`, "unifi-btn--secondary", () => {
+ queueTask(...[...selected].map((id) => ({ name: "reboot", device: id })));
+ }),
+ btn("Reset", `Factory-reset ${s} device(s)`, "unifi-btn--secondary", () => {
+ queueTask(
+ ...[...selected].map((id) => ({ name: "factoryReset", device: id })),
+ );
+ }),
+ btn("Push File", `Push file to ${s} device(s)`, "unifi-btn--secondary", () => {
+ stageDownload({ name: "download", devices: [...selected] });
+ }),
+ btn("Delete", `Delete ${s} device(s)`, "unifi-btn--danger", () => {
+ if (!confirm(`Delete ${s} device(s)?`)) return;
+ let counter = 1;
+ for (const id of selected) {
+ ++counter;
+ store
+ .deleteResource("devices", id)
+ .then(() => {
+ notifications.push("success", `${id}: Deleted`);
+ if (--counter === 0) store.setTimestamp(Date.now());
+ })
+ .catch((err) => {
+ notifications.push("error", `${id}: ${err.message}`);
+ if (--counter === 0) store.setTimestamp(Date.now());
+ });
+ }
+ if (--counter === 0) store.setTimestamp(Date.now());
+ }),
+ btn("Tag", `Tag ${s} device(s)`, "unifi-btn--secondary", () => {
+ const tag = prompt(`Tag to assign to ${s} device(s):`);
+ if (!tag) return;
+ let counter = 1;
+ for (const id of selected) {
+ ++counter;
+ store
+ .updateTags(id, { [tag]: true })
+ .then(() => {
+ notifications.push("success", `${id}: Tagged`);
+ if (--counter === 0) store.setTimestamp(Date.now());
+ })
+ .catch((err) => {
+ notifications.push("error", `${id}: ${err.message}`);
+ if (--counter === 0) store.setTimestamp(Date.now());
+ });
+ }
+ if (--counter === 0) store.setTimestamp(Date.now());
+ }),
+ ];
+}
+
+interface Attrs {
+ indexParameters: typeof indexConfig;
+ filter?: Expression;
+ sort?: Record;
+}
+
+const PAGE_SIZE_OPTIONS = [30, 50, 100];
+
+export const component: ClosureComponent = () => {
+ let selected = new Set();
+ let pageSize = DEFAULT_PAGE_SIZE;
+
+ // Clamp pageSize to our supported options on first render
+ const validOptions = PAGE_SIZE_OPTIONS;
+ if (!validOptions.includes(pageSize)) pageSize = 30;
+
+ return {
+ view: (vnode) => {
+ document.title = "Devices — GenieACS";
+
+ function onFilterChanged(filter: Expression): void {
+ const ops: Record = {};
+ if (!(filter instanceof Expression.Literal && filter.value))
+ ops["filter"] = filter.toString();
+ m.route.set("/devices", ops);
+ selected = new Set();
+ }
+
+ const filter = unpackSmartQuery(
+ vnode.attrs["filter"] ?? new Expression.Literal(true),
+ );
+
+ const devs = store.fetch("devices", filter, {
+ limit: vnode.state["showCount"] || pageSize,
+ sort: vnode.attrs.sort || {},
+ });
+ const totalCount = store.count("devices", filter);
+ const onlineCount = store.count("devices", ONLINE_FILTER);
+ const warningCount = store.count("devices", WARNING_FILTER);
+ const offlineCount = store.count("devices", OFFLINE_FILTER);
+
+ function showMore(): void {
+ vnode.state["showCount"] =
+ (vnode.state["showCount"] || pageSize) + pageSize;
+ m.redraw();
+ }
+
+ const devices: Record[] = devs.value ?? [];
+ const total: number = totalCount.value ?? 0;
+ const loaded = devices.length;
+ const hasMore = total > loaded;
+
+ const selectAll = loaded > 0 && selected.size === loaded;
+
+ // ── Stats row ─────────────────────────────────────────────────────────
+ const statsRow = m(
+ "div.unifi-stat-row",
+ m(statCard, { label: "Total Devices", value: total ?? "…" }),
+ m(statCard, {
+ label: "Online",
+ value: onlineCount.value ?? "…",
+ colorClass: "online",
+ }),
+ m(statCard, {
+ label: "Recent",
+ value: warningCount.value ?? "…",
+ colorClass: "warning",
+ }),
+ m(statCard, {
+ label: "Offline",
+ value: offlineCount.value ?? "…",
+ colorClass: "offline",
+ }),
+ );
+
+ // ── Toolbar ───────────────────────────────────────────────────────────
+ const actionsEnabled = window.authorizer.hasAccess("devices", 3);
+
+ const toolbar = m("div.unifi-toolbar", [
+ // Left: bulk actions (visible when devices selected)
+ m(
+ "div.unifi-toolbar-left",
+ actionsEnabled && selected.size > 0
+ ? [
+ m(
+ "span",
+ { style: "font-size:0.8125rem;color:#7a8699;" },
+ `${selected.size} selected`,
+ ),
+ ...renderBulkActions(selected),
+ ]
+ : [
+ // Select-all checkbox
+ actionsEnabled &&
+ m(
+ "label",
+ {
+ style:
+ "display:flex;align-items:center;gap:6px;font-size:0.8125rem;color:#7a8699;cursor:pointer;",
+ },
+ m("input", {
+ type: "checkbox",
+ checked: selectAll,
+ disabled: loaded === 0,
+ onchange: (e: Event) => {
+ if ((e.target as HTMLInputElement).checked) {
+ for (const d of devices)
+ selected.add(d["DeviceID.ID"] as string);
+ } else {
+ selected.clear();
+ }
+ },
+ }),
+ "Select all",
+ ),
+ ],
+ ),
+ // Right: page size selector
+ m("div.unifi-toolbar-right", [
+ total > 0 &&
+ m(
+ "span",
+ { style: "font-size:0.8125rem;color:#9aa5b8;" },
+ `${loaded} / ${total}`,
+ ),
+ m(pageSizeSelector, {
+ value: vnode.state["pageSizeValue"] || pageSize,
+ options: PAGE_SIZE_OPTIONS,
+ onChange: (n) => {
+ vnode.state["pageSizeValue"] = n;
+ vnode.state["showCount"] = n;
+ selected = new Set();
+ m.redraw();
+ },
+ }),
+ ]),
+ ]);
+
+ // ── Filter bar ────────────────────────────────────────────────────────
+ const filterBar = m(filterComponent, {
+ resource: "devices",
+ filter: vnode.attrs["filter"],
+ onChange: onFilterChanged,
+ });
+
+ // ── Device grid ───────────────────────────────────────────────────────
+ const grid =
+ devices.length === 0
+ ? m(
+ "div",
+ {
+ style:
+ "text-align:center;padding:60px 20px;color:#9aa5b8;font-size:0.9375rem;",
+ },
+ devs.fulfilling
+ ? "Loading devices…"
+ : "No devices found.",
+ )
+ : m(
+ "div.unifi-device-grid",
+ devices.map((device) => {
+ const id = device["DeviceID.ID"] as string;
+ const isSelected = selected.has(id);
+ return m(deviceCard, {
+ key: id,
+ device,
+ onclick: (e: MouseEvent) => {
+ // Ctrl/Cmd + click = toggle selection
+ if (e.ctrlKey || e.metaKey) {
+ if (isSelected) selected.delete(id);
+ else selected.add(id);
+ m.redraw();
+ return;
+ }
+ // Normal click = navigate to device detail
+ m.route.set(
+ `/devices/${encodeURIComponent(id)}`,
+ );
+ },
+ });
+ }),
+ );
+
+ // ── Load-more / pagination ──────────────────────────────────────────
+ const loadMoreBar = hasMore
+ ? m(
+ "div.unifi-pagination",
+ m(
+ "span.unifi-pagination__info",
+ `Showing ${loaded} of ${total} devices`,
+ ),
+ m(
+ "button.unifi-btn.unifi-btn--secondary",
+ { onclick: showMore },
+ `Load ${Math.min(pageSize, total - loaded)} more`,
+ ),
+ )
+ : total > 0
+ ? m(
+ "div.unifi-pagination",
+ m(
+ "span.unifi-pagination__info",
+ `All ${total} devices loaded`,
+ ),
+ )
+ : null;
+
+ return [
+ m("div.unifi-page-header", [
+ m("h1.unifi-page-title", "Devices"),
+ // CSV download link
+ total > 0 &&
+ window.authorizer.hasAccess("devices", 2) &&
+ m(
+ "a.unifi-btn.unifi-btn--secondary",
+ {
+ href: `api/devices.csv?filter=${encodeURIComponent(vnode.attrs["filter"]?.toString() ?? "")}`,
+ download: "devices.csv",
+ },
+ "Export CSV",
+ ),
+ ]),
+ statsRow,
+ filterBar,
+ toolbar,
+ m(
+ "loading",
+ {
+ queries: [devs, totalCount, onlineCount, warningCount, offlineCount],
+ },
+ grid,
+ ),
+ loadMoreBar,
+ ];
+ },
+ };
+};
+// --- END UNIFI THEME ---
+ {/* --- BEGIN UNIFI THEME --- */}
+
-
+
{window.username ? (
-
@@ -219,35 +226,33 @@ const component: ClosureComponent = () => {
{/* Static sidebar for desktop */}
+ {/* --- BEGIN UNIFI THEME --- */}
-
+
-
- 
+
-
+
-
+
-
-
+ {/* --- END UNIFI THEME --- */}
+
+ {/* --- BEGIN UNIFI THEME --- */}
+
+ {/* --- END UNIFI THEME --- */}