mgv-backoffice 1.21.0 → 1.23.0

package/dist/ui-lib.js

@@ -1,55 +1,55 @@
 import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, effectScope as f, nextTick as p, normalizeClass as m, onBeforeUnmount as h, onMounted as g, onScopeDispose as _, onUnmounted as v, openBlock as y, ref as b, renderList as x, renderSlot as S, resolveComponent as C, resolveDynamicComponent as w, toDisplayString as T, unref as E, useSlots as D, vModelCheckbox as O, vModelDynamic as k, vModelText as A, vShow as ee, watch as j, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
-import { ArrowDownIcon as te, ArrowUpIcon as ne, Bars3Icon as re, BellIcon as ie, CheckCircleIcon as ae, ChevronDoubleLeftIcon as oe, ChevronDoubleRightIcon as se, ChevronRightIcon as ce, ClipboardDocumentCheckIcon as le, ClipboardDocumentIcon as ue, DocumentDuplicateIcon as de, ExclamationCircleIcon as fe, ExclamationTriangleIcon as pe, FolderIcon as me, InformationCircleIcon as he, MagnifyingGlassIcon as ge, MinusIcon as _e, MoonIcon as ve, SunIcon as ye, XMarkIcon as be } from "@heroicons/vue/24/outline";
-import { HomeIcon as xe } from "@heroicons/vue/24/solid";
-import { useRoute as Se, useRouter as Ce } from "vue-router";
+import { ArrowDownIcon as te, ArrowUpIcon as ne, Bars3Icon as re, BellIcon as ie, CheckCircleIcon as ae, ChevronDoubleLeftIcon as oe, ChevronDoubleRightIcon as se, ChevronRightIcon as ce, ClipboardDocumentCheckIcon as le, ClipboardDocumentIcon as ue, DocumentDuplicateIcon as de, ExclamationCircleIcon as fe, ExclamationTriangleIcon as pe, FolderIcon as me, InformationCircleIcon as he, MagnifyingGlassIcon as ge, MinusIcon as _e, MoonIcon as ve, SunIcon as ye, XMarkIcon as I } from "@heroicons/vue/24/outline";
+import { HomeIcon as be } from "@heroicons/vue/24/solid";
+import { useRoute as xe, useRouter as Se } from "vue-router";
 //#region src/enums/AlertEnum.ts
-var I = /* @__PURE__ */ function(e) {
+var L = /* @__PURE__ */ function(e) {
 	return e.WARNING = "WARNING", e.ERROR = "ERROR", e.SUCCESS = "SUCCESS", e.INFO = "INFO", e;
-}({}), L = /* @__PURE__ */ function(e) {
+}({}), R = /* @__PURE__ */ function(e) {
 	return e.NONE = "NONE", e.RED = "RED", e.YELLOW = "YELLOW", e.BLACK = "BLACK", e.GRAY = "GRAY", e.GREEN = "GREEN", e.BLUE = "BLUE", e;
 }({});
 //#endregion
 //#region src/utils/util.ts
-function we(e) {
+function Ce(e) {
 	let t = "red";
 	switch (e) {
-		case I.ERROR:
+		case L.ERROR:
 			t = "red";
 			break;
-		case I.SUCCESS:
+		case L.SUCCESS:
 			t = "green";
 			break;
-		case I.INFO:
+		case L.INFO:
 			t = "gray";
 			break;
-		case I.WARNING:
+		case L.WARNING:
 			t = "yellow";
 			break;
 	}
 	return t;
 }
-function Te(e) {
+function we(e) {
 	let t = "red";
 	switch (e) {
-		case L.GREEN:
+		case R.GREEN:
 			t = "green";
 			break;
-		case L.RED:
+		case R.RED:
 			t = "red";
 			break;
-		case L.BLUE:
+		case R.BLUE:
 			t = "blue";
 			break;
-		case L.YELLOW:
+		case R.YELLOW:
 			t = "yellow";
 			break;
-		case L.BLACK:
+		case R.BLACK:
 			t = "black";
 			break;
-		case L.GRAY:
+		case R.GRAY:
 			t = "gray";
 			break;
-		case L.NONE:
+		case R.NONE:
 			t = "";
 			break;
 	}
@@ -57,7 +57,7 @@ function Te(e) {
 }
 //#endregion
 //#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
-var Ee = { class: "font-medium pl-1" }, De = /* @__PURE__ */ d({
+var Te = { class: "font-medium pl-1" }, Ee = /* @__PURE__ */ d({
 	__name: "BaseAlert",
 	props: {
 		title: {
@@ -68,35 +68,35 @@ var Ee = { class: "font-medium pl-1" }, De = /* @__PURE__ */ d({
 		color: {
 			type: String,
 			required: !1,
-			default: I.ERROR
+			default: L.ERROR
 		}
 	},
 	setup(e) {
 		let t = e, n = r(() => {
 			switch (t.color) {
-				case I.SUCCESS: return ae;
-				case I.WARNING: return pe;
-				case I.INFO: return he;
+				case L.SUCCESS: return ae;
+				case L.WARNING: return pe;
+				case L.INFO: return he;
 				default: return fe;
 			}
 		}), a = r(() => {
 			switch (t.color) {
-				case I.SUCCESS: return "text-green-500";
-				case I.WARNING: return "text-yellow-500";
-				case I.INFO: return "text-gray-500";
+				case L.SUCCESS: return "text-green-500";
+				case L.WARNING: return "text-yellow-500";
+				case L.INFO: return "text-gray-500";
 				default: return "text-red-500";
 			}
 		});
 		function c() {
-			let e = we(t.color);
+			let e = Ce(t.color);
 			return "flex items-center p-4 mb-4 text-sm text-" + e + "-800 border border-" + e + "-300 rounded-lg bg-" + e + "-50 dark:bg-gray-800 dark:text-" + e + "-400 dark:border-" + e + "-800";
 		}
 		return (t, r) => (y(), o("div", {
 			class: m(c()),
 			role: "alert"
-		}, [(y(), i(w(n.value), { class: m(["w-6 h-6 flex-shrink-0", a.value]) }, null, 8, ["class"])), s("div", null, [s("span", Ee, T(e.title), 1)])], 2));
+		}, [(y(), i(w(n.value), { class: m(["w-6 h-6 flex-shrink-0", a.value]) }, null, 8, ["class"])), s("div", null, [s("span", Te, T(e.title), 1)])], 2));
 	}
-}), Oe = "bg-red-100 text-red-700 border-red-200", ke = /* @__PURE__ */ d({
+}), De = "bg-red-100 text-red-700 border-red-200", z = /* @__PURE__ */ d({
 	__name: "BaseBadge",
 	props: { color: {
 		type: String,
@@ -104,26 +104,26 @@ var Ee = { class: "font-medium pl-1" }, De = /* @__PURE__ */ d({
 	} },
 	setup(e) {
 		let t = D(), n = r(() => !!t.default), i = e, s = {
-			[L.RED]: "bg-red-100 text-red-700 border-red-200",
-			[L.GREEN]: "bg-green-100 text-green-700 border-green-200",
-			[L.BLUE]: "bg-blue-100 text-blue-700 border-blue-200",
-			[L.YELLOW]: "bg-yellow-100 text-yellow-700 border-yellow-200",
-			[L.GRAY]: "bg-gray-100 text-gray-700 border-gray-200",
-			[L.BLACK]: "bg-gray-800 text-gray-100 border-gray-700",
-			[L.NONE]: "bg-gray-50 text-gray-600 border-gray-200"
-		}, c = r(() => `inline-flex items-center gap-1 font-semibold text-xs leading-none px-3 py-1.5 rounded-full border ${i.color && s[i.color] || Oe}`);
+			[R.RED]: "bg-red-100 text-red-700 border-red-200",
+			[R.GREEN]: "bg-green-100 text-green-700 border-green-200",
+			[R.BLUE]: "bg-blue-100 text-blue-700 border-blue-200",
+			[R.YELLOW]: "bg-yellow-100 text-yellow-700 border-yellow-200",
+			[R.GRAY]: "bg-gray-100 text-gray-700 border-gray-200",
+			[R.BLACK]: "bg-gray-800 text-gray-100 border-gray-700",
+			[R.NONE]: "bg-gray-50 text-gray-600 border-gray-200"
+		}, c = r(() => `inline-flex items-center gap-1 font-semibold text-xs leading-none px-3 py-1.5 rounded-full border ${i.color && s[i.color] || De}`);
 		return (e, t) => n.value ? (y(), o("span", {
 			key: 0,
 			class: m(c.value)
 		}, [S(e.$slots, "default")], 2)) : a("", !0);
 	}
-}), Ae = {
+}), Oe = {
 	class: "flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700",
 	"aria-label": "Breadcrumb"
-}, je = { class: "inline-flex items-center space-x-1 md:space-x-3" }, Me = {
+}, ke = { class: "inline-flex items-center space-x-1 md:space-x-3" }, Ae = {
 	class: "inline-flex items-center",
 	style: { "margin-left": "0" }
-}, Ne = /* @__PURE__ */ d({
+}, je = /* @__PURE__ */ d({
 	__name: "BaseBreadcrumb",
 	props: {
 		items: {
@@ -148,11 +148,11 @@ var Ee = { class: "font-medium pl-1" }, De = /* @__PURE__ */ d({
 		});
 		return (t, n) => {
 			let r = C("router-link");
-			return y(), o("nav", Ae, [s("ol", je, [s("li", Me, [u(r, {
+			return y(), o("nav", Oe, [s("ol", ke, [s("li", Ae, [u(r, {
 				to: "/",
 				class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white"
 			}, {
-				default: M(() => [u(E(xe), { class: "h-4 w-4 text-gray-500 mr-2" }), n[0] ||= l(" Home ", -1)]),
+				default: M(() => [u(E(be), { class: "h-4 w-4 text-gray-500 mr-2" }), n[0] ||= l(" Home ", -1)]),
 				_: 1
 			})]), (y(!0), o(e, null, x(i.value, (e, t) => (y(), o("li", {
 				key: t,
@@ -167,52 +167,52 @@ var Ee = { class: "font-medium pl-1" }, De = /* @__PURE__ */ d({
 			}, 1032, ["to"])]))), 128))])]);
 		};
 	}
-}), R = /* @__PURE__ */ function(e) {
+}), B = /* @__PURE__ */ function(e) {
 	return e.RED = "RED", e.BLUE = "BLUE", e.WHITE = "WHITE", e.DARK = "DARK", e.GREEN = "GREEN", e.EMERALD = "EMERALD", e.YELLOW = "YELLOW", e.PURPLE = "PURPLE", e.SKY = "SKY", e.GRAY = "GRAY", e.AMBER = "AMBER", e;
-}({}), z = /* @__PURE__ */ function(e) {
+}({}), V = /* @__PURE__ */ function(e) {
 	return e.EXTRA_SMALL = "EXTRA_SMALL", e.SMALL = "SMALL", e.BASE = "BASE", e.LARGE = "LARGE", e.EXTRA_LARGE = "EXTRA_LARGE", e;
-}({}), B = b(!1), Pe = !1, V = "mgv-theme";
-function Fe(e) {
-	if (Pe) {
-		e !== V && console.warn(`[ui-lib] useTheme: storage key "${e}" ignored — theme already initialized with "${V}". Call initTheme({ storageKey }) before mounting any component.`);
+}({}), H = b(!1), Me = !1, U = "mgv-theme";
+function Ne(e) {
+	if (Me) {
+		e !== U && console.warn(`[ui-lib] useTheme: storage key "${e}" ignored — theme already initialized with "${U}". Call initTheme({ storageKey }) before mounting any component.`);
 		return;
 	}
-	if (Pe = !0, V = e, typeof window < "u") {
-		let e = window.localStorage?.getItem(V);
-		e ? B.value = e === "dark" : typeof window.matchMedia == "function" && (B.value = window.matchMedia("(prefers-color-scheme: dark)").matches);
+	if (Me = !0, U = e, typeof window < "u") {
+		let e = window.localStorage?.getItem(U);
+		e ? H.value = e === "dark" : typeof window.matchMedia == "function" && (H.value = window.matchMedia("(prefers-color-scheme: dark)").matches);
 	}
 	typeof document < "u" && f(!0).run(() => {
-		j(B, (e) => {
-			document.documentElement.classList.toggle("dark", e), window.localStorage?.setItem(V, e ? "dark" : "light");
+		j(H, (e) => {
+			document.documentElement.classList.toggle("dark", e), window.localStorage?.setItem(U, e ? "dark" : "light");
 		}, { immediate: !0 });
 	});
 }
-function Ie(e) {
-	Fe(e?.storageKey ?? V);
+function Pe(e) {
+	Ne(e?.storageKey ?? U);
 }
-function H(e) {
-	Fe(e?.storageKey ?? V);
+function W(e) {
+	Ne(e?.storageKey ?? U);
 	function t() {
-		B.value = !B.value;
+		H.value = !H.value;
 	}
 	return {
-		isDark: B,
+		isDark: H,
 		toggleTheme: t
 	};
 }
 //#endregion
 //#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
-var Le = [
+var Fe = [
 	"type",
 	"disabled",
 	"onClick"
-], Re = {
+], Ie = {
 	key: 0,
 	class: "inline-flex items-center"
-}, ze = { key: 1 }, Be = { key: 2 }, Ve = ["type", "disabled"], He = {
+}, Le = { key: 1 }, Re = { key: 2 }, ze = ["type", "disabled"], Be = {
 	key: 0,
 	class: "inline-flex items-center"
-}, Ue = { key: 1 }, We = { key: 2 }, U = /* @__PURE__ */ d({
+}, Ve = { key: 1 }, He = { key: 2 }, Ue = /* @__PURE__ */ d({
 	__name: "BaseButton",
 	props: {
 		description: {
@@ -222,7 +222,7 @@ var Le = [
 		color: {
 			type: String,
 			required: !1,
-			default: R.BLUE
+			default: B.BLUE
 		},
 		to: {
 			type: String,
@@ -266,139 +266,139 @@ var Le = [
 		}
 	},
 	setup(e) {
-		let { isDark: t } = H(), n = e;
+		let { isDark: t } = W(), n = e;
 		function r() {
 			let e = {
-				[R.BLUE]: {
+				[B.BLUE]: {
 					light: "text-blue-700 border-blue-300 hover:bg-blue-50",
 					dark: "text-blue-400 border-blue-500/40 hover:bg-blue-500/10"
 				},
-				[R.GREEN]: {
+				[B.GREEN]: {
 					light: "text-green-700 border-green-300 hover:bg-green-50",
 					dark: "text-green-400 border-green-500/40 hover:bg-green-500/10"
 				},
-				[R.EMERALD]: {
+				[B.EMERALD]: {
 					light: "text-emerald-700 border-emerald-300 hover:bg-emerald-50",
 					dark: "text-emerald-400 border-emerald-500/40 hover:bg-emerald-500/10"
 				},
-				[R.RED]: {
+				[B.RED]: {
 					light: "text-red-700 border-red-300 hover:bg-red-50",
 					dark: "text-red-400 border-red-500/40 hover:bg-red-500/10"
 				},
-				[R.YELLOW]: {
+				[B.YELLOW]: {
 					light: "text-yellow-700 border-yellow-300 hover:bg-yellow-50",
 					dark: "text-yellow-400 border-yellow-500/40 hover:bg-yellow-500/10"
 				},
-				[R.PURPLE]: {
+				[B.PURPLE]: {
 					light: "text-purple-700 border-purple-300 hover:bg-purple-50",
 					dark: "text-purple-400 border-purple-500/40 hover:bg-purple-500/10"
 				},
-				[R.SKY]: {
+				[B.SKY]: {
 					light: "text-sky-700 border-sky-300 hover:bg-sky-50",
 					dark: "text-sky-400 border-sky-500/40 hover:bg-sky-500/10"
 				},
-				[R.AMBER]: {
+				[B.AMBER]: {
 					light: "text-amber-700 border-amber-300 hover:bg-amber-50",
 					dark: "text-amber-400 border-amber-500/40 hover:bg-amber-500/10"
 				},
-				[R.GRAY]: {
+				[B.GRAY]: {
 					light: "text-gray-700 border-gray-300 hover:bg-gray-50",
 					dark: "text-gray-300 border-gray-600 hover:bg-gray-800"
 				},
-				[R.DARK]: {
+				[B.DARK]: {
 					light: "text-gray-700 border-gray-300 hover:bg-gray-50",
 					dark: "text-gray-300 border-gray-600 hover:bg-gray-800"
 				},
-				[R.WHITE]: {
+				[B.WHITE]: {
 					light: "text-gray-700 border-gray-300 hover:bg-gray-50",
 					dark: "text-gray-300 border-gray-600 hover:bg-gray-800"
 				}
-			}, r = e[n.color] ?? e[R.BLUE], i = t.value ? r.dark : r.light;
+			}, r = e[n.color] ?? e[B.BLUE], i = t.value ? r.dark : r.light;
 			return n.isDisable || n.isLoading ? `border bg-transparent ${i} opacity-50 cursor-not-allowed` : `focus:outline-none border bg-transparent ${i}`;
 		}
 		function c() {
 			let e = {
-				[R.BLUE]: {
+				[B.BLUE]: {
 					light: "text-blue-600 hover:bg-blue-50",
 					dark: "text-blue-400 hover:bg-blue-500/10"
 				},
-				[R.GREEN]: {
+				[B.GREEN]: {
 					light: "text-green-600 hover:bg-green-50",
 					dark: "text-green-400 hover:bg-green-500/10"
 				},
-				[R.EMERALD]: {
+				[B.EMERALD]: {
 					light: "text-emerald-600 hover:bg-emerald-50",
 					dark: "text-emerald-400 hover:bg-emerald-500/10"
 				},
-				[R.SKY]: {
+				[B.SKY]: {
 					light: "text-sky-600 hover:bg-sky-50",
 					dark: "text-sky-400 hover:bg-sky-500/10"
 				},
-				[R.RED]: {
+				[B.RED]: {
 					light: "text-red-500 hover:bg-red-50",
 					dark: "text-red-400 hover:bg-red-500/10"
 				},
-				[R.AMBER]: {
+				[B.AMBER]: {
 					light: "text-amber-700 hover:bg-amber-50",
 					dark: "text-amber-300 hover:bg-amber-500/10"
 				},
-				[R.YELLOW]: {
+				[B.YELLOW]: {
 					light: "text-yellow-600 hover:bg-yellow-50",
 					dark: "text-yellow-400 hover:bg-yellow-500/10"
 				},
-				[R.PURPLE]: {
+				[B.PURPLE]: {
 					light: "text-purple-600 hover:bg-purple-50",
 					dark: "text-purple-400 hover:bg-purple-500/10"
 				},
-				[R.GRAY]: {
+				[B.GRAY]: {
 					light: "text-gray-500 hover:bg-gray-100",
 					dark: "text-gray-400 hover:bg-gray-800"
 				},
-				[R.DARK]: {
+				[B.DARK]: {
 					light: "text-gray-500 hover:bg-gray-100",
 					dark: "text-gray-400 hover:bg-gray-800"
 				},
-				[R.WHITE]: {
+				[B.WHITE]: {
 					light: "text-gray-500 hover:bg-gray-100",
 					dark: "text-gray-400 hover:bg-gray-800"
 				}
-			}, r = e[n.color] ?? e[R.GRAY], i = t.value ? r.dark : r.light;
+			}, r = e[n.color] ?? e[B.GRAY], i = t.value ? r.dark : r.light;
 			return n.isDisable || n.isLoading ? `bg-transparent ${i} opacity-60 cursor-not-allowed` : `focus:outline-none bg-transparent ${i} cursor-pointer`;
 		}
 		function l() {
 			let e = n.isDisable || n.isLoading, t;
 			switch (n.color) {
-				case R.BLUE:
+				case B.BLUE:
 					t = e ? "text-white bg-blue-400 cursor-not-allowed" : "focus:outline-none text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300";
 					break;
-				case R.WHITE:
+				case B.WHITE:
 					t = e ? "text-gray-900 bg-gray-200 border border-gray-200 cursor-not-allowed" : "focus:outline-none text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200";
 					break;
-				case R.DARK:
+				case B.DARK:
 					t = e ? "text-white bg-gray-400 cursor-not-allowed" : "focus:outline-none text-white bg-gray-800 hover:bg-gray-900 focus:ring-4 focus:ring-gray-300";
 					break;
-				case R.GREEN:
+				case B.GREEN:
 					t = e ? "text-white bg-green-400 cursor-not-allowed" : "focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300";
 					break;
-				case R.EMERALD:
+				case B.EMERALD:
 					t = e ? "text-white bg-emerald-400 cursor-not-allowed" : "focus:outline-none text-white bg-emerald-600 hover:bg-emerald-700 focus:ring-4 focus:ring-emerald-300";
 					break;
-				case R.RED:
+				case B.RED:
 					t = e ? "text-white bg-red-400 cursor-not-allowed" : "focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300";
 					break;
-				case R.YELLOW:
+				case B.YELLOW:
 					t = e ? "text-white bg-yellow-300 cursor-not-allowed" : "focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300";
 					break;
-				case R.PURPLE:
+				case B.PURPLE:
 					t = e ? "text-white bg-purple-400 cursor-not-allowed" : "focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300";
 					break;
-				case R.SKY:
+				case B.SKY:
 					t = e ? "text-white bg-sky-400 cursor-not-allowed" : "focus:outline-none text-white bg-sky-600 hover:bg-sky-700 focus:ring-4 focus:ring-sky-300";
 					break;
-				case R.AMBER:
+				case B.AMBER:
 					t = e ? "text-white bg-amber-300 cursor-not-allowed" : "focus:outline-none text-white bg-amber-500 hover:bg-amber-600 focus:ring-4 focus:ring-amber-300";
 					break;
-				case R.GRAY:
+				case B.GRAY:
 					t = e ? "text-white bg-gray-400 cursor-not-allowed" : "focus:outline-none text-white bg-gray-600 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300";
 					break;
 				default:
@@ -408,19 +408,19 @@ var Le = [
 			n.outline && (t = r()), n.ghost && (t = c());
 			let i = "px-5 py-2.5 mr-2 mb-2 text-sm";
 			switch (n.size) {
-				case z.EXTRA_SMALL:
+				case V.EXTRA_SMALL:
 					i = "px-3 py-2 text-xs";
 					break;
-				case z.SMALL:
+				case V.SMALL:
 					i = "px-3 py-2 text-sm";
 					break;
-				case z.BASE:
+				case V.BASE:
 					i = "px-5 py-2.5 text-sm";
 					break;
-				case z.LARGE:
+				case V.LARGE:
 					i = "px-5 py-3 text-base";
 					break;
-				case z.EXTRA_LARGE:
+				case V.EXTRA_LARGE:
 					i = "px-6 py-3.5 text-base";
 					break;
 			}
@@ -440,7 +440,7 @@ var Le = [
 					disabled: e.isDisable || e.isLoading,
 					onClick: i
 				}, [
-					e.isLoading ? (y(), o("div", Re, [...r[0] ||= [s("svg", {
+					e.isLoading ? (y(), o("div", Ie, [...r[0] ||= [s("svg", {
 						"aria-hidden": "true",
 						role: "status",
 						class: "inline w-4 h-4 me-3 animate-spin",
@@ -454,10 +454,10 @@ var Le = [
 						d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
 						fill: "currentColor"
 					})], -1)]])) : a("", !0),
-					e.iconLeft ? a("", !0) : (y(), o("span", ze, T(e.description), 1)),
+					e.iconLeft ? a("", !0) : (y(), o("span", Le, T(e.description), 1)),
 					S(t.$slots, "default"),
-					e.iconLeft ? (y(), o("span", Be, T(e.description), 1)) : a("", !0)
-				], 10, Le)]),
+					e.iconLeft ? (y(), o("span", Re, T(e.description), 1)) : a("", !0)
+				], 10, Fe)]),
 				_: 3
 			}, 8, ["to"])) : (y(), o("button", {
 				key: 1,
@@ -465,7 +465,7 @@ var Le = [
 				class: m(l()),
 				disabled: e.isDisable || e.isLoading
 			}, [
-				e.isLoading ? (y(), o("div", He, [...r[1] ||= [s("svg", {
+				e.isLoading ? (y(), o("div", Be, [...r[1] ||= [s("svg", {
 					"aria-hidden": "true",
 					role: "status",
 					class: "inline w-4 h-4 me-3 animate-spin",
@@ -479,58 +479,58 @@ var Le = [
 					d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
 					fill: "currentColor"
 				})], -1)]])) : a("", !0),
-				e.iconLeft ? a("", !0) : (y(), o("span", Ue, T(e.description), 1)),
+				e.iconLeft ? a("", !0) : (y(), o("span", Ve, T(e.description), 1)),
 				S(t.$slots, "default"),
-				e.iconLeft ? (y(), o("span", We, T(e.description), 1)) : a("", !0)
-			], 10, Ve));
+				e.iconLeft ? (y(), o("span", He, T(e.description), 1)) : a("", !0)
+			], 10, ze));
 		};
 	}
-}), W = /* @__PURE__ */ function(e) {
+}), G = /* @__PURE__ */ function(e) {
 	return e.BASE = "BASE", e.BASE_SHORTER = "BASE_SHORTER", e.SQUARE = "SQUARE", e;
-}({}), Ge = {
+}({}), We = {
 	key: 0,
 	class: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"
-}, Ke = {
+}, Ge = {
 	key: 1,
 	class: "w-48 h-1 mx-auto my-4 bg-gray-100 border-0 rounded md:my-10 dark:bg-gray-700"
-}, qe = {
+}, Ke = {
 	key: 2,
 	class: "w-8 h-8 mx-auto my-8 bg-gray-200 border-0 rounded md:my-12 dark:bg-gray-700"
-}, Je = /* @__PURE__ */ d({
+}, qe = /* @__PURE__ */ d({
 	__name: "BaseLine",
 	props: { mode: {
 		type: String,
 		required: !1,
-		default: W.BASE
+		default: G.BASE
 	} },
 	setup(t) {
 		return (n, r) => (y(), o(e, null, [
-			t.mode === E(W).BASE ? (y(), o("hr", Ge)) : a("", !0),
-			t.mode === E(W).BASE_SHORTER ? (y(), o("hr", Ke)) : a("", !0),
-			t.mode === E(W).SQUARE ? (y(), o("hr", qe)) : a("", !0)
+			t.mode === E(G).BASE ? (y(), o("hr", We)) : a("", !0),
+			t.mode === E(G).BASE_SHORTER ? (y(), o("hr", Ge)) : a("", !0),
+			t.mode === E(G).SQUARE ? (y(), o("hr", Ke)) : a("", !0)
 		], 64));
 	}
-}), G = /* @__PURE__ */ function(e) {
+}), K = /* @__PURE__ */ function(e) {
 	return e.SMALL = "SMALL", e.MEDIUM = "MEDIUM", e.LARGE = "LARGE", e;
-}({}), Ye = G, Xe = ["height", "width"], Ze = /* @__PURE__ */ d({
+}({}), Je = K, Ye = ["height", "width"], Xe = /* @__PURE__ */ d({
 	__name: "BaseLogo",
 	props: { size: {
 		type: String,
 		required: !1,
-		default: G.MEDIUM
+		default: K.MEDIUM
 	} },
 	setup(e) {
 		let t = e;
 		function n() {
 			let e = "";
 			switch (t.size) {
-				case G.SMALL:
+				case K.SMALL:
 					e = "50px";
 					break;
-				case G.MEDIUM:
+				case K.MEDIUM:
 					e = "100px";
 					break;
-				case G.LARGE:
+				case K.LARGE:
 					e = "150px";
 					break;
 			}
@@ -692,23 +692,23 @@ var Le = [
 						d: "m281.7 183.8h3.6v18.5h-3.6z",
 						fill: "url(#k)"
 					}, null, -1)
-				]], 8, Xe))]),
+				]], 8, Ye))]),
 				_: 1
 			});
 		};
 	}
-}), Qe = /* @__PURE__ */ function(e) {
+}), Ze = /* @__PURE__ */ function(e) {
 	return e.DELETE = "DELETE", e.SUCCESS = "SUCCESS", e;
-}({}), $e = {
+}({}), Qe = {
 	key: 0,
 	class: "p-6 text-center"
-}, et = { class: "flex justify-center" }, tt = {
+}, $e = { class: "flex justify-center" }, et = {
 	key: 1,
 	class: "p-6 text-center"
-}, nt = {
+}, tt = {
 	key: 0,
 	class: "mb-5 text-sm text-gray-500"
-}, rt = { class: "flex justify-center" }, it = /* @__PURE__ */ d({
+}, nt = { class: "flex justify-center" }, rt = /* @__PURE__ */ d({
 	__name: "BaseModal",
 	props: {
 		title: {
@@ -727,7 +727,7 @@ var Le = [
 		mode: {
 			type: String,
 			required: !1,
-			default: Qe.SUCCESS
+			default: Ze.SUCCESS
 		}
 	},
 	emits: ["closeModal", "confirmModal"],
@@ -748,37 +748,37 @@ var Le = [
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": i
-		}, [t.mode === E(Qe).DELETE ? (y(), o("div", $e, [
+		}, [t.mode === E(Ze).DELETE ? (y(), o("div", Qe, [
 			u(E(fe), { class: "w-12 h-12 text-gray-400 mx-auto mb-4" }),
 			s("h3", {
 				id: i,
 				class: "mb-5 text-lg font-normal text-gray-500 dark:text-gray-400"
 			}, " Are you sure you want to delete this " + T(t.title) + "? ", 1),
-			s("div", et, [u(U, {
-				color: E(R).RED,
+			s("div", $e, [u(Ue, {
+				color: E(B).RED,
 				onClick: r[1] ||= (e) => n.$emit("confirmModal"),
 				description: "Yes, I'm sure"
-			}, null, 8, ["color"]), u(U, {
-				color: E(R).WHITE,
+			}, null, 8, ["color"]), u(Ue, {
+				color: E(B).WHITE,
 				onClick: r[2] ||= (e) => n.$emit("closeModal"),
 				description: "No, cancel"
 			}, null, 8, ["color"])])
-		])) : (y(), o("div", tt, [
+		])) : (y(), o("div", et, [
 			u(E(ae), { class: "w-12 h-12 text-green-500 mx-auto mb-4" }),
 			s("h3", {
 				id: i,
 				class: "mb-2 text-lg font-medium text-gray-900"
 			}, T(t.title), 1),
-			t.description ? (y(), o("p", nt, T(t.description), 1)) : a("", !0),
+			t.description ? (y(), o("p", tt, T(t.description), 1)) : a("", !0),
 			S(n.$slots, "default"),
-			s("div", rt, [u(U, {
-				color: E(R).BLUE,
+			s("div", nt, [u(Ue, {
+				color: E(B).BLUE,
 				onClick: r[3] ||= (e) => n.$emit("closeModal"),
 				description: "OK"
 			}, null, 8, ["color"])])
 		]))])], 64));
 	}
-}), at = /* @__PURE__ */ d({
+}), it = /* @__PURE__ */ d({
 	__name: "BaseRow",
 	props: { bgColor: {
 		type: String,
@@ -792,7 +792,7 @@ var Le = [
 		}
 		return (e, t) => (y(), o("div", { class: m(n()) }, [S(e.$slots, "default")], 2));
 	}
-}), ot = /* @__PURE__ */ d({
+}), at = /* @__PURE__ */ d({
 	__name: "BaseSpinner",
 	props: {
 		size: { default: "sm" },
@@ -820,11 +820,11 @@ var Le = [
 			"aria-label": "Loading"
 		}, null, 2));
 	}
-}), K = /* @__PURE__ */ function(e) {
+}), q = /* @__PURE__ */ function(e) {
 	return e.SUCCESS = "SUCCESS", e.WARNING = "WARNING", e.ERROR = "ERROR", e;
-}({}), q = /* @__PURE__ */ function(e) {
+}({}), J = /* @__PURE__ */ function(e) {
 	return e.TOP_LEFT = "TOP_LEFT", e.TOP_RIGHT = "TOP_RIGHT", e.BOTTOM_LEFT = "BOTTOM_LEFT", e.BOTTOM_RIGHT = "BOTTOM_RIGHT", e;
-}({}), st = { class: "flex items-center w-full max-w-md p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" }, ct = { class: "ml-3 text-sm font-normal" }, lt = /* @__PURE__ */ d({
+}({}), ot = { class: "flex items-center w-full max-w-md p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" }, st = { class: "ml-3 text-sm font-normal" }, ct = /* @__PURE__ */ d({
 	__name: "BaseToast",
 	props: {
 		mode: {
@@ -843,7 +843,7 @@ var Le = [
 		positioning: {
 			type: String,
 			required: !1,
-			default: q.TOP_RIGHT
+			default: J.TOP_RIGHT
 		},
 		duration: {
 			type: Number,
@@ -864,13 +864,13 @@ var Le = [
 		function c() {
 			let e = "";
 			switch (t.mode) {
-				case K.ERROR:
+				case q.ERROR:
 					e = "text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200";
 					break;
-				case K.SUCCESS:
+				case q.SUCCESS:
 					e = "text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200";
 					break;
-				case K.WARNING:
+				case q.WARNING:
 					e = "text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200";
 					break;
 				default:
@@ -882,16 +882,16 @@ var Le = [
 		function l() {
 			let e = "top-5 right-5";
 			switch (t.positioning) {
-				case q.BOTTOM_LEFT:
+				case J.BOTTOM_LEFT:
 					e = "bottom-5 left-5";
 					break;
-				case q.TOP_LEFT:
+				case J.TOP_LEFT:
 					e = "top-5 left-5";
 					break;
-				case q.TOP_RIGHT:
+				case J.TOP_RIGHT:
 					e = "top-5 right-5";
 					break;
-				case q.BOTTOM_RIGHT:
+				case J.BOTTOM_RIGHT:
 					e = "bottom-5 right-5";
 					break;
 			}
@@ -902,28 +902,28 @@ var Le = [
 			id: "toast-top-right",
 			class: m(l()),
 			role: "alert"
-		}, [s("div", st, [
-			e.mode == E(K).ERROR ? (y(), o("div", {
+		}, [s("div", ot, [
+			e.mode == E(q).ERROR ? (y(), o("div", {
 				key: 0,
 				class: m(c())
-			}, [u(E(fe), { class: "h-6 w-6 text-red-500" }), r[0] ||= s("span", { class: "sr-only" }, "Error icon", -1)], 2)) : e.mode == E(K).SUCCESS ? (y(), o("div", {
+			}, [u(E(fe), { class: "h-6 w-6 text-red-500" }), r[0] ||= s("span", { class: "sr-only" }, "Error icon", -1)], 2)) : e.mode == E(q).SUCCESS ? (y(), o("div", {
 				key: 1,
 				class: m(c())
-			}, [u(E(ae), { class: "h-6 w-6 text-green-500" }), r[1] ||= s("span", { class: "sr-only" }, "Check icon", -1)], 2)) : e.mode == E(K).WARNING ? (y(), o("div", {
+			}, [u(E(ae), { class: "h-6 w-6 text-green-500" }), r[1] ||= s("span", { class: "sr-only" }, "Check icon", -1)], 2)) : e.mode == E(q).WARNING ? (y(), o("div", {
 				key: 2,
 				class: m(c())
 			}, [u(E(pe), { class: "h-6 w-6 text-yellow-500" }), r[2] ||= s("span", { class: "sr-only" }, "Warning icon", -1)], 2)) : a("", !0),
-			s("div", ct, T(e.description), 1),
+			s("div", st, T(e.description), 1),
 			e.hasCloseIcon ? (y(), o("button", {
 				key: 3,
 				type: "button",
 				class: "ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer",
 				"aria-label": "Close",
 				onClick: i
-			}, [r[3] ||= s("span", { class: "sr-only" }, "Close", -1), u(E(be), { class: "h-6 w-6 text-gray-500" })])) : a("", !0)
+			}, [r[3] ||= s("span", { class: "sr-only" }, "Close", -1), u(E(I), { class: "h-6 w-6 text-gray-500" })])) : a("", !0)
 		])], 2)) : a("", !0);
 	}
-}), ut = { class: "w-13" }, dt = /* @__PURE__ */ d({
+}), lt = { class: "w-13" }, ut = /* @__PURE__ */ d({
 	__name: "ColoredSquares",
 	props: { color: {
 		type: String,
@@ -944,25 +944,25 @@ var Le = [
 		function i() {
 			let e = "gray";
 			switch (t.color) {
-				case L.GREEN:
+				case R.GREEN:
 					e = "green";
 					break;
-				case L.RED:
+				case R.RED:
 					e = "red";
 					break;
-				case L.BLUE:
+				case R.BLUE:
 					e = "blue";
 					break;
-				case L.YELLOW:
+				case R.YELLOW:
 					e = "yellow";
 					break;
-				case L.NONE: return "font-bold text-xs mr-2 px-2.5 py-0.5 rounded-full";
+				case R.NONE: return "font-bold text-xs mr-2 px-2.5 py-0.5 rounded-full";
 			}
 			return "font-bold text-xs mr-2 px-2.5 py-0.5 rounded-full bg-" + e + "-100 text-" + e + "-800";
 		}
-		return (e, t) => (y(), o("div", ut, [s("div", { class: m(["border border-gray-300 relative aspect-square rounded-lg bg-white shadow-sm overflow-hidden flex items-center justify-center text-center", i()]) }, [S(e.$slots, "default"), s("div", { class: m(["absolute bottom-0 left-0 h-1 w-full", r.value]) }, null, 2)], 2)]));
+		return (e, t) => (y(), o("div", lt, [s("div", { class: m(["border border-gray-300 relative aspect-square rounded-lg bg-white shadow-sm overflow-hidden flex items-center justify-center text-center", i()]) }, [S(e.$slots, "default"), s("div", { class: m(["absolute bottom-0 left-0 h-1 w-full", r.value]) }, null, 2)], 2)]));
 	}
-}), ft = { class: "flex items-start justify-between" }, pt = { class: "text-sm font-bold tracking-wide text-gray-800 dark:text-slate-200" }, mt = /* @__PURE__ */ d({
+}), dt = { class: "flex items-start justify-between" }, ft = { class: "min-w-0" }, pt = /* @__PURE__ */ d({
 	__name: "EarningsCard",
 	props: {
 		title: { default: "TOTAL EARNINGS" },
@@ -975,6 +975,10 @@ var Le = [
 		signed: {
 			type: Boolean,
 			default: !1
+		},
+		compact: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	setup(t) {
@@ -1010,15 +1014,15 @@ var Le = [
 			minimumFractionDigits: n.decimals,
 			maximumFractionDigits: n.decimals
 		}));
-		return (n, r) => (y(), o("div", { class: m(["relative rounded-xl border-2 border-dashed bg-white p-6 dark:bg-slate-800", d.value.border]) }, [t.badge ? (y(), o("div", {
+		return (n, r) => (y(), o("div", { class: m(["relative rounded-xl border-2 border-dashed bg-white dark:bg-slate-800", [d.value.border, t.compact ? "p-3" : "p-6"]]) }, [t.badge ? (y(), o("div", {
 			key: 0,
 			class: m(["absolute right-4 top-4 rounded-md px-3 py-1 text-xs font-bold tracking-wide", d.value.badge])
-		}, T(t.badge), 3)) : a("", !0), s("div", ft, [s("div", null, [
-			s("p", pt, T(t.title), 1),
-			s("p", { class: m(["mt-1 text-4xl font-bold", d.value.amount]) }, T(f.value), 3),
-			s("p", { class: m(["mt-1 text-sm font-medium", d.value.subtitle]) }, T(t.subtitle), 3)
-		]), s("div", { class: m(["mt-6 flex h-12 w-12 items-center justify-center rounded-xl", d.value.iconBox]) }, [(y(), o("svg", {
-			class: m(["h-6 w-6", d.value.icon]),
+		}, T(t.badge), 3)) : a("", !0), s("div", dt, [s("div", ft, [
+			s("p", { class: m(["font-bold tracking-wide text-gray-800 dark:text-slate-200", t.compact ? "pr-8 text-xs" : "text-sm"]) }, T(t.title), 3),
+			s("p", { class: m(["mt-1 font-bold truncate", [d.value.amount, t.compact ? "text-lg" : "text-4xl"]]) }, T(f.value), 3),
+			s("p", { class: m(["mt-1 font-medium", [d.value.subtitle, t.compact ? "text-xs" : "text-sm"]]) }, T(t.subtitle), 3)
+		]), s("div", { class: m(["flex items-center justify-center", [d.value.iconBox, t.compact ? "absolute right-2 top-2 h-6 w-6 rounded-lg" : "mt-6 h-12 w-12 rounded-xl"]]) }, [(y(), o("svg", {
+			class: m([d.value.icon, t.compact ? "h-3.5 w-3.5" : "h-6 w-6"]),
 			viewBox: "0 0 24 24",
 			fill: "none",
 			stroke: "currentColor",
@@ -1027,10 +1031,10 @@ var Le = [
 			"stroke-linejoin": "round"
 		}, [l.value ? (y(), o(e, { key: 0 }, [r[0] ||= s("polyline", { points: "22 17 13.5 8.5 8.5 13.5 2 7" }, null, -1), r[1] ||= s("polyline", { points: "16 17 22 17 22 11" }, null, -1)], 64)) : (y(), o(e, { key: 1 }, [r[2] ||= s("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }, null, -1), r[3] ||= s("polyline", { points: "16 7 22 7 22 13" }, null, -1)], 64))], 2))], 2)])], 2));
 	}
-}), ht = {
+}), mt = {
 	key: 0,
 	class: "font-bold text-green-800"
-}, gt = { key: 0 }, _t = { key: 0 }, vt = "font-bold", yt = /* @__PURE__ */ d({
+}, ht = { key: 0 }, gt = { key: 0 }, _t = "font-bold", vt = /* @__PURE__ */ d({
 	__name: "EuroAmount",
 	props: {
 		amount: {
@@ -1050,15 +1054,15 @@ var Le = [
 	},
 	setup(t) {
 		let n = t, i = r(() => n.amount !== null && n.amount !== void 0), s = r(() => i.value && n.amount < 0), c = r(() => n.beforeAmount === null || n.beforeAmount === void 0 ? !1 : n.amount < n.beforeAmount), u = r(() => s.value || c.value), d = r(() => !s.value && !c.value && !(n.beforeAmount === null || n.beforeAmount === void 0));
-		return (n, r) => (y(), o(e, null, [i.value && d.value ? (y(), o("span", ht, [l(T(t.amount) + " ", 1), t.showCurrency ? (y(), o("span", gt, "€")) : a("", !0)])) : a("", !0), i.value && !d.value ? (y(), o("span", {
+		return (n, r) => (y(), o(e, null, [i.value && d.value ? (y(), o("span", mt, [l(T(t.amount) + " ", 1), t.showCurrency ? (y(), o("span", ht, "€")) : a("", !0)])) : a("", !0), i.value && !d.value ? (y(), o("span", {
 			key: 1,
-			class: m([vt, u.value ? "text-red-800" : "text-gray-800"])
-		}, [l(T(t.amount) + " ", 1), t.showCurrency ? (y(), o("span", _t, "€")) : a("", !0)], 2)) : a("", !0)], 64));
+			class: m([_t, u.value ? "text-red-800" : "text-gray-800"])
+		}, [l(T(t.amount) + " ", 1), t.showCurrency ? (y(), o("span", gt, "€")) : a("", !0)], 2)) : a("", !0)], 64));
 	}
-}), bt = { class: "flex list-none p-0 m-0" }, xt = ["onClick", "onKeydown"], St = {
+}), yt = { class: "flex list-none p-0 m-0" }, bt = ["onClick", "onKeydown"], xt = {
 	key: 1,
 	class: "inline-block border border-gray-300 rounded-lg p-3 text-black cursor-not-allowed"
-}, Ct = /* @__PURE__ */ d({
+}, St = /* @__PURE__ */ d({
 	__name: "Pagination",
 	props: {
 		totalItems: {
@@ -1088,28 +1092,28 @@ var Le = [
 		}
 		return j(() => [r.totalItems, r.itemsPerPage], () => {
 			a.value = Math.ceil(r.totalItems / r.itemsPerPage), i.value > a.value && (i.value = Math.max(1, a.value)), u(i.value);
-		}, { immediate: !0 }), (t, n) => (y(), o("div", null, [s("ul", bt, [(y(!0), o(e, null, x(c.value, (e, t) => (y(), o("li", {
+		}, { immediate: !0 }), (t, n) => (y(), o("div", null, [s("ul", yt, [(y(!0), o(e, null, x(c.value, (e, t) => (y(), o("li", {
 			key: t,
 			class: "mr-1"
-		}, [e === 0 ? (y(), o("span", St, "...")) : (y(), o("a", {
+		}, [e === 0 ? (y(), o("span", xt, "...")) : (y(), o("a", {
 			key: 0,
 			role: "button",
 			tabindex: "0",
 			onClick: (t) => d(e),
 			onKeydown: P((t) => d(e), ["enter"]),
 			class: m(["inline-block border border-gray-300 rounded-lg p-3 no-underline text-black cursor-pointer hover:bg-gray-300", { "active font-bold bg-gray-200": e === i.value }])
-		}, T(e), 43, xt))]))), 128))])]));
+		}, T(e), 43, bt))]))), 128))])]));
 	}
-}), wt = { key: 0 }, Tt = {
+}), Ct = { key: 0 }, wt = {
 	key: 0,
 	class: "flex items-center space-x-2"
-}, Et = {
+}, Tt = {
 	key: 1,
 	class: "flex items-center space-x-2"
-}, Dt = {
+}, Et = {
 	key: 2,
 	class: "flex items-center space-x-2"
-}, Ot = /* @__PURE__ */ d({
+}, Dt = /* @__PURE__ */ d({
 	__name: "TrendArrow",
 	props: {
 		number: {
@@ -1123,13 +1127,13 @@ var Le = [
 	},
 	setup(e) {
 		let t = e, n = r(() => t.number !== null && t.number !== void 0 && t.number < 0), i = r(() => t.number === 0);
-		return (r, s) => e.number !== null && e.number !== void 0 ? (y(), o("div", wt, [n.value ? (y(), o("span", Tt, [u(ke, { color: E(L).RED }, {
+		return (r, s) => e.number !== null && e.number !== void 0 ? (y(), o("div", Ct, [n.value ? (y(), o("span", wt, [u(z, { color: E(R).RED }, {
 			default: M(() => [l(T(e.number) + T(t.icon), 1)]),
 			_: 1
-		}, 8, ["color"]), u(E(te), { class: "h-5 w-5 text-red-500" })])) : i.value ? (y(), o("span", Et, [u(ke, { color: E(L).GRAY }, {
+		}, 8, ["color"]), u(E(te), { class: "h-5 w-5 text-red-500" })])) : i.value ? (y(), o("span", Tt, [u(z, { color: E(R).GRAY }, {
 			default: M(() => [l(T(e.number) + T(t.icon), 1)]),
 			_: 1
-		}, 8, ["color"]), u(E(_e), { class: "h-5 w-5 text-gray-400" })])) : (y(), o("span", Dt, [u(ke, { color: E(L).GREEN }, {
+		}, 8, ["color"]), u(E(_e), { class: "h-5 w-5 text-gray-400" })])) : (y(), o("span", Et, [u(z, { color: E(R).GREEN }, {
 			default: M(() => [l(T(e.number) + T(t.icon), 1)]),
 			_: 1
 		}, 8, ["color"]), u(E(ne), { class: "h-5 w-5 text-green-500" })]))])) : a("", !0);
@@ -1137,8 +1141,8 @@ var Le = [
 });
 //#endregion
 //#region src/composables/useThemeClasses.ts
-function J() {
-	let { isDark: e } = H();
+function Y() {
+	let { isDark: e } = W();
 	return {
 		card: r(() => e.value ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"),
 		cardAlt: r(() => e.value ? "bg-gray-900 border-gray-700" : "bg-white border-gray-200"),
@@ -1165,7 +1169,7 @@ function J() {
 }
 //#endregion
 //#region src/composables/useEscapeKey.ts
-function Y(e) {
+function Ot(e) {
 	function t(t) {
 		t.key === "Escape" && e();
 	}
@@ -1190,11 +1194,11 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 	},
 	emits: ["cancel", "backdrop"],
 	setup(e, { emit: n }) {
-		let c = e, l = n, { isDark: u } = H(), d = J(), f = `modal-title-${Math.random().toString(36).slice(2, 9)}`, p = r(() => u.value ? "bg-gray-900 border border-gray-700" : "bg-white border border-gray-200");
+		let c = e, l = n, { isDark: u } = W(), d = Y(), f = `modal-title-${Math.random().toString(36).slice(2, 9)}`, p = r(() => u.value ? "bg-gray-900 border border-gray-700" : "bg-white border border-gray-200");
 		function h() {
 			l("backdrop"), c.manualClose || l("cancel");
 		}
-		return Y(() => {
+		return Ot(() => {
 			c.manualClose || l("cancel");
 		}), (n, r) => (y(), i(t, { to: "body" }, [s("div", {
 			class: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
@@ -1242,7 +1246,7 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 	},
 	emits: ["toggle"],
 	setup(e, { emit: t }) {
-		let n = e, i = t, { isDark: c } = H(), l = J(), u = r(() => c.value ? "text-gray-100" : "text-gray-700"), d = r(() => c.value ? "bg-gray-800/50 hover:bg-gray-800 border-gray-700" : "bg-gray-50 hover:bg-gray-100 border-gray-200"), f = r(() => c.value ? "bg-emerald-500/15 text-emerald-400" : "bg-emerald-50 text-emerald-700"), p = r(() => n.bodyClass === void 0 ? c.value ? "bg-gray-800" : "bg-white" : n.bodyClass);
+		let n = e, i = t, { isDark: c } = W(), l = Y(), u = r(() => c.value ? "text-gray-100" : "text-gray-700"), d = r(() => c.value ? "bg-gray-800/50 hover:bg-gray-800 border-gray-700" : "bg-gray-50 hover:bg-gray-100 border-gray-200"), f = r(() => c.value ? "bg-emerald-500/15 text-emerald-400" : "bg-emerald-50 text-emerald-700"), p = r(() => n.bodyClass === void 0 ? c.value ? "bg-gray-800" : "bg-white" : n.bodyClass);
 		return (t, n) => (y(), o("section", { class: m(["rounded-xl border overflow-hidden transition-colors", E(l).cardAlt]) }, [s("button", {
 			type: "button",
 			class: m(["w-full flex items-center justify-between p-4 text-left transition-colors", d.value]),
@@ -1286,7 +1290,7 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 	},
 	emits: ["confirm", "cancel"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { isDark: c } = H(), d = J();
+		let n = e, r = t, { isDark: c } = W(), d = Y();
 		function f() {
 			n.submitting || r("confirm");
 		}
@@ -1346,7 +1350,7 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 	},
 	emits: ["confirm", "cancel"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, { isDark: a } = H(), o = J(), c = b(n.initialValue), l = b(null);
+		let n = e, r = t, { isDark: a } = W(), o = Y(), c = b(n.initialValue), l = b(null);
 		g(async () => {
 			await p(), l.value?.focus();
 		});
@@ -1359,7 +1363,7 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 		function h() {
 			c.value.trim() === (n.initialValue ?? "").trim() && f();
 		}
-		return Y(f), (t, n) => (y(), i(Lt, {
+		return Ot(f), (t, n) => (y(), i(Lt, {
 			title: e.title,
 			"manual-close": "",
 			onBackdrop: h
@@ -1399,7 +1403,7 @@ var kt = { class: "flex items-start gap-4 min-w-0" }, At = { class: "flex-1 min-
 		homeLabel: { default: "Go home" }
 	},
 	setup(e) {
-		let t = e, n = Ce(), { isDark: r } = H(), i = J();
+		let t = e, n = Se(), { isDark: r } = W(), i = Y();
 		function a() {
 			n.push({ name: t.homeRouteName });
 		}
@@ -1556,7 +1560,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 		}
 	},
 	setup(t) {
-		let n = t, c = Ce(), d = Se(), { isDark: f, toggleTheme: h } = H(), { mobileOpen: g, close: _, toggle: v } = Qt(), { collapsed: C, toggle: D } = nn(), { unreadCount: O, togglePanel: k } = an(), A = r(() => n.collapsible && C.value), ee = b(null), M = null;
+		let n = t, c = Se(), d = xe(), { isDark: f, toggleTheme: h } = W(), { mobileOpen: g, close: _, toggle: v } = Qt(), { collapsed: C, toggle: D } = nn(), { unreadCount: O, togglePanel: k } = an(), A = r(() => n.collapsible && C.value), ee = b(null), M = null;
 		j(g, async (e) => {
 			e ? (M = document.activeElement instanceof HTMLElement ? document.activeElement : null, await p(), ee.value?.focus()) : (M?.focus(), M = null);
 		});
@@ -1581,7 +1585,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 				class: m(["p-2 rounded-lg cursor-pointer", E(f) ? "text-gray-400 hover:bg-gray-800" : "text-gray-600 hover:bg-gray-100"]),
 				"aria-label": E(g) ? "Close navigation menu" : "Open navigation menu",
 				"aria-expanded": E(g)
-			}, [E(g) ? (y(), i(E(be), {
+			}, [E(g) ? (y(), i(E(I), {
 				key: 1,
 				class: "w-6 h-6",
 				"aria-hidden": "true"
@@ -1617,7 +1621,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 					onClick: r[2] ||= (...e) => E(_) && E(_)(...e),
 					class: m(["lg:hidden p-1.5 rounded-lg cursor-pointer absolute right-3 top-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500", E(f) ? "text-gray-400 hover:bg-gray-800" : "text-gray-500 hover:bg-gray-100"]),
 					"aria-label": "Close navigation menu"
-				}, [u(E(be), {
+				}, [u(E(I), {
 					class: "w-5 h-5",
 					"aria-hidden": "true"
 				})], 2)], 2),
@@ -1722,7 +1726,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["confirm", "cancel"],
 	setup(t, { emit: n }) {
-		let c = t, l = n, { isDark: d } = H(), f = J(), h = b([]), _ = b(!1), v = b(""), C = b(null), w = b(""), D = b(null), O = r(() => {
+		let c = t, l = n, { isDark: d } = W(), f = Y(), h = b([]), _ = b(!1), v = b(""), C = b(null), w = b(""), D = b(null), O = r(() => {
 			let e = c.loader ? h.value : c.items;
 			return c.excludeId ? e.filter((e) => e.id !== c.excludeId) : e;
 		}), k = r(() => O.value.filter((e) => e.label.toLowerCase().includes(w.value.toLowerCase()))), ee = {
@@ -1862,7 +1866,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 					key: 0,
 					class: m(["text-sm", E(d) ? "text-gray-300" : "text-gray-600"])
 				}, T(t.message), 3)) : a("", !0),
-				_.value ? (y(), o("div", _n, [u(ot, { color: "emerald" })])) : v.value ? (y(), o("div", vn, T(v.value), 1)) : a("", !0),
+				_.value ? (y(), o("div", _n, [u(at, { color: "emerald" })])) : v.value ? (y(), o("div", vn, T(v.value), 1)) : a("", !0),
 				!_.value && !v.value && O.value.length > 0 ? (y(), o("div", yn, [s("div", bn, [u(E(ge), {
 					class: m(["absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4", E(f).dimText]),
 					"aria-hidden": "true"
@@ -1914,7 +1918,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 		skipLinkLabel: { default: "Skip to main content" }
 	},
 	setup(e) {
-		let t = e, { isDark: n } = H(), { mobileOpen: i } = Qt(), { collapsed: c } = nn(), l = r(() => t.showSidebar);
+		let t = e, { isDark: n } = W(), { mobileOpen: i } = Qt(), { collapsed: c } = nn(), l = r(() => t.showSidebar);
 		return (t, r) => (y(), o("div", { class: m(["min-h-screen transition-colors duration-300", E(n) ? "bg-gray-950 text-gray-100" : "bg-gray-50 text-gray-800"]) }, [
 			s("a", An, T(e.skipLinkLabel), 1),
 			l.value ? S(t.$slots, "sidebar", { key: 0 }) : a("", !0),
@@ -1935,7 +1939,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 		maxWidthClass: { default: "max-w-4xl" }
 	},
 	setup(e) {
-		let t = e, { isDark: n } = H(), i = J(), c = r(() => {
+		let t = e, { isDark: n } = W(), i = Y(), c = r(() => {
 			let e = {
 				emerald: {
 					dark: "bg-emerald-500/10",
@@ -1999,7 +2003,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["click"],
 	setup(e) {
-		let t = e, { isDark: n } = H(), i = r(() => {
+		let t = e, { isDark: n } = W(), i = r(() => {
 			let e = {
 				neutral: {
 					dark: "bg-gray-800 text-gray-100 border-gray-700 hover:bg-gray-700",
@@ -2044,7 +2048,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["click"],
 	setup(e) {
-		let t = e, { isDark: n } = H(), i = r(() => {
+		let t = e, { isDark: n } = W(), i = r(() => {
 			let e = {
 				emerald: {
 					dark: "text-emerald-400 hover:bg-emerald-500/10",
@@ -2137,7 +2141,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["copied", "error"],
 	setup(e, { emit: t }) {
-		let n = e, a = t, { isDark: s } = H(), c = b(!1), l = null, u = r(() => c.value ? "Copied!" : n.label ? `Copy ${n.label}` : "Copy"), d = r(() => n.label ? `Copy ${n.label}` : "Copy"), f = r(() => n.variant === "bordered" ? `inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0 ${c.value ? s.value ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400" : "border-emerald-300 bg-emerald-50 text-emerald-600" : s.value ? "border-gray-600 text-gray-400 hover:text-gray-200 hover:bg-gray-800" : "border-gray-300 text-gray-400 hover:text-gray-600 hover:bg-gray-50"}` : `p-1 rounded transition-colors cursor-pointer ${s.value ? "text-gray-400 hover:text-emerald-300 hover:bg-emerald-500/10" : "text-gray-500 hover:text-emerald-600 hover:bg-emerald-50"}`);
+		let n = e, a = t, { isDark: s } = W(), c = b(!1), l = null, u = r(() => c.value ? "Copied!" : n.label ? `Copy ${n.label}` : "Copy"), d = r(() => n.label ? `Copy ${n.label}` : "Copy"), f = r(() => n.variant === "bordered" ? `inline-flex items-center justify-center w-9 h-9 rounded-lg border transition-colors cursor-pointer shrink-0 ${c.value ? s.value ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400" : "border-emerald-300 bg-emerald-50 text-emerald-600" : s.value ? "border-gray-600 text-gray-400 hover:text-gray-200 hover:bg-gray-800" : "border-gray-300 text-gray-400 hover:text-gray-600 hover:bg-gray-50"}` : `p-1 rounded transition-colors cursor-pointer ${s.value ? "text-gray-400 hover:text-emerald-300 hover:bg-emerald-500/10" : "text-gray-500 hover:text-emerald-600 hover:bg-emerald-50"}`);
 		async function p(e) {
 			try {
 				if (navigator.clipboard?.writeText) {
@@ -2207,7 +2211,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["click"],
 	setup(e, { emit: t }) {
-		let n = e, i = t, { isDark: a } = H(), l = r(() => n.disabled || n.loading);
+		let n = e, i = t, { isDark: a } = W(), l = r(() => n.disabled || n.loading);
 		function u() {
 			l.value || i("click");
 		}
@@ -2265,7 +2269,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["submit", "google-sign-in"],
 	setup(t, { emit: n }) {
-		let i = t, c = n, { isDark: d } = H(), f = J(), p = b(""), h = b(""), g = b(!1), _ = b(!1), v = r(() => i.loading || i.googleLoading);
+		let i = t, c = n, { isDark: d } = W(), f = Y(), p = b(""), h = b(""), g = b(!1), _ = b(!1), v = r(() => i.loading || i.googleLoading);
 		function x() {
 			v.value || c("submit", {
 				email: p.value,
@@ -2379,7 +2383,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 	},
 	emits: ["select"],
 	setup(c, { emit: d }) {
-		let f = d, { isDark: p } = H(), h = J(), { notifications: g, unreadCount: _, open: v, closePanel: b, markAllRead: S, markRead: C } = an(), w = {
+		let f = d, { isDark: p } = W(), h = Y(), { notifications: g, unreadCount: _, open: v, closePanel: b, markAllRead: S, markRead: C } = an(), w = {
 			info: "bg-sky-500",
 			success: "bg-emerald-500",
 			warning: "bg-amber-500",
@@ -2388,7 +2392,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 		function O(e) {
 			C(e), f("select", e);
 		}
-		return Y(() => {
+		return Ot(() => {
 			v.value && b();
 		}), (r, d) => (y(), i(t, { to: "body" }, [u(n, {
 			"enter-active-class": "transition-opacity duration-200",
@@ -2421,7 +2425,7 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 					onClick: d[1] ||= (...e) => E(b) && E(b)(...e),
 					"aria-label": "Close notifications",
 					class: m(["p-1.5 rounded-lg cursor-pointer transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500", E(p) ? "text-gray-400 hover:bg-gray-800" : "text-gray-500 hover:bg-gray-100"])
-				}, [u(E(be), {
+				}, [u(E(I), {
 					class: "w-5 h-5",
 					"aria-hidden": "true"
 				})], 2)], 2),
@@ -2457,10 +2461,170 @@ var on = ["aria-label", "aria-expanded"], sn = { class: "flex flex-col h-full" }
 			_: 1
 		})]));
 	}
+}), mr = ["value", "type"], hr = /* @__PURE__ */ d({
+	__name: "BaseInput",
+	props: {
+		modelValue: { default: "" },
+		type: { default: "text" },
+		size: { default: "md" },
+		block: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("update:modelValue", e.target.value);
+		}
+		return (t, n) => (y(), o("input", {
+			value: e.modelValue,
+			type: e.type,
+			class: m(["rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm", [e.block ? "w-full" : "", e.size === "sm" ? "px-2 py-1.5" : "px-3 py-2"]]),
+			onInput: r
+		}, null, 42, mr));
+	}
+}), gr = ["value"], _r = /* @__PURE__ */ d({
+	__name: "BaseSelect",
+	props: {
+		modelValue: { default: void 0 },
+		size: { default: "sm" },
+		block: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t;
+		function r(e) {
+			n("update:modelValue", e.target.value);
+		}
+		return (t, n) => (y(), o("select", {
+			value: e.modelValue,
+			class: m(["rounded border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 text-sm", [e.block ? "w-full" : "", e.size === "md" ? "px-3 py-2" : "px-2 py-1.5"]]),
+			onChange: r
+		}, [S(t.$slots, "default")], 42, gr));
+	}
+}), vr = ["role", "aria-label"], yr = [
+	"aria-pressed",
+	"title",
+	"onClick"
+], br = "bg-slate-50 dark:bg-slate-900 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800", xr = /* @__PURE__ */ d({
+	__name: "BaseSegmentedControl",
+	props: {
+		options: {},
+		modelValue: {},
+		variant: { default: "base" },
+		ariaLabel: { default: "" },
+		optionClass: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let i = t, a = n, s = r(() => i.variant === "toolbar" ? "inline-flex h-9 divide-x divide-slate-300 dark:divide-slate-600 rounded-md border border-slate-300 dark:border-slate-600 overflow-hidden" : "inline-flex rounded border border-slate-300 dark:border-slate-600 overflow-hidden"), c = r(() => i.variant === "toolbar" ? "flex items-center px-3.5 text-xs font-semibold uppercase tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-emerald-500" : `${i.variant === "wide" ? "px-4 py-2" : "px-3 py-2"} text-sm font-medium transition-colors border-l first:border-l-0 border-slate-300 dark:border-slate-600`), l = r(() => i.variant === "wide" ? "bg-emerald-600 text-white" : "bg-emerald-500 text-white");
+		function u(e) {
+			let t = e.value === i.modelValue;
+			return i.optionClass ? i.optionClass(e, t) : t ? l.value : br;
+		}
+		return (n, r) => (y(), o("div", {
+			role: t.ariaLabel ? "group" : void 0,
+			"aria-label": t.ariaLabel || void 0,
+			class: m(s.value)
+		}, [(y(!0), o(e, null, x(t.options, (e) => (y(), o("button", {
+			key: String(e.value),
+			type: "button",
+			class: m([c.value, u(e)]),
+			"aria-pressed": e.value === t.modelValue,
+			title: e.title,
+			onClick: (t) => a("update:modelValue", e.value)
+		}, T(e.label), 11, yr))), 128))], 10, vr));
+	}
+}), Sr = { class: "w-full text-sm" }, Cr = { class: "bg-slate-50 dark:bg-slate-800/60 text-slate-600 dark:text-slate-300" }, wr = { class: "text-left" }, Tr = { key: 0 }, Er = ["colspan"], Dr = /* @__PURE__ */ d({
+	__name: "BaseTable",
+	props: {
+		columns: {},
+		empty: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No rows." }
+	},
+	setup(t) {
+		return (n, r) => (y(), o("table", Sr, [s("thead", Cr, [s("tr", wr, [(y(!0), o(e, null, x(t.columns, (e, t) => (y(), o("th", {
+			key: t,
+			class: m(["px-4 py-3", e.align === "right" ? "text-right" : ""])
+		}, T(e.label), 3))), 128))])]), s("tbody", null, [t.empty ? (y(), o("tr", Tr, [s("td", {
+			colspan: t.columns.length,
+			class: "px-4 py-12 text-center text-slate-500"
+		}, [S(n.$slots, "empty", {}, () => [l(T(t.emptyText), 1)])], 8, Er)])) : a("", !0), S(n.$slots, "default")])]));
+	}
+}), Or = { class: "grid gap-3 md:grid-cols-2" }, kr = {
+	key: 0,
+	class: "block text-[11px] uppercase tracking-wide text-slate-500 mb-1"
+}, Ar = ["value"], jr = {
+	key: 2,
+	class: "flex items-center gap-2 mt-4"
+}, Mr = ["checked", "onChange"], Nr = { class: "text-sm text-slate-900 dark:text-slate-100" }, Pr = {
+	key: 4,
+	class: "text-[11px] text-slate-400 mt-1"
+}, Fr = /* @__PURE__ */ d({
+	__name: "BaseSpecFields",
+	props: {
+		specs: {},
+		params: {}
+	},
+	emits: ["update"],
+	setup(t, { emit: n }) {
+		let r = n;
+		function c(e, t) {
+			r("update", e, t.target.checked);
+		}
+		function l(e, t) {
+			let n = parseFloat(t);
+			r("update", e, Number.isNaN(n) ? t : n);
+		}
+		return (n, u) => (y(), o("div", Or, [(y(!0), o(e, null, x(t.specs, (u) => (y(), o("div", { key: u.key }, [
+			u.type === "boolean" ? a("", !0) : (y(), o("label", kr, T(u.label), 1)),
+			u.type === "select" ? (y(), i(_r, {
+				key: 1,
+				modelValue: String(t.params[u.key] ?? ""),
+				"onUpdate:modelValue": (e) => r("update", u.key, e)
+			}, {
+				default: M(() => [(y(!0), o(e, null, x(u.options ?? [], (e) => (y(), o("option", {
+					key: e,
+					value: e
+				}, T(e), 9, Ar))), 128))]),
+				_: 2
+			}, 1032, ["modelValue", "onUpdate:modelValue"])) : u.type === "boolean" ? (y(), o("label", jr, [s("input", {
+				checked: !!t.params[u.key],
+				type: "checkbox",
+				class: "h-4 w-4",
+				onChange: (e) => c(u.key, e)
+			}, null, 40, Mr), s("span", Nr, T(u.label), 1)])) : (y(), i(hr, {
+				key: 3,
+				modelValue: t.params[u.key],
+				type: "number",
+				step: u.step ?? (u.type === "integer" ? 1 : .01),
+				min: u.min ?? void 0,
+				"onUpdate:modelValue": (e) => l(u.key, e)
+			}, null, 8, [
+				"modelValue",
+				"step",
+				"min",
+				"onUpdate:modelValue"
+			])),
+			u.help ? (y(), o("p", Pr, T(u.help), 1)) : a("", !0),
+			S(n.$slots, "after", { spec: u })
+		]))), 128))]));
+	}
 });
 //#endregion
 //#region src/composables/useDebounce.ts
-function mr(e, t = 300) {
+function Ir(e, t = 300) {
 	let n = b(e.value), r = null;
 	return j(e, (e) => {
 		r && clearTimeout(r), r = setTimeout(() => {
@@ -2472,12 +2636,12 @@ function mr(e, t = 300) {
 }
 //#endregion
 //#region src/composables/useToast.ts
-function hr(e = 3e3) {
-	let t = b(!1), n = b(""), r = b(K.SUCCESS), i = null;
+function Lr(e = 3e3) {
+	let t = b(!1), n = b(""), r = b(q.SUCCESS), i = null;
 	function a() {
 		i &&= (clearTimeout(i), null);
 	}
-	function o(o, s = K.SUCCESS, c = e) {
+	function o(o, s = q.SUCCESS, c = e) {
 		n.value = o, r.value = s, t.value = !0, a(), i = setTimeout(() => {
 			t.value = !1, i = null;
 		}, c);
@@ -2493,16 +2657,16 @@ function hr(e = 3e3) {
 }
 //#endregion
 //#region src/enums/BaseBadgeEnum.ts
-var gr = /* @__PURE__ */ function(e) {
+var Rr = /* @__PURE__ */ function(e) {
 	return e.WIN = "WIN", e.LOSE = "LOSE", e;
-}({}), _r = {
+}({}), zr = {
 	GET: "bg-blue-600",
 	POST: "bg-emerald-600",
 	PUT: "bg-amber-600",
 	DELETE: "bg-red-600",
 	PATCH: "bg-purple-600",
 	HEAD: "bg-gray-600"
-}, vr = {
+}, Br = {
 	GET: "bg-blue-500",
 	POST: "bg-green-500",
 	PUT: "bg-yellow-500",
@@ -2510,23 +2674,23 @@ var gr = /* @__PURE__ */ function(e) {
 	PATCH: "bg-purple-500",
 	HEAD: "bg-gray-500"
 };
-function yr(e) {
-	return e ? _r[e.toUpperCase()] ?? "bg-gray-600" : "bg-gray-600";
+function Vr(e) {
+	return e ? zr[e.toUpperCase()] ?? "bg-gray-600" : "bg-gray-600";
 }
-function br(e) {
-	return e ? vr[e.toUpperCase()] ?? "bg-gray-500" : "bg-gray-500";
+function Hr(e) {
+	return e ? Br[e.toUpperCase()] ?? "bg-gray-500" : "bg-gray-500";
 }
-function xr(e) {
+function Ur(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 Sr(e, t) {
+function Wr(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
 //#region src/utils/sanitizeHtml.ts
-var Cr = /* @__PURE__ */ new Set([
+var Gr = /* @__PURE__ */ new Set([
 	"A",
 	"B",
 	"STRONG",
@@ -2541,7 +2705,7 @@ var Cr = /* @__PURE__ */ new Set([
 	"LI",
 	"SPAN",
 	"DIV"
-]), wr = /* @__PURE__ */ new Set([
+]), Kr = /* @__PURE__ */ new Set([
 	"SCRIPT",
 	"STYLE",
 	"IFRAME",
@@ -2549,53 +2713,53 @@ var Cr = /* @__PURE__ */ new Set([
 	"EMBED",
 	"NOSCRIPT",
 	"TEMPLATE"
-]), Tr = { A: /* @__PURE__ */ new Set(["href", "title"]) };
-function Er(e) {
+]), qr = { A: /* @__PURE__ */ new Set(["href", "title"]) };
+function Jr(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 Dr(e) {
+function Yr(e) {
 	if (e.nodeType !== Node.ELEMENT_NODE) return;
 	let t = e, n = t.tagName.toUpperCase();
-	if (!Cr.has(n)) {
-		wr.has(n) ? t.remove() : t.replaceWith(document.createTextNode(t.textContent ?? ""));
+	if (!Gr.has(n)) {
+		Kr.has(n) ? t.remove() : t.replaceWith(document.createTextNode(t.textContent ?? ""));
 		return;
 	}
-	let r = Tr[n] ?? /* @__PURE__ */ new Set();
+	let r = qr[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" && !Er(e.value) && t.removeAttribute(e.name);
+		n === "A" && e.name.toLowerCase() === "href" && !Jr(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)) Dr(e);
+	for (let e of Array.from(t.childNodes)) Yr(e);
 }
-function Or(e) {
+function Xr(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)) Dr(e);
+	for (let e of Array.from(t.childNodes)) Yr(e);
 	return t.innerHTML;
 }
 //#endregion
 //#region src/utils/format.ts
-var kr = "—";
-function Ar(e, t = 4) {
-	if (e == null || typeof e == "string" && e.trim() === "") return kr;
+var Zr = "—";
+function Qr(e, t = 4) {
+	if (e == null || typeof e == "string" && e.trim() === "") return Zr;
 	let n = typeof e == "string" ? Number(e) : e;
 	return isFinite(n) ? n.toLocaleString(void 0, {
 		minimumFractionDigits: t,
 		maximumFractionDigits: t
-	}) : kr;
+	}) : Zr;
 }
-function jr(e) {
-	if (e == null || e === "") return kr;
+function $r(e) {
+	if (e == null || e === "") return Zr;
 	let t = new Date(e);
 	return isNaN(t.getTime()) ? String(e) : t.toLocaleString();
 }
-function Mr(e) {
+function ei(e) {
 	return new Date(e).toLocaleString(void 0, {
 		month: "short",
 		day: "numeric",
@@ -2603,13 +2767,13 @@ function Mr(e) {
 		minute: "2-digit"
 	});
 }
-function Nr(e) {
+function ti(e) {
 	return new Date(e).toLocaleDateString(void 0, {
 		month: "short",
 		day: "numeric"
 	});
 }
-function Pr(e) {
+function ni(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, {
@@ -2617,15 +2781,15 @@ function Pr(e) {
 		maximumFractionDigits: n
 	});
 }
-function Fr(e, t = 2) {
+function ri(e, t = 2) {
 	return `${e >= 0 ? "+" : ""}${e.toFixed(t)}%`;
 }
-function Ir(e) {
+function ii(e) {
 	return `${e < 0 ? "-" : "+"}$${Math.abs(e).toFixed(2)}`;
 }
 //#endregion
 //#region src/utils/pnl.ts
-function Lr(e) {
+function ai(e) {
 	if (e.buyPrice == null || e.lastPrice == null || e.filledQty == null) return {
 		pnlUsd: null,
 		pnlPct: null
@@ -2640,4 +2804,4 @@ function Lr(e) {
 	};
 }
 //#endregion
-export { I as AlertEnum, Hn as BaseActionButton, De as BaseAlert, Mn as BaseAppLayout, ke as BaseBadge, gr as BaseBadgeEnum, Ne as BaseBreadcrumb, U as BaseButton, R as BaseButtonEnum, z as BaseButtonSizeEnum, Bt as BaseCollapsibleSection, Wt as BaseConfirmModal, Wn as BaseCopyButton, kn as BaseEntityPickerModal, Jn as BaseGoogleSignInButton, Je as BaseLine, Ye as BaseLoginEnum, or as BaseLoginForm, Ze as BaseLogo, G as BaseLogoEnum, it as BaseModal, Qe as BaseModalEnum, Lt as BaseModalShell, Zt as BaseNotFoundPage, pr as BaseNotificationPanel, In as BasePageHeader, at as BaseRow, gn as BaseSidebar, ot as BaseSpinner, Jt as BaseTextInputModal, lt as BaseToast, K as BaseToastEnum, zn as BaseToolbarButton, dt as ColoredSquares, L as ColorsEnums, mt as EarningsCard, yt as EuroAmount, W as LineEnum, Ct as Pagination, q as PositioningEnum, Ot as TrendArrow, Lr as computePnL, jr as fmtDate, Nr as fmtDateShort, Mr as fmtDateTime, Ar as fmtNumber, Fr as fmtPct, Pr as fmtPrice, Ir as fmtUsd, we as getBaseColor, Te as getBaseColorOf, Ie as initTheme, Er as isSafeHref, br as methodBadgeBright, yr as methodBadgeSolid, Or as sanitizeHtml, xr as statusBadgeSolid, Sr as statusBadgeTinted, mr as useDebouncedRef, Y as useEscapeKey, Qt as useMobileSidebar, an as useNotifications, nn as useSidebarCollapse, H as useTheme, J as useThemeClasses, hr as useToast };
+export { L as AlertEnum, Hn as BaseActionButton, Ee as BaseAlert, Mn as BaseAppLayout, z as BaseBadge, Rr as BaseBadgeEnum, je as BaseBreadcrumb, Ue as BaseButton, B as BaseButtonEnum, V as BaseButtonSizeEnum, Bt as BaseCollapsibleSection, Wt as BaseConfirmModal, Wn as BaseCopyButton, kn as BaseEntityPickerModal, Jn as BaseGoogleSignInButton, hr as BaseInput, qe as BaseLine, Je as BaseLoginEnum, or as BaseLoginForm, Xe as BaseLogo, K as BaseLogoEnum, rt as BaseModal, Ze as BaseModalEnum, Lt as BaseModalShell, Zt as BaseNotFoundPage, pr as BaseNotificationPanel, In as BasePageHeader, it as BaseRow, xr as BaseSegmentedControl, _r as BaseSelect, gn as BaseSidebar, Fr as BaseSpecFields, at as BaseSpinner, Dr as BaseTable, Jt as BaseTextInputModal, ct as BaseToast, q as BaseToastEnum, zn as BaseToolbarButton, ut as ColoredSquares, R as ColorsEnums, pt as EarningsCard, vt as EuroAmount, G as LineEnum, St as Pagination, J as PositioningEnum, Dt as TrendArrow, ai as computePnL, $r as fmtDate, ti as fmtDateShort, ei as fmtDateTime, Qr as fmtNumber, ri as fmtPct, ni as fmtPrice, ii as fmtUsd, Ce as getBaseColor, we as getBaseColorOf, Pe as initTheme, Jr as isSafeHref, Hr as methodBadgeBright, Vr as methodBadgeSolid, Xr as sanitizeHtml, Ur as statusBadgeSolid, Wr as statusBadgeTinted, Ir as useDebouncedRef, Ot as useEscapeKey, Qt as useMobileSidebar, an as useNotifications, nn as useSidebarCollapse, W as useTheme, Y as useThemeClasses, Lr as useToast };