@vention/machine-apps-components 0.0.0-dev.4527.a3d343ca7

package/index.esm.js

@@ -0,0 +1,3658 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useState, useEffect, useCallback, useContext, useMemo, memo, useRef, forwardRef, useImperativeHandle } from 'react';
+import i18n from 'i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import { Box, useTheme, Typography, Button, InputAdornment, IconButton, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody, List, ListItem, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
+import { VentionSelect, VentionModalBase, VentionIcon, VentionTextInput, COLORS, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionDropZone, VentionUploadFile, VentionIconButton } from '@vention/machine-ui';
+import { tss } from 'tss-react/mui';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+const I18nContext = createContext(undefined);
+
+var enTranslations = {
+  common: {
+    units: {
+      mm: "mm",
+      in: "in",
+      metric: "Metric",
+      imperial: "Imperial"
+    },
+    settings: {
+      unitSystem: "Unit System",
+      timezone: "Timezone",
+      autoDetect: "Auto-detect",
+      locale: "Language"
+    }
+  },
+  actionButton: {
+    home: "Home",
+    start: "Start",
+    stop: "Stop",
+    pause: "Pause",
+    reset: "Reset",
+    clear: "Clear",
+    run: "Run",
+    resume: "Resume"
+  },
+  logs: {
+    table: {
+      date: "Date",
+      type: "Type",
+      code: "Code",
+      message: "Message",
+      description: "Description"
+    },
+    type: {
+      error: "Error",
+      warning: "Warning",
+      info: "Info"
+    },
+    emptyState: {
+      noLogs: "You have no logs"
+    },
+    loading: "Loading logs...",
+    loadingMore: "Loading more logs...",
+    noMoreLogs: "No more logs to load",
+    error: {
+      loading: "Error loading logs"
+    },
+    filter: {
+      from: "From",
+      to: "To",
+      type: "Type",
+      sort: "Sort",
+      reset: "Reset",
+      typeOptions: {
+        all: "All",
+        error: "Error",
+        warning: "Warning",
+        info: "Info"
+      },
+      sortOptions: {
+        latest: "From latest",
+        oldest: "From oldest"
+      },
+      chooseType: "Choose type"
+    }
+  },
+  navigation: {
+    pages: {
+      home: "Home",
+      operation: "Operation",
+      logs: "Logs",
+      calibration: "Calibration",
+      settings: "Settings"
+    },
+    bar: {
+      controlCenter: "Control Center",
+      support: "Support"
+    },
+    modal: {
+      exit: {
+        title: "You are about to exit the application",
+        message: "Please make sure your changes are saved before you leave the app."
+      },
+      goToControlCenter: "Go to Control Center",
+      goToRemoteSupport: "Go to Remote Support",
+      password: {
+        title: "Administrator login required",
+        label: "Password",
+        error: "Incorrect password",
+        confirm: "Confirm"
+      }
+    }
+  },
+  pagination: {
+    page: "Page",
+    of: "of"
+  },
+  fileUploadPanel: {
+    defaultTitle: "Upload Files",
+    dropzoneTitle: "Drop files here or click to browse",
+    defaultFileCriteria: "All file types accepted"
+  },
+  stepProgressCircle: {
+    title: {
+      progress: "Progress",
+      manufacturing: "Manufacturing",
+      processing: "Processing",
+      uploading: "Uploading",
+      notstarted: "Not Started",
+      ready: "Ready",
+      inprogress: "In Progress",
+      complete: "Complete",
+      loading: "Loading",
+      waiting: "Waiting",
+      warning: "Warning",
+      error: "Error"
+    }
+  },
+  productFormList: {
+    add: "Add",
+    cancel: "Cancel",
+    save: "Save",
+    create: "Create",
+    modify: "Edit",
+    new: "New",
+    delete: "Delete",
+    deleteConfirmation: "Are you sure you want to delete this item?",
+    emptyState: "No items yet. Click Add to create one."
+  }
+};
+
+var frTranslations = {
+  common: {
+    units: {
+      mm: "mm",
+      in: "po",
+      metric: "Métrique",
+      imperial: "Impérial"
+    },
+    settings: {
+      unitSystem: "Système d'unités",
+      timezone: "Fuseau horaire",
+      autoDetect: "Détection automatique",
+      locale: "Langue"
+    }
+  },
+  actionButton: {
+    home: "Origine",
+    start: "Démarrer",
+    stop: "Arrêter",
+    pause: "Pause",
+    reset: "Réinitialiser",
+    clear: "Effacer",
+    run: "Exécuter",
+    resume: "Reprendre"
+  },
+  logs: {
+    table: {
+      date: "Date",
+      type: "Type",
+      code: "Code",
+      message: "Message",
+      description: "Description"
+    },
+    type: {
+      error: "Erreur",
+      warning: "Avertissement",
+      info: "Information"
+    },
+    emptyState: {
+      noLogs: "Vous n'avez aucun journal"
+    },
+    loading: "Chargement des journaux...",
+    loadingMore: "Chargement de plus de journaux...",
+    noMoreLogs: "Aucun autre journal à charger",
+    error: {
+      loading: "Erreur lors du chargement des journaux"
+    },
+    filter: {
+      from: "De",
+      to: "À",
+      type: "Type",
+      sort: "Trier",
+      reset: "Réinitialiser",
+      typeOptions: {
+        all: "Tous",
+        error: "Erreur",
+        warning: "Avertissement",
+        info: "Information"
+      },
+      sortOptions: {
+        latest: "Du plus récent",
+        oldest: "Du plus ancien"
+      },
+      chooseType: "Choisir le type"
+    }
+  },
+  navigation: {
+    pages: {
+      home: "Accueil",
+      operation: "Opération",
+      logs: "Journaux",
+      calibration: "Calibration",
+      settings: "Paramètres"
+    },
+    bar: {
+      controlCenter: "Centre de contrôle",
+      support: "Support"
+    },
+    modal: {
+      exit: {
+        title: "Vous êtes sur le point de quitter l'application",
+        message: "Veuillez vous assurer que vos modifications sont enregistrées avant de quitter l'application."
+      },
+      goToControlCenter: "Aller au Centre de contrôle",
+      goToRemoteSupport: "Aller au Support à distance",
+      password: {
+        title: "Connexion administrateur requise",
+        label: "Mot de passe",
+        error: "Mot de passe incorrect",
+        confirm: "Confirmer"
+      }
+    }
+  },
+  pagination: {
+    page: "Page",
+    of: "sur"
+  },
+  fileUploadPanel: {
+    defaultTitle: "Téléverser des fichiers",
+    dropzoneTitle: "Déposez les fichiers ici ou cliquez pour parcourir",
+    defaultFileCriteria: "Tous les types de fichiers acceptés"
+  },
+  stepProgressCircle: {
+    title: {
+      progress: "Progression",
+      manufacturing: "Fabrication",
+      processing: "Traitement",
+      uploading: "Téléversement",
+      notstarted: "Non démarré",
+      ready: "Prêt",
+      inprogress: "En cours",
+      complete: "Terminé",
+      loading: "Chargement",
+      waiting: "En attente",
+      warning: "Avertissement",
+      error: "Erreur"
+    }
+  },
+  productFormList: {
+    add: "Ajouter",
+    cancel: "Annuler",
+    save: "Sauvegarder",
+    create: "Créer",
+    modify: "Modifier",
+    new: "Nouveau",
+    delete: "Supprimer",
+    deleteConfirmation: "Êtes-vous sûr de vouloir supprimer cet élément?",
+    emptyState: "Aucun élément. Cliquez sur Ajouter pour en créer un."
+  }
+};
+
+var deTranslations = {
+  common: {
+    units: {
+      mm: "mm",
+      in: "Zoll",
+      metric: "Metrisch",
+      imperial: "Imperial"
+    },
+    settings: {
+      unitSystem: "Einheitensystem",
+      timezone: "Zeitzone",
+      autoDetect: "Automatisch erkennen",
+      locale: "Sprache"
+    }
+  },
+  actionButton: {
+    home: "Referenzfahrt",
+    start: "Starten",
+    stop: "Stoppen",
+    pause: "Pause",
+    reset: "Zurücksetzen",
+    clear: "Löschen",
+    run: "Ausführen",
+    resume: "Fortsetzen"
+  },
+  logs: {
+    table: {
+      date: "Datum",
+      type: "Typ",
+      code: "Code",
+      message: "Nachricht",
+      description: "Beschreibung"
+    },
+    type: {
+      error: "Fehler",
+      warning: "Warnung",
+      info: "Information"
+    },
+    emptyState: {
+      noLogs: "Sie haben keine Protokolle"
+    },
+    loading: "Protokolle werden geladen...",
+    loadingMore: "Weitere Protokolle werden geladen...",
+    noMoreLogs: "Keine weiteren Protokolle zum Laden",
+    error: {
+      loading: "Fehler beim Laden der Protokolle"
+    },
+    filter: {
+      from: "Von",
+      to: "Bis",
+      type: "Typ",
+      sort: "Sortieren",
+      reset: "Zurücksetzen",
+      typeOptions: {
+        all: "Alle",
+        error: "Fehler",
+        warning: "Warnung",
+        info: "Information"
+      },
+      sortOptions: {
+        latest: "Neueste zuerst",
+        oldest: "Älteste zuerst"
+      },
+      chooseType: "Typ auswählen"
+    }
+  },
+  navigation: {
+    pages: {
+      home: "Startseite",
+      operation: "Betrieb",
+      logs: "Protokolle",
+      calibration: "Kalibrierung",
+      settings: "Einstellungen"
+    },
+    bar: {
+      controlCenter: "Kontrollzentrum",
+      support: "Support"
+    },
+    modal: {
+      exit: {
+        title: "Sie sind dabei, die Anwendung zu verlassen",
+        message: "Bitte stellen Sie sicher, dass Ihre Änderungen gespeichert sind, bevor Sie die App verlassen."
+      },
+      goToControlCenter: "Zum Kontrollzentrum gehen",
+      goToRemoteSupport: "Zum Remote-Support gehen",
+      password: {
+        title: "Administrator-Anmeldung erforderlich",
+        label: "Passwort",
+        error: "Falsches Passwort",
+        confirm: "Bestätigen"
+      }
+    }
+  },
+  pagination: {
+    page: "Seite",
+    of: "von"
+  },
+  fileUploadPanel: {
+    defaultTitle: "Dateien hochladen",
+    dropzoneTitle: "Dateien hier ablegen oder klicken zum Durchsuchen",
+    defaultFileCriteria: "Alle Dateitypen akzeptiert"
+  },
+  stepProgressCircle: {
+    title: {
+      progress: "Fortschritt",
+      manufacturing: "Fertigung",
+      processing: "Verarbeitung",
+      uploading: "Hochladen",
+      notstarted: "Nicht gestartet",
+      ready: "Bereit",
+      inprogress: "In Bearbeitung",
+      complete: "Abgeschlossen",
+      loading: "Laden",
+      waiting: "Warten",
+      warning: "Warnung",
+      error: "Fehler"
+    }
+  },
+  productFormList: {
+    add: "Hinzufügen",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    create: "Erstellen",
+    modify: "Bearbeiten",
+    new: "Neu",
+    delete: "Löschen",
+    deleteConfirmation: "Sind Sie sicher, dass Sie dieses Element löschen möchten?",
+    emptyState: "Noch keine Elemente. Klicken Sie auf Hinzufügen, um eines zu erstellen."
+  }
+};
+
+var esTranslations = {
+  common: {
+    units: {
+      mm: "mm",
+      in: "pulg",
+      metric: "Métrico",
+      imperial: "Imperial"
+    },
+    settings: {
+      unitSystem: "Sistema de unidades",
+      timezone: "Zona horaria",
+      autoDetect: "Detección automática",
+      locale: "Idioma"
+    }
+  },
+  actionButton: {
+    home: "Origen",
+    start: "Iniciar",
+    stop: "Detener",
+    pause: "Pausar",
+    reset: "Restablecer",
+    clear: "Limpiar",
+    run: "Ejecutar",
+    resume: "Reanudar"
+  },
+  logs: {
+    table: {
+      date: "Fecha",
+      type: "Tipo",
+      code: "Código",
+      message: "Mensaje",
+      description: "Descripción"
+    },
+    type: {
+      error: "Error",
+      warning: "Advertencia",
+      info: "Información"
+    },
+    emptyState: {
+      noLogs: "No tienes registros"
+    },
+    loading: "Cargando registros...",
+    loadingMore: "Cargando más registros...",
+    noMoreLogs: "No hay más registros para cargar",
+    error: {
+      loading: "Error al cargar los registros"
+    },
+    filter: {
+      from: "Desde",
+      to: "Hasta",
+      type: "Tipo",
+      sort: "Ordenar",
+      reset: "Restablecer",
+      typeOptions: {
+        all: "Todos",
+        error: "Error",
+        warning: "Advertencia",
+        info: "Información"
+      },
+      sortOptions: {
+        latest: "Más recientes",
+        oldest: "Más antiguos"
+      },
+      chooseType: "Elegir tipo"
+    }
+  },
+  navigation: {
+    pages: {
+      home: "Inicio",
+      operation: "Operación",
+      logs: "Registros",
+      calibration: "Calibración",
+      settings: "Ajustes"
+    },
+    bar: {
+      controlCenter: "Centro de control",
+      support: "Soporte"
+    },
+    modal: {
+      exit: {
+        title: "Estás a punto de salir de la aplicación",
+        message: "Por favor, asegúrate de que tus cambios estén guardados antes de salir de la aplicación."
+      },
+      goToControlCenter: "Ir al Centro de control",
+      goToRemoteSupport: "Ir al Soporte remoto",
+      password: {
+        title: "Se requiere inicio de sesión de administrador",
+        label: "Contraseña",
+        error: "Contraseña incorrecta",
+        confirm: "Confirmar"
+      }
+    }
+  },
+  pagination: {
+    page: "Página",
+    of: "de"
+  },
+  fileUploadPanel: {
+    defaultTitle: "Subir archivos",
+    dropzoneTitle: "Suelta los archivos aquí o haz clic para explorar",
+    defaultFileCriteria: "Se aceptan todos los tipos de archivos"
+  },
+  stepProgressCircle: {
+    title: {
+      progress: "Progreso",
+      manufacturing: "Fabricación",
+      processing: "Procesamiento",
+      uploading: "Subiendo",
+      notstarted: "No iniciado",
+      ready: "Listo",
+      inprogress: "En progreso",
+      complete: "Completo",
+      loading: "Cargando",
+      waiting: "Esperando",
+      warning: "Advertencia",
+      error: "Error"
+    }
+  },
+  productFormList: {
+    add: "Agregar",
+    cancel: "Cancelar",
+    save: "Guardar",
+    create: "Crear",
+    modify: "Editar",
+    new: "Nuevo",
+    delete: "Eliminar",
+    deleteConfirmation: "¿Está seguro de que desea eliminar este elemento?",
+    emptyState: "Aún no hay elementos. Haz clic en Agregar para crear uno."
+  }
+};
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+if (!i18n.isInitialized) {
+  const getStoredTimezone = function getStoredTimezone() {
+    if (typeof window === "undefined") return "auto";
+    try {
+      const stored = localStorage.getItem("machine-apps-components:timezone");
+      return stored || "auto";
+    } catch (_a) {
+      return "auto";
+    }
+  };
+  const initialTimezone = getStoredTimezone();
+  if (initialTimezone !== "auto" && typeof window !== "undefined") {
+    try {
+      dayjs.tz.setDefault(initialTimezone);
+    } catch (error) {
+      console.warn("i18n: Failed to set default timezone", error);
+    }
+  }
+  i18n.use(LanguageDetector).use(initReactI18next).init({
+    resources: {
+      en: {
+        translation: enTranslations
+      },
+      fr: {
+        translation: frTranslations
+      },
+      de: {
+        translation: deTranslations
+      },
+      es: {
+        translation: esTranslations
+      }
+    },
+    fallbackLng: "en",
+    defaultNS: "translation",
+    interpolation: {
+      escapeValue: false
+    },
+    detection: {
+      order: ["localStorage", "navigator"],
+      lookupLocalStorage: "machine-apps-components:locale",
+      caches: ["localStorage"]
+    }
+  });
+  i18n.on("languageChanged", function handleLanguageChanged(lng) {
+    const dayjsLocale = lng.split("-")[0];
+    try {
+      dayjs.locale(dayjsLocale);
+    } catch (error) {
+      console.warn("i18n: Failed to set dayjs locale", error);
+    }
+  });
+}
+const getSupportedLanguages = function getSupportedLanguages() {
+  try {
+    if (!i18n.isInitialized) {
+      return ["en", "fr", "de", "es"];
+    }
+    const resources = i18n.options.resources || {};
+    const languages = Object.keys(resources);
+    return languages.length > 0 ? languages : ["en", "fr", "de", "es"];
+  } catch (error) {
+    console.warn("Error getting supported languages:", error);
+    return ["en", "fr", "de", "es"];
+  }
+};
+const getLanguageDisplayName = function getLanguageDisplayName(code) {
+  const languageNames = {
+    en: "English",
+    fr: "Français",
+    es: "Español",
+    de: "Deutsch"
+  };
+  return languageNames[code] || code.toUpperCase();
+};
+
+const STORAGE_KEYS = {
+  locale: "machine-apps-components:locale",
+  unitSystem: "machine-apps-components:unitSystem",
+  timezone: "machine-apps-components:timezone"
+};
+const normalizeLocale = function normalizeLocale(locale, supportedLanguages) {
+  const normalized = locale.split("-")[0].toLowerCase();
+  if (supportedLanguages.includes(normalized)) {
+    return normalized;
+  }
+  return supportedLanguages.length > 0 ? supportedLanguages[0] : "en";
+};
+const I18nProvider = function I18nProvider({
+  children,
+  defaultLocale = "en",
+  defaultUnitSystem = "metric",
+  defaultTimezone = "auto",
+  supportedLanguages = ["en", "fr", "de", "es"]
+}) {
+  const [locale, setLocaleState] = useState(function getInitialLocale() {
+    if (typeof window === "undefined") return normalizeLocale(defaultLocale, supportedLanguages);
+    try {
+      const stored = localStorage.getItem(STORAGE_KEYS.locale);
+      if (stored) {
+        return normalizeLocale(stored, supportedLanguages);
+      }
+      return normalizeLocale(defaultLocale, supportedLanguages);
+    } catch (_a) {
+      return normalizeLocale(defaultLocale, supportedLanguages);
+    }
+  });
+  const [unitSystem, setUnitSystemState] = useState(function getInitialUnitSystem() {
+    if (typeof window === "undefined") return defaultUnitSystem;
+    try {
+      const stored = localStorage.getItem(STORAGE_KEYS.unitSystem);
+      if (stored === "metric" || stored === "imperial") {
+        return stored;
+      }
+      return defaultUnitSystem;
+    } catch (_a) {
+      return defaultUnitSystem;
+    }
+  });
+  const [timezone, setTimezoneState] = useState(function getInitialTimezone() {
+    if (typeof window === "undefined") return defaultTimezone;
+    try {
+      const stored = localStorage.getItem(STORAGE_KEYS.timezone);
+      return stored || defaultTimezone;
+    } catch (_a) {
+      return defaultTimezone;
+    }
+  });
+  useEffect(function syncI18nLocale() {
+    const normalizedLocale = normalizeLocale(locale, supportedLanguages);
+    i18n.changeLanguage(normalizedLocale);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEYS.locale, normalizedLocale);
+    }
+  }, [locale, supportedLanguages]);
+  useEffect(function persistUnitSystem() {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEYS.unitSystem, unitSystem);
+    }
+  }, [unitSystem]);
+  useEffect(function syncDayjsTimezone() {
+    if (typeof window === "undefined") return;
+    localStorage.setItem(STORAGE_KEYS.timezone, timezone);
+    try {
+      const dayjsWithTz = dayjs;
+      if (dayjsWithTz.tz && typeof dayjsWithTz.tz.setDefault === "function") {
+        if (timezone !== "auto") {
+          dayjsWithTz.tz.setDefault(timezone);
+        } else {
+          const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
+          dayjsWithTz.tz.setDefault(detected);
+        }
+      }
+    } catch (error) {
+      console.warn("Failed to set timezone:", error);
+    }
+  }, [timezone]);
+  const setLocale = useCallback(function setLocale(newLocale) {
+    setLocaleState(normalizeLocale(newLocale, supportedLanguages));
+  }, [supportedLanguages]);
+  const setUnitSystem = useCallback(function setUnitSystem(newSystem) {
+    setUnitSystemState(newSystem);
+  }, []);
+  const setTimezone = useCallback(function setTimezone(newTimezone) {
+    setTimezoneState(newTimezone);
+  }, []);
+  const value = {
+    locale,
+    unitSystem,
+    timezone,
+    supportedLanguages,
+    setLocale,
+    setUnitSystem,
+    setTimezone
+  };
+  return jsx(I18nContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+I18nProvider.displayName = "I18nProvider";
+
+const MM_TO_INCH = 0.0393701;
+const INCH_TO_MM = 25.4;
+function mmToInches(mm) {
+  return mm * MM_TO_INCH;
+}
+function inchesToMm(inches) {
+  return inches * INCH_TO_MM;
+}
+function formatValueToDisplayUnit(value, unitSystem, options) {
+  var _a;
+  const decimals = (_a = options === null || options === void 0 ? void 0 : options.decimals) !== null && _a !== void 0 ? _a : 2;
+  const showUnit = (options === null || options === void 0 ? void 0 : options.showUnit) !== false;
+  if (unitSystem === "imperial") {
+    const inches = mmToInches(value);
+    return showUnit ? `${inches.toFixed(decimals)} in` : inches.toFixed(decimals);
+  }
+  return showUnit ? `${value.toFixed(decimals)} mm` : value.toFixed(decimals);
+}
+function convertDisplayValueToMm(displayValue, unitSystem) {
+  if (unitSystem === "imperial") {
+    return inchesToMm(displayValue);
+  }
+  return displayValue;
+}
+function getUnitDisplayLabel(unitSystem) {
+  return unitSystem === "imperial" ? "in" : "mm";
+}
+function getAvailableTimezones() {
+  return ["America/New_York", "America/Chicago", "America/Denver", "America/Los_Angeles", "America/Toronto", "America/Vancouver", "Europe/London", "Europe/Paris", "Europe/Berlin", "Europe/Madrid", "Europe/Rome", "Asia/Tokyo", "Asia/Shanghai", "Asia/Hong_Kong", "Asia/Singapore", "Australia/Sydney", "Australia/Melbourne", "UTC"];
+}
+
+const DEFAULT_VALUES = {
+  locale: "en",
+  unitSystem: "metric",
+  timezone: "auto",
+  supportedLanguages: ["en"],
+  setLocale: function defaultSetLocale(_newLocale) {
+    return undefined;
+  },
+  setUnitSystem: function defaultSetUnitSystem(_system) {
+    return undefined;
+  },
+  setTimezone: function defaultSetTimezone(_tz) {
+    return undefined;
+  }
+};
+const useI18n = function useI18n() {
+  const {
+    t
+  } = useTranslation();
+  const context = useContext(I18nContext);
+  const {
+    locale = DEFAULT_VALUES.locale,
+    unitSystem = DEFAULT_VALUES.unitSystem,
+    timezone = DEFAULT_VALUES.timezone,
+    supportedLanguages = DEFAULT_VALUES.supportedLanguages,
+    setLocale = DEFAULT_VALUES.setLocale,
+    setUnitSystem = DEFAULT_VALUES.setUnitSystem,
+    setTimezone = DEFAULT_VALUES.setTimezone
+  } = context || {};
+  const formatDate = useCallback(function formatDate(utcTimestamp, format) {
+    const tz = timezone === "auto" ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone;
+    try {
+      const dayjsWithTz = dayjs;
+      const hasTimezonePlugin = dayjsWithTz.tz && typeof dayjsWithTz.utc === "function";
+      if (hasTimezonePlugin) {
+        const utcInstance = dayjsWithTz.utc(utcTimestamp);
+        return utcInstance.tz(tz).locale(locale.split("-")[0]).format(format || "YYYY-MM-DD HH:mm:ss");
+      }
+      return dayjs(utcTimestamp).locale(locale.split("-")[0]).format(format || "YYYY-MM-DD HH:mm:ss");
+    } catch (error) {
+      return dayjs(utcTimestamp).locale(locale.split("-")[0]).format(format || "YYYY-MM-DD HH:mm:ss");
+    }
+  }, [timezone, locale]);
+  const formatValueToDisplayUnit$1 = useCallback(function formatValueToDisplayUnit$1(value, options) {
+    return formatValueToDisplayUnit(value, unitSystem, options);
+  }, [unitSystem]);
+  const convertDisplayValueToMmValue = useCallback(function convertDisplayValueToMmValue(value) {
+    return convertDisplayValueToMm(value, unitSystem);
+  }, [unitSystem]);
+  const getUnitDisplayLabelValue = useCallback(function getUnitDisplayLabelValue() {
+    return getUnitDisplayLabel(unitSystem);
+  }, [unitSystem]);
+  return {
+    t,
+    formatDate,
+    formatValueToDisplayUnit: formatValueToDisplayUnit$1,
+    convertDisplayValueToMm: convertDisplayValueToMmValue,
+    getUnitDisplayLabel: getUnitDisplayLabelValue,
+    locale,
+    unitSystem,
+    timezone,
+    supportedLanguages,
+    setLocale,
+    setUnitSystem,
+    setTimezone
+  };
+};
+
+const I18nSettings = function I18nSettings({
+  className,
+  layout = "stacked"
+}) {
+  const {
+    classes,
+    cx
+  } = useStyles$g({
+    layout
+  });
+  const {
+    locale,
+    unitSystem,
+    timezone,
+    supportedLanguages,
+    setLocale,
+    setUnitSystem,
+    setTimezone,
+    t
+  } = useI18n();
+  const unitSystemOptions = useMemo(function getUnitSystemOptions() {
+    return [{
+      value: "metric",
+      displayText: t("common.units.metric", {
+        defaultValue: "Metric"
+      })
+    }, {
+      value: "imperial",
+      displayText: t("common.units.imperial", {
+        defaultValue: "Imperial"
+      })
+    }];
+  }, [t]);
+  const timezoneOptions = useMemo(function getTimezoneOptions() {
+    const timezones = getAvailableTimezones();
+    return [{
+      value: "auto",
+      displayText: t("common.settings.autoDetect", {
+        defaultValue: "Auto-detect"
+      })
+    }, ...timezones.map(tz => ({
+      value: tz,
+      displayText: tz
+    }))];
+  }, [t]);
+  const localeOptions = useMemo(function getLocaleOptions() {
+    return supportedLanguages.map(langCode => ({
+      value: langCode,
+      displayText: getLanguageDisplayName(langCode)
+    }));
+  }, [supportedLanguages]);
+  const handleUnitSystemChange = function handleUnitSystemChange(event) {
+    setUnitSystem(event.target.value);
+  };
+  const handleTimezoneChange = function handleTimezoneChange(event) {
+    setTimezone(event.target.value);
+  };
+  const handleLocaleChange = function handleLocaleChange(event) {
+    setLocale(event.target.value);
+  };
+  return jsxs(Box, {
+    className: cx(classes.container, className),
+    children: [jsx(Box, {
+      className: classes.settingItem,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.unitSystem"),
+        value: unitSystem,
+        onChange: handleUnitSystemChange,
+        menuItems: unitSystemOptions
+      })
+    }), jsx(Box, {
+      className: classes.settingItem,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.timezone"),
+        value: timezone,
+        onChange: handleTimezoneChange,
+        menuItems: timezoneOptions
+      })
+    }), supportedLanguages.length > 1 && jsx(Box, {
+      className: classes.settingItem,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("common.settings.locale"),
+        value: locale,
+        onChange: handleLocaleChange,
+        menuItems: localeOptions
+      })
+    })]
+  });
+};
+I18nSettings.displayName = "I18nSettings";
+const useStyles$g = tss.withParams().create(({
+  theme,
+  layout
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: layout === "horizontal" ? "row" : "column",
+    flexWrap: layout === "horizontal" ? "wrap" : "nowrap",
+    gap: theme.spacing(3),
+    width: "100%"
+  },
+  settingItem: layout === "horizontal" ? {
+    flex: "1 1 250px",
+    maxWidth: "350px"
+  } : {
+    width: "100%",
+    maxWidth: "400px"
+  }
+}));
+
+function TimeLabel({
+  className,
+  color
+}) {
+  const theme = useTheme();
+  const {
+    formatDate,
+    timezone,
+    locale
+  } = useI18n();
+  const [timeLabel, setTimeLabel] = useState(() => {
+    try {
+      return formatDate(Date.now(), "HH:mm");
+    } catch (_a) {
+      return new Date().toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit"
+      }).toLowerCase().replace(" ", "");
+    }
+  });
+  useEffect(function updateTimeLabelOnTimezoneChange() {
+    try {
+      const formatted = formatDate(Date.now(), "HH:mm");
+      setTimeLabel(formatted);
+    } catch (_a) {
+      setTimeLabel(new Date().toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit"
+      }).toLowerCase().replace(" ", ""));
+    }
+  }, [formatDate, timezone, locale]);
+  useEffect(function updateTimeLabel() {
+    const intervalId = setInterval(() => {
+      try {
+        const formatted = formatDate(Date.now(), "HH:mm");
+        setTimeLabel(formatted);
+      } catch (_a) {
+        setTimeLabel(new Date().toLocaleTimeString([], {
+          hour: "numeric",
+          minute: "2-digit"
+        }).toLowerCase().replace(" ", ""));
+      }
+    }, 1000);
+    return () => clearInterval(intervalId);
+  }, [formatDate, timezone, locale]);
+  return jsx(Typography, {
+    className: className,
+    color: color !== null && color !== void 0 ? color : theme.palette.common.white,
+    children: timeLabel
+  });
+}
+
+/**
+ * Detects if the current device has touch screen capabilities
+ * @returns true if the device supports touch events, false otherwise
+ */
+const isTouchScreenDevice = () => {
+  return "ontouchstart" in window || navigator.maxTouchPoints > 0;
+};
+/**
+ * Closes the custom UI by sending a message to the parent window
+ */
+const closeCustomUi = () => {
+  window.parent.postMessage("closeCustomUi", "*");
+};
+/**
+ * Navigates to a specific route in the Control Center
+ * @param route - The route to navigate to (remoteSupport or controlCenterHomepage)
+ */
+const navigateControlCenter = route => {
+  const capitalizedRoute = route.charAt(0).toUpperCase() + route.slice(1);
+  window.parent.postMessage(`navigateTo${capitalizedRoute}`, "*");
+};
+
+const NavigationConfirmationModal = function NavigationConfirmationModal(props) {
+  const {
+    isOpen,
+    destination,
+    onClose
+  } = props;
+  const {
+    classes
+  } = useStyles$f();
+  const {
+    t
+  } = useI18n();
+  const handleConfirm = function handleConfirm() {
+    if (!destination) return;
+    onClose();
+    if (destination === "controlCenter") {
+      closeCustomUi();
+    } else {
+      navigateControlCenter(destination);
+    }
+  };
+  const getButtonText = function getButtonText() {
+    if (destination === "controlCenter") {
+      return t("navigation.modal.goToControlCenter", {
+        defaultValue: "Go to Control Center"
+      });
+    }
+    return t("navigation.modal.goToRemoteSupport", {
+      defaultValue: "Go to Remote Support"
+    });
+  };
+  return jsx(VentionModalBase, {
+    isOpen: isOpen,
+    onClose: onClose,
+    modalSize: "xx-large",
+    isTouchDevice: isTouchScreenDevice(),
+    width: "1312px",
+    children: jsxs(Box, {
+      className: classes.modalContent,
+      children: [jsx(Box, {
+        className: classes.iconContainer,
+        children: jsx(VentionIcon, {
+          type: "alert-triangle-filled",
+          size: 56,
+          color: "#F59E0B"
+        })
+      }), jsx(Typography, {
+        className: classes.title,
+        children: t("navigation.modal.exit.title", {
+          defaultValue: "You are about to exit the application"
+        })
+      }), jsx(Typography, {
+        className: classes.body,
+        children: t("navigation.modal.exit.message", {
+          defaultValue: "Please make sure your changes are saved before you leave the app."
+        })
+      }), jsx(Button, {
+        onClick: handleConfirm,
+        className: classes.button,
+        disableRipple: true,
+        children: jsx(Box, {
+          className: classes.buttonLabel,
+          children: jsx(Typography, {
+            className: classes.buttonText,
+            children: getButtonText()
+          })
+        })
+      })]
+    })
+  });
+};
+const useStyles$f = tss.create(({
+  theme
+}) => ({
+  modalContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "0 96px 24px 96px",
+    height: "360px",
+    boxSizing: "border-box"
+  },
+  iconContainer: {
+    marginBottom: theme.spacing(7)
+  },
+  title: Object.assign(Object.assign({}, theme.typography.hmiText28SemiBold), {
+    textAlign: "center",
+    marginBottom: theme.spacing(6)
+  }),
+  body: Object.assign(Object.assign({}, theme.typography.hmiText22Regular), {
+    textAlign: "center"
+  }),
+  button: {
+    minWidth: "320px",
+    width: "auto",
+    maxWidth: "100%",
+    height: "80px",
+    backgroundColor: theme.palette.button.filled,
+    borderRadius: "4px",
+    padding: "8px 16px",
+    boxSizing: "border-box",
+    marginTop: "auto",
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    }
+  },
+  buttonLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 8px",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  buttonText: {
+    fontFamily: "Inter",
+    fontSize: "24px",
+    fontWeight: 600,
+    lineHeight: "32px",
+    color: theme.palette.common.white,
+    textAlign: "center",
+    whiteSpace: "nowrap"
+  }
+}));
+
+const PasswordProtectionModal = function PasswordProtectionModal(props) {
+  const {
+    isOpen,
+    onClose,
+    onSuccess,
+    correctPassword
+  } = props;
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+  const {
+    classes
+  } = useStyles$e();
+  const {
+    t
+  } = useI18n();
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState(false);
+  const handleConfirm = function handleConfirm() {
+    if (password === correctPassword) {
+      setPassword("");
+      setError(false);
+      onSuccess();
+      onClose();
+    } else {
+      setError(true);
+    }
+  };
+  const handleClose = function handleClose() {
+    setPassword("");
+    setError(false);
+    onClose();
+  };
+  useEffect(function handleKeyboardVisibility() {
+    if (!isOpen || !isTouchScreenDevice()) {
+      setIsKeyboardVisible(false);
+      return;
+    }
+    const checkKeyboard = () => {
+      const keyboard = document.getElementById("virtual_keyboard");
+      setIsKeyboardVisible(keyboard !== null);
+    };
+    checkKeyboard();
+    const observer = new MutationObserver(checkKeyboard);
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      setIsKeyboardVisible(false);
+    };
+  }, [isOpen]);
+  return jsxs(Fragment, {
+    children: [jsx("style", {
+      children: isKeyboardVisible && `
+          [data-testid="vention-modal-container"] {
+            transform: translateY(-22.5vh) !important;
+            transition: transform 0.3s ease-out;
+          }
+        `
+    }), jsx(VentionModalBase, {
+      isOpen: isOpen,
+      onClose: handleClose,
+      modalSize: "x-large",
+      isTouchDevice: isTouchScreenDevice(),
+      width: "1120px",
+      backDropClickClosable: false,
+      children: jsxs(Box, {
+        className: classes.modalContent,
+        children: [jsx(Typography, {
+          className: classes.title,
+          children: t("navigation.modal.password.title", {
+            defaultValue: "Administrator login required"
+          })
+        }), jsx(Box, {
+          component: "form",
+          id: "password-form",
+          onSubmit: event => {
+            event.preventDefault();
+            handleConfirm();
+          },
+          className: classes.inputContainer,
+          children: jsx(VentionTextInput, {
+            label: t("navigation.modal.password.label", {
+              defaultValue: "Password"
+            }),
+            type: showPassword ? "text" : "password",
+            value: password,
+            onChange: event => {
+              setPassword(event.target.value);
+              setError(false);
+            },
+            state: error ? "error" : "default",
+            helperText: error ? t("navigation.modal.password.error", {
+              defaultValue: "Incorrect password"
+            }) : "",
+            fullWidth: true,
+            size: "xx-large",
+            InputProps: {
+              endAdornment: jsx(InputAdornment, {
+                position: "end",
+                children: jsx(IconButton, {
+                  onClick: () => setShowPassword(!showPassword),
+                  edge: "end",
+                  disableRipple: true,
+                  type: "button",
+                  children: jsx(VentionIcon, {
+                    type: showPassword ? "eye-closed" : "eye",
+                    size: 28,
+                    color: "#0f172a"
+                  })
+                })
+              })
+            }
+          })
+        }), jsx(Button, {
+          className: classes.button,
+          disableRipple: true,
+          type: "submit",
+          form: "password-form",
+          children: jsx(Box, {
+            className: classes.buttonLabel,
+            children: jsx(Typography, {
+              className: classes.buttonText,
+              children: t("navigation.modal.password.confirm", {
+                defaultValue: "Confirm"
+              })
+            })
+          })
+        })]
+      })
+    })]
+  });
+};
+const useStyles$e = tss.create(({
+  theme
+}) => ({
+  modalContent: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "64px 96px 64px 96px",
+    gap: theme.spacing(7),
+    boxSizing: "border-box",
+    height: "324px"
+  },
+  title: {
+    fontFamily: "Inter",
+    fontSize: "36px",
+    fontWeight: 700,
+    lineHeight: "48px",
+    textAlign: "center",
+    color: theme.palette.text.primary
+  },
+  inputContainer: {
+    width: "499px",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1)
+  },
+  button: {
+    width: "250px",
+    height: "64px",
+    backgroundColor: theme.palette.button.filled,
+    borderRadius: "4px",
+    padding: "8px",
+    boxSizing: "border-box",
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    }
+  },
+  buttonLabel: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0 8px",
+    boxSizing: "border-box"
+  },
+  buttonText: {
+    fontFamily: "Inter",
+    fontSize: "24px",
+    fontWeight: 600,
+    lineHeight: "32px",
+    color: theme.palette.common.white,
+    textAlign: "center",
+    whiteSpace: "nowrap"
+  }
+}));
+
+const NavigationBarItem = function NavigationBarItem(props) {
+  const {
+    icon,
+    iconDisabled,
+    label,
+    path,
+    onClick,
+    password,
+    isDisabled = false,
+    location,
+    handleNavigate,
+    currentPassword,
+    setPasswordProtectedItem
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles$d();
+  const {
+    t
+  } = useI18n();
+  const isActive = (location === null || location === void 0 ? void 0 : location.pathname) === path;
+  const currentIcon = isDisabled && iconDisabled ? iconDisabled : icon;
+  const handleItemClick = function handleItemClick() {
+    if (isDisabled || !handleNavigate || !setPasswordProtectedItem) return;
+    if (password && password !== currentPassword) {
+      setPasswordProtectedItem(props);
+      return;
+    }
+    onClick ? onClick() : handleNavigate(path);
+  };
+  return jsxs(Button, {
+    disableRipple: true,
+    disabled: isDisabled,
+    onClick: handleItemClick,
+    className: cx(classes.tabButton, {
+      [classes.active]: isActive,
+      [classes.disabled]: isDisabled
+    }),
+    children: [jsx(Box, {
+      className: classes.navIcon,
+      children: currentIcon
+    }), jsx(Typography, {
+      className: classes.navLabel,
+      children: t(label, {
+        defaultValue: label
+      })
+    })]
+  });
+};
+const useStyles$d = tss.create(({
+  theme
+}) => ({
+  tabButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    height: "96px",
+    width: 184,
+    gap: theme.spacing(2),
+    borderRadius: 8,
+    backgroundColor: "transparent",
+    transition: "background-color 0.2s",
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    },
+    color: theme.palette.common.white,
+    "&.Mui-disabled": {
+      color: theme.palette.common.white
+    }
+  },
+  active: {
+    backgroundColor: theme.palette.button.filledPressed
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  navIcon: {
+    width: 32,
+    height: 32,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  navLabel: Object.assign({}, theme.typography.hmiText22Regular)
+}));
+
+const Z_INDEX = {
+  NAVIGATION: 1100,
+  MENU: 1200,
+  MENU_OVERLAY: 1210,
+  MODAL: 1300,
+  SNACKBAR: 1400,
+  TOOLTIP: 1500
+};
+
+const iconSize = 32;
+const NavigationBarRoot = function NavigationBarRoot(props) {
+  var _a;
+  const {
+    children,
+    showTimer = true,
+    onControlCenterClick,
+    onSupportClick,
+    disabledNavigationItems = [],
+    isControlCenterDisabled = false,
+    isSupportDisabled = false,
+    showControlCenterButton = true,
+    showSupportButton = true,
+    variant = "fixed"
+  } = props;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const {
+    classes
+  } = useStyles$c({
+    variant
+  });
+  const {
+    t
+  } = useI18n();
+  const [modalDestination, setModalDestination] = useState(null);
+  const [passwordProtectedItem, setPasswordProtectedItem] = useState(null);
+  const [currentPassword, setCurrentPassword] = useState(null);
+  const disabledSet = new Set(disabledNavigationItems);
+  const getFadedColor = function getFadedColor(color, opacity = 1) {
+    return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+  };
+  const handleNavigate = function handleNavigate(path) {
+    if (location.pathname !== path) navigate(path);
+  };
+  useEffect(function updateCurrentPassword() {
+    const currentPage = React.Children.toArray(children).find(child => React.isValidElement(child) && child.type === NavigationBarItem && child.props.path === location.pathname);
+    const currentPagePassword = React.isValidElement(currentPage) ? currentPage.props.password : undefined;
+    setCurrentPassword(currentPagePassword !== null && currentPagePassword !== void 0 ? currentPagePassword : null);
+  }, [location.pathname, children]);
+  const handleControlCenterClick = function handleControlCenterClick() {
+    if (isControlCenterDisabled) return;
+    if (onControlCenterClick) {
+      onControlCenterClick();
+    } else {
+      setModalDestination("controlCenter");
+    }
+  };
+  const handleSupportClick = function handleSupportClick() {
+    if (isSupportDisabled) return;
+    if (onSupportClick) {
+      onSupportClick();
+    } else {
+      setModalDestination("remoteSupport");
+    }
+  };
+  const handlePasswordSuccess = function handlePasswordSuccess() {
+    if (passwordProtectedItem) {
+      if (passwordProtectedItem.onClick) {
+        passwordProtectedItem.onClick();
+      } else {
+        handleNavigate(passwordProtectedItem.path);
+      }
+    }
+  };
+  const processedChildren = React.Children.map(children, function processChild(child) {
+    if (!React.isValidElement(child)) return child;
+    if (child.type !== NavigationBarItem) return child;
+    const itemId = child.props.id;
+    const isDisabled = disabledSet.has(itemId);
+    return React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
+      isDisabled: isDisabled,
+      location: location,
+      handleNavigate: handleNavigate,
+      currentPassword: currentPassword,
+      setPasswordProtectedItem: setPasswordProtectedItem
+    }));
+  });
+  const handleCloseConfirmation = function handleCloseConfirmation() {
+    setModalDestination(null);
+  };
+  const handleClosePassword = function handleClosePassword() {
+    setPasswordProtectedItem(null);
+  };
+  return jsxs(Fragment, {
+    children: [jsx(NavigationConfirmationModal, {
+      isOpen: modalDestination !== null,
+      destination: modalDestination,
+      onClose: handleCloseConfirmation
+    }), jsx(PasswordProtectionModal, {
+      isOpen: passwordProtectedItem !== null,
+      onClose: handleClosePassword,
+      onSuccess: handlePasswordSuccess,
+      correctPassword: (_a = passwordProtectedItem === null || passwordProtectedItem === void 0 ? void 0 : passwordProtectedItem.password) !== null && _a !== void 0 ? _a : ""
+    }), jsx("footer", {
+      className: classes.root,
+      children: jsxs(Box, {
+        className: classes.container,
+        children: [jsx(Box, {
+          className: classes.sideClusterLeft,
+          children: showControlCenterButton && jsx(VentionButton, {
+            disableRipple: true,
+            onClick: handleControlCenterClick,
+            disabled: isControlCenterDisabled,
+            className: classes.sideButton,
+            style: {
+              backgroundColor: isControlCenterDisabled ? getFadedColor(theme.palette.background.brand) : theme.palette.background.brand,
+              borderColor: isControlCenterDisabled ? getFadedColor(theme.palette.border.onColor) : theme.palette.border.onColor,
+              opacity: isControlCenterDisabled ? 0.5 : 1,
+              cursor: isControlCenterDisabled ? "not-allowed" : "pointer"
+            },
+            children: jsx(Typography, {
+              className: classes.sideButtonLabel,
+              style: {
+                color: isControlCenterDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
+              },
+              children: t("navigation.bar.controlCenter", {
+                defaultValue: "Control Center"
+              })
+            })
+          })
+        }), jsx("nav", {
+          className: classes.tabBarButtonContainer,
+          children: processedChildren
+        }), jsxs(Box, {
+          className: classes.sideClusterRight,
+          children: [showSupportButton && jsx(VentionButton, {
+            disableRipple: true,
+            onClick: handleSupportClick,
+            disabled: isSupportDisabled,
+            className: classes.sideButton,
+            style: {
+              backgroundColor: isSupportDisabled ? getFadedColor(theme.palette.background.brand) : theme.palette.background.brand,
+              borderColor: isSupportDisabled ? getFadedColor(theme.palette.border.onColor) : theme.palette.border.onColor,
+              opacity: isSupportDisabled ? 0.5 : 1,
+              cursor: isSupportDisabled ? "not-allowed" : "pointer"
+            },
+            iconLeft: jsx(VentionIcon, {
+              size: iconSize,
+              color: isSupportDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white,
+              type: "headset-filled"
+            }),
+            children: jsx(Typography, {
+              className: classes.sideButtonLabel,
+              style: {
+                color: isSupportDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
+              },
+              children: t("navigation.bar.support", {
+                defaultValue: "Support"
+              })
+            })
+          }), showTimer && jsx(TimeLabel, {
+            className: classes.timeLabel,
+            color: theme.palette.common.white
+          })]
+        })]
+      })
+    })]
+  });
+};
+const useStyles$c = tss.withParams().create(({
+  theme,
+  variant
+}) => ({
+  root: Object.assign({
+    boxSizing: "border-box",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "120px",
+    padding: theme.spacing(2, 6)
+  }, variant === "fixed" ? {
+    backgroundColor: COLORS.slate[900],
+    position: "fixed",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderTop: `1px solid ${COLORS.slate[800]}`,
+    zIndex: Z_INDEX.NAVIGATION
+  } : {
+    backgroundColor: theme.palette.background.defaultInverse,
+    position: "relative",
+    width: "100%",
+    borderTop: `1px solid ${theme.palette.border.inverse}`,
+    flexShrink: 0
+  }),
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    position: "relative",
+    width: "100%",
+    gap: "20px",
+    height: theme.spacing(13)
+  },
+  sideClusterLeft: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(8)
+  },
+  sideClusterRight: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(8)
+  },
+  sideButton: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    height: theme.spacing(11),
+    padding: theme.spacing(2, 4),
+    backgroundColor: theme.palette.background.brand,
+    borderRadius: 4,
+    border: `2px solid ${theme.palette.border.onColor}`,
+    color: theme.palette.common.white,
+    textTransform: "none",
+    minWidth: 0,
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    },
+    "&.Mui-disabled": {
+      color: theme.palette.common.white
+    }
+  },
+  sideButtonLabel: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    fontSize: 24,
+    fontFamily: "Inter",
+    fontStyle: "normal",
+    fontWeight: 600,
+    lineHeight: "32px"
+  },
+  timeLabel: Object.assign(Object.assign({}, theme.typography.hmiText22Regular), {
+    fontWeight: 600
+  }),
+  tabBarButtonContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    position: "absolute",
+    left: "50%",
+    transform: "translateX(-50%)",
+    gap: theme.spacing(5),
+    height: "104px"
+  }
+}));
+const NavigationBar = Object.assign(NavigationBarRoot, {
+  Item: NavigationBarItem
+});
+
+const StatusTopBarButton = function StatusTopBarButton(props) {
+  const {
+    label,
+    onClick,
+    backgroundColor,
+    backgroundColorHover,
+    borderColor,
+    textColor,
+    width = 208,
+    height = 80,
+    icon,
+    iconDisabled,
+    visible = true,
+    disabled = false
+  } = props;
+  const {
+    classes
+  } = useStyles$b();
+  if (!visible) return null;
+  const getFadedColor = function getFadedColor(color, opacity = 1) {
+    return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
+  };
+  const hasBackgroundColor = !!backgroundColor;
+  const variant = hasBackgroundColor ? "filled-brand" : "outline";
+  const finalBackgroundColor = disabled && backgroundColor ? getFadedColor(backgroundColor) : backgroundColor;
+  const finalBackgroundColorHover = disabled && backgroundColorHover ? getFadedColor(backgroundColorHover) : backgroundColorHover;
+  const finalBorderColor = disabled && borderColor ? getFadedColor(borderColor) : borderColor;
+  const finalTextColor = disabled && textColor ? getFadedColor(textColor) : textColor;
+  const finalIcon = disabled && iconDisabled ? iconDisabled : icon;
+  const handleClick = function handleClick() {
+    if (!disabled && onClick) {
+      onClick();
+    }
+  };
+  return jsx(VentionButton, {
+    variant: variant,
+    onClick: handleClick,
+    disabled: disabled || !onClick,
+    className: classes.actionButton,
+    style: {
+      width,
+      height,
+      backgroundColor: finalBackgroundColor || "transparent",
+      border: finalBorderColor ? `1px solid ${finalBorderColor}` : undefined
+    },
+    sx: {
+      "&:hover": {
+        backgroundColor: finalBackgroundColorHover || finalBackgroundColor
+      }
+    },
+    iconLeft: finalIcon ? jsx(Box, {
+      className: classes.iconWrapper,
+      children: finalIcon
+    }) : undefined,
+    children: jsx(Typography, {
+      className: classes.actionLabel,
+      style: {
+        color: finalTextColor
+      },
+      children: label
+    })
+  });
+};
+const useStyles$b = tss.create(({
+  theme
+}) => ({
+  actionButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(1, 2),
+    borderRadius: 4,
+    minHeight: 0,
+    minWidth: 0
+  },
+  iconWrapper: {
+    padding: "5px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  actionLabel: {
+    fontWeight: 600,
+    fontSize: 24,
+    lineHeight: "32px",
+    textTransform: "none",
+    padding: theme.spacing(1)
+  }
+}));
+
+const StatusTopBarRoot = function StatusTopBarRoot(props) {
+  const {
+    status,
+    buttonConfigs = [],
+    variant = "light"
+  } = props;
+  const {
+    classes
+  } = useStyles$a({
+    variant
+  });
+  const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
+  const hasVisibleButtons = visibleButtons.length > 0;
+  return jsxs("header", {
+    className: classes.root,
+    children: [jsxs("div", {
+      className: classes.content,
+      children: [jsx("div", {
+        className: classes.leftArea,
+        children: status && jsx(VentionStatusIndicator, {
+          size: "xx-large",
+          dotColor: status.color,
+          label: status.label
+        })
+      }), hasVisibleButtons && jsx("div", {
+        className: classes.rightArea,
+        children: visibleButtons.map(config => jsx(StatusTopBarButton, Object.assign({}, config, {
+          visible: true
+        }), config.id))
+      })]
+    }), jsx("div", {
+      className: classes.bottomBorder
+    })]
+  });
+};
+const useStyles$a = tss.withParams().create(({
+  theme,
+  variant
+}) => ({
+  root: {
+    boxSizing: "border-box",
+    position: "relative",
+    width: "100%",
+    backgroundColor: variant === "dark" ? theme.palette.background.defaultInverse : theme.palette.common.white,
+    height: "120px",
+    flexShrink: 0
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.spacing(5, 4)
+  },
+  leftArea: {
+    display: "flex",
+    alignItems: "center",
+    "& .MuiTypography-root": {
+      color: variant === "dark" ? theme.palette.common.white : theme.palette.text.primary
+    }
+  },
+  rightArea: {
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(2),
+    height: theme.spacing(10)
+  },
+  bottomBorder: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 1,
+    backgroundColor: theme.palette.divider
+  }
+}));
+const StatusTopBar = StatusTopBarRoot;
+
+const Sidebar = function Sidebar(props) {
+  const {
+    items,
+    variant = "card"
+  } = props;
+  const {
+    classes
+  } = useStyles$9({
+    variant
+  });
+  return jsx(Box, {
+    className: classes.container,
+    children: items.map(item => jsx(SidebarItemComponent, {
+      item: item,
+      variant: variant
+    }, item.id))
+  });
+};
+const ICON_SIZE = 32;
+const SidebarItemComponent = function SidebarItemComponent(props) {
+  const {
+    item,
+    variant
+  } = props;
+  const {
+    classes
+  } = useSidebarItemStyles({
+    state: item.state,
+    variant
+  });
+  const isDisabled = item.state === "disabled";
+  return jsx(Button, {
+    className: classes.button,
+    onClick: item.onClick,
+    disabled: isDisabled,
+    disableRipple: true,
+    disableFocusRipple: true,
+    disableTouchRipple: true,
+    "data-testid": `sidebar-item-${item.id}`,
+    children: jsxs(Box, {
+      className: classes.content,
+      children: [jsxs(Box, {
+        className: classes.leftSection,
+        children: [item.icon ? jsx(Box, {
+          className: classes.iconWrapper,
+          children: item.icon
+        }) : jsx(Box, {
+          className: classes.iconPlaceholder
+        }), jsxs(Box, {
+          className: classes.textContainer,
+          children: [jsx(Typography, {
+            className: classes.title,
+            children: item.title
+          }), item.subtitle && jsx(Typography, {
+            className: classes.subtitle,
+            children: item.subtitle
+          })]
+        })]
+      }), item.iconType && jsx(Box, {
+        className: classes.rightSection,
+        children: jsx(Box, {
+          className: classes.rightIcon,
+          children: jsx(VentionIcon, {
+            type: item.iconType,
+            size: ICON_SIZE
+          })
+        })
+      })]
+    })
+  });
+};
+const useStyles$9 = tss.withParams().create(({
+  theme,
+  variant
+}) => ({
+  container: Object.assign({
+    display: "flex",
+    flexDirection: "column",
+    width: "100%"
+  }, variant === "card" ? {
+    padding: theme.spacing(2),
+    gap: theme.spacing(1)
+  } : {
+    padding: 0,
+    gap: 0
+  })
+}));
+const useSidebarItemStyles = tss.withParams().create(function createSidebarItemStyles({
+  theme,
+  state,
+  variant
+}) {
+  const isActive = state === "active";
+  const isDisabled = state === "disabled";
+  const isAccentVariant = variant === "accent";
+  const getButtonStyles = () => {
+    const baseStyles = {
+      width: "100%",
+      minHeight: theme.spacing(14),
+      padding: theme.spacing(3, 4),
+      textAlign: "left",
+      textTransform: "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      transition: "all 0.2s ease"
+    };
+    if (isAccentVariant) {
+      return Object.assign(Object.assign({}, baseStyles), {
+        borderRadius: 0,
+        backgroundColor: isActive ? theme.palette.background.surface1active : "transparent",
+        border: "none",
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        "&:hover": {
+          backgroundColor: isDisabled ? "transparent" : isActive ? theme.palette.background.surface1active : theme.palette.action.hover
+        }
+      });
+    }
+    return Object.assign(Object.assign({}, baseStyles), {
+      borderRadius: theme.spacing(2),
+      backgroundColor: isActive ? theme.palette.background.surface1active : theme.palette.background.paper,
+      border: `1px solid ${isActive ? theme.palette.border.main : theme.palette.divider}`,
+      "&:hover": {
+        backgroundColor: isDisabled ? theme.palette.background.paper : isActive ? theme.palette.background.surface1active : theme.palette.action.hover,
+        borderColor: isDisabled ? theme.palette.divider : theme.palette.border.main
+      }
+    });
+  };
+  return {
+    button: getButtonStyles(),
+    content: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      width: "100%",
+      height: "100%"
+    },
+    leftSection: {
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(3),
+      flex: 1
+    },
+    iconWrapper: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: isActive ? theme.palette.background.defaultInverse : theme.palette.icon.tertiary,
+      "& svg": {
+        color: isActive ? theme.palette.background.defaultInverse : theme.palette.icon.tertiary
+      }
+    },
+    iconPlaceholder: {
+      width: theme.spacing(4)
+    },
+    textContainer: {
+      display: "flex",
+      flexDirection: "column",
+      gap: theme.spacing(1)
+    },
+    title: Object.assign(Object.assign({}, theme.typography.heading24SemiBold), {
+      color: isDisabled ? theme.palette.text.disabled : theme.palette.text.primary
+    }),
+    subtitle: Object.assign(Object.assign({}, theme.typography.hmiText20Regular), {
+      color: isDisabled ? theme.palette.text.disabled : theme.palette.text.primary
+    }),
+    rightSection: {
+      display: "flex",
+      alignItems: "center",
+      marginLeft: theme.spacing(2)
+    },
+    rightIcon: {
+      display: "flex",
+      alignItems: "center",
+      color: isActive ? theme.palette.icon.primary : theme.palette.icon.tertiary,
+      "& svg": {
+        color: isActive ? theme.palette.icon.primary : theme.palette.icon.tertiary
+      }
+    }
+  };
+});
+
+const LogsTable = memo(({
+  logs = [],
+  isLoading = false,
+  error = null,
+  onLoadMoreLogs,
+  hasMoreLogs,
+  onLogClick,
+  tableHeight,
+  emptyStateMessage,
+  emptyStateIcon
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles$8({
+    tableHeight
+  });
+  const theme = useTheme();
+  const {
+    t,
+    formatDate
+  } = useI18n();
+  const loadMoreRef = useRef(null);
+  const emptyMessage = emptyStateMessage || t("logs.emptyState.noLogs", {
+    defaultValue: "You have no logs"
+  });
+  useEffect(function setupInfiniteScroll() {
+    if (!onLoadMoreLogs || !hasMoreLogs || !loadMoreRef.current) return;
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting && hasMoreLogs) {
+        onLoadMoreLogs();
+      }
+    }, {
+      threshold: 0.1
+    });
+    observer.observe(loadMoreRef.current);
+    return function cleanupInfiniteScroll() {
+      observer.disconnect();
+    };
+  }, [onLoadMoreLogs, hasMoreLogs]);
+  if (isLoading) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsxs(Box, {
+        className: classes.centerState,
+        children: [jsx(VentionSpinner, {
+          size: "large"
+        }), jsx(Typography, {
+          variant: "heading24Medium",
+          sx: {
+            marginTop: 2
+          },
+          children: t("logs.loading", {
+            defaultValue: "Loading logs..."
+          })
+        })]
+      })
+    });
+  }
+  if (error) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsx(Box, {
+        className: classes.errorState,
+        children: jsx(VentionAlert, {
+          severity: "error",
+          title: t("logs.error.loading", {
+            defaultValue: "Error loading logs"
+          }),
+          descriptionText: error,
+          size: "large"
+        })
+      })
+    });
+  }
+  if (!logs || logs.length === 0) {
+    return jsx(Box, {
+      className: classes.tableSection,
+      children: jsxs(Box, {
+        className: classes.centerState,
+        children: [emptyStateIcon && jsx(Box, {
+          className: classes.emptyStateIcon,
+          children: emptyStateIcon
+        }), jsx(Typography, {
+          variant: "heading24Medium",
+          children: emptyMessage
+        })]
+      })
+    });
+  }
+  const getTypeClassName = level => {
+    switch (level) {
+      case "error":
+        return classes.errorType;
+      case "warning":
+        return classes.warningType;
+      case "info":
+        return classes.infoType;
+      default:
+        return "";
+    }
+  };
+  const renderTypeIcon = level => {
+    if (level === "error") {
+      return jsx(VentionIcon, {
+        size: 20,
+        type: "alert-circle-filled",
+        color: theme.palette.error.main
+      });
+    }
+    if (level === "warning") {
+      return jsx(VentionIcon, {
+        size: 20,
+        type: "alert-triangle-filled",
+        color: theme.palette.warning.main
+      });
+    }
+    return jsx(VentionIcon, {
+      size: 20,
+      type: "info-circle-filled",
+      color: theme.palette.info.main
+    });
+  };
+  const formatLogDate = dateStr => {
+    try {
+      const timestamp = new Date(dateStr).getTime();
+      if (isNaN(timestamp)) {
+        return dateStr;
+      }
+      return formatDate(timestamp, "YYYY-MM-DD h:mm:ssa");
+    } catch (_a) {
+      try {
+        const date = new Date(dateStr);
+        if (isNaN(date.getTime())) return dateStr;
+        return date.toLocaleString("en-US", {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit",
+          hour: "numeric",
+          minute: "2-digit",
+          second: "2-digit",
+          hour12: true
+        });
+      } catch (_b) {
+        return dateStr;
+      }
+    }
+  };
+  return jsxs(Box, {
+    className: classes.tableSection,
+    children: [jsx(TableContainer, {
+      component: Paper,
+      className: classes.tableContainer,
+      children: jsxs(Table, {
+        stickyHeader: true,
+        children: [jsx(TableHead, {
+          className: classes.tableHead,
+          children: jsxs(TableRow, {
+            children: [jsx(TableCell, {
+              className: classes.iconHeaderCell
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t("logs.table.date", {
+                  defaultValue: "Date"
+                })
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t("logs.table.type", {
+                  defaultValue: "Type"
+                })
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t("logs.table.code", {
+                  defaultValue: "Code"
+                })
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t("logs.table.message", {
+                  defaultValue: "Message"
+                })
+              })
+            }), jsx(TableCell, {
+              className: classes.tableHeaderCell,
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t("logs.table.description", {
+                  defaultValue: "Description"
+                })
+              })
+            })]
+          })
+        }), jsx(TableBody, {
+          children: logs.map(log => jsxs(TableRow, {
+            hover: true,
+            onClick: onLogClick ? () => onLogClick(log) : undefined,
+            className: onLogClick ? classes.clickableRow : undefined,
+            children: [jsx(TableCell, {
+              className: classes.iconCell,
+              children: jsx(Box, {
+                className: classes.iconWrapper,
+                children: renderTypeIcon(log.level)
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: formatLogDate(log.date)
+              })
+            }), jsx(TableCell, {
+              className: cx(classes.typeCell, getTypeClassName(log.level)),
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: t(`logs.type.${log.level}`, {
+                  defaultValue: log.level
+                })
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.code
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.message
+              })
+            }), jsx(TableCell, {
+              children: jsx(Typography, {
+                variant: "heading24Medium",
+                className: classes.tableText,
+                children: log.description
+              })
+            })]
+          }, log.id))
+        })]
+      })
+    }), onLoadMoreLogs && hasMoreLogs && jsxs(Box, {
+      ref: loadMoreRef,
+      className: classes.loadMoreTrigger,
+      children: [jsx(VentionSpinner, {
+        size: "medium"
+      }), jsx(Typography, {
+        variant: "uiText14Regular",
+        className: classes.loadMoreText,
+        children: t("logs.loadingMore", {
+          defaultValue: "Loading more logs..."
+        })
+      })]
+    }), onLoadMoreLogs && !hasMoreLogs && logs.length > 0 && jsx(Box, {
+      className: classes.endMessage,
+      children: jsx(Typography, {
+        variant: "uiText14Regular",
+        children: t("logs.noMoreLogs", {
+          defaultValue: "No more logs to load"
+        })
+      })
+    })]
+  });
+});
+LogsTable.displayName = "LogsTable";
+const useStyles$8 = tss.withParams().create(({
+  theme,
+  tableHeight
+}) => ({
+  tableSection: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: theme.spacing(4),
+    alignSelf: "stretch",
+    flex: 1,
+    height: "auto"
+  },
+  centerState: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    color: theme.palette.text.secondary
+  },
+  errorState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flex: 1,
+    padding: theme.spacing(4)
+  },
+  tableContainer: Object.assign({
+    width: "100%",
+    flex: 1,
+    overflow: "auto",
+    minHeight: "560px"
+  }, tableHeight && {
+    maxHeight: tableHeight
+  }),
+  tableHead: {
+    backgroundColor: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.background.mutedSlate}`
+  },
+  iconHeaderCell: {
+    width: 40,
+    backgroundColor: theme.palette.background.default
+  },
+  tableHeaderCell: {
+    fontWeight: 200,
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.tertiary
+  },
+  iconCell: {
+    width: 40
+  },
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  typeCell: {
+    textTransform: "capitalize",
+    fontWeight: 500
+  },
+  errorType: {
+    color: theme.palette.error.main
+  },
+  warningType: {
+    color: theme.palette.warning.main
+  },
+  infoType: {
+    color: theme.palette.info.main
+  },
+  loadMoreTrigger: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    color: theme.palette.text.secondary
+  },
+  loadMoreText: {
+    marginTop: theme.spacing(1)
+  },
+  clickableRow: {
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover
+    }
+  },
+  emptyStateIcon: {
+    marginBottom: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  endMessage: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    color: theme.palette.text.secondary
+  },
+  tableText: {
+    fontSize: "20px",
+    lineHeight: "24px"
+  }
+}));
+
+const LogFilterForm = memo(({
+  onFilterChange,
+  onReset,
+  initialFilters
+}) => {
+  var _a, _b, _c, _d;
+  const {
+    classes
+  } = useStyles$7();
+  const {
+    t
+  } = useI18n();
+  const handleFilterChangeRef = useRef(onFilterChange);
+  useEffect(function updateFilterChangeRef() {
+    handleFilterChangeRef.current = onFilterChange;
+  }, [onFilterChange]);
+  const [fromDate, setFromDate] = useState((_a = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.fromDate) !== null && _a !== void 0 ? _a : "");
+  const [toDate, setToDate] = useState((_b = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.toDate) !== null && _b !== void 0 ? _b : "");
+  const [logType, setLogType] = useState((_c = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.logType) !== null && _c !== void 0 ? _c : null);
+  const [sortOrder, setSortOrder] = useState((_d = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.sortOrder) !== null && _d !== void 0 ? _d : "latest");
+  const prevInitialFiltersRef = useRef(initialFilters);
+  useEffect(function syncInitialFilters() {
+    if (prevInitialFiltersRef.current !== initialFilters) {
+      prevInitialFiltersRef.current = initialFilters;
+      if (initialFilters) {
+        if (initialFilters.fromDate !== undefined) setFromDate(initialFilters.fromDate);
+        if (initialFilters.toDate !== undefined) setToDate(initialFilters.toDate);
+        if (initialFilters.logType !== undefined) setLogType(initialFilters.logType);
+        if (initialFilters.sortOrder !== undefined) setSortOrder(initialFilters.sortOrder);
+      }
+    }
+  }, [initialFilters]);
+  const typeOptions = useMemo(() => [{
+    value: "",
+    displayText: t("logs.filter.typeOptions.all", {
+      defaultValue: "All"
+    })
+  }, {
+    value: "error",
+    displayText: t("logs.filter.typeOptions.error", {
+      defaultValue: "Error"
+    })
+  }, {
+    value: "warning",
+    displayText: t("logs.filter.typeOptions.warning", {
+      defaultValue: "Warning"
+    })
+  }, {
+    value: "info",
+    displayText: t("logs.filter.typeOptions.info", {
+      defaultValue: "Info"
+    })
+  }], [t]);
+  const sortOptions = useMemo(() => [{
+    value: "latest",
+    displayText: t("logs.filter.sortOptions.latest", {
+      defaultValue: "From latest"
+    })
+  }, {
+    value: "oldest",
+    displayText: t("logs.filter.sortOptions.oldest", {
+      defaultValue: "From oldest"
+    })
+  }], [t]);
+  const handleReset = () => {
+    setFromDate("");
+    setToDate("");
+    setLogType(null);
+    setSortOrder("latest");
+    onReset === null || onReset === void 0 ? void 0 : onReset();
+  };
+  useEffect(function notifyFilterChange() {
+    var _a;
+    (_a = handleFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(handleFilterChangeRef, {
+      fromDate,
+      toDate,
+      logType,
+      sortOrder
+    });
+  }, [fromDate, toDate, logType, sortOrder]);
+  return jsxs(Box, {
+    className: classes.filterSection,
+    children: [jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionTextInput, {
+        size: "xx-large",
+        label: t("logs.filter.from", {
+          defaultValue: "From"
+        }),
+        value: fromDate,
+        onChange: event => setFromDate(event.target.value),
+        type: "date"
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionTextInput, {
+        size: "xx-large",
+        label: t("logs.filter.to", {
+          defaultValue: "To"
+        }),
+        value: toDate,
+        onChange: event => setToDate(event.target.value),
+        type: "date"
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("logs.filter.type", {
+          defaultValue: "Type"
+        }),
+        value: logType !== null && logType !== void 0 ? logType : "",
+        onChange: event => {
+          const value = event.target.value;
+          setLogType(value === "" ? null : value);
+        },
+        placeholder: t("logs.filter.chooseType", {
+          defaultValue: "Choose type"
+        }),
+        menuItems: typeOptions
+      })
+    }), jsx(Box, {
+      className: classes.filterInput,
+      children: jsx(VentionSelect, {
+        size: "xx-large",
+        variant: "outlined",
+        labelText: t("logs.filter.sort", {
+          defaultValue: "Sort"
+        }),
+        value: sortOrder,
+        onChange: event => setSortOrder(event.target.value),
+        menuItems: sortOptions
+      })
+    }), jsx(VentionButton, {
+      size: "x-large",
+      onClick: handleReset,
+      className: classes.resetButton,
+      children: t("logs.filter.reset", {
+        defaultValue: "Reset"
+      })
+    })]
+  });
+});
+LogFilterForm.displayName = "LogFilterForm";
+const useStyles$7 = tss.create(({
+  theme
+}) => ({
+  filterSection: {
+    display: "flex",
+    alignItems: "flex-end",
+    gap: theme.spacing(4),
+    alignSelf: "stretch",
+    flexWrap: "wrap"
+  },
+  filterInput: {
+    flex: "1 1 200px",
+    minWidth: "200px"
+  },
+  resetButton: {
+    width: "103px",
+    height: "64px",
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.background.default
+    }
+  }
+}));
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const LogsPagination = memo(({
+  currentPage,
+  totalPages,
+  onPageChange
+}) => {
+  const {
+    classes
+  } = useStyles$6();
+  const {
+    t
+  } = useI18n();
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      onPageChange(currentPage - 1);
+    }
+  };
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      onPageChange(currentPage + 1);
+    }
+  };
+  return jsxs(Box, {
+    className: classes.paginationSection,
+    children: [jsx(VentionButton, {
+      size: "x-large",
+      className: classes.paginationButton,
+      onClick: handlePrevious,
+      disabled: currentPage === 1,
+      children: "\u2190"
+    }), jsxs(Typography, {
+      variant: "heading18SemiBold",
+      children: [t("pagination.page", {
+        defaultValue: "Page"
+      }), " ", currentPage, " ", t("pagination.of", {
+        defaultValue: "of"
+      }), " ", totalPages]
+    }), jsx(VentionButton, {
+      size: "x-large",
+      className: classes.paginationButton,
+      onClick: handleNext,
+      disabled: currentPage === totalPages,
+      children: "\u2192"
+    })]
+  });
+});
+LogsPagination.displayName = "LogsPagination";
+const useStyles$6 = tss.create(({
+  theme
+}) => ({
+  paginationSection: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    gap: theme.spacing(4)
+  },
+  paginationButton: {
+    width: "64px",
+    height: "64px",
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    "&:hover": {
+      backgroundColor: theme.palette.grey[300]
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      backgroundColor: theme.palette.background.slate
+    }
+  }
+}));
+
+const formatDateToInput = date => {
+  return dayjs(date).format("YYYY-MM-DD");
+};
+const parseLogDate = dateStr => {
+  const parsed = dayjs(dateStr);
+  return parsed.isValid() ? parsed.valueOf() : 0;
+};
+const LogsPanel = forwardRef((props, ref) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    dataFetcher,
+    initialFilters,
+    onError,
+    pagination,
+    onFilterChange,
+    onLogClick,
+    className,
+    tableHeight,
+    emptyStateMessage,
+    emptyStateIcon
+  } = props;
+  const {
+    classes,
+    cx
+  } = useStyles$5();
+  const [logs, setLogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [filters, setFilters] = useState({
+    fromDate: (_a = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.fromDate) !== null && _a !== void 0 ? _a : null,
+    toDate: (_b = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.toDate) !== null && _b !== void 0 ? _b : null,
+    logType: (_c = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.logType) !== null && _c !== void 0 ? _c : null,
+    sortOrder: (_d = initialFilters === null || initialFilters === void 0 ? void 0 : initialFilters.sortOrder) !== null && _d !== void 0 ? _d : "latest"
+  });
+  const paginationMode = (_e = pagination === null || pagination === void 0 ? void 0 : pagination.mode) !== null && _e !== void 0 ? _e : "none";
+  const pageSize = (_f = pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) !== null && _f !== void 0 ? _f : 10;
+  const [currentPage, setCurrentPage] = useState((_g = pagination === null || pagination === void 0 ? void 0 : pagination.initialPage) !== null && _g !== void 0 ? _g : 1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [hasMorePages, setHasMorePages] = useState(false);
+  const fetchData = useCallback(function fetchData(page, signal) {
+    return __awaiter(this, void 0, void 0, function* () {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const result = yield dataFetcher({
+          filters,
+          page,
+          pageSize
+        });
+        if (!(signal === null || signal === void 0 ? void 0 : signal.aborted)) {
+          if (paginationMode === "infinite-scroll" && page > 1) {
+            setLogs(prev => [...prev, ...result.logs]);
+          } else {
+            setLogs(result.logs);
+          }
+          setTotalPages(result.totalPages);
+          setHasMorePages(result.hasMorePages);
+          setCurrentPage(result.currentPage);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        if (!(signal === null || signal === void 0 ? void 0 : signal.aborted)) {
+          const errorMessage = error instanceof Error ? error.message : "Failed to load logs";
+          setError(errorMessage);
+          setIsLoading(false);
+          if (onError) {
+            onError(error);
+          }
+        }
+      }
+    });
+  }, [dataFetcher, filters, pageSize, paginationMode, onError]);
+  useEffect(function fetchDataOnChange() {
+    const controller = new AbortController();
+    fetchData(currentPage, controller.signal);
+    return function cleanup() {
+      controller.abort();
+    };
+  }, [fetchData, currentPage]);
+  const handlePageChange = useCallback(page => {
+    setCurrentPage(page);
+  }, []);
+  const handleLoadMorePages = useCallback(() => {
+    if (hasMorePages) {
+      setCurrentPage(prev => prev + 1);
+    }
+  }, [hasMorePages]);
+  const handleFilterChange = useCallback(next => {
+    setFilters(next);
+    setCurrentPage(1);
+    if (paginationMode === "infinite-scroll") {
+      setLogs([]);
+    }
+    if (onFilterChange) {
+      onFilterChange(next);
+    }
+  }, [onFilterChange, paginationMode]);
+  const handleReset = useCallback(() => {
+    const resetFilters = {
+      fromDate: null,
+      toDate: null,
+      logType: null,
+      sortOrder: "latest"
+    };
+    setFilters(resetFilters);
+    setCurrentPage(1);
+    if (paginationMode === "infinite-scroll") {
+      setLogs([]);
+    }
+    if (onFilterChange) {
+      onFilterChange(resetFilters);
+    }
+  }, [onFilterChange, paginationMode]);
+  const refresh = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+    yield fetchData(currentPage);
+  }), [fetchData, currentPage]);
+  const resetFilters = useCallback(() => {
+    handleReset();
+  }, [handleReset]);
+  const applyFilters = useCallback(newFilters => {
+    const updatedFilters = Object.assign(Object.assign({}, filters), newFilters);
+    setFilters(updatedFilters);
+    if (onFilterChange) {
+      onFilterChange(updatedFilters);
+    }
+  }, [filters, onFilterChange]);
+  const getCurrentFilters = useCallback(() => filters, [filters]);
+  const exportLogs = useCallback(() => logs, [logs]);
+  useImperativeHandle(ref, () => ({
+    refresh,
+    resetFilters,
+    applyFilters,
+    getCurrentFilters,
+    exportLogs
+  }), [refresh, resetFilters, applyFilters, getCurrentFilters, exportLogs]);
+  return jsxs(Box, {
+    className: cx(classes.root, className),
+    children: [jsx(LogFilterForm, {
+      onFilterChange: handleFilterChange,
+      onReset: handleReset,
+      initialFilters: filters
+    }), jsx(LogsTable, {
+      logs: logs,
+      isLoading: isLoading,
+      error: error,
+      onLoadMoreLogs: paginationMode === "infinite-scroll" ? handleLoadMorePages : undefined,
+      hasMoreLogs: paginationMode === "infinite-scroll" ? hasMorePages : undefined,
+      onLogClick: onLogClick,
+      tableHeight: tableHeight,
+      emptyStateMessage: emptyStateMessage,
+      emptyStateIcon: emptyStateIcon
+    }), paginationMode === "pagination" && !isLoading && !error && logs.length > 0 && jsx(LogsPagination, {
+      currentPage: currentPage,
+      totalPages: totalPages,
+      onPageChange: handlePageChange
+    })]
+  });
+});
+LogsPanel.displayName = "LogsPanel";
+const useStyles$5 = tss.create(({
+  theme
+}) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(4),
+    alignSelf: "stretch"
+  }
+}));
+
+const SettingsPage = function SettingsPage({
+  sidebarItems,
+  children,
+  sidebarWidth = 320
+}) {
+  const {
+    classes
+  } = useStyles$4({
+    sidebarWidth
+  });
+  return jsxs(Box, {
+    className: classes.root,
+    children: [jsx(Box, {
+      className: classes.sidebar,
+      children: jsx(Sidebar, {
+        items: sidebarItems
+      })
+    }), jsx(Box, {
+      className: classes.content,
+      children: children
+    })]
+  });
+};
+SettingsPage.displayName = "SettingsPage";
+const useStyles$4 = tss.withParams().create(({
+  theme,
+  sidebarWidth
+}) => ({
+  root: {
+    display: "flex",
+    flex: 1,
+    height: "100%"
+  },
+  sidebar: {
+    width: sidebarWidth,
+    borderRight: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper
+  },
+  content: {
+    flex: 1,
+    padding: theme.spacing(4),
+    overflow: "auto"
+  }
+}));
+
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const size = (bytes / Math.pow(1024, exponent)).toFixed(1);
+  return `${size} ${units[exponent]}`;
+}
+function FileUploadPanel({
+  title,
+  files,
+  onFilesSelect,
+  onFileRemove,
+  onFileRetry,
+  onFileCancel,
+  fileCriteriaDescription,
+  dropzoneTitle,
+  disabled = false,
+  maxHeight
+}) {
+  const {
+    classes
+  } = useStyles$3({
+    maxHeight
+  });
+  const {
+    t
+  } = useTranslation();
+  const displayTitle = title !== null && title !== void 0 ? title : t("fileUploadPanel.defaultTitle");
+  const displayDropzoneTitle = dropzoneTitle !== null && dropzoneTitle !== void 0 ? dropzoneTitle : t("fileUploadPanel.dropzoneTitle");
+  const displayFileCriteria = fileCriteriaDescription !== null && fileCriteriaDescription !== void 0 ? fileCriteriaDescription : t("fileUploadPanel.defaultFileCriteria");
+  function handleFileRemove(fileId) {
+    onFileRemove(fileId);
+  }
+  function handleFileRetry(fileId) {
+    if (onFileRetry) {
+      onFileRetry(fileId);
+    }
+  }
+  function handleFileCancel(fileId) {
+    if (onFileCancel) {
+      onFileCancel(fileId);
+    }
+  }
+  return jsxs(Box, {
+    className: classes.container,
+    children: [displayTitle && jsx(Typography, {
+      variant: "heading18SemiBold",
+      className: classes.title,
+      children: displayTitle
+    }), jsx(VentionDropZone, {
+      style: "outline",
+      size: "large",
+      onFilesSelect: onFilesSelect,
+      fileCriteriaDescription: displayFileCriteria,
+      defaultTitle: displayDropzoneTitle,
+      disabled: disabled
+    }), files.length > 0 && jsx(Box, {
+      className: classes.fileList,
+      children: files.map(file => jsx(VentionUploadFile, {
+        fileName: file.name,
+        fileSize: formatFileSize(file.size),
+        state: file.state,
+        errorMessage: file.errorMessage,
+        size: "large",
+        style: "shaded",
+        onRemove: () => handleFileRemove(file.id),
+        onRetry: () => handleFileRetry(file.id),
+        onCancel: () => handleFileCancel(file.id)
+      }, file.id))
+    })]
+  });
+}
+FileUploadPanel.displayName = "FileUploadPanel";
+const useStyles$3 = tss.withParams().create(({
+  theme,
+  maxHeight
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2),
+    width: "100%"
+  },
+  title: {
+    marginBottom: theme.spacing(1)
+  },
+  fileList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : "auto",
+    overflowY: maxHeight ? "auto" : "visible",
+    "& .MuiGrid-container": {
+      width: "100%"
+    },
+    "& .MuiGrid-root:nth-of-type(2)": {
+      flex: "1 1 0",
+      minWidth: 0
+    }
+  }
+}));
+
+/** Padding between the circle edge and the SVG boundary */
+const CIRCLE_PADDING = 10;
+function StepProgressCircle({
+  currentStep,
+  totalSteps,
+  title,
+  variant = "default",
+  size = 180,
+  strokeWidth = 12,
+  showTitle = true
+}) {
+  var _a;
+  const {
+    t
+  } = useTranslation();
+  const {
+    classes
+  } = useStyles$2({
+    size,
+    strokeWidth,
+    variant
+  });
+  const titleKey = (_a = title === null || title === void 0 ? void 0 : title.toLowerCase().replace(/\s/g, "")) !== null && _a !== void 0 ? _a : "progress";
+  const displayTitle = t(`stepProgressCircle.title.${titleKey}`, {
+    defaultValue: title !== null && title !== void 0 ? title : "Progress"
+  });
+  const percentage = totalSteps > 0 ? Math.round(currentStep / totalSteps * 100) : 0;
+  const radius = (size - strokeWidth) / 2 - CIRCLE_PADDING;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percentage / 100 * circumference;
+  const center = size / 2;
+  const progressText = totalSteps > 0 ? `${currentStep}/${totalSteps}` : "-/-";
+  return jsxs(Box, {
+    className: classes.container,
+    children: [showTitle && jsx(Typography, {
+      variant: "heading18SemiBold",
+      className: classes.title,
+      children: displayTitle
+    }), jsxs(Box, {
+      className: classes.circleContainer,
+      children: [jsxs("svg", {
+        className: classes.svg,
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        children: [jsx("circle", {
+          cx: center,
+          cy: center,
+          r: radius,
+          className: classes.backgroundCircle,
+          fill: "none"
+        }), jsx("circle", {
+          cx: center,
+          cy: center,
+          r: radius,
+          className: classes.progressCircle,
+          fill: "none",
+          strokeLinecap: "round",
+          transform: `rotate(-90 ${center} ${center})`,
+          strokeDasharray: circumference,
+          strokeDashoffset: strokeDashoffset
+        })]
+      }), jsx(Box, {
+        className: classes.textContainer,
+        children: jsx(Typography, {
+          variant: "heading24SemiBold",
+          className: classes.progressText,
+          children: progressText
+        })
+      })]
+    })]
+  });
+}
+StepProgressCircle.displayName = "StepProgressCircle";
+const useStyles$2 = tss.withParams().create(({
+  theme,
+  size,
+  strokeWidth,
+  variant
+}) => {
+  const variantColors = {
+    default: theme.palette.primary.main,
+    success: theme.palette.success.main,
+    error: theme.palette.error.main,
+    warning: theme.palette.warning.main
+  };
+  return {
+    container: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    title: {
+      marginBottom: theme.spacing(2),
+      color: theme.palette.text.primary
+    },
+    circleContainer: {
+      position: "relative",
+      width: size,
+      height: size
+    },
+    svg: {
+      width: size,
+      height: size
+    },
+    backgroundCircle: {
+      stroke: theme.palette.grey[200],
+      strokeWidth
+    },
+    progressCircle: {
+      stroke: variantColors[variant],
+      strokeWidth,
+      transition: "stroke-dashoffset 0.5s ease-in-out, stroke 0.3s ease-in-out"
+    },
+    textContainer: {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    progressText: {
+      color: theme.palette.text.primary
+    }
+  };
+});
+
+const ActionButton = function ActionButton({
+  variant = "primary",
+  onClick,
+  disabled = false,
+  icon,
+  label,
+  size = 96
+}) {
+  const {
+    classes
+  } = useStyles$1({
+    size
+  });
+  const {
+    t
+  } = useTranslation();
+  const translationKey = label.toLowerCase().replace(/\s+/g, "_");
+  const translatedLabel = t(`actionButton.${translationKey}`, {
+    defaultValue: label
+  });
+  return jsx(VentionIconButton, {
+    onClick: onClick,
+    disabled: disabled,
+    size: "x-large",
+    variant: variant === "destructive" ? "destructive" : "filled",
+    className: classes.button,
+    "data-testid": "action-button",
+    children: jsxs(Box, {
+      className: classes.content,
+      children: [jsx(Box, {
+        className: classes.iconContainer,
+        children: icon
+      }), jsx(Typography, {
+        variant: "uiText14SemiBold",
+        className: classes.label,
+        children: translatedLabel
+      })]
+    })
+  });
+};
+ActionButton.displayName = "ActionButton";
+const useStyles$1 = tss.withParams().create(({
+  theme,
+  size
+}) => ({
+  button: {
+    height: size,
+    width: size,
+    minWidth: size,
+    padding: theme.spacing(2)
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.spacing(1)
+  },
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  label: {
+    textAlign: "center"
+  }
+}));
+
+function useAutoScrollInput(enabled, options = {}) {
+  const {
+    targetPositionPercent = 25,
+    scrollableContainerSelector = '[role="dialog"] .MuiDialogContent-root',
+    scrollBehavior = "smooth"
+  } = options;
+  useEffect(() => {
+    if (!enabled) return;
+    function findScrollableParent(element) {
+      let parent = element.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        const hasOverflow = style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll";
+        if (hasOverflow) {
+          return parent;
+        }
+        if (parent === document.body || parent === document.documentElement) {
+          break;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    }
+    function handleFocus(event) {
+      const target = event.target;
+      if (!target || !(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement)) {
+        return;
+      }
+      const targetRect = target.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const targetY = viewportHeight * (targetPositionPercent / 100);
+      const currentY = targetRect.top;
+      const scrollNeeded = currentY - targetY;
+      let scrollableContainer = null;
+      if (scrollableContainerSelector) {
+        const selectors = scrollableContainerSelector.split(",").map(selector => selector.trim());
+        for (const selector of selectors) {
+          const found = document.querySelector(selector);
+          if (found) {
+            scrollableContainer = found;
+            break;
+          }
+        }
+      }
+      if (!scrollableContainer) {
+        scrollableContainer = findScrollableParent(target);
+      }
+      if (scrollableContainer) {
+        const currentScrollTop = scrollableContainer.scrollTop;
+        const newScrollTop = currentScrollTop + scrollNeeded;
+        scrollableContainer.scrollTo({
+          top: newScrollTop,
+          behavior: scrollBehavior
+        });
+      }
+    }
+    document.addEventListener("focusin", handleFocus);
+    return () => {
+      document.removeEventListener("focusin", handleFocus);
+    };
+  }, [enabled, targetPositionPercent, scrollableContainerSelector, scrollBehavior]);
+}
+
+function ProductFormListComponent({
+  title = "Products",
+  items,
+  onDelete,
+  onSubmit,
+  getItemId,
+  fields,
+  maxHeight = 600
+}) {
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteId, setDeleteId] = useState(null);
+  const [formData, setFormData] = useState({});
+  const {
+    t
+  } = useTranslation();
+  const {
+    classes
+  } = useStyles({
+    maxHeight
+  });
+  useAutoScrollInput(editDialogOpen);
+  function handleEditClick(item) {
+    setFormData(item);
+    setEditDialogOpen(true);
+  }
+  function handleEditClose() {
+    setEditDialogOpen(false);
+    setFormData({});
+  }
+  function handleDeleteClick(id) {
+    setDeleteId(id);
+    setDeleteDialogOpen(true);
+  }
+  function handleDeleteConfirm() {
+    return __awaiter(this, void 0, void 0, function* () {
+      if (deleteId) {
+        yield onDelete(deleteId);
+        setDeleteDialogOpen(false);
+        setDeleteId(null);
+      }
+    });
+  }
+  function handleDeleteCancel() {
+    setDeleteDialogOpen(false);
+    setDeleteId(null);
+  }
+  function handleFieldChange(name, value) {
+    setFormData(prev => Object.assign(Object.assign({}, prev), {
+      [name]: value
+    }));
+  }
+  function getFieldDisplayValue(field, value) {
+    var _a, _b;
+    if (field.type === "select") {
+      return ((_b = (_a = field.options) === null || _a === void 0 ? void 0 : _a.find(opt => opt.value === value)) === null || _b === void 0 ? void 0 : _b.label) || String(value);
+    }
+    return (value === null || value === void 0 ? void 0 : value.toString()) || "";
+  }
+  function renderItemContent(item) {
+    const mainField = fields[0];
+    const secondaryFields = fields.slice(1);
+    return jsxs(Box, {
+      className: classes.itemContent,
+      children: [jsx(Typography, {
+        variant: "heading18SemiBold",
+        className: classes.itemTitle,
+        children: getFieldDisplayValue(mainField, item[mainField.name])
+      }), jsx(Typography, {
+        variant: "uiText14Regular",
+        color: "textSecondary",
+        className: classes.itemSubtitle,
+        children: secondaryFields.map(field => `${field.label}: ${getFieldDisplayValue(field, item[field.name])}`).join(" | ")
+      })]
+    });
+  }
+  function renderField(field) {
+    var _a;
+    const fieldValue = formData[field.name];
+    if (field.type === "select") {
+      const menuItems = ((_a = field.options) === null || _a === void 0 ? void 0 : _a.map(opt => ({
+        value: opt.value,
+        displayText: opt.label
+      }))) || [];
+      return jsx(VentionSelect, {
+        labelText: field.label,
+        value: fieldValue || "",
+        onChange: event => {
+          handleFieldChange(field.name, event.target.value);
+        },
+        menuItems: menuItems,
+        size: "large",
+        variant: "outlined"
+      }, field.name);
+    }
+    return jsx(VentionTextInput, {
+      label: field.label,
+      value: fieldValue !== null && fieldValue !== void 0 ? fieldValue : "",
+      onChange: event => {
+        handleFieldChange(field.name, field.type === "number" ? Number(event.target.value) : event.target.value);
+      },
+      type: field.type === "number" ? "number" : "text",
+      fullWidth: true,
+      size: "large",
+      inputProps: field.type === "number" ? {
+        min: field.min,
+        max: field.max
+      } : undefined
+    }, field.name);
+  }
+  const isEditing = Object.keys(formData).length > 0 && "id" in formData;
+  return jsxs(Box, {
+    className: classes.container,
+    children: [jsxs(Box, {
+      className: classes.header,
+      children: [jsx(Typography, {
+        variant: "heading24SemiBold",
+        children: title
+      }), jsx(VentionButton, {
+        onClick: () => {
+          setFormData({});
+          setEditDialogOpen(true);
+        },
+        size: "large",
+        variant: "filled",
+        startIcon: jsx(VentionIcon, {
+          type: "plus",
+          size: 24,
+          color: "white"
+        }),
+        children: t("productFormList.add")
+      })]
+    }), jsx(Box, {
+      className: classes.listContainer,
+      children: items.length === 0 ? jsx(Box, {
+        className: classes.emptyState,
+        children: jsx(Typography, {
+          variant: "uiText14Regular",
+          color: "textSecondary",
+          children: t("productFormList.emptyState", {
+            defaultValue: "No items yet. Click Add to create one."
+          })
+        })
+      }) : jsx(List, {
+        children: items.map(item => jsxs(ListItem, {
+          className: classes.listItem,
+          children: [renderItemContent(item), jsxs(Box, {
+            className: classes.actions,
+            children: [jsx(IconButton, {
+              onClick: () => handleEditClick(item),
+              size: "medium",
+              children: jsx(VentionIcon, {
+                type: "edit",
+                size: 24
+              })
+            }), jsx(IconButton, {
+              onClick: () => handleDeleteClick(getItemId(item)),
+              size: "medium",
+              children: jsx(VentionIcon, {
+                type: "trash",
+                size: 24
+              })
+            })]
+          })]
+        }, getItemId(item)))
+      })
+    }), jsxs(Dialog, {
+      open: editDialogOpen,
+      onClose: handleEditClose,
+      maxWidth: "sm",
+      fullWidth: true,
+      children: [jsx(DialogTitle, {
+        children: jsx(Typography, {
+          variant: "heading18SemiBold",
+          textAlign: "center",
+          children: isEditing ? t("productFormList.modify") : t("productFormList.new")
+        })
+      }), jsx(DialogContent, {
+        className: classes.dialogContent,
+        children: jsx(Box, {
+          className: classes.dialogForm,
+          children: fields.map(field => renderField(field))
+        })
+      }), jsxs(DialogActions, {
+        className: classes.dialogActions,
+        children: [jsx(VentionButton, {
+          onClick: handleEditClose,
+          variant: "outline",
+          size: "large",
+          children: t("productFormList.cancel")
+        }), jsx(VentionButton, {
+          onClick: () => __awaiter(this, void 0, void 0, function* () {
+            if (yield onSubmit(formData)) {
+              handleEditClose();
+            }
+          }),
+          variant: "filled",
+          size: "large",
+          children: isEditing ? t("productFormList.save") : t("productFormList.create")
+        })]
+      })]
+    }), jsxs(Dialog, {
+      open: deleteDialogOpen,
+      onClose: handleDeleteCancel,
+      maxWidth: "xs",
+      fullWidth: true,
+      children: [jsx(DialogTitle, {
+        children: jsx(Typography, {
+          variant: "heading18SemiBold",
+          textAlign: "center",
+          children: t("productFormList.delete")
+        })
+      }), jsx(DialogContent, {
+        children: jsx(Typography, {
+          variant: "uiText14Regular",
+          className: classes.deleteMessage,
+          children: t("productFormList.deleteConfirmation")
+        })
+      }), jsxs(DialogActions, {
+        className: classes.dialogActions,
+        children: [jsx(VentionButton, {
+          onClick: handleDeleteCancel,
+          variant: "outline",
+          size: "large",
+          children: t("productFormList.cancel")
+        }), jsx(VentionButton, {
+          onClick: handleDeleteConfirm,
+          variant: "destructive",
+          size: "large",
+          children: t("productFormList.delete")
+        })]
+      })]
+    })]
+  });
+}
+ProductFormListComponent.displayName = "ProductFormList";
+const ProductFormList = memo(ProductFormListComponent);
+const useStyles = tss.withParams().create(({
+  theme,
+  maxHeight
+}) => ({
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    flex: 1,
+    minWidth: 0
+  },
+  header: {
+    flexShrink: 0,
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: theme.spacing(3)
+  },
+  listContainer: {
+    flexGrow: 1,
+    overflowY: "auto",
+    maxHeight
+  },
+  listItem: {
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.shape.borderRadius,
+    marginBottom: theme.spacing(2),
+    alignItems: "center",
+    overflow: "hidden",
+    display: "flex",
+    width: "100%"
+  },
+  itemContent: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    paddingRight: theme.spacing(2)
+  },
+  itemTitle: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%"
+  },
+  itemSubtitle: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%"
+  },
+  actions: {
+    display: "flex",
+    alignItems: "center",
+    flexShrink: 0,
+    gap: theme.spacing(1)
+  },
+  emptyState: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: theme.spacing(4),
+    flex: 1
+  },
+  dialogContent: {
+    borderTop: `1px solid ${theme.palette.divider}`,
+    borderBottom: `1px solid ${theme.palette.divider}`
+  },
+  dialogForm: {
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(3),
+    paddingTop: theme.spacing(2)
+  },
+  dialogActions: {
+    padding: theme.spacing(2),
+    gap: theme.spacing(2)
+  },
+  deleteMessage: {
+    paddingTop: theme.spacing(1)
+  }
+}));
+
+var UserLevel;
+(function (UserLevel) {
+  UserLevel[UserLevel["Operator"] = 1] = "Operator";
+  UserLevel[UserLevel["Maintenance"] = 2] = "Maintenance";
+  UserLevel[UserLevel["Admin"] = 3] = "Admin";
+})(UserLevel || (UserLevel = {}));
+function hasSufficientLevel(requiredLevel, currentLevel) {
+  return currentLevel >= requiredLevel;
+}
+
+/**
+ * This module provides utilities for generating API base URLs for machine apps.
+ * It automatically detects the environment and returns the appropriate URL:
+ * - Local/Edge: http://hostname:8000
+ * - Deployed: Uses passthrough URL for digital twin infrastructure
+ */
+/**
+ * Gets the execution engine HTTP URL for deployed environments
+ * @param processName - The name of the process/service
+ * @returns The full URL for the execution engine API
+ */
+function getExecutionEngineHttpUrl(processName) {
+  const {
+    href,
+    port,
+    hostname,
+    origin
+  } = window.location;
+  const pathParts = new URL(href).pathname.split("/").filter(Boolean);
+  const passthroughIndex = pathParts.indexOf("passthrough");
+  const hmiIndex = pathParts.indexOf("hmi");
+  const sessionId = passthroughIndex >= 0 && passthroughIndex < pathParts.length - 1 ? pathParts[passthroughIndex + 1] : hmiIndex > 0 ? pathParts[hmiIndex - 1] : "";
+  const basePath = `/digital-twin/machine-motion/passthrough/${sessionId}/80/v1/machineCode/services/${processName}`;
+  const isDev = port === "5173" || hostname === "localhost";
+  const baseOrigin = isDev ? "https://digital-twin.vention.foo" : origin;
+  return `${baseOrigin}${basePath}`;
+}
+/**
+ * Checks if the current environment is running on edge (local controller)
+ * @returns true if running on edge, false otherwise
+ */
+function isOnEdge() {
+  return window.location.hostname.startsWith("192.168") || window.location.hostname.startsWith("localhost");
+}
+/**
+ * Gets the API base URL for the specified process/service
+ * @param options - Configuration options including process name and optional edge port
+ * @returns The API base URL for all backend API calls
+ * @example
+ * ```ts
+ * const apiUrl = getApiBaseUrl({ processName: "ai-operator" })
+ * // Returns: http://192.168.1.100:8000 (on edge)
+ * // or https://digital-twin.../passthrough/.../ai-operator (deployed)
+ * ```
+ */
+function getApiBaseUrl(options) {
+  const {
+    processName,
+    edgePort = 8000
+  } = options;
+  if (isOnEdge()) {
+    return `http://${window.location.hostname}:${edgePort}`;
+  }
+  return getExecutionEngineHttpUrl(processName);
+}
+
+export { ActionButton, FileUploadPanel, I18nProvider, I18nSettings, LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, ProductFormList, SettingsPage, Sidebar, StatusTopBar, StepProgressCircle, TimeLabel, UserLevel, Z_INDEX, closeCustomUi, formatDateToInput, getApiBaseUrl, getAvailableTimezones, getLanguageDisplayName, getSupportedLanguages, hasSufficientLevel, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate, useAutoScrollInput, useI18n };