@overvis/hmi-workspace-ui 0.0.0-stage → 0.1.1

package/dist/notice-card-CH28rYUt.js

@@ -0,0 +1,242 @@
+import { m as e } from "./i18n-Dt6xbSK6.js";
+import { Mt as t, Nt as n, jt as r } from "./alert-dialog-B60PF7S9.js";
+import { t as i } from "./spinner-BRcNKwjH.js";
+import * as a from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ChevronRightIcon as l, CircleAlertIcon as u, InfoIcon as d, RefreshCwIcon as f, TriangleAlertIcon as p } from "lucide-react";
+import { cva as m } from "class-variance-authority";
+import { Collapsible as h } from "@base-ui/react/collapsible";
+// src/ui/card.tsx
+function g({ className: e, size: t = "default", ...r }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card",
+		"data-size": t,
+		className: n("\n          group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl border bg-card\n          py-(--card-spacing) text-sm text-card-foreground shadow-xs [--card-spacing:--spacing(4)]\n          has-data-[slot=card-footer]:pb-0\n          has-[>img:first-child]:pt-0\n          data-[size=sm]:[--card-spacing:--spacing(3)]\n          data-[size=sm]:has-data-[slot=card-footer]:pb-0\n          *:[img:first-child]:rounded-t-xl\n          *:[img:last-child]:rounded-b-xl\n        ", e),
+		...r
+	});
+}
+function _({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-header",
+		className: n("\n          group/card-header @container/card-header grid auto-rows-min items-start gap-1\n          rounded-t-xl px-(--card-spacing)\n          has-data-[slot=card-action]:grid-cols-[1fr_auto]\n          has-data-[slot=card-description]:grid-rows-[auto_auto]\n          [.border-b]:pb-(--card-spacing)\n        ", e),
+		...t
+	});
+}
+function v({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-title",
+		className: n("\n          font-heading text-sm/snug font-semibold\n          group-data-[size=sm]/card:text-[13px]\n        ", e),
+		...t
+	});
+}
+function y({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-description",
+		className: n("text-[13px] text-muted-foreground", e),
+		...t
+	});
+}
+function b({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-action",
+		className: n("col-start-2 row-span-2 row-start-1 self-start justify-self-end", e),
+		...t
+	});
+}
+function x({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-content",
+		className: n("px-(--card-spacing)", e),
+		...t
+	});
+}
+function S({ className: e, ...t }) {
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "card-footer",
+		className: n("flex items-center rounded-b-xl border-t bg-muted/40 p-(--card-spacing)", e),
+		...t
+	});
+}
+// src/ui/collapsible.tsx
+function C({ className: e, ...t }) {
+	return /* @__PURE__ */ s(h.Root, {
+		"data-slot": "collapsible",
+		className: e,
+		...t
+	});
+}
+function w({ className: e, ...t }) {
+	return /* @__PURE__ */ s(h.Trigger, {
+		"data-slot": "collapsible-trigger",
+		className: e,
+		...t
+	});
+}
+function T({ className: e, ...t }) {
+	return /* @__PURE__ */ s(h.Panel, {
+		"data-slot": "collapsible-content",
+		className: n("overflow-hidden", e),
+		...t
+	});
+}
+// src/ui/notice-card.tsx
+var E = m("\n    group/notice relative isolate w-full flex-row items-start gap-3 bg-linear-to-r to-card to-40%\n    p-4 text-left\n    before:absolute before:inset-y-0 before:left-0 before:w-[3px]\n    sm:gap-4\n  ", { variants: {
+	severity: {
+		error: "\n          border-destructive/25 from-destructive/6\n          before:bg-destructive\n        ",
+		warning: "\n          border-warning/30 from-warning/8\n          before:bg-warning\n        ",
+		info: "\n          border-info/25 from-info/6\n          before:bg-info\n        "
+	},
+	size: {
+		default: "sm:p-5",
+		compact: "\n          gap-2.5 rounded-lg p-3\n          sm:gap-3\n        "
+	}
+} }), D = m("\n    flex shrink-0 items-center justify-center ring-1 ring-inset\n    *:[svg]:shrink-0\n  ", { variants: {
+	severity: {
+		error: "bg-destructive/10 text-destructive ring-destructive/20",
+		warning: "bg-warning/12 text-warning ring-warning/25",
+		info: "bg-info/10 text-info ring-info/20"
+	},
+	size: {
+		default: "\n          size-9 rounded-lg\n          *:[svg]:size-4.5\n        ",
+		compact: "\n          size-7 rounded-md\n          *:[svg]:size-4\n        "
+	}
+} }), O = {
+	error: /* @__PURE__ */ s(u, {}),
+	warning: /* @__PURE__ */ s(p, {}),
+	info: /* @__PURE__ */ s(d, {})
+};
+function k(e) {
+	return typeof e == "object" && !!e && "then" in e && typeof e.then == "function";
+}
+function A({ action: e, variant: l, size: u }) {
+	let d = e.pending === !0 ? /* @__PURE__ */ s(i, {
+		"aria-hidden": "true",
+		"data-icon": "inline-start"
+	}) : e.icon, f = /* @__PURE__ */ c(o, { children: [d, e.label] }), p = e.disabled === !0 || e.pending === !0, m = t({
+		variant: l,
+		size: u
+	});
+	if (!p && e.render != null) {
+		let t = e.render;
+		return a.cloneElement(t, {
+			className: n(m, t.props.className),
+			children: f
+		});
+	}
+	return !p && e.href != null ? /* @__PURE__ */ s("a", {
+		href: e.href,
+		className: m,
+		children: f
+	}) : /* @__PURE__ */ s(r, {
+		type: "button",
+		variant: l,
+		size: u,
+		disabled: p,
+		"aria-busy": e.pending === !0 || void 0,
+		onClick: e.onClick,
+		children: f
+	});
+}
+function j({ severity: t = "error", size: r = "default", icon: i, subject: o, title: u, description: d, details: p, detailsOpen: m = !1, primaryAction: h, secondaryActions: _, onRetry: v, retrying: y, retryLabel: b, actions: x, className: S, children: j, ...M }) {
+	let N = e(), [P, F] = a.useState(!1), I = r === "compact", L = y === !0 || P, R = v == null ? null : {
+		label: L ? N("ui_notice_retrying") : b ?? N("ui_notice_retry"),
+		icon: /* @__PURE__ */ s(f, { "data-icon": "inline-start" }),
+		pending: L,
+		onClick: () => {
+			let e = v();
+			if (!k(e)) return;
+			F(!0);
+			let t = () => {
+				F(!1);
+			};
+			e.then(t, t);
+		}
+	}, z = h ?? R, B = I ? "sm" : "default", V = z != null || (_?.length ?? 0) > 0 || x != null;
+	return /* @__PURE__ */ c(g, {
+		"data-slot": "notice-card",
+		"data-severity": t,
+		"data-size": r,
+		role: t === "error" ? "alert" : "status",
+		className: n(E({
+			severity: t,
+			size: r
+		}), S),
+		...M,
+		children: [/* @__PURE__ */ s("span", {
+			"aria-hidden": "true",
+			className: D({
+				severity: t,
+				size: r
+			}),
+			children: i ?? O[t]
+		}), /* @__PURE__ */ c("div", {
+			className: n("flex min-w-0 flex-1 flex-col", I ? "gap-2" : "gap-3"),
+			children: [
+				/* @__PURE__ */ c("div", {
+					className: n("flex min-w-0 flex-col", I ? "gap-0.5 pt-1" : o == null ? "gap-1 pt-2" : "gap-0.5"),
+					children: [
+						o == null ? null : /* @__PURE__ */ s("div", {
+							"data-slot": "notice-card-subject",
+							className: "text-xs font-medium wrap-break-word text-muted-foreground",
+							children: o
+						}),
+						u == null ? null : /* @__PURE__ */ s("div", {
+							"data-slot": "notice-card-title",
+							className: n("font-semibold tracking-tight text-pretty text-foreground", I ? "text-sm/5" : "text-[0.9375rem]/snug"),
+							children: u
+						}),
+						d == null ? null : /* @__PURE__ */ s("div", {
+							"data-slot": "notice-card-description",
+							className: n("text-sm/relaxed text-pretty", u == null ? "text-foreground" : "text-muted-foreground", "\n                  [&_a]:underline [&_a]:underline-offset-3\n                  [&_a]:hover:text-foreground\n                "),
+							children: d
+						})
+					]
+				}),
+				j,
+				p == null || p.length === 0 ? null : /* @__PURE__ */ c(C, {
+					defaultOpen: m,
+					"data-slot": "notice-card-details",
+					children: [/* @__PURE__ */ c(w, {
+						className: "\n                group/details -mx-1 inline-flex cursor-pointer items-center gap-1 rounded-md px-1\n                py-0.5 text-xs font-medium text-muted-foreground outline-none\n                hover:text-foreground\n                focus-visible:ring-3 focus-visible:ring-ring/50\n              ",
+						children: [/* @__PURE__ */ s(l, {
+							"aria-hidden": "true",
+							className: "\n                  size-3.5 transition-transform\n                  group-data-panel-open/details:rotate-90\n                "
+						}), N("ui_notice_details")]
+					}), /* @__PURE__ */ s(T, { children: /* @__PURE__ */ s("dl", {
+						className: "\n                  mt-2 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 rounded-lg border\n                  border-border/60 bg-muted/50 px-3 py-2.5 text-xs\n                ",
+						children: p.map((e) => /* @__PURE__ */ c(a.Fragment, { children: [/* @__PURE__ */ s("dt", {
+							className: "text-muted-foreground",
+							children: e.label
+						}), /* @__PURE__ */ s("dd", {
+							className: "font-medium wrap-anywhere text-foreground tabular-nums",
+							children: e.value
+						})] }, e.label))
+					}) })]
+				}),
+				V ? /* @__PURE__ */ c("div", {
+					"data-slot": "notice-card-actions",
+					className: "\n              flex flex-wrap items-center gap-2\n              max-sm:*:grow\n            ",
+					children: [
+						z == null ? null : /* @__PURE__ */ s(A, {
+							action: z,
+							variant: "default",
+							size: B
+						}),
+						h != null && R != null ? /* @__PURE__ */ s(A, {
+							action: R,
+							variant: "outline",
+							size: B
+						}) : null,
+						_?.map((e) => /* @__PURE__ */ s(A, {
+							action: e,
+							variant: "outline",
+							size: B
+						}, e.label)),
+						x
+					]
+				}) : null
+			]
+		})]
+	});
+}
+export { g as a, y as c, v as d, w as i, S as l, C as n, b as o, T as r, x as s, j as t, _ as u };

package/dist/page-CZPHJUmz.js

@@ -0,0 +1,296 @@
+import { Nr as e, Wn as t, fn as n, hn as r, ii as i, mn as a, pn as o } from "./quick-report-DEqqwQxR.js";
+import { f as s, h as c, m as l } from "./i18n-Dt6xbSK6.js";
+import { jt as u, xt as d } from "./alert-dialog-B60PF7S9.js";
+import { A as f, M as p, j as m, l as h } from "./spinner-BRcNKwjH.js";
+import { i as g, n as _, r as v, t as y } from "./alarm-list-sheAq-pb.js";
+import { M as b, a as x, b as S, i as C, n as w, r as T } from "./panel-BCwBlB_h.js";
+import { r as E, t as D } from "./query-gate-DqmHsZ07.js";
+import { i as O, n as k, t as A } from "./search-DP9_alSQ.js";
+import { jsx as j, jsxs as M } from "react/jsx-runtime";
+import { SirenIcon as N, XIcon as P } from "lucide-react";
+import { formatAppDateTime as F, parseExactAppDateTime as I } from "@overvis/hmi-shared";
+import { alarmEventKinds as L, automationSeverities as R } from "@overvis/hmi-shared/automation";
+// src/workspace/alarms/history.tsx
+function z(e) {
+	return s(e === "raised" ? "alarm_event_raised" : e === "cleared" ? "alarm_event_cleared" : e === "acknowledged" ? "alarm_event_acknowledged" : e === "shelved" ? "alarm_event_shelved" : e === "unshelved" ? "alarm_event_unshelved" : "alarm_event_removed");
+}
+function B(e) {
+	return s(e === "urgent" ? "automation_severity_urgent" : e === "warning" ? "automation_severity_warning" : "automation_severity_info");
+}
+function V(e) {
+	if (e.kind === "acknowledged" || e.kind === "shelved" || e.kind === "unshelved") {
+		let t = [
+			e.actorName,
+			e.kind === "shelved" && e.shelvedUntil != null ? s("alarm_event_shelved_until", { time: F(e.shelvedUntil) }) : null,
+			e.note
+		].filter((e) => e != null && e.length > 0);
+		return t.length === 0 ? null : t.join(" · ");
+	}
+	return e.kind === "removed" ? s("alarm_event_removed_detail") : null;
+}
+function H({ event: e, sourceName: t, timeZone: n, onShowAlarm: r }) {
+	let i = l(), a = c(), { title: s } = v(e, o(e.message, a, n)), u = V(e);
+	return /* @__PURE__ */ M("li", {
+		className: "\n        flex flex-col gap-1 border-b py-2.5 text-sm\n        last:border-b-0\n        @2xl:grid @2xl:grid-cols-[11rem_7rem_1fr] @2xl:gap-x-3\n      ",
+		children: [
+			/* @__PURE__ */ j("time", {
+				dateTime: e.occurredAt,
+				className: "\n          text-xs text-muted-foreground tabular-nums\n          @2xl:pt-0.5 @2xl:text-sm\n        ",
+				children: F(e.occurredAt)
+			}),
+			/* @__PURE__ */ j("div", {
+				className: "\n          hidden items-start\n          @2xl:flex\n        ",
+				children: /* @__PURE__ */ j(h, {
+					variant: "secondary",
+					children: z(e.kind)
+				})
+			}),
+			/* @__PURE__ */ M("div", {
+				className: "flex min-w-0 flex-col gap-0.5",
+				children: [
+					/* @__PURE__ */ M("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ j(h, {
+								variant: "secondary",
+								className: "@2xl:hidden",
+								children: z(e.kind)
+							}),
+							/* @__PURE__ */ j(_, { severity: e.severity }),
+							/* @__PURE__ */ j("button", {
+								type: "button",
+								className: "\n              min-w-0 text-left font-medium wrap-break-word underline-offset-4\n              hover:underline\n              focus-visible:underline focus-visible:outline-none\n            ",
+								title: i("alarm_history_of_alarm"),
+								onClick: () => {
+									r(e.alarmId);
+								},
+								children: s
+							})
+						]
+					}),
+					u == null ? null : /* @__PURE__ */ j("p", {
+						className: "text-xs wrap-break-word text-muted-foreground",
+						children: u
+					}),
+					t == null ? null : /* @__PURE__ */ j("p", {
+						className: "text-xs text-muted-foreground",
+						children: t
+					})
+				]
+			})
+		]
+	});
+}
+function U({ workspaceId: n, filters: r, onFiltersChange: o }) {
+	let s = l(), c = e()?.timezone ?? "UTC", h = g(n, !0), _ = I(r.from ?? "")?.toISOString(), v = I(r.to ?? "")?.toISOString(), y = i.alarm.log.useInfiniteQuery({
+		workspaceId: n,
+		...r.severity == null ? {} : { severities: [r.severity] },
+		...r.kind == null ? {} : { kinds: [r.kind] },
+		...r.source == null ? {} : { sourceIds: [r.source] },
+		...r.alarm == null ? {} : { alarmId: r.alarm },
+		..._ == null ? {} : { from: _ },
+		...v == null ? {} : { to: v },
+		limit: 50
+	}, { getNextPageParam: (e) => e.nextCursor ?? void 0 }), x = Object.values(r).some((e) => e != null && e !== ""), S = (e) => {
+		o(A(k({
+			...r,
+			...e
+		})));
+	};
+	return /* @__PURE__ */ M("div", {
+		className: "flex flex-col gap-3",
+		children: [
+			/* @__PURE__ */ M("div", {
+				role: "group",
+				"aria-label": s("alarm_history_filters"),
+				className: "\n          grid grid-cols-2 items-start gap-2\n          @2xl:grid-cols-6\n          @4xl:grid-cols-12\n        ",
+				children: [
+					/* @__PURE__ */ M(f, {
+						className: "\n            w-full\n            @2xl:col-span-2\n          ",
+						"aria-label": s("alarm_history_severity"),
+						value: r.severity ?? "",
+						onChange: (e) => {
+							S({ severity: e.target.value });
+						},
+						children: [/* @__PURE__ */ j(p, {
+							value: "",
+							children: s("alarm_history_all_severities")
+						}), R.map((e) => /* @__PURE__ */ j(p, {
+							value: e,
+							children: B(e)
+						}, e))]
+					}),
+					/* @__PURE__ */ M(f, {
+						className: "\n            w-full\n            @2xl:col-span-2\n          ",
+						"aria-label": s("alarm_history_kind"),
+						value: r.kind ?? "",
+						onChange: (e) => {
+							S({ kind: e.target.value });
+						},
+						children: [/* @__PURE__ */ j(p, {
+							value: "",
+							children: s("alarm_history_all_kinds")
+						}), L.map((e) => /* @__PURE__ */ j(p, {
+							value: e,
+							children: z(e)
+						}, e))]
+					}),
+					/* @__PURE__ */ M(f, {
+						className: "\n            col-span-2 w-full\n            @4xl:col-span-2\n          ",
+						"aria-label": s("alarm_history_source"),
+						value: r.source ?? "",
+						onChange: (e) => {
+							S({ source: e.target.value });
+						},
+						children: [
+							/* @__PURE__ */ j(p, {
+								value: "",
+								children: s("alarm_history_all_sources")
+							}),
+							h.rules.length > 0 ? /* @__PURE__ */ j(m, {
+								label: s("alarm_history_alarm_rules"),
+								children: h.rules.map((e) => /* @__PURE__ */ j(p, {
+									value: e.id,
+									children: h.names.get(e.id)
+								}, e.id))
+							}) : null,
+							h.automations.length > 0 ? /* @__PURE__ */ j(m, {
+								label: s("alarm_history_automations"),
+								children: h.automations.map((e) => /* @__PURE__ */ j(p, {
+									value: e.id,
+									children: h.names.get(e.id)
+								}, e.id))
+							}) : null
+						]
+					}),
+					/* @__PURE__ */ j("div", {
+						role: "group",
+						"aria-label": s("alarm_history_period"),
+						className: "\n            col-span-2\n            @2xl:col-span-6\n            @4xl:col-span-6\n          ",
+						children: /* @__PURE__ */ j(b, {
+							optional: !0,
+							value: {
+								from: r.from ?? "",
+								to: r.to ?? ""
+							},
+							onValueChange: (e) => {
+								S({
+									from: e.from,
+									to: e.to
+								});
+							}
+						})
+					}),
+					r.alarm == null ? null : /* @__PURE__ */ M(u, {
+						variant: "outline",
+						size: "sm",
+						className: "col-span-2 justify-self-start",
+						onClick: () => {
+							S({ alarm: void 0 });
+						},
+						children: [/* @__PURE__ */ j(P, { "data-icon": "inline-start" }), s("alarm_history_one_alarm")]
+					}),
+					x ? /* @__PURE__ */ M(u, {
+						variant: "ghost",
+						size: "sm",
+						className: "col-span-2 justify-self-start",
+						onClick: () => {
+							o({});
+						},
+						children: [/* @__PURE__ */ j(P, { "data-icon": "inline-start" }), s("alarm_history_clear_filters")]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ j("p", {
+				className: "text-xs text-muted-foreground",
+				children: s("alarm_history_delay")
+			}),
+			/* @__PURE__ */ j(E, {
+				query: y,
+				loading: /* @__PURE__ */ j(d, { className: "h-52 w-full" }),
+				error: (e) => /* @__PURE__ */ j(D, { message: t(e) }),
+				isEmpty: (e) => e.pages.every((e) => e.events.length === 0),
+				empty: /* @__PURE__ */ j("p", {
+					className: "rounded-lg border py-10 text-center text-sm text-muted-foreground",
+					children: s("alarm_history_empty")
+				}),
+				children: (e) => /* @__PURE__ */ j("ul", {
+					"aria-label": s("alarm_history_title"),
+					className: "rounded-lg border px-3",
+					children: e.pages.flatMap((e) => e.events.map((e) => /* @__PURE__ */ j(H, {
+						event: e,
+						sourceName: h.names.get(a(e.source)) ?? null,
+						timeZone: c,
+						onShowAlarm: (e) => {
+							S({ alarm: e });
+						}
+					}, e.id)))
+				})
+			}),
+			y.hasNextPage ? /* @__PURE__ */ j(u, {
+				variant: "outline",
+				size: "sm",
+				className: "self-center",
+				disabled: y.isFetchingNextPage,
+				onClick: () => {
+					y.fetchNextPage();
+				},
+				children: s("alarm_history_more")
+			}) : null
+		]
+	});
+}
+// src/workspace/alarms/page.tsx
+function W({ workspaceId: e, search: t, onSearchChange: i }) {
+	let a = l(), { alarms: o, now: s } = n(e), c = o == null ? 0 : r(o, s), u = t.tab ?? "active";
+	return /* @__PURE__ */ M("div", {
+		className: "\n        @container mx-auto flex w-full max-w-5xl flex-1 flex-col gap-4 p-4\n        md:p-6\n      ",
+		children: [
+			/* @__PURE__ */ j(S, {
+				icon: /* @__PURE__ */ j(N, {}),
+				title: a("alarm_page_title"),
+				description: a("alarm_page_description"),
+				className: "p-0"
+			}),
+			/* @__PURE__ */ j(O, {}),
+			/* @__PURE__ */ M(w, {
+				value: u,
+				onValueChange: (e) => {
+					i(e === "history" ? {
+						...A(t),
+						tab: "history"
+					} : {});
+				},
+				children: [
+					/* @__PURE__ */ M(C, { children: [/* @__PURE__ */ j(x, {
+						value: "active",
+						children: c > 0 ? a("alarm_tab_active_count", { count: String(c) }) : a("alarm_tab_active")
+					}), /* @__PURE__ */ j(x, {
+						value: "history",
+						children: a("alarm_tab_history")
+					})] }),
+					/* @__PURE__ */ j(T, {
+						value: "active",
+						className: "pt-2",
+						children: /* @__PURE__ */ j(y, { workspaceId: e })
+					}),
+					/* @__PURE__ */ j(T, {
+						value: "history",
+						className: "pt-2",
+						children: u === "history" ? /* @__PURE__ */ j(U, {
+							workspaceId: e,
+							filters: A(t),
+							onFiltersChange: (e) => {
+								i({
+									...e,
+									tab: "history"
+								});
+							}
+						}) : null
+					})
+				]
+			})
+		]
+	});
+}
+export { W as AlarmsPage };