web-mojo 2.1.936 → 2.1.955

package/dist/chunks/ContextMenu-By2g3KYY.js

@@ -0,0 +1,1171 @@
+import { C as Collection, M as Model } from "./Collection-YRfGoT73.js";
+import { V as View } from "./Rest-CS4jRCAs.js";
+class ToastService {
+  constructor(options = {}) {
+    this.options = {
+      containerId: "toast-container",
+      position: "top-end",
+      // top-start, top-center, top-end, middle-start, etc.
+      autohide: true,
+      defaultDelay: 5e3,
+      // 5 seconds
+      maxToasts: 5,
+      // Maximum number of toasts to show at once
+      ...options
+    };
+    this.toasts = /* @__PURE__ */ new Map();
+    this.toastCounter = 0;
+    this.init();
+  }
+  /**
+   * Initialize the toast service
+   */
+  init() {
+    this.createContainer();
+  }
+  /**
+   * Create the toast container if it doesn't exist
+   */
+  createContainer() {
+    let container = document.getElementById(this.options.containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = this.options.containerId;
+      container.className = `toast-container position-fixed ${this.getPositionClasses()}`;
+      container.style.zIndex = "1070";
+      container.setAttribute("aria-live", "polite");
+      container.setAttribute("aria-atomic", "true");
+      document.body.appendChild(container);
+    }
+    this.container = container;
+  }
+  /**
+   * Get CSS classes for toast positioning
+   */
+  getPositionClasses() {
+    const positionMap = {
+      "top-start": "top-0 start-0 p-3",
+      "top-center": "top-0 start-50 translate-middle-x p-3",
+      "top-end": "top-0 end-0 p-3",
+      "middle-start": "top-50 start-0 translate-middle-y p-3",
+      "middle-center": "top-50 start-50 translate-middle p-3",
+      "middle-end": "top-50 end-0 translate-middle-y p-3",
+      "bottom-start": "bottom-0 start-0 p-3",
+      "bottom-center": "bottom-0 start-50 translate-middle-x p-3",
+      "bottom-end": "bottom-0 end-0 p-3"
+    };
+    return positionMap[this.options.position] || positionMap["top-end"];
+  }
+  /**
+   * Show a success toast
+   * @param {string} message - The message to display
+   * @param {object} options - Additional options
+   */
+  success(message, options = {}) {
+    return this.show(message, "success", {
+      icon: "bi-check-circle-fill",
+      ...options
+    });
+  }
+  /**
+   * Show an error toast
+   * @param {string} message - The message to display
+   * @param {object} options - Additional options
+   */
+  error(message, options = {}) {
+    return this.show(message, "error", {
+      icon: "bi-exclamation-triangle-fill",
+      autohide: false,
+      // Keep error toasts visible until manually dismissed
+      ...options
+    });
+  }
+  /**
+   * Show an info toast
+   * @param {string} message - The message to display
+   * @param {object} options - Additional options
+   */
+  info(message, options = {}) {
+    return this.show(message, "info", {
+      icon: "bi-info-circle-fill",
+      ...options
+    });
+  }
+  /**
+   * Show a warning toast
+   * @param {string} message - The message to display
+   * @param {object} options - Additional options
+   */
+  warning(message, options = {}) {
+    return this.show(message, "warning", {
+      icon: "bi-exclamation-triangle-fill",
+      ...options
+    });
+  }
+  /**
+   * Show a plain toast without specific styling
+   * @param {string} message - The message to display
+   * @param {object} options - Additional options
+   */
+  plain(message, options = {}) {
+    return this.show(message, "plain", {
+      ...options
+    });
+  }
+  /**
+   * Show a toast with specified type and options
+   * @param {string} message - The message to display
+   * @param {string} type - Toast type (success, error, info, warning)
+   * @param {object} options - Additional options
+   */
+  show(message, type = "info", options = {}) {
+    this.enforceMaxToasts();
+    const toastId = `toast-${++this.toastCounter}`;
+    const config = {
+      title: this.getDefaultTitle(type),
+      icon: this.getDefaultIcon(type),
+      autohide: this.options.autohide,
+      delay: this.options.defaultDelay,
+      dismissible: true,
+      ...options
+    };
+    const toastElement = this.createToastElement(toastId, message, type, config);
+    this.container.appendChild(toastElement);
+    if (typeof bootstrap === "undefined") {
+      throw new Error("Bootstrap is required for ToastService. Make sure Bootstrap 5 is loaded.");
+    }
+    const bsToast = new bootstrap.Toast(toastElement, {
+      autohide: config.autohide,
+      delay: config.delay
+    });
+    this.toasts.set(toastId, {
+      element: toastElement,
+      bootstrap: bsToast,
+      type,
+      message
+    });
+    toastElement.addEventListener("hidden.bs.toast", () => {
+      this.cleanup(toastId);
+    });
+    bsToast.show();
+    return {
+      id: toastId,
+      hide: () => {
+        try {
+          bsToast.hide();
+        } catch (error) {
+          console.warn("Error hiding toast:", error);
+        }
+      },
+      dispose: () => this.cleanup(toastId),
+      updateProgress: options.updateProgress || null
+    };
+  }
+  /**
+   * Show a toast with a View component in the body
+   * @param {View} view - The View component to display
+   * @param {string} type - Toast type (success, error, info, warning, plain)
+   * @param {object} options - Additional options
+   */
+  showView(view, type = "info", options = {}) {
+    this.enforceMaxToasts();
+    const toastId = `toast-${++this.toastCounter}`;
+    const config = {
+      title: options.title || this.getDefaultTitle(type),
+      icon: options.icon || this.getDefaultIcon(type),
+      autohide: this.options.autohide,
+      delay: this.options.defaultDelay,
+      dismissible: true,
+      ...options
+    };
+    const toastElement = this.createViewToastElement(toastId, view, type, config);
+    this.container.appendChild(toastElement);
+    if (typeof bootstrap === "undefined") {
+      throw new Error("Bootstrap is required for ToastService. Make sure Bootstrap 5 is loaded.");
+    }
+    const bsToast = new bootstrap.Toast(toastElement, {
+      autohide: config.autohide,
+      delay: config.delay
+    });
+    this.toasts.set(toastId, {
+      element: toastElement,
+      bootstrap: bsToast,
+      type,
+      view,
+      message: "View toast"
+    });
+    toastElement.addEventListener("hidden.bs.toast", () => {
+      this.cleanupView(toastId);
+    });
+    const bodyContainer = toastElement.querySelector(".toast-view-body");
+    if (bodyContainer && view) {
+      view.render(true, bodyContainer);
+    }
+    bsToast.show();
+    return {
+      id: toastId,
+      view,
+      hide: () => {
+        try {
+          bsToast.hide();
+        } catch (error) {
+          console.warn("Error hiding view toast:", error);
+        }
+      },
+      dispose: () => this.cleanupView(toastId),
+      updateProgress: (progressInfo) => {
+        if (view && typeof view.updateProgress === "function") {
+          view.updateProgress(progressInfo);
+        }
+      }
+    };
+  }
+  /**
+   * Create toast DOM element
+   */
+  createToastElement(id, message, type, config) {
+    const toast = document.createElement("div");
+    toast.id = id;
+    toast.className = `toast toast-service-${type}`;
+    toast.setAttribute("role", "alert");
+    toast.setAttribute("aria-live", "assertive");
+    toast.setAttribute("aria-atomic", "true");
+    const header = config.title || config.icon ? this.createToastHeader(config, type) : "";
+    const body = this.createToastBody(message, config.icon && !config.title);
+    toast.innerHTML = `
+      ${header}
+      ${body}
+    `;
+    return toast;
+  }
+  /**
+   * Create toast DOM element for View component
+   */
+  createViewToastElement(id, view, type, config) {
+    const toast = document.createElement("div");
+    toast.id = id;
+    toast.className = `toast toast-service-${type}`;
+    toast.setAttribute("role", "alert");
+    toast.setAttribute("aria-live", "assertive");
+    toast.setAttribute("aria-atomic", "true");
+    const header = config.title || config.icon ? this.createToastHeader(config, type) : "";
+    const body = this.createViewToastBody();
+    toast.innerHTML = `
+      ${header}
+      ${body}
+    `;
+    return toast;
+  }
+  /**
+   * Create toast body for View component
+   */
+  createViewToastBody() {
+    return `
+      <div class="toast-body p-0">
+        <div class="toast-view-body p-3"></div>
+      </div>
+    `;
+  }
+  /**
+   * Create toast header with title and icon
+   */
+  createToastHeader(config, _type) {
+    const iconHtml = config.icon ? `<i class="${config.icon} toast-service-icon me-2"></i>` : "";
+    const titleHtml = config.title ? `<strong class="me-auto">${iconHtml}${this.escapeHtml(config.title)}</strong>` : "";
+    const timeHtml = config.showTime ? `<small class="text-muted">${this.getTimeString()}</small>` : "";
+    const closeButton = config.dismissible ? `<button type="button" class="btn-close toast-service-close" data-bs-dismiss="toast" aria-label="Close"></button>` : "";
+    if (!titleHtml && !timeHtml && !closeButton) {
+      return "";
+    }
+    return `
+      <div class="toast-header">
+        ${titleHtml}
+        ${timeHtml}
+        ${closeButton}
+      </div>
+    `;
+  }
+  /**
+   * Create toast body with message
+   */
+  createToastBody(message, showIcon = false) {
+    const iconHtml = showIcon ? `<i class="${this.getDefaultIcon("info")} toast-service-icon me-2"></i>` : "";
+    return `
+      <div class="toast-body d-flex align-items-center">
+        ${iconHtml}
+        <span>${this.escapeHtml(message)}</span>
+      </div>
+    `;
+  }
+  /**
+   * Get default title for toast type
+   */
+  getDefaultTitle(type) {
+    const titles = {
+      success: "Success",
+      error: "Error",
+      warning: "Warning",
+      info: "Information",
+      plain: ""
+    };
+    return titles[type] || "Notification";
+  }
+  /**
+   * Get default icon for toast type
+   */
+  getDefaultIcon(type) {
+    const icons = {
+      success: "bi-check-circle-fill",
+      error: "bi-exclamation-triangle-fill",
+      warning: "bi-exclamation-triangle-fill",
+      info: "bi-info-circle-fill",
+      plain: ""
+    };
+    return icons[type] || "bi-info-circle-fill";
+  }
+  /**
+   * Enforce maximum number of toasts
+   */
+  enforceMaxToasts() {
+    const activeToasts = Array.from(this.toasts.values());
+    if (activeToasts.length >= this.options.maxToasts) {
+      const oldestId = this.toasts.keys().next().value;
+      const oldest = this.toasts.get(oldestId);
+      if (oldest) {
+        oldest.bootstrap.hide();
+      }
+    }
+  }
+  /**
+   * Clean up toast resources
+   */
+  cleanup(toastId) {
+    const toast = this.toasts.get(toastId);
+    if (toast) {
+      try {
+        toast.bootstrap.dispose();
+      } catch (e) {
+        console.warn("Error disposing toast:", e);
+      }
+      if (toast.element && toast.element.parentNode) {
+        toast.element.parentNode.removeChild(toast.element);
+      }
+      this.toasts.delete(toastId);
+    }
+  }
+  /**
+   * Clean up view toast resources with proper view disposal
+   */
+  cleanupView(toastId) {
+    const toast = this.toasts.get(toastId);
+    if (toast) {
+      if (toast.view && typeof toast.view.dispose === "function") {
+        try {
+          toast.view.dispose();
+        } catch (e) {
+          console.warn("Error disposing view in toast:", e);
+        }
+      }
+      try {
+        toast.bootstrap.dispose();
+      } catch (e) {
+        console.warn("Error disposing toast:", e);
+      }
+      if (toast.element && toast.element.parentNode) {
+        toast.element.parentNode.removeChild(toast.element);
+      }
+      this.toasts.delete(toastId);
+    }
+  }
+  /**
+   * Hide all active toasts
+   */
+  hideAll() {
+    this.toasts.forEach((toast, _id) => {
+      toast.bootstrap.hide();
+    });
+  }
+  /**
+   * Clear all toasts immediately
+   */
+  clearAll() {
+    this.toasts.forEach((toast, id) => {
+      this.cleanup(id);
+    });
+  }
+  /**
+   * Get current time string
+   */
+  getTimeString() {
+    return (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  }
+  /**
+   * Escape HTML to prevent XSS
+   */
+  escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+  /**
+   * Dispose of the entire toast service
+   */
+  dispose() {
+    this.clearAll();
+    if (this.container && this.container.parentNode) {
+      this.container.parentNode.removeChild(this.container);
+    }
+  }
+  /**
+   * Get statistics about active toasts
+   */
+  getStats() {
+    const stats = {
+      total: this.toasts.size,
+      byType: {}
+    };
+    this.toasts.forEach((toast) => {
+      stats.byType[toast.type] = (stats.byType[toast.type] || 0) + 1;
+    });
+    return stats;
+  }
+  /**
+   * Set global options
+   */
+  setOptions(newOptions) {
+    this.options = { ...this.options, ...newOptions };
+    if (newOptions.position) {
+      if (this.container) {
+        this.container.className = `toast-container position-fixed ${this.getPositionClasses()}`;
+      }
+    }
+  }
+}
+class Group extends Model {
+  constructor(data = {}) {
+    super(data, {
+      endpoint: "/api/group"
+    });
+  }
+}
+class GroupList extends Collection {
+  constructor(options = {}) {
+    super({
+      ModelClass: Group,
+      endpoint: "/api/group",
+      size: 10,
+      ...options
+    });
+  }
+}
+const GroupKinds = {
+  "org": "Organization",
+  "division": "Division",
+  "department": "Department",
+  "team": "Team",
+  "merchant": "Merchant",
+  "partner": "Partner",
+  "client": "Client",
+  "iso": "ISO",
+  "sales": "Sales",
+  "reseller": "Reseller",
+  "location": "Location",
+  "region": "Region",
+  "route": "Route",
+  "project": "Project",
+  "inventory": "Inventory",
+  "test": "Testing",
+  "misc": "Miscellaneous",
+  "qa": "Quality Assurance"
+};
+const GroupKindOptions = Object.entries(GroupKinds).map(([key, label]) => ({
+  value: key,
+  label
+}));
+const GroupForms = {
+  create: {
+    title: "Create Group",
+    fields: [
+      {
+        name: "name",
+        type: "text",
+        label: "Group Name",
+        required: true,
+        placeholder: "Enter group name"
+      },
+      {
+        name: "kind",
+        type: "select",
+        label: "Group Kind",
+        required: true,
+        options: GroupKindOptions
+      },
+      {
+        type: "collection",
+        name: "parent",
+        label: "Parent Group",
+        Collection: GroupList,
+        // Collection class
+        labelField: "name",
+        // Field to display in dropdown
+        valueField: "id",
+        // Field to use as value
+        maxItems: 10,
+        // Max items to show in dropdown
+        placeholder: "Search groups...",
+        emptyFetch: false,
+        debounceMs: 300
+        // Search debounce delay
+      }
+    ]
+  },
+  edit: {
+    title: "Edit Group",
+    fields: [
+      {
+        name: "name",
+        type: "text",
+        label: "Group Name",
+        required: true,
+        placeholder: "Enter group name"
+      },
+      {
+        name: "kind",
+        type: "select",
+        label: "Group Kind",
+        required: true,
+        options: GroupKindOptions
+      },
+      {
+        type: "collection",
+        name: "parent",
+        label: "Parent Group",
+        Collection: GroupList,
+        // Collection class
+        labelField: "name",
+        // Field to display in dropdown
+        valueField: "id",
+        // Field to use as value
+        maxItems: 10,
+        // Max items to show in dropdown
+        placeholder: "Search groups...",
+        emptyFetch: false,
+        debounceMs: 300
+        // Search debounce delay
+      },
+      {
+        name: "metadata.domain",
+        type: "text",
+        label: "Default Domain",
+        placeholder: "Enter Domain"
+      },
+      {
+        name: "metadata.portal",
+        type: "text",
+        label: "Default Portal",
+        placeholder: "Enter Portal URL"
+      },
+      {
+        name: "is_active",
+        type: "switch",
+        label: "Is Active",
+        cols: 4
+      }
+    ]
+  },
+  detailed: {
+    title: "Group Details",
+    fields: [
+      // Profile Header
+      {
+        type: "header",
+        text: "Profile Information",
+        level: 4,
+        class: "text-primary mb-3"
+      },
+      // Avatar and Basic Info
+      {
+        type: "group",
+        columns: { xs: 12, md: 4 },
+        fields: [
+          {
+            type: "image",
+            name: "avatar",
+            size: "lg",
+            imageSize: { width: 200, height: 200 },
+            placeholder: "Upload your avatar",
+            help: "Square images work best",
+            columns: 12
+          },
+          {
+            name: "is_active",
+            type: "switch",
+            label: "Is Active",
+            columns: 12
+          }
+        ]
+      },
+      // Profile Details
+      {
+        type: "group",
+        columns: { xs: 12, md: 8 },
+        title: "Details",
+        fields: [
+          {
+            name: "name",
+            type: "text",
+            label: "Group Name",
+            required: true,
+            placeholder: "Enter group name",
+            columns: 12
+          },
+          {
+            name: "kind",
+            type: "select",
+            label: "Group Kind",
+            required: true,
+            columns: 12,
+            options: [
+              { value: "org", label: "Organization" },
+              { value: "team", label: "Team" },
+              { value: "department", label: "Department" },
+              { value: "merchant", label: "Merchant" },
+              { value: "iso", label: "ISO" },
+              { value: "group", label: "Group" }
+            ]
+          },
+          {
+            type: "collection",
+            name: "parent",
+            label: "Parent Group",
+            Collection: GroupList,
+            // Collection class
+            labelField: "name",
+            // Field to display in dropdown
+            valueField: "id",
+            // Field to use as value
+            maxItems: 10,
+            // Max items to show in dropdown
+            placeholder: "Search groups...",
+            emptyFetch: false,
+            debounceMs: 300,
+            // Search debounce delay
+            columns: 12
+          }
+        ]
+      },
+      // Account Settings
+      {
+        type: "group",
+        columns: 12,
+        title: "Account Settings",
+        class: "pt-3",
+        fields: [
+          {
+            type: "select",
+            name: "metadata.timezone",
+            label: "Timezone",
+            columns: 6,
+            options: [
+              { value: "America/New_York", text: "Eastern Time" },
+              { value: "America/Chicago", text: "Central Time" },
+              { value: "America/Denver", text: "Mountain Time" },
+              { value: "America/Los_Angeles", text: "Pacific Time" },
+              { value: "UTC", text: "UTC" }
+            ]
+          },
+          {
+            type: "select",
+            name: "metadata.language",
+            label: "Language",
+            columns: 6,
+            options: [
+              { value: "en", text: "English" },
+              { value: "es", text: "Spanish" },
+              { value: "fr", text: "French" },
+              { value: "de", text: "German" }
+            ]
+          },
+          {
+            type: "switch",
+            name: "metadata.notify.email",
+            label: "Email Notifications",
+            columns: 4
+          },
+          {
+            type: "switch",
+            name: "metadata.profile_public",
+            label: "Public Profile",
+            columns: 4
+          }
+        ]
+      }
+    ]
+  }
+};
+Group.EDIT_FORM = GroupForms.edit;
+Group.ADD_FORM = GroupForms.create;
+Group.CREATE_FORM = GroupForms.create;
+Group.GroupKindOptions = GroupKindOptions;
+Group.GroupKinds = GroupKinds;
+const Group$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  Group,
+  GroupForms,
+  GroupList
+}, Symbol.toStringTag, { value: "Module" }));
+class User extends Model {
+  constructor(data = {}) {
+    super(data, {
+      endpoint: "/api/user"
+    });
+  }
+  hasPermission(permission) {
+    if (Array.isArray(permission)) {
+      return permission.some((p) => this.hasPermission(p));
+    }
+    const isSysPermission = permission.startsWith("sys.");
+    const permissionToCheck = isSysPermission ? permission.substring(4) : permission;
+    if (this._hasPermission(permissionToCheck)) {
+      return true;
+    }
+    if (!isSysPermission && this.member && this.member.hasPermission(permission)) {
+      return true;
+    }
+    return false;
+  }
+  _hasPermission(permission) {
+    const permissions = this.get("permissions");
+    if (!permissions) {
+      return false;
+    }
+    return permissions[permission] == true;
+  }
+  hasPerm(p) {
+    return this.hasPermission(p);
+  }
+}
+class UserList extends Collection {
+  constructor(options = {}) {
+    super({
+      ModelClass: User,
+      endpoint: "/api/user",
+      ...options
+    });
+  }
+}
+User.PERMISSIONS = [
+  { name: "manage_users", label: "Manage Users" },
+  { name: "view_groups", label: "View Groups" },
+  { name: "manage_groups", label: "Manage Groups" },
+  { name: "view_metrics", label: "View System Metrics" },
+  { name: "manage_metrics", label: "Manage System Metrics" },
+  { name: "view_logs", label: "View Logs" },
+  { name: "view_incidents", label: "View Incidents" },
+  { name: "manage_incidents", label: "Manage Incidents" },
+  { name: "view_tickets", label: "View Tickets" },
+  { name: "manage_tickets", label: "Manage Tickets" },
+  { name: "view_admin", label: "View Admin" },
+  { name: "view_jobs", label: "View Jobs" },
+  { name: "manage_jobs", label: "Manage Jobs" },
+  { name: "view_global", label: "View Global" },
+  { name: "manage_notifications", label: "Manage Notifications" },
+  { name: "manage_files", label: "Manage Files" },
+  { name: "force_single_session", label: "Force Single Session" },
+  { name: "file_vault", label: "Access File Vault" },
+  { name: "manage_aws", label: "Manage AWS" },
+  { name: "manage_docit", label: "Manage DocIt" }
+];
+User.PERMISSION_FIELDS = [
+  ...User.PERMISSIONS.map((permission) => ({
+    name: `permissions.${permission.name}`,
+    type: "switch",
+    label: permission.label,
+    columns: 4
+  }))
+];
+const UserForms = {
+  create: {
+    title: "Create User",
+    fields: [
+      { name: "email", type: "text", label: "Email", required: true },
+      { name: "phone_number", type: "text", label: "Phone number", columns: 12 },
+      { name: "display_name", type: "text", label: "Display Name" }
+    ]
+  },
+  edit: {
+    title: "Edit User",
+    fields: [
+      { name: "email", type: "email", label: "Email", columns: 12 },
+      { name: "display_name", type: "text", label: "Display Name", columns: 12 },
+      { name: "phone_number", type: "text", label: "Phone number", columns: 12 },
+      { type: "collection", name: "org", label: "Organization", Collection: GroupList, labelField: "name", valueField: "id", columns: 12 }
+    ]
+  },
+  permissions: {
+    title: "Edit Permissions",
+    fields: User.PERMISSION_FIELDS
+  }
+};
+const UserDataView = {
+  // Basic user profile view
+  profile: {
+    title: "User Profile",
+    columns: 2,
+    fields: [
+      {
+        name: "id",
+        label: "User ID",
+        type: "number",
+        columns: 4
+      },
+      {
+        name: "last_login",
+        label: "Last Login",
+        type: "datetime",
+        format: "relative",
+        columns: 4
+      },
+      {
+        name: "last_activity",
+        label: "Last Activity",
+        type: "datetime",
+        format: "relative",
+        columns: 4
+      },
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        format: "lowercase",
+        columns: 4
+      },
+      {
+        name: "display_name",
+        label: "Display Name",
+        type: "text",
+        columns: 4
+      },
+      {
+        name: "email",
+        label: "Email",
+        type: "email",
+        columns: 12
+      },
+      {
+        name: "org.name",
+        label: "Organization",
+        type: "text",
+        columns: 6
+      },
+      {
+        name: "phone_number",
+        label: "Phone Number",
+        type: "text",
+        columns: 6
+      }
+    ]
+  },
+  // Activity tracking view
+  activity: {
+    title: "User Activity",
+    columns: 2,
+    fields: [
+      {
+        name: "last_login",
+        label: "Last Login",
+        type: "datetime",
+        format: "relative",
+        colSize: 6
+      },
+      {
+        name: "last_activity",
+        label: "Last Activity",
+        type: "datetime",
+        format: "relative",
+        colSize: 6
+      }
+    ]
+  },
+  // Comprehensive view with all data
+  detailed: {
+    title: "Detailed User Information",
+    columns: 2,
+    showEmptyValues: true,
+    emptyValueText: "Not set",
+    fields: [
+      // Basic Info Section
+      {
+        name: "id",
+        label: "User ID",
+        type: "number",
+        colSize: 3
+      },
+      {
+        name: "display_name",
+        label: "Display Name",
+        type: "text",
+        format: 'capitalize|default("Unnamed User")',
+        colSize: 9
+      },
+      {
+        name: "username",
+        label: "Username",
+        type: "text",
+        format: "lowercase",
+        colSize: 6
+      },
+      {
+        name: "email",
+        label: "Email Address",
+        type: "email",
+        colSize: 6
+      },
+      {
+        name: "phone_number",
+        label: "Phone Number",
+        type: "phone",
+        format: 'phone|default("Not provided")',
+        colSize: 6
+      },
+      {
+        name: "is_active",
+        label: "Account Status",
+        type: "boolean",
+        colSize: 6
+      },
+      // Activity Info
+      {
+        name: "last_login",
+        label: "Last Login",
+        type: "datetime",
+        format: "relative",
+        colSize: 6
+      },
+      {
+        name: "last_activity",
+        label: "Last Activity",
+        type: "datetime",
+        format: "relative",
+        colSize: 6
+      },
+      // Avatar Info
+      {
+        name: "avatar.url",
+        label: "Avatar",
+        type: "url",
+        colSize: 12
+      },
+      // Complex Data (will use full width automatically)
+      {
+        name: "permissions",
+        label: "User Permissions",
+        type: "dataview",
+        dataViewColumns: 2,
+        showEmptyValues: false
+      },
+      {
+        name: "metadata",
+        label: "User Metadata",
+        type: "dataview",
+        dataViewColumns: 1
+      },
+      {
+        name: "avatar",
+        label: "Avatar Details",
+        type: "dataview",
+        dataViewColumns: 1
+      }
+    ]
+  },
+  // Permissions-focused view
+  permissions: {
+    title: "User Permissions",
+    columns: 1,
+    fields: [
+      {
+        name: "display_name",
+        label: "User",
+        type: "text",
+        format: "capitalize",
+        columns: 12
+      },
+      {
+        name: "permissions",
+        label: "Assigned Permissions",
+        type: "dataview",
+        dataViewColumns: 3,
+        showEmptyValues: false,
+        colSize: 12
+      }
+    ]
+  },
+  // Compact summary view
+  summary: {
+    title: "User Summary",
+    columns: 3,
+    fields: [
+      {
+        name: "display_name",
+        label: "Name",
+        type: "text",
+        format: "capitalize|truncate(30)"
+      },
+      {
+        name: "email",
+        label: "Email",
+        type: "email"
+      },
+      {
+        name: "is_active",
+        label: "Status",
+        type: "boolean"
+      },
+      {
+        name: "last_activity",
+        label: "Last Seen",
+        type: "datetime",
+        format: "relative",
+        colSize: 12
+      }
+    ]
+  }
+};
+User.DATA_VIEW = UserDataView.detailed;
+User.EDIT_FORM = UserForms.edit;
+User.ADD_FORM = UserForms.create;
+class UserDevice extends Model {
+  constructor(data = {}) {
+    super(data, {
+      endpoint: "/api/user/device"
+    });
+  }
+  static async getByDuid(duid) {
+    const model = new UserDevice();
+    const resp = await model.rest.GET("/api/user/device/lookup", { duid });
+    if (resp.success && resp.data && resp.data.data) {
+      return new UserDevice(resp.data.data);
+    }
+    return null;
+  }
+}
+class UserDeviceList extends Collection {
+  constructor(options = {}) {
+    super({
+      ModelClass: UserDevice,
+      endpoint: "/api/user/device",
+      ...options
+    });
+  }
+}
+class UserDeviceLocation extends Model {
+  constructor(data = {}) {
+    super(data, {
+      endpoint: "/api/user/device/location"
+    });
+  }
+}
+class UserDeviceLocationList extends Collection {
+  constructor(options = {}) {
+    super({
+      ModelClass: UserDeviceLocation,
+      endpoint: "/api/user/device/location",
+      ...options
+    });
+  }
+}
+class ContextMenu extends View {
+  constructor(options = {}) {
+    super({
+      tagName: "div",
+      className: "context-menu-view dropdown",
+      ...options
+    });
+    this.config = options.contextMenu || options.config || {};
+    this.context = options.context || {};
+  }
+  /**
+   * Build the dropdown menu HTML from the configuration.
+   */
+  async renderTemplate() {
+    const menuItems = this.config.items || [];
+    if (menuItems.length === 0) {
+      return "";
+    }
+    const triggerIcon = this.config.icon || "bi-three-dots-horizontal";
+    const buttonClass = this.config.buttonClass || "btn btn-link text-secondary ps-3 pe-0 pt-0 pb-1";
+    const dropdownId = `context-menu-${this.id}`;
+    const menuItemsHtml = menuItems.map((item) => this.buildMenuItemHTML(item)).join("");
+    return `
+            <button class="${buttonClass}" type="button" id="${dropdownId}" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="${triggerIcon}"></i>
+            </button>
+            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="${dropdownId}">
+                ${menuItemsHtml}
+            </ul>
+        `;
+  }
+  /**
+   * Build the HTML for a single menu item.
+   * @param {object} item - The menu item configuration.
+   * @returns {string} The HTML string for the list item.
+   */
+  buildMenuItemHTML(item) {
+    if (item.type === "divider" || item.separator) {
+      return '<li><hr class="dropdown-divider"></li>';
+    }
+    const icon = item.icon ? `<i class="${item.icon} me-2"></i>` : "";
+    const label = item.label || "";
+    const itemClass = `dropdown-item ${item.danger ? "text-danger" : ""} ${item.disabled ? "disabled" : ""}`;
+    const action = item.action || "";
+    if (item.href) {
+      return `<li><a class="${itemClass}" href="${item.href}" target="${item.target || "_self"}">${icon}${label}</a></li>`;
+    }
+    return `<li><a class="${itemClass}" href="#" data-action="menu-item-click" data-item-action="${action}">${icon}${label}</a></li>`;
+  }
+  /**
+   * Handle clicks on menu items.
+   * @param {Event} event - The click event.
+   * @param {HTMLElement} element - The clicked anchor element.
+   */
+  async onActionMenuItemClick(event, element) {
+    event.preventDefault();
+    const action = element.getAttribute("data-item-action");
+    if (!action) return;
+    const menuItem = this.config.items.find((item) => item.action === action);
+    if (!menuItem || menuItem.disabled) return;
+    if (typeof menuItem.handler === "function") {
+      menuItem.handler(this.context, event, element);
+    } else {
+      this.parent.events.dispatch(action, event, element);
+    }
+    this.closeDropdown();
+  }
+  closeDropdown() {
+    const dropdownTrigger = this.element.querySelector('[data-bs-toggle="dropdown"]');
+    if (dropdownTrigger) {
+      const dropdownInstance = window.bootstrap?.Dropdown.getInstance(dropdownTrigger);
+      dropdownInstance?.hide();
+    }
+  }
+}
+export {
+  ContextMenu as C,
+  GroupList as G,
+  ToastService as T,
+  User as U,
+  Group as a,
+  GroupForms as b,
+  UserList as c,
+  UserForms as d,
+  UserDataView as e,
+  UserDevice as f,
+  UserDeviceList as g,
+  UserDeviceLocation as h,
+  UserDeviceLocationList as i,
+  Group$1 as j
+};
+//# sourceMappingURL=ContextMenu-By2g3KYY.js.map