web-mojo 2.2.65 → 2.2.67

package/dist/web-mojo.lite.iife.js

@@ -983,6 +983,10 @@ var MOJO = (function(exports) {
       try {
         const response = await fetch(request.url, fetchOptions);
         const responseData = await this.processResponseInterceptors(response, request);
+        if (options.dataOnly && responseData.data && typeof responseData.data === "object" && "data" in responseData.data) {
+          responseData.message = responseData.message || responseData.data.message;
+          responseData.data = responseData.data.data;
+        }
         return responseData;
       } catch (error) {
         if (error.name === "AbortError") {
@@ -7480,7 +7484,7 @@ var MOJO = (function(exports) {
         </div>
       `,
         image: `
-        <div class="mojo-form-control">
+        <div class="mojo-form-control" style="display: flex; flex-direction: column; align-items: center;">
           {{#label}}
           <label for="{{fieldId}}" class="{{labelClass}}">
             {{label}}{{#required}}<span class="text-danger">*</span>{{/required}}
@@ -13864,7 +13868,7 @@ var MOJO = (function(exports) {
       console.log("FormView: initializeChangeHandlers - found", inputs.length, "inputs");
       inputs.forEach((input) => {
         console.log("FormView: Processing input:", input.type, input.name, input.getAttribute("data-change-action"));
-        if (input.hasAttribute("data-component") || input.classList.contains("form-check-input")) {
+        if (input.hasAttribute("data-component") || input.hasAttribute("data-change-action") || input.classList.contains("form-check-input")) {
           return;
         }
         input.addEventListener("change", (event) => {
@@ -17312,6 +17316,56 @@ var MOJO = (function(exports) {
         });
       });
     }
+    /**
+     * Show form in a dialog for simple data collection (no model saving)
+     * @param {object} options - Configuration options
+     * @returns {Promise} Promise that resolves with form data or null if cancelled
+     */
+    static async updateModelImage(options = {}, fieldOptions = {}) {
+      const upload = options.upload || false;
+      const fieldName = fieldOptions.name || options.field || "image";
+      const formOptions = {
+        title: "Upload Your Avatar",
+        model: null,
+        autoSave: !upload,
+        size: "sm",
+        fields: [
+          {
+            type: "image",
+            name: fieldName,
+            size: "lg",
+            imageSize: { width: 200, height: 200 },
+            placeholder: "Upload your image",
+            ...fieldOptions
+          }
+        ],
+        ...options
+      };
+      const result = await Dialog2.showForm(formOptions);
+      if (!upload || !result || !options.model) return result;
+      const base64Data = result[fieldName];
+      if (!base64Data || !base64Data.startsWith("data:")) return result;
+      const arr = base64Data.split(",");
+      const mime = arr[0].match(/:(.*?);/)[1];
+      const bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      const ext = mime.split("/")[1] || "png";
+      const file = new window.File([u8arr], `${fieldName}.${ext}`, { type: mime });
+      const { File: FileModel } = await Promise.resolve().then(() => Files);
+      const fileModel = new FileModel();
+      await fileModel.upload({
+        file,
+        name: `${fieldName}.${ext}`,
+        description: options.uploadDescription || `${fieldName} upload`,
+        showToast: true
+      });
+      const resp = await options.model.save({ [fieldName]: fileModel.id });
+      return resp;
+    }
     static async showModelView(model, options) {
       const modelClass = model.constructor;
       const modelView = modelClass.VIEW_CLASS;
@@ -20967,6 +21021,1180 @@ var MOJO = (function(exports) {
   if (MOJO2) {
     attachLite(MOJO2);
   }
+  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: true,
+        // 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 FileUpload {
+    constructor(fileModel, options = {}) {
+      this.fileModel = fileModel;
+      this.options = {
+        file: null,
+        name: null,
+        group: null,
+        description: null,
+        onProgress: null,
+        onComplete: null,
+        onError: null,
+        showToast: true,
+        ...options
+      };
+      if (!this.options.file || !(this.options.file instanceof File)) {
+        throw new Error("FileUpload requires a valid File object");
+      }
+      this.cancelled = false;
+      this.uploadRequest = null;
+      this.progressToast = null;
+      this.progressView = null;
+      this.toastService = null;
+      if (this.options.showToast) {
+        this.toastService = new ToastService();
+      }
+      this.promise = this._startUpload();
+    }
+    /**
+     * Main upload orchestration
+     * @returns {Promise} Upload promise
+     * @private
+     */
+    async _startUpload() {
+      try {
+        if (this.options.showToast) {
+          this._showProgressToast();
+        }
+        let uploadData;
+        try {
+          uploadData = await this._initiateUpload();
+        } catch (error) {
+          throw new Error(`Failed to initiate upload: ${error.message}`);
+        }
+        if (this.cancelled) {
+          throw new Error("Upload cancelled");
+        }
+        if (!uploadData || !uploadData.upload_url) {
+          throw new Error("Invalid upload response: missing upload URL");
+        }
+        let uploadConfig;
+        if (typeof uploadData.upload_url === "string") {
+          uploadConfig = {
+            url: uploadData.upload_url,
+            method: "PUT",
+            fields: null,
+            headers: {}
+          };
+        } else if (uploadData.upload_url && typeof uploadData.upload_url === "object" && uploadData.upload_url.upload_url) {
+          uploadConfig = {
+            url: uploadData.upload_url.upload_url,
+            method: uploadData.upload_url.method || "POST",
+            fields: uploadData.upload_url.fields || null,
+            headers: uploadData.upload_url.headers || {}
+          };
+        } else {
+          throw new Error(
+            `Invalid upload response: unrecognised upload_url format. Server returned: ${JSON.stringify(uploadData.upload_url)}`
+          );
+        }
+        let result;
+        try {
+          result = await this._performUpload(uploadConfig);
+        } catch (error) {
+          throw new Error(`File upload failed: ${error.message}`);
+        }
+        if (this.cancelled) {
+          throw new Error("Upload cancelled");
+        }
+        try {
+          await this._completeUpload();
+        } catch (error) {
+          console.warn("Failed to mark upload as completed:", error);
+        }
+        this._onComplete(this.fileModel);
+        return this.fileModel;
+      } catch (error) {
+        if (error.message !== "Upload cancelled") {
+          this._onError(error);
+        }
+        throw error;
+      }
+    }
+    /**
+     * Initiate upload by calling the API to get signed URL
+     * @returns {Promise<Object>} Upload initiation data
+     * @private
+     */
+    async _initiateUpload() {
+      try {
+        const payload = {
+          filename: this.options.name || this.options.file.name,
+          file_size: this.options.file.size,
+          content_type: this.options.file.type
+        };
+        if (this.options.group) payload.group = this.options.group;
+        if (this.options.description) payload.description = this.options.description;
+        const response = await this.fileModel.rest.POST("/api/fileman/upload/initiate", payload);
+        if (!response) {
+          throw new Error("No response from upload initiation API");
+        }
+        if (!response.data) {
+          throw new Error("Upload initiation response missing data");
+        }
+        if (!response.data.status) {
+          const errorMessage = response.data.error || "Upload initiation failed";
+          throw new Error(errorMessage);
+        }
+        if (!response.data.data) {
+          throw new Error("Upload initiation response missing data payload");
+        }
+        if (response.data.data.id) {
+          this.fileModel.set("id", response.data.data.id);
+        }
+        return response.data.data;
+      } catch (error) {
+        if (error.message === "Network Error" || error.name === "TypeError") {
+          throw new Error("Network error during upload initiation. Please check your connection.");
+        }
+        throw error;
+      }
+    }
+    /**
+     * Upload file using the normalised upload config from _startUpload.
+     *
+     * Two dispatch paths:
+     *  - PUT  + raw bytes  → legacy plain-string upload_url, or any config with method PUT.
+     *                        Used by backends that issue a direct signed PUT URL (e.g. S3 signed URL).
+     *  - POST + FormData   → config object with method POST and optional fields dict.
+     *                        Used by the local filesystem backend and S3 presigned POST.
+     *                        fields are appended first, then the file as the "file" key,
+     *                        matching Django's request.FILES['file'] convention.
+     *                        Content-Type is intentionally NOT set manually so the browser
+     *                        can write the correct multipart boundary.
+     *
+     * @param {{ url: string, method: string, fields: object|null, headers: object }} uploadConfig
+     * @returns {Promise} Upload result
+     * @private
+     */
+    async _performUpload(uploadConfig) {
+      return new Promise((resolve, reject) => {
+        if (!(this.options.file instanceof File)) {
+          reject(new Error("Only single File objects are supported"));
+          return;
+        }
+        const { url, method, fields, headers } = uploadConfig;
+        const useFormData = method === "POST" && fields !== null;
+        const xhr = new XMLHttpRequest();
+        this.uploadRequest = xhr;
+        xhr.upload.onprogress = (event) => {
+          if (this.cancelled) return;
+          this._onProgress({
+            progress: event.loaded / event.total,
+            loaded: event.loaded,
+            total: event.total,
+            percentage: Math.round(event.loaded / event.total * 100)
+          });
+        };
+        xhr.onload = () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            resolve({ data: xhr.response, status: xhr.status, statusText: xhr.statusText, xhr });
+          } else {
+            reject(new Error(`Upload failed: ${xhr.status} ${xhr.statusText}`));
+          }
+        };
+        xhr.onerror = () => reject(new Error("Upload failed: Network error"));
+        xhr.ontimeout = () => reject(new Error("Upload timed out — file may be too large or connection too slow"));
+        xhr.onabort = () => reject(new Error("Upload cancelled"));
+        let apiUrl = url;
+        if (url.startsWith("/") && !url.startsWith("/api/")) {
+          apiUrl = "/api" + url;
+        }
+        const resolvedUrl = this.fileModel.rest.buildUrl(apiUrl);
+        xhr.open(method, resolvedUrl);
+        xhr.timeout = 3e4;
+        if (useFormData) {
+          for (const [key, value] of Object.entries(headers || {})) {
+            if (key.toLowerCase() !== "content-type") {
+              xhr.setRequestHeader(key, value);
+            }
+          }
+          const formData = new FormData();
+          for (const [key, value] of Object.entries(fields)) {
+            formData.append(key, value);
+          }
+          formData.append("file", this.options.file);
+          xhr.send(formData);
+        } else {
+          xhr.setRequestHeader("Content-Type", this.options.file.type);
+          for (const [key, value] of Object.entries(headers || {})) {
+            if (key.toLowerCase() !== "content-type") {
+              xhr.setRequestHeader(key, value);
+            }
+          }
+          xhr.send(this.options.file);
+        }
+      });
+    }
+    /**
+     * Mark upload as completed in the API
+     * @returns {Promise} Completion result
+     * @private
+     */
+    async _completeUpload() {
+      try {
+        const response = await this.fileModel.save({ action: "mark_as_completed" });
+        if (!response) {
+          throw new Error("No response from upload completion API");
+        }
+        if (response.data && !response.data.status) {
+          const errorMessage = response.data.error || "Failed to mark upload as completed";
+          throw new Error(errorMessage);
+        }
+        return response;
+      } catch (error) {
+        if (error.message === "Network Error" || error.name === "TypeError") {
+          throw new Error("Network error during upload completion. The file may have uploaded successfully.");
+        }
+        throw error;
+      }
+    }
+    /**
+     * Handle progress updates
+     * @param {Object} progressInfo - Progress information
+     * @private
+     */
+    _onProgress(progressInfo) {
+      if (this.progressToast && this.progressToast.updateProgress) {
+        this.progressToast.updateProgress(progressInfo);
+      }
+      if (typeof this.options.onProgress === "function") {
+        this.options.onProgress(progressInfo);
+      }
+    }
+    /**
+     * Handle successful upload completion
+     * @param {Object} result - Upload result
+     * @private
+     */
+    _onComplete(result) {
+      if (this.progressView) {
+        this.progressView.markCompleted("Upload completed successfully!");
+      }
+      if (this.progressToast) {
+        setTimeout(() => {
+          try {
+            if (this.progressToast && typeof this.progressToast.hide === "function") {
+              this.progressToast.hide();
+            }
+          } catch (error) {
+            console.warn("Error hiding progress toast:", error);
+          }
+        }, 2e3);
+      }
+      if (typeof this.options.onComplete === "function") {
+        this.options.onComplete(result);
+      }
+    }
+    /**
+     * Handle upload errors
+     * @param {Error} error - Error object
+     * @private
+     */
+    _onError(error) {
+      if (this.progressToast) {
+        try {
+          this.progressToast.hide();
+        } catch (error2) {
+          console.warn("Error hiding progress toast on error:", error2);
+        }
+      }
+      if (this.toastService) {
+        this.toastService.error(`Upload failed: ${error.message}`);
+      }
+      if (typeof this.options.onError === "function") {
+        this.options.onError(error);
+      }
+    }
+    /**
+     * Show progress toast with ProgressView component
+     * @private
+     */
+    _showProgressToast() {
+      this.progressView = new ProgressView({
+        filename: this.options.name || this.options.file.name,
+        filesize: this.options.file.size,
+        showCancel: true,
+        onCancel: () => this.cancel()
+      });
+      this.progressToast = this.toastService.showView(this.progressView, "info", {
+        title: "File Upload",
+        autohide: false,
+        dismissible: false
+      });
+    }
+    /**
+     * Cancel the upload
+     * @returns {boolean} True if cancelled, false if already completed
+     */
+    cancel() {
+      if (this.cancelled) {
+        return false;
+      }
+      this.cancelled = true;
+      if (this.uploadRequest && typeof this.uploadRequest.abort === "function") {
+        this.uploadRequest.abort();
+      }
+      if (this.progressView) {
+        this.progressView.markCancelled();
+      }
+      if (this.progressToast) {
+        setTimeout(() => {
+          try {
+            if (this.progressToast && typeof this.progressToast.hide === "function") {
+              this.progressToast.hide();
+            }
+          } catch (error) {
+            console.warn("Error hiding progress toast on cancel:", error);
+          }
+        }, 1500);
+      }
+      return true;
+    }
+    /**
+     * Check if upload is cancelled
+     * @returns {boolean} True if cancelled
+     */
+    isCancelled() {
+      return this.cancelled;
+    }
+    /**
+     * Promise interface - then
+     * @param {function} onSuccess - Success handler
+     * @param {function} onError - Error handler
+     * @returns {Promise} Promise chain
+     */
+    then(onSuccess, onError) {
+      return this.promise.then(onSuccess, onError);
+    }
+    /**
+     * Promise interface - catch
+     * @param {function} onError - Error handler
+     * @returns {Promise} Promise chain
+     */
+    catch(onError) {
+      return this.promise.catch(onError);
+    }
+    /**
+     * Promise interface - finally
+     * @param {function} onFinally - Finally handler
+     * @returns {Promise} Promise chain
+     */
+    finally(onFinally) {
+      return this.promise.finally(onFinally);
+    }
+    /**
+     * Get upload statistics
+     * @returns {Object} Upload stats
+     */
+    getStats() {
+      return {
+        filename: this.options.file.name,
+        size: this.options.file.size,
+        type: this.options.file.type,
+        cancelled: this.cancelled,
+        group: this.options.group,
+        description: this.options.description
+      };
+    }
+  }
+  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
+        }
+      ]
+    }
+  };
+  Group.EDIT_FORM = GroupForms.edit;
+  Group.ADD_FORM = GroupForms.create;
+  Group.CREATE_FORM = GroupForms.create;
+  Group.GroupKindOptions = GroupKindOptions;
+  Group.GroupKinds = GroupKinds;
+  class User extends Model {
+    constructor(data = {}) {
+      super(data, {
+        endpoint: "/api/user"
+      });
+    }
+    hasPermission(permission) {
+      if (this.get("is_superuser")) return true;
+      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);
+    }
+  }
+  User.PERMISSIONS = [
+    { name: "manage_users", label: "Manage Users" },
+    { name: "view_users", label: "View 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: {
+      fields: User.PERMISSION_FIELDS
+    }
+  };
+  const UserDataView = {
+    // 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
+        }
+      ]
+    }
+  };
+  User.DATA_VIEW = UserDataView.detailed;
+  User.EDIT_FORM = UserForms.edit;
+  User.ADD_FORM = UserForms.create;
+  let File$1 = class File extends Model {
+    constructor(data = {}) {
+      super(data, {
+        endpoint: "/api/fileman/file"
+      });
+    }
+    isImage() {
+      return this.get("category") === "image";
+    }
+    /**
+     * Upload file with progress tracking and UI integration
+     * Returns a FileUpload instance with promise interface and cancellation support
+     *
+     * @param {object} options - Upload configuration
+     * @param {File} options.file - File object to upload
+     * @param {string} options.name - Custom filename (optional)
+     * @param {string} options.group - File group/category (optional)
+     * @param {string} options.description - File description (optional)
+     * @param {function} options.onProgress - Progress callback ({ progress, loaded, total, percentage })
+     * @param {function} options.onComplete - Success callback
+     * @param {function} options.onError - Error callback
+     * @param {boolean} options.showToast - Show progress toast (default: true)
+     * @returns {FileUpload} Upload instance with promise interface
+     */
+    upload(options = {}) {
+      return new FileUpload(this, options);
+    }
+  };
+  const Files = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    File: File$1
+  }, Symbol.toStringTag, { value: "Module" }));
   class DataView extends View {
     constructor(options = {}) {
       const {