@gspa/ui 0.1.1 → 0.1.4

package/dist/components/Header.js

@@ -0,0 +1,674 @@
+import { ref as x, computed as p, onMounted as ze, onUnmounted as Ee, watch as R, resolveComponent as Fe, createElementBlock as n, openBlock as a, normalizeClass as f, unref as T, createElementVNode as r, createCommentVNode as l, createVNode as d, toDisplayString as i, Transition as P, withCtx as B, createTextVNode as O, Fragment as H, renderList as W, normalizeStyle as j, createBlock as S } from "vue";
+import { cn as M } from "../utils/cn.js";
+import { setMode as Re, getMode as Pe } from "../lib/theme.js";
+import c from "./Icon.js";
+import We from "./Search.js";
+import Ye from "./Switch.js";
+import { _ as qe } from "../_plugin-vue_export-helper-CHgC5LLL.js";
+const Ge = { class: "relative flex items-center justify-between h-20 sm:h-18 px-3 sm:px-4 md:px-6" }, Qe = { class: "flex items-center gap-2 sm:gap-3 md:gap-4 min-w-0 flex-1" }, Ze = ["src"], Je = {
+  key: 2,
+  class: "h-5 sm:h-18 w-px ui-border-strong-bg shrink-0 hidden sm:block"
+}, Xe = {
+  key: 3,
+  class: "shrink-0 ui-surface border ui-border-strong px-2 py-1.5 sm:px-3 sm:py-2 rounded-xl shadow-sm flex items-center gap-2 relative hover:bg-(--ui-surface-muted) transition-colors max-w-52 sm:max-w-72"
+}, Ke = { class: "w-8 h-8 rounded-lg ui-surface-muted border ui-border-strong flex items-center justify-center shrink-0" }, et = { class: "flex-1 min-w-0" }, tt = { class: "text-xs sm:text-sm font-semibold ui-text truncate group-hover:text-(--ui-primary) leading-tight" }, st = {
+  key: 1,
+  class: "min-w-0 flex-1 px-1"
+}, rt = { class: "text-xs sm:text-sm font-semibold ui-text truncate max-w-[160px] sm:max-w-52 leading-tight" }, ot = {
+  key: 0,
+  class: "ui-surface absolute top-full left-0 right-0 sm:left-0 sm:right-auto mt-2 w-[min(92vw,24rem)] rounded-2xl border ui-border-strong shadow-2xl z-50 max-h-96 overflow-hidden"
+}, at = { class: "p-3 sm:p-4 border-b ui-border-strong ui-surface-muted" }, nt = { class: "text-sm sm:text-base font-semibold ui-text flex items-center gap-2" }, lt = { class: "text-xs ui-text mt-1" }, it = { class: "py-2 max-h-80 overflow-y-auto" }, ut = ["onClick"], ct = {
+  key: 0,
+  class: "shrink-0 mr-2 sm:mr-3"
+}, dt = ["src", "alt"], mt = {
+  key: 1,
+  class: "w-7 h-7 sm:w-8 sm:h-8 rounded-lg bg-linear-to-br from-(--ui-bg) to-(--ui-bg) flex items-center justify-center mr-2 sm:mr-3 shrink-0"
+}, pt = { class: "flex-1 text-left min-w-0" }, ft = { class: "font-semibold truncate text-sm sm:text-md" }, ht = {
+  key: 0,
+  class: "pointer-events-none absolute left-1/2 -translate-x-1/2"
+}, yt = ["src"], gt = { class: "flex items-center gap-1 sm:gap-2 md:gap-3 pl-2" }, vt = {
+  key: 0,
+  class: "absolute -top-0.5 -right-0.5 sm:-top-1 sm:-right-1 min-w-4 h-4 sm:min-w-[18px] sm:h-[18px] ui-danger-bg ui-text-inverse text-[10px] sm:text-xs rounded-full flex items-center justify-center font-semibold px-0.5 sm:px-1"
+}, xt = {
+  key: 0,
+  class: "ui-surface absolute right-2 sm:right-4 md:right-6 top-14 sm:top-16 mt-2 w-[calc(100vw-1rem)] max-w-sm sm:w-80 md:w-96 rounded-2xl border ui-border-strong shadow-2xl z-9999 overflow-hidden"
+}, bt = { class: "p-3 sm:p-4 border-b ui-border-strong ui-surface-muted" }, wt = { class: "text-sm sm:text-base font-semibold ui-text" }, _t = {
+  key: 0,
+  class: "text-xs ui-text mt-1"
+}, kt = { class: "max-h-[60vh] sm:max-h-96 overflow-y-auto" }, Ct = {
+  key: 0,
+  class: "p-6 sm:p-8 text-center"
+}, St = ["onClick"], At = { class: "flex items-start space-x-2 sm:space-x-3" }, Lt = { class: "flex-1 min-w-0" }, Nt = { class: "flex items-start justify-between gap-2" }, Tt = { class: "text-xs sm:text-md font-semibold ui-text flex-1 leading-tight" }, jt = {
+  key: 0,
+  class: "shrink-0 w-2 h-2 mt-1 ui-primary-bg rounded-full"
+}, Mt = {
+  key: 0,
+  class: "flex items-center gap-1 sm:gap-1.5 mt-1.5 flex-wrap"
+}, Dt = { class: "inline-flex items-center px-1.5 sm:px-2 py-0.5 rounded text-[10px] sm:text-xs font-semibold ui-accent-soft ui-accent border border-(--ui-accent-soft)" }, It = { class: "inline-flex items-center px-1.5 sm:px-2 py-0.5 rounded text-[10px] sm:text-xs font-medium ui-surface-muted ui-text border ui-border-strong" }, Ut = { class: "flex items-center gap-1.5 sm:gap-2 mt-1.5 sm:mt-2 flex-wrap" }, $t = {
+  key: 0,
+  class: "inline-flex items-center px-1.5 sm:px-2 py-0.5 rounded text-[10px] sm:text-xs font-medium ui-primary-soft ui-primary"
+}, Bt = { class: "truncate max-w-[100px] sm:max-w-none" }, Ot = { class: "text-[10px] sm:text-xs ui-text mt-1.5 sm:mt-2 flex items-center" }, Ht = {
+  key: 0,
+  class: "p-2 sm:p-3 text-center border-t ui-border-strong ui-surface-muted"
+}, Vt = {
+  key: 1,
+  class: "w-40 sm:w-52 md:w-64"
+}, zt = { class: "relative" }, Et = ["aria-label"], Ft = { class: "w-9 h-9 sm:w-10 sm:h-10 bg-linear-to-br from-(--ui-primary-soft) to-(--ui-accent-soft) rounded-full flex items-center justify-center shadow-sm overflow-hidden border ui-border-strong" }, Rt = ["src", "alt"], Pt = {
+  key: 1,
+  class: "ui-primary text-sm sm:text-base font-semibold"
+}, Wt = {
+  key: 0,
+  class: "ui-surface absolute right-0 mt-2 w-56 sm:w-60 rounded-xl border ui-border-strong shadow-xl z-50 overflow-hidden"
+}, Yt = { class: "p-3 sm:p-4 border-b ui-border-strong flex items-center gap-3" }, qt = { class: "w-10 h-10 shrink-0 bg-linear-to-br from-(--ui-primary-soft) to-(--ui-accent-soft) rounded-full flex items-center justify-center shadow-sm overflow-hidden" }, Gt = ["src", "alt"], Qt = {
+  key: 1,
+  class: "ui-primary text-sm font-semibold"
+}, Zt = { class: "min-w-0" }, Jt = { class: "text-sm font-semibold ui-text truncate" }, Xt = { class: "text-xs ui-text truncate" }, Kt = {
+  key: 0,
+  class: "px-3 py-3 border-b ui-border-strong"
+}, es = { class: "flex items-center justify-between gap-3" }, ts = { class: "flex items-center gap-2 min-w-0" }, ss = { class: "text-sm font-medium ui-text truncate" }, rs = { class: "py-2" }, os = ["onClick"], as = { class: "flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-lg mr-2 sm:mr-3 shrink-0 transition-colors ml-1 sm:ml-2 ui-surface-muted ui-text group-hover:bg-(--ui-bg)" }, ns = { class: "flex-1 truncate font-semibold ui-text text-xs sm:text-md" }, ls = { class: "border-t ui-border-strong py-2" }, is = { class: "flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-lg mr-1 sm:mr-1 shrink-0 transition-colors ml-1 sm:ml-2 ui-danger-soft ui-danger group-hover:bg-(--ui-danger-soft)" }, us = {
+  __name: "Header",
+  props: {
+    sidebarWidth: { type: Number, default: 256 },
+    currentSection: { type: String, default: "Dashboard" },
+    currentPage: { type: String, default: "Overview" },
+    currentRoute: { type: String, default: "" },
+    user: { type: Object, required: !0 },
+    notifications: { type: Array, default: () => [] },
+    profileMenuItems: { type: Array, required: !0 },
+    mobileOpen: { type: Boolean, default: !1 },
+    currentCompany: { type: Object, default: null },
+    companyLogo: { type: String, default: "/logo.png" },
+    currentCompanyLogo: { type: String, default: "" },
+    companyLogos: { type: Object, default: () => ({}) },
+    companies: { type: Array, default: () => [] },
+    activeRoles: { type: Array, default: () => [] },
+    showSearch: { type: Boolean, default: !0 },
+    showNotifications: { type: Boolean, default: !0 },
+    showBreadcrumb: { type: Boolean, default: !0 },
+    showCompanyInfo: { type: Boolean, default: !0 },
+    showHeaderLogo: { type: Boolean, default: !0 },
+    logoUrl: { type: String, default: "/applogo.png" },
+    headerLogo: { type: String, default: "/logo.png" },
+    companyLogoClass: { type: String, default: "h-16 sm:h-22 md:h-22" },
+    searchPlaceholder: { type: String, default: "Search..." },
+    notificationsTitle: { type: String, default: "Notifications" },
+    companySwitcherTitle: { type: String, default: "Switch Company" },
+    companySwitcherDescription: { type: String, default: "Select a company to view its data" },
+    entityLabel: { type: String, default: "Company" },
+    entityFieldMap: { type: Object, default: () => ({}) },
+    showSettings: { type: Boolean, default: !0 },
+    settingsLabel: { type: String, default: "Settings" },
+    settingsRoute: { type: [String, Object], default: "/settings" },
+    showThemeSwitcher: { type: Boolean, default: !0 },
+    themeSwitcherTitle: { type: String, default: "Appearance" },
+    themeModes: {
+      type: Array,
+      default: () => ["light", "dark"]
+    },
+    userInitialsOverride: { type: String, default: "" },
+    userRoleDisplayOverride: { type: String, default: "" },
+    userAvatarUrl: { type: String, default: "" },
+    userAvatarAlt: { type: String, default: "" },
+    showUserAvatar: { type: Boolean, default: !0 },
+    themeScope: {
+      type: String,
+      default: "default",
+      validator: (u) => ["default", "module"].includes(u)
+    }
+  },
+  emits: [
+    "search",
+    "profile-action",
+    "logout",
+    "navigate",
+    "toggle-mobile-sidebar",
+    "company-change",
+    "notification-click",
+    "view-all-notifications",
+    "theme-change"
+  ],
+  setup(u, { emit: ae }) {
+    const o = u, h = ae, V = x(""), b = x(!1), y = x(!1), Y = x(!1), w = x(!1), D = x("light"), I = x("/logo.png"), z = x(!1), A = p(() => o.notifications.filter((e) => !e.read).length), L = p(() => {
+      const e = (Array.isArray(o.themeModes) ? o.themeModes : []).map((s) => String(s || "").toLowerCase()).filter((s) => s === "light" || s === "dark");
+      return e.length > 0 ? [...new Set(e)] : ["light", "dark"];
+    }), ne = p(() => L.value.length > 1), q = p({
+      get: () => D.value === "dark",
+      set: (e) => {
+        const s = e ? "dark" : "light";
+        L.value.includes(s) && Be(s);
+      }
+    }), G = p(() => o.userInitialsOverride ? o.userInitialsOverride : (o.user?.name || "Guest").split(" ").map((s) => s[0] || "").join("").toUpperCase()), U = p(() => o.showUserAvatar && o.userAvatarUrl || ""), Q = p(() => !!U.value && !z.value), Z = p(() => o.userAvatarAlt || `${o.user?.name || "User"} avatar`), J = () => {
+      z.value = !0;
+    }, le = p(() => String(o.entityLabel || "Company").toLowerCase()), X = p(() => o.showCompanyInfo), ie = p(() => o.companySwitcherTitle || `Switch ${o.entityLabel || "Company"}`), ue = p(() => o.companySwitcherDescription || `Select a ${(o.entityLabel || "Company").toLowerCase()} to view its data`), _ = p(() => ({
+      id: o.entityFieldMap?.id || "",
+      name: o.entityFieldMap?.name || "",
+      role: o.entityFieldMap?.role || "",
+      type: o.entityFieldMap?.type || "",
+      typeName: o.entityFieldMap?.typeName || ""
+    })), K = ["company_id", "companyId", "id"], ce = ["company_name", "companyName", "name"], de = ["company_role", "companyRole", "role"], me = ["company_type", "companyType", "type"], ee = ["name", "label", "title", "company_type_name", "companyTypeName"], k = (e, s, m = []) => {
+      if (!e || typeof e != "object") return null;
+      if (s && e[s] != null) return e[s];
+      for (const t of m)
+        if (e[t] != null) return e[t];
+      return null;
+    }, pe = (e) => {
+      if (!e || typeof e != "object") return "";
+      const s = k(e, _.value.type, me);
+      if (typeof s == "string") return s;
+      if (s && typeof s == "object") {
+        const t = k(s, _.value.typeName, ee);
+        if (t != null) return String(t);
+      }
+      const m = k(e, _.value.typeName, ee);
+      return m != null ? String(m) : "";
+    }, te = (e) => {
+      if (!e || typeof e != "object") return null;
+      const s = k(e, _.value.id, K), m = k(e, _.value.name, ce), t = k(e, _.value.role, de);
+      return {
+        ...e,
+        __id: s,
+        __name: m != null ? String(m) : "Unknown",
+        __role: t != null ? String(t) : "",
+        __typeName: pe(e),
+        __raw: e
+      };
+    }, fe = p(() => o.currentCompany), he = p(() => Array.isArray(o.companies) ? o.companies : []), g = p(() => te(fe.value)), se = p(() => he.value.map(te).filter(Boolean)), ye = () => {
+      b.value = !b.value, y.value = !1;
+    }, ge = () => {
+      y.value = !y.value, b.value = !1, w.value = !1;
+    }, ve = () => {
+      w.value = !w.value, y.value = !1, b.value = !1;
+    }, xe = (e) => {
+      h("navigate", e), y.value = !1;
+    }, v = (e) => e.route ? !!(o.currentRoute === e.route || o.currentRoute.startsWith(e.route + "/")) : !1, be = () => o.themeScope === "module" ? "border-b ui-border-strong bg-[color:color-mix(in oklab, var(--module-soft, var(--ui-primary-soft)), transparent 10%)]" : "border-b ui-border-strong bg-[color:color-mix(in oklab, var(--module-soft, var(--ui-primary-soft)), transparent 8%)]", we = (e) => e ? o.themeScope === "module" ? "shadow-sm border" : "bg-linear-to-br from-(--ui-primary-soft) to-(--ui-primary-soft) ui-primary shadow-sm border border-(--ui-primary-soft)" : "ui-text hover:bg-(--ui-surface-muted) hover:text-(--ui-text) border border-transparent", _e = (e) => !e || o.themeScope !== "module" ? null : {
+      backgroundColor: "var(--module-soft, var(--ui-primary-soft))",
+      borderColor: "var(--module-border, var(--ui-border-strong))"
+    }, ke = (e) => !e || o.themeScope !== "module" ? null : { background: "var(--module-primary, var(--ui-primary))" }, Ce = (e) => e ? o.themeScope === "module" ? "shadow-md border" : "bg-linear-to-br from-(--ui-primary) to-(--ui-primary) ui-text shadow-md" : "ui-surface-muted ui-text group-hover:bg-(--ui-bg)", Se = (e) => !e || o.themeScope !== "module" ? null : {
+      backgroundColor: "var(--module-primary, var(--ui-primary))",
+      color: "var(--ui-text-inverse, #fff)",
+      borderColor: "var(--module-border, var(--ui-border-strong))"
+    }, Ae = (e) => e ? o.themeScope === "module" ? "font-semibold" : "ui-primary" : "ui-text", Le = (e) => !e || o.themeScope !== "module" ? null : { color: "var(--module-text, var(--ui-primary))" }, Ne = (e) => e ? o.themeScope === "module" ? "border shadow-sm font-semibold" : "bg-[color:color-mix(in oklab, var(--ui-primary-soft), transparent 25%)] ui-primary border-(--ui-primary-soft)" : "ui-text border-transparent hover:bg-(--ui-surface-muted)", Te = (e) => !e || o.themeScope !== "module" ? null : {
+      backgroundColor: "var(--module-soft, var(--ui-primary-soft))",
+      borderColor: "var(--module-border, var(--ui-border-strong))",
+      color: "var(--module-text, var(--ui-primary))"
+    }, je = (e) => !e || o.themeScope !== "module" ? null : { color: "var(--module-primary, var(--ui-primary))" }, Me = (e) => {
+      h("profile-action", e), y.value = !1;
+    }, De = () => {
+      h("logout"), y.value = !1;
+    }, Ie = (e) => {
+      const s = e?.__raw || e;
+      h("company-change", s), w.value = !1;
+    }, Ue = (e) => {
+      h("notification-click", e);
+    }, $e = () => {
+      h("view-all-notifications"), b.value = !1;
+    }, re = (e) => {
+      !e.target.closest(".absolute") && !e.target.closest("button") && (b.value = !1, y.value = !1, w.value = !1);
+    }, Be = (e) => {
+      L.value.includes(e) && (D.value = e, Re(e), h("theme-change", e));
+    }, E = () => {
+      Y.value = window.innerWidth < 768;
+    }, Oe = (e) => {
+      if (e.title.includes("Overdue")) return "ui-danger-soft ui-danger";
+      if (e.title.includes("Due in 0")) return "ui-warning-soft ui-warning";
+      const s = {
+        due_date_reminder: "ui-warning-soft ui-warning",
+        info: "ui-primary-soft ui-primary",
+        success: "ui-success-soft ui-success",
+        warning: "ui-warning-soft ui-warning",
+        error: "ui-danger-soft ui-danger"
+      };
+      return s[e.type] || s.info;
+    }, He = (e) => {
+      if (!e) return "";
+      const s = e.split("\\");
+      return s[s.length - 1].replace(/([A-Z])/g, " $1").trim().split(" ").map((t) => t.charAt(0).toUpperCase() + t.slice(1).toLowerCase()).join(" ");
+    }, Ve = (e) => {
+      if (!e) return "";
+      const s = new Date(e), m = /* @__PURE__ */ new Date();
+      m.setHours(0, 0, 0, 0);
+      const t = new Date(s);
+      t.setHours(0, 0, 0, 0);
+      const C = t - m, N = Math.ceil(C / (1e3 * 60 * 60 * 24));
+      return N === 0 ? "Due Today" : N === 1 ? "Due Tomorrow" : N < 0 ? `${Math.abs(N)} days overdue` : N <= 7 ? `Due in ${N} days` : s.toLocaleDateString("en-KE", {
+        month: "short",
+        day: "numeric",
+        year: s.getFullYear() !== m.getFullYear() ? "numeric" : void 0
+      });
+    }, F = (e) => {
+      const s = e?.__id ?? k(e, _.value.id, K);
+      return s == null ? null : o.companyLogos[s] || null;
+    }, $ = p(() => {
+      if (o.currentCompanyLogo) return o.currentCompanyLogo;
+      const e = F(g.value);
+      return e || (o.companyLogo ? o.companyLogo : "/logo.png");
+    }), oe = (e) => {
+      const s = "/logo.png", m = e || s;
+      if (m === s || typeof Image > "u") {
+        I.value = s;
+        return;
+      }
+      const t = new Image();
+      t.onload = () => {
+        I.value = m;
+      }, t.onerror = () => {
+        I.value = s;
+      }, t.src = m;
+    };
+    return ze(() => {
+      document.addEventListener("click", re), E(), window.addEventListener("resize", E);
+      const e = Pe() || L.value[0] || "light";
+      D.value = L.value.includes(e) ? e : L.value[0], oe($.value);
+    }), Ee(() => {
+      document.removeEventListener("click", re), window.removeEventListener("resize", E);
+    }), R(V, (e) => h("search", e)), R($, (e) => {
+      oe(e);
+    }), R(U, () => {
+      z.value = !1;
+    }), (e, s) => {
+      const m = Fe("router-link");
+      return a(), n("header", {
+        class: f(T(M)(
+          "fixed top-0 z-50 w-full backdrop-blur-md transition-all duration-300 ease-out",
+          o.themeScope === "module" && "kv-module-header",
+          be()
+        )),
+        style: { left: "0" }
+      }, [
+        r("div", Ge, [
+          r("div", Qe, [
+            Y.value ? (a(), n("button", {
+              key: 0,
+              class: "p-2 ui-text rounded-lg hover:bg-(--ui-surface-muted) transition-colors shrink-0",
+              onClick: s[0] || (s[0] = (t) => h("toggle-mobile-sidebar"))
+            }, [
+              d(c, {
+                icon: "bars",
+                class: "w-5 h-5"
+              })
+            ])) : l("", !0),
+            $.value ? (a(), n("div", {
+              key: 1,
+              class: f(T(M)("shrink-0 overflow-hidden rounded-2xl flex items-center justify-center", o.companyLogoClass))
+            }, [
+              r("img", {
+                src: I.value,
+                alt: "Company logo",
+                class: "max-w-full max-h-full w-auto h-auto object-contain object-center"
+              }, null, 8, Ze)
+            ], 2)) : l("", !0),
+            $.value && X.value && g.value ? (a(), n("div", Je)) : l("", !0),
+            X.value && g.value ? (a(), n("div", Xe, [
+              se.value.length > 1 ? (a(), n("button", {
+                key: 0,
+                class: "flex items-center gap-2 sm:gap-3 w-44 sm:w-60 cursor-pointer rounded-lg px-1.5 py-1 transition-all group",
+                onClick: ve
+              }, [
+                r("div", Ke, [
+                  d(c, {
+                    icon: "building",
+                    class: "w-4 h-4 ui-primary"
+                  })
+                ]),
+                r("div", et, [
+                  r("p", tt, i(g.value.__name), 1)
+                ]),
+                d(c, {
+                  icon: "chevron-down",
+                  class: f(["w-3.5 h-3.5 ui-text-soft shrink-0 group-hover:text-(--ui-primary) transition-transform", { "rotate-180": w.value }])
+                }, null, 8, ["class"])
+              ])) : (a(), n("div", st, [
+                r("p", rt, i(g.value.__name), 1)
+              ])),
+              d(P, {
+                "enter-active-class": "transition-all duration-200 ease-out",
+                "leave-active-class": "transition-all duration-200 ease-in",
+                "enter-from-class": "opacity-0 translate-y-2 scale-95",
+                "enter-to-class": "opacity-100 translate-y-0 scale-100",
+                "leave-from-class": "opacity-100 translate-y-0 scale-100",
+                "leave-to-class": "opacity-0 translate-y-2 scale-95"
+              }, {
+                default: B(() => [
+                  w.value ? (a(), n("div", ot, [
+                    r("div", at, [
+                      r("h3", nt, [
+                        d(c, {
+                          icon: "list",
+                          class: "w-4 h-4 ui-primary"
+                        }),
+                        O(" " + i(ie.value), 1)
+                      ]),
+                      r("p", lt, i(ue.value), 1)
+                    ]),
+                    r("div", it, [
+                      (a(!0), n(H, null, W(se.value, (t) => (a(), n("button", {
+                        key: t.__id || t.__name,
+                        class: f(T(M)(
+                          "mx-2 flex items-center w-[calc(100%-1rem)] rounded-xl px-3 sm:px-4 py-2.5 text-sm transition-all group border",
+                          Ne(t.__id === g.value?.__id)
+                        )),
+                        style: j(Te(t.__id === g.value?.__id)),
+                        onClick: (C) => Ie(t)
+                      }, [
+                        F(t) ? (a(), n("div", ct, [
+                          r("img", {
+                            src: F(t),
+                            alt: `${t.__name} ${le.value} logo`,
+                            class: "w-7 h-7 sm:w-8 sm:h-8 object-contain rounded-lg ui-surface p-0.5 sm:p-1 border ui-border-strong group-hover:border-(--ui-primary-soft) transition-colors",
+                            onError: s[1] || (s[1] = (C) => {
+                              C.target.src = "/logo.png";
+                            })
+                          }, null, 40, dt)
+                        ])) : (a(), n("div", mt, [
+                          d(c, {
+                            icon: "building",
+                            class: "w-3.5 h-3.5 sm:w-4 sm:h-4 ui-text"
+                          })
+                        ])),
+                        r("div", pt, [
+                          r("p", ft, i(t.__name), 1)
+                        ]),
+                        t.__id === g.value?.__id ? (a(), S(c, {
+                          key: 2,
+                          icon: "check-circle",
+                          class: "w-4 h-4 sm:w-5 sm:h-5 ui-primary shrink-0 ml-2",
+                          style: j(je(t.__id === g.value?.__id))
+                        }, null, 8, ["style"])) : l("", !0)
+                      ], 14, ut))), 128))
+                    ])
+                  ])) : l("", !0)
+                ]),
+                _: 1
+              })
+            ])) : l("", !0)
+          ]),
+          u.showHeaderLogo && (u.logoUrl || u.headerLogo) ? (a(), n("div", ht, [
+            r("img", {
+              src: u.logoUrl || u.headerLogo,
+              alt: "App logo",
+              class: "h-16 sm:h-32 md:h-32 mt-4 w-auto object-contain",
+              onError: s[2] || (s[2] = (t) => {
+                t.target.src = "/applogo.png";
+              })
+            }, null, 40, yt)
+          ])) : l("", !0),
+          r("div", gt, [
+            u.showNotifications ? (a(), n("button", {
+              key: 0,
+              class: "relative p-2 ui-text rounded-xl hover:bg-(--ui-surface-muted) transition-colors",
+              onClick: ye
+            }, [
+              d(c, {
+                icon: "bell",
+                class: "w-5 h-5"
+              }),
+              A.value > 0 ? (a(), n("span", vt, i(A.value > 9 ? "9+" : A.value), 1)) : l("", !0)
+            ])) : l("", !0),
+            d(P, {
+              "enter-active-class": "transition-all duration-300 ease-out",
+              "leave-active-class": "transition-all duration-300 ease-in",
+              "enter-from-class": "opacity-0 translate-y-2 scale-95",
+              "enter-to-class": "opacity-100 translate-y-0 scale-100",
+              "leave-from-class": "opacity-100 translate-y-0 scale-100",
+              "leave-to-class": "opacity-0 translate-y-2 scale-95"
+            }, {
+              default: B(() => [
+                b.value ? (a(), n("div", xt, [
+                  r("div", bt, [
+                    r("h3", wt, i(u.notificationsTitle), 1),
+                    A.value > 0 ? (a(), n("p", _t, " You have " + i(A.value) + " unread notification" + i(A.value > 1 ? "s" : ""), 1)) : l("", !0)
+                  ]),
+                  r("div", kt, [
+                    u.notifications.length === 0 ? (a(), n("div", Ct, [
+                      d(c, {
+                        icon: "bell",
+                        class: "w-10 h-10 sm:w-12 sm:h-12 mx-auto ui-text mb-2"
+                      }),
+                      s[5] || (s[5] = r("p", { class: "text-md ui-text" }, " No notifications ", -1))
+                    ])) : (a(!0), n(H, { key: 1 }, W(u.notifications, (t) => (a(), n("div", {
+                      key: t.id,
+                      class: f([
+                        "p-3 sm:p-4 border-b ui-border-strong hover:bg-(--ui-surface-muted) cursor-pointer transition-colors",
+                        t.read ? "opacity-60" : ""
+                      ]),
+                      onClick: (C) => Ue(t)
+                    }, [
+                      r("div", At, [
+                        r("div", {
+                          class: f([
+                            "shrink-0 w-8 h-8 sm:w-9 sm:h-9 rounded-lg flex items-center justify-center",
+                            Oe(t)
+                          ])
+                        }, [
+                          t.title.includes("Overdue") ? (a(), S(c, {
+                            key: 0,
+                            icon: "exclamation-triangle",
+                            class: "w-4 h-4 sm:w-5 sm:h-5"
+                          })) : t.type === "due_date_reminder" ? (a(), S(c, {
+                            key: 1,
+                            icon: "clock",
+                            class: "w-4 h-4 sm:w-5 sm:h-5"
+                          })) : (a(), S(c, {
+                            key: 2,
+                            icon: "bell",
+                            class: "w-4 h-4 sm:w-5 sm:h-5"
+                          }))
+                        ], 2),
+                        r("div", Lt, [
+                          r("div", Nt, [
+                            r("p", Tt, i(t.title), 1),
+                            t.read ? l("", !0) : (a(), n("div", jt))
+                          ]),
+                          t.source ? (a(), n("div", Mt, [
+                            r("span", Dt, [
+                              d(c, {
+                                icon: "tag",
+                                class: "w-2.5 h-2.5 sm:w-3 sm:h-3 mr-0.5 sm:mr-1"
+                              }),
+                              O(" " + i(t.source.body_code), 1)
+                            ]),
+                            d(c, {
+                              icon: "chevron-right",
+                              class: "w-2.5 h-2.5 sm:w-3 sm:h-3 ui-text hidden xs:block"
+                            }),
+                            r("span", It, i(t.source.code), 1)
+                          ])) : l("", !0),
+                          r("div", Ut, [
+                            t.model ? (a(), n("span", $t, [
+                              d(c, {
+                                icon: "file",
+                                class: "w-2.5 h-2.5 sm:w-3 sm:h-3 mr-0.5 sm:mr-1"
+                              }),
+                              r("span", Bt, i(He(t.model)), 1)
+                            ])) : l("", !0),
+                            t.due_date ? (a(), n("span", {
+                              key: 1,
+                              class: f([
+                                "inline-flex items-center px-1.5 sm:px-2 py-0.5 rounded text-[10px] sm:text-xs font-medium whitespace-nowrap",
+                                t.title.includes("Overdue") ? "ui-danger-soft ui-danger border border-(--ui-danger-soft)" : (t.title.includes("Due in 0"), "ui-warning-soft ui-warning border border-(--ui-warning-soft)")
+                              ])
+                            }, [
+                              d(c, {
+                                icon: "calendar",
+                                class: "w-2.5 h-2.5 sm:w-3 sm:h-3 mr-0.5 sm:mr-1 shrink-0"
+                              }),
+                              O(" " + i(Ve(t.due_date)), 1)
+                            ], 2)) : l("", !0)
+                          ]),
+                          r("p", Ot, [
+                            d(c, {
+                              icon: "clock",
+                              class: "w-2.5 h-2.5 sm:w-3 sm:h-3 mr-0.5 sm:mr-1"
+                            }),
+                            O(" " + i(t.time), 1)
+                          ])
+                        ])
+                      ])
+                    ], 10, St))), 128))
+                  ]),
+                  u.notifications.length > 0 ? (a(), n("div", Ht, [
+                    r("button", {
+                      class: "text-sm font-semibold ui-primary hover:text-(--ui-primary-strong) transition-colors",
+                      onClick: $e
+                    }, " View all notifications → ")
+                  ])) : l("", !0)
+                ])) : l("", !0)
+              ]),
+              _: 1
+            }),
+            u.showSearch ? (a(), n("div", Vt, [
+              d(We, {
+                modelValue: V.value,
+                "onUpdate:modelValue": s[3] || (s[3] = (t) => V.value = t),
+                placeholder: u.searchPlaceholder,
+                size: "sm",
+                "show-no-results": !1,
+                "min-length": 0,
+                debounce: 200,
+                results: []
+              }, null, 8, ["modelValue", "placeholder"])
+            ])) : l("", !0),
+            r("div", zt, [
+              r("button", {
+                class: "shrink-0 rounded-full transition-transform hover:scale-105 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)",
+                "aria-label": `${u.user.name} profile menu`,
+                onClick: ge
+              }, [
+                r("div", Ft, [
+                  Q.value ? (a(), n("img", {
+                    key: 0,
+                    src: U.value,
+                    alt: Z.value,
+                    class: "w-full h-full object-cover",
+                    onError: J
+                  }, null, 40, Rt)) : (a(), n("span", Pt, i(G.value), 1))
+                ])
+              ], 8, Et),
+              d(P, {
+                "enter-active-class": "transition-all duration-200 ease-out",
+                "leave-active-class": "transition-all duration-200 ease-in",
+                "enter-from-class": "opacity-0 translate-y-2 scale-95",
+                "enter-to-class": "opacity-100 translate-y-0 scale-100",
+                "leave-from-class": "opacity-100 translate-y-0 scale-100",
+                "leave-to-class": "opacity-0 translate-y-2 scale-95"
+              }, {
+                default: B(() => [
+                  y.value ? (a(), n("div", Wt, [
+                    r("div", Yt, [
+                      r("div", qt, [
+                        Q.value ? (a(), n("img", {
+                          key: 0,
+                          src: U.value,
+                          alt: Z.value,
+                          class: "w-full h-full object-cover",
+                          onError: J
+                        }, null, 40, Gt)) : (a(), n("span", Qt, i(G.value), 1))
+                      ]),
+                      r("div", Zt, [
+                        r("p", Jt, i(u.user.name), 1),
+                        r("p", Xt, i(u.user.email), 1)
+                      ])
+                    ]),
+                    u.showThemeSwitcher ? (a(), n("div", Kt, [
+                      r("div", es, [
+                        r("div", ts, [
+                          d(c, {
+                            icon: D.value === "dark" ? "moon" : "sun",
+                            class: f(["w-4 h-4 shrink-0", D.value === "dark" ? "ui-primary" : "ui-text"])
+                          }, null, 8, ["icon", "class"]),
+                          r("span", ss, i(u.themeSwitcherTitle), 1)
+                        ]),
+                        d(Ye, {
+                          modelValue: q.value,
+                          "onUpdate:modelValue": s[4] || (s[4] = (t) => q.value = t),
+                          size: "md",
+                          disabled: !ne.value
+                        }, null, 8, ["modelValue", "disabled"])
+                      ])
+                    ])) : l("", !0),
+                    r("div", rs, [
+                      (a(!0), n(H, null, W(u.profileMenuItems, (t) => (a(), n(H, {
+                        key: t.name
+                      }, [
+                        t.route ? (a(), S(m, {
+                          key: 0,
+                          to: t.route,
+                          class: f(T(M)(
+                            "flex items-center px-2.5 sm:px-3 py-2 sm:py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group relative",
+                            we(v(t))
+                          )),
+                          style: j(_e(v(t))),
+                          onClick: (C) => xe(t)
+                        }, {
+                          default: B(() => [
+                            v(t) ? (a(), n("div", {
+                              key: 0,
+                              class: "absolute left-0 top-1/2 transform -translate-y-1/2 w-1 h-6 sm:h-8 bg-linear-to-b from-(--ui-primary) to-(--ui-primary) rounded-r-full",
+                              style: j(ke(v(t)))
+                            }, null, 4)) : l("", !0),
+                            r("div", {
+                              class: f(T(M)(
+                                "flex items-center justify-center w-7 h-7 sm:w-8 sm:h-8 rounded-lg mr-2 sm:mr-3 shrink-0 transition-colors ml-1 sm:ml-2",
+                                Ce(v(t))
+                              )),
+                              style: j(Se(v(t)))
+                            }, [
+                              t.icon ? (a(), S(c, {
+                                key: 0,
+                                icon: t.icon,
+                                class: "w-3.5 h-3.5 sm:w-4 sm:h-4"
+                              }, null, 8, ["icon"])) : l("", !0)
+                            ], 6),
+                            r("span", {
+                              class: f(T(M)(
+                                "flex-1 truncate font-semibold text-xs sm:text-md",
+                                Ae(v(t))
+                              )),
+                              style: j(Le(v(t)))
+                            }, i(t.label), 7)
+                          ]),
+                          _: 2
+                        }, 1032, ["to", "class", "style", "onClick"])) : (a(), n("button", {
+                          key: 1,
+                          class: "flex items-center w-full px-2.5 sm:px-3 py-2 sm:py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group relative ui-text hover:bg-(--ui-surface-muted) hover:text-(--ui-text) border border-transparent",
+                          onClick: (C) => Me(t)
+                        }, [
+                          r("div", as, [
+                            t.icon ? (a(), S(c, {
+                              key: 0,
+                              icon: t.icon,
+                              class: "w-3.5 h-3.5 sm:w-4 sm:h-4"
+                            }, null, 8, ["icon"])) : l("", !0)
+                          ]),
+                          r("span", ns, i(t.label), 1)
+                        ], 8, os))
+                      ], 64))), 128))
+                    ]),
+                    r("div", ls, [
+                      r("button", {
+                        class: "flex items-center w-full px-2.5 sm:px-3 py-2 sm:py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group relative ui-danger hover:bg-(--ui-danger-soft) border border-transparent",
+                        onClick: De
+                      }, [
+                        r("div", is, [
+                          d(c, {
+                            icon: "sign-out-alt",
+                            class: "w-3.5 h-3.5 sm:w-4 sm:h-4"
+                          })
+                        ]),
+                        s[6] || (s[6] = r("span", { class: "truncate font-semibold ui-danger text-xs sm:text-md" }, " Sign out ", -1))
+                      ])
+                    ])
+                  ])) : l("", !0)
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ])
+      ], 2);
+    };
+  }
+}, gs = /* @__PURE__ */ qe(us, [["__scopeId", "data-v-3e4b26b8"]]);
+export {
+  gs as default
+};