mgv-backoffice 1.4.0 → 1.8.0

package/dist/ui-lib.js

@@ -772,28 +772,29 @@ var qe = /* @__PURE__ */ W(We, [["render", Ke]]), G = /* @__PURE__ */ function(e
 		}
 		return (e, t) => (_(), a("div", Qe, [o("div", { class: f(["border border-gray-300 relative aspect-square rounded-lg bg-white shadow-sm overflow-hidden flex items-center justify-center text-center", i()]) }, [b(e.$slots, "default"), o("div", { class: f(["absolute bottom-0 left-0 h-1 w-full", r.value]) }, null, 2)], 2)]));
 	}
-}), et = { class: "relative rounded-xl border-2 border-dashed border-orange-300 bg-white p-6" }, tt = {
+}), et = { class: "relative rounded-xl border-2 border-dashed border-orange-300 bg-white p-6 dark:border-orange-700 dark:bg-slate-800" }, tt = {
 	key: 0,
-	class: "absolute right-4 top-4 rounded-md bg-orange-100 px-3 py-1 text-xs font-bold tracking-wide text-orange-500"
-}, nt = { class: "flex items-start justify-between" }, rt = { class: "text-sm font-bold tracking-wide text-gray-800" }, it = { class: "mt-1 text-4xl font-bold text-gray-400" }, at = { class: "mt-1 text-sm font-medium text-orange-400" }, ot = /* @__PURE__ */ l({
+	class: "absolute right-4 top-4 rounded-md bg-orange-100 px-3 py-1 text-xs font-bold tracking-wide text-orange-500 dark:bg-orange-900/40 dark:text-orange-400"
+}, nt = { class: "flex items-start justify-between" }, rt = { class: "text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200" }, it = { class: "mt-1 text-4xl font-bold text-gray-400 dark:text-slate-300" }, at = { class: "mt-1 text-sm font-medium text-orange-400 dark:text-orange-400" }, ot = /* @__PURE__ */ l({
 	__name: "EarningsCard",
 	props: {
 		title: { default: "TOTAL EARNINGS" },
 		amount: { default: 0 },
 		subtitle: { default: "Lifetime commission" },
 		badge: { default: "" },
-		currency: { default: "$" }
+		currency: { default: "$" },
+		decimals: { default: 2 }
 	},
 	setup(e) {
 		let t = e, r = n(() => t.currency + t.amount.toLocaleString("en-US", {
-			minimumFractionDigits: 2,
-			maximumFractionDigits: 2
+			minimumFractionDigits: t.decimals,
+			maximumFractionDigits: t.decimals
 		}));
 		return (t, n) => (_(), a("div", et, [e.badge ? (_(), a("div", tt, C(e.badge), 1)) : i("", !0), o("div", nt, [o("div", null, [
 			o("p", rt, C(e.title), 1),
 			o("p", it, C(r.value), 1),
 			o("p", at, C(e.subtitle), 1)
-		]), n[0] ||= o("div", { class: "mt-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50" }, [o("svg", {
+		]), n[0] ||= o("div", { class: "mt-6 flex h-12 w-12 items-center justify-center rounded-xl bg-orange-50 dark:bg-orange-900/30" }, [o("svg", {
 			class: "h-6 w-6 text-orange-400",
 			viewBox: "0 0 24 24",
 			fill: "none",
@@ -1558,10 +1559,210 @@ var Vt = ["aria-label", "aria-expanded"], Ht = { class: "flex flex-col h-full" }
 			}, [b(t.$slots, "default")], 10, dn)
 		], 2));
 	}
+}), pn = { class: "flex items-center justify-between mb-8" }, mn = { class: "flex items-center gap-3" }, hn = { class: "flex items-center gap-2" }, gn = /* @__PURE__ */ l({
+	__name: "BasePageHeader",
+	props: {
+		title: {},
+		subtitle: { default: "" },
+		iconColor: { default: "emerald" },
+		maxWidthClass: { default: "max-w-4xl" }
+	},
+	setup(e) {
+		let t = e, { isDark: r } = Y(), s = X(), c = n(() => {
+			let e = {
+				emerald: {
+					dark: "bg-emerald-500/10",
+					light: "bg-emerald-50"
+				},
+				sky: {
+					dark: "bg-sky-500/10",
+					light: "bg-sky-50"
+				},
+				red: {
+					dark: "bg-red-500/10",
+					light: "bg-red-50"
+				},
+				amber: {
+					dark: "bg-amber-500/10",
+					light: "bg-amber-50"
+				}
+			}[t.iconColor];
+			return r.value ? e.dark : e.light;
+		}), l = n(() => {
+			let e = {
+				emerald: {
+					dark: "text-emerald-400",
+					light: "text-emerald-600"
+				},
+				sky: {
+					dark: "text-sky-400",
+					light: "text-sky-600"
+				},
+				red: {
+					dark: "text-red-400",
+					light: "text-red-500"
+				},
+				amber: {
+					dark: "text-amber-400",
+					light: "text-amber-600"
+				}
+			}[t.iconColor];
+			return r.value ? e.dark : e.light;
+		});
+		return (t, n) => (_(), a("div", { class: f(["mx-auto px-4 sm:px-6", e.maxWidthClass]) }, [o("div", pn, [o("div", mn, [o("div", { class: f(["w-10 h-10 rounded-lg flex items-center justify-center", c.value]) }, [b(t.$slots, "icon", { iconClass: l.value })], 2), o("div", null, [o("h1", { class: f(["text-2xl font-bold", w(s).primaryTextSoft]) }, C(e.title), 3), e.subtitle ? (_(), a("p", {
+			key: 0,
+			class: f(["text-sm", w(s).dimTextAlt])
+		}, C(e.subtitle), 3)) : i("", !0)])]), o("div", hn, [b(t.$slots, "actions")])])], 2));
+	}
+}), _n = [
+	"type",
+	"disabled",
+	"title"
+], vn = { key: 0 }, yn = /* @__PURE__ */ l({
+	__name: "BaseToolbarButton",
+	props: {
+		label: { default: "" },
+		variant: { default: "neutral" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: void 0 },
+		type: { default: "button" }
+	},
+	emits: ["click"],
+	setup(e) {
+		let t = e, { isDark: r } = Y(), o = n(() => {
+			let e = {
+				neutral: {
+					dark: "bg-gray-800 text-gray-100 border-gray-700 hover:bg-gray-700",
+					light: "bg-white text-gray-700 border-gray-200 hover:bg-gray-100"
+				},
+				danger: {
+					dark: "bg-red-600 text-white border-red-600 hover:bg-red-500",
+					light: "bg-red-600 text-white border-red-600 hover:bg-red-700"
+				}
+			}[t.variant];
+			return r.value ? e.dark : e.light;
+		});
+		return (t, n) => (_(), a("button", {
+			type: e.type,
+			disabled: e.disabled,
+			title: e.title,
+			class: f(["inline-flex shrink-0 items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap", o.value]),
+			onClick: n[0] ||= (e) => t.$emit("click", e)
+		}, [b(t.$slots, "icon", { iconClass: "w-4 h-4" }), e.label ? (_(), a("span", vn, C(e.label), 1)) : i("", !0)], 10, _n));
+	}
+}), bn = [
+	"type",
+	"disabled",
+	"title",
+	"aria-label"
+], xn = { key: 0 }, Sn = /* @__PURE__ */ l({
+	__name: "BaseActionButton",
+	props: {
+		label: { default: "" },
+		color: { default: "emerald" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		fullWidth: {
+			type: Boolean,
+			default: !1
+		},
+		title: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		type: { default: "button" }
+	},
+	emits: ["click"],
+	setup(e) {
+		let t = e, { isDark: r } = Y(), o = n(() => {
+			let e = {
+				emerald: {
+					dark: "text-emerald-400 hover:bg-emerald-500/10",
+					light: "text-emerald-600 hover:bg-emerald-50"
+				},
+				sky: {
+					dark: "text-sky-400 hover:bg-sky-500/10",
+					light: "text-sky-600 hover:bg-sky-50"
+				},
+				indigo: {
+					dark: "text-indigo-400 hover:bg-indigo-500/10",
+					light: "text-indigo-600 hover:bg-indigo-50"
+				},
+				teal: {
+					dark: "text-teal-400 hover:bg-teal-500/10",
+					light: "text-teal-600 hover:bg-teal-50"
+				},
+				purple: {
+					dark: "text-purple-400 hover:bg-purple-500/10",
+					light: "text-purple-600 hover:bg-purple-50"
+				},
+				red: {
+					dark: "text-red-400 hover:bg-red-500/10",
+					light: "text-red-500 hover:bg-red-50"
+				},
+				amber: {
+					dark: "text-amber-400 hover:bg-amber-500/10",
+					light: "text-amber-600 hover:bg-amber-50"
+				},
+				amberStrong: {
+					dark: "text-amber-300 hover:bg-amber-500/10",
+					light: "text-amber-700 hover:bg-amber-50"
+				}
+			}[t.color];
+			return r.value ? e.dark : e.light;
+		}), s = n(() => {
+			let e = {
+				emerald: {
+					dark: "text-emerald-400",
+					light: "text-emerald-600"
+				},
+				sky: {
+					dark: "text-sky-400",
+					light: "text-sky-600"
+				},
+				indigo: {
+					dark: "text-indigo-400",
+					light: "text-indigo-600"
+				},
+				teal: {
+					dark: "text-teal-400",
+					light: "text-teal-600"
+				},
+				purple: {
+					dark: "text-purple-400",
+					light: "text-purple-600"
+				},
+				red: {
+					dark: "text-red-400",
+					light: "text-red-500"
+				},
+				amber: {
+					dark: "text-amber-400",
+					light: "text-amber-600"
+				},
+				amberStrong: {
+					dark: "text-amber-300",
+					light: "text-amber-700"
+				}
+			}[t.color];
+			return r.value ? e.dark : e.light;
+		}), c = n(() => t.disabled ? `${s.value} opacity-50 cursor-not-allowed` : `${o.value} cursor-pointer`);
+		return (t, n) => (_(), a("button", {
+			type: e.type,
+			disabled: e.disabled,
+			title: e.title,
+			"aria-label": e.ariaLabel,
+			class: f(["inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors", [e.fullWidth ? "flex-1" : "", c.value]]),
+			onClick: n[0] ||= (e) => t.$emit("click", e)
+		}, [b(t.$slots, "icon", { iconClass: "w-4 h-4" }), e.label ? (_(), a("span", xn, C(e.label), 1)) : i("", !0)], 10, bn));
+	}
 });
 //#endregion
 //#region src/composables/useDebounce.ts
-function pn(e, t = 300) {
+function Cn(e, t = 300) {
 	let n = v(e.value), r = null;
 	return O(e, (e) => {
 		r && clearTimeout(r), r = setTimeout(() => {
@@ -1573,7 +1774,7 @@ function pn(e, t = 300) {
 }
 //#endregion
 //#region src/composables/useToast.ts
-function mn(e = 3e3) {
+function wn(e = 3e3) {
 	let t = v(!1), n = v(""), r = v(G.SUCCESS), i = null;
 	function a() {
 		i &&= (clearTimeout(i), null);
@@ -1594,16 +1795,16 @@ function mn(e = 3e3) {
 }
 //#endregion
 //#region src/enums/BaseBadgeEnum.ts
-var hn = /* @__PURE__ */ function(e) {
+var Tn = /* @__PURE__ */ function(e) {
 	return e.WIN = "WIN", e.LOSE = "LOSE", e;
-}({}), gn = {
+}({}), En = {
 	GET: "bg-blue-600",
 	POST: "bg-emerald-600",
 	PUT: "bg-amber-600",
 	DELETE: "bg-red-600",
 	PATCH: "bg-purple-600",
 	HEAD: "bg-gray-600"
-}, _n = {
+}, Dn = {
 	GET: "bg-blue-500",
 	POST: "bg-green-500",
 	PUT: "bg-yellow-500",
@@ -1611,19 +1812,137 @@ var hn = /* @__PURE__ */ function(e) {
 	PATCH: "bg-purple-500",
 	HEAD: "bg-gray-500"
 };
-function vn(e) {
-	return e ? gn[e.toUpperCase()] ?? "bg-gray-600" : "bg-gray-600";
+function On(e) {
+	return e ? En[e.toUpperCase()] ?? "bg-gray-600" : "bg-gray-600";
 }
-function yn(e) {
-	return e ? _n[e.toUpperCase()] ?? "bg-gray-500" : "bg-gray-500";
+function kn(e) {
+	return e ? Dn[e.toUpperCase()] ?? "bg-gray-500" : "bg-gray-500";
 }
-function bn(e) {
+function An(e) {
 	let t = e ?? 0;
 	return t >= 200 && t < 300 ? "bg-emerald-600" : t >= 300 && t < 400 ? "bg-blue-600" : t >= 400 && t < 500 ? "bg-amber-600" : t >= 500 ? "bg-red-600" : "bg-gray-600";
 }
-function xn(e, t) {
+function jn(e, t) {
 	let n = e ?? 200;
 	return t ? n >= 200 && n < 300 ? "bg-green-500/15 text-green-400" : n >= 300 && n < 400 ? "bg-blue-500/15 text-blue-400" : n >= 400 && n < 500 ? "bg-yellow-500/15 text-yellow-400" : "bg-red-500/15 text-red-400" : n >= 200 && n < 300 ? "bg-green-100 text-green-800" : n >= 300 && n < 400 ? "bg-blue-100 text-blue-800" : n >= 400 && n < 500 ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-800";
 }
 //#endregion
-export { I as AlertEnum, he as BaseAlert, fn as BaseAppLayout, R as BaseBadge, hn as BaseBadgeEnum, be as BaseBreadcrumb, ke as BaseButton, z as BaseButtonEnum, B as BaseButtonSizeEnum, Ot as BaseCollapsibleSection, Mt as BaseConfirmModal, ln as BaseEntityPickerModal, Ne as BaseLine, Pe as BaseLoginEnum, Ie as BaseLogo, H as BaseLogoEnum, He as BaseModal, U as BaseModalEnum, Q as BaseModalShell, zt as BaseNotFoundPage, Ue as BaseRow, Yt as BaseSidebar, qe as BaseSpinner, It as BaseTextInputModal, Ze as BaseToast, G as BaseToastEnum, $e as ColoredSquares, L as ColorsEnums, ot as EarningsCard, dt as EuroAmount, V as LineEnum, mt as Pagination, K as PositioningEnum, vt as TrendArrow, fe as getBaseColor, pe as getBaseColorOf, yn as methodBadgeBright, vn as methodBadgeSolid, bn as statusBadgeSolid, xn as statusBadgeTinted, pn as useDebouncedRef, Z as useEscapeKey, Bt as useMobileSidebar, Y as useTheme, X as useThemeClasses, mn as useToast };
+//#region src/utils/sanitizeHtml.ts
+var Mn = new Set([
+	"A",
+	"B",
+	"STRONG",
+	"I",
+	"EM",
+	"CODE",
+	"PRE",
+	"BR",
+	"P",
+	"UL",
+	"OL",
+	"LI",
+	"SPAN",
+	"DIV"
+]), Nn = new Set([
+	"SCRIPT",
+	"STYLE",
+	"IFRAME",
+	"OBJECT",
+	"EMBED",
+	"NOSCRIPT",
+	"TEMPLATE"
+]), Pn = { A: new Set(["href", "title"]) };
+function Fn(e) {
+	let t = e.trim().toLowerCase();
+	return t.startsWith("http://") || t.startsWith("https://") || t.startsWith("mailto:") || t.startsWith("tel:") || t.startsWith("/") || t.startsWith("#") || t === "";
+}
+function In(e) {
+	if (e.nodeType !== Node.ELEMENT_NODE) return;
+	let t = e, n = t.tagName.toUpperCase();
+	if (!Mn.has(n)) {
+		Nn.has(n) ? t.remove() : t.replaceWith(document.createTextNode(t.textContent ?? ""));
+		return;
+	}
+	let r = Pn[n] ?? /* @__PURE__ */ new Set();
+	for (let e of Array.from(t.attributes)) {
+		if (!r.has(e.name.toLowerCase())) {
+			t.removeAttribute(e.name);
+			continue;
+		}
+		n === "A" && e.name.toLowerCase() === "href" && !Fn(e.value) && t.removeAttribute(e.name);
+	}
+	n === "A" && t.hasAttribute("href") && (t.setAttribute("rel", "noopener noreferrer"), t.setAttribute("target", "_blank"));
+	for (let e of Array.from(t.childNodes)) In(e);
+}
+function Ln(e) {
+	if (!e) return "";
+	let t = new DOMParser().parseFromString(`<div>${e}</div>`, "text/html").body.firstElementChild;
+	if (!t) return "";
+	for (let e of Array.from(t.childNodes)) In(e);
+	return t.innerHTML;
+}
+//#endregion
+//#region src/utils/format.ts
+var Rn = "—";
+function zn(e, t = 4) {
+	if (e == null) return Rn;
+	let n = typeof e == "string" ? Number(e) : e;
+	return isFinite(n) ? n.toLocaleString(void 0, {
+		minimumFractionDigits: t,
+		maximumFractionDigits: t
+	}) : Rn;
+}
+function Bn(e) {
+	if (e == null || e === "") return Rn;
+	try {
+		return new Date(e).toLocaleString();
+	} catch {
+		return String(e);
+	}
+}
+function Vn(e) {
+	return new Date(e).toLocaleString(void 0, {
+		month: "short",
+		day: "numeric",
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
+function Hn(e) {
+	return new Date(e).toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+}
+function Un(e) {
+	if (!isFinite(e) || e === 0) return e.toFixed(2);
+	let t = Math.abs(e), n = 2;
+	return t < 1e-4 ? n = 8 : t < .01 ? n = 6 : t < 1 ? n = 4 : t < 100 && (n = 3), e.toLocaleString(void 0, {
+		minimumFractionDigits: n,
+		maximumFractionDigits: n
+	});
+}
+function Wn(e, t = 2) {
+	return `${e >= 0 ? "+" : ""}${e.toFixed(t)}%`;
+}
+function Gn(e) {
+	return `${e >= 0 ? "+" : ""}$${e.toFixed(2)}`;
+}
+//#endregion
+//#region src/utils/pnl.ts
+function Kn(e) {
+	if (e.buyPrice == null || e.lastPrice == null || e.filledQty == null) return {
+		pnlUsd: null,
+		pnlPct: null
+	};
+	let t = Number(e.buyPrice), n = Number(e.lastPrice), r = Number(e.filledQty);
+	return !isFinite(t) || !isFinite(n) || !isFinite(r) || t <= 0 ? {
+		pnlUsd: null,
+		pnlPct: null
+	} : {
+		pnlUsd: (n - t) * r,
+		pnlPct: (n - t) / t * 100
+	};
+}
+//#endregion
+export { I as AlertEnum, Sn as BaseActionButton, he as BaseAlert, fn as BaseAppLayout, R as BaseBadge, Tn as BaseBadgeEnum, be as BaseBreadcrumb, ke as BaseButton, z as BaseButtonEnum, B as BaseButtonSizeEnum, Ot as BaseCollapsibleSection, Mt as BaseConfirmModal, ln as BaseEntityPickerModal, Ne as BaseLine, Pe as BaseLoginEnum, Ie as BaseLogo, H as BaseLogoEnum, He as BaseModal, U as BaseModalEnum, Q as BaseModalShell, zt as BaseNotFoundPage, gn as BasePageHeader, Ue as BaseRow, Yt as BaseSidebar, qe as BaseSpinner, It as BaseTextInputModal, Ze as BaseToast, G as BaseToastEnum, yn as BaseToolbarButton, $e as ColoredSquares, L as ColorsEnums, ot as EarningsCard, dt as EuroAmount, V as LineEnum, mt as Pagination, K as PositioningEnum, vt as TrendArrow, Kn as computePnL, Bn as fmtDate, Hn as fmtDateShort, Vn as fmtDateTime, zn as fmtNumber, Wn as fmtPct, Un as fmtPrice, Gn as fmtUsd, fe as getBaseColor, pe as getBaseColorOf, Fn as isSafeHref, kn as methodBadgeBright, On as methodBadgeSolid, Ln as sanitizeHtml, An as statusBadgeSolid, jn as statusBadgeTinted, Cn as useDebouncedRef, Z as useEscapeKey, Bt as useMobileSidebar, Y as useTheme, X as useThemeClasses, wn as useToast };