@vention/machine-apps-components 0.3.22 → 0.4.1

package/index.esm.js

@@ -1,29 +1,990 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { useTheme, Typography, Box, Button, InputAdornment, IconButton, Divider, TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from '@mui/material';
-import { tss } from 'tss-react/mui';
-import { COLORS, VentionModalBase, VentionIcon, VentionTextInput, VentionButton, VentionStatusIndicator, VentionSpinner, VentionAlert, VentionSelect } from '@vention/machine-ui';
-import React, { useState, useEffect, memo, useRef, forwardRef, useCallback, useImperativeHandle } from 'react';
+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 [timeLabel, setTimeLabel] = useState(() => new Date().toLocaleTimeString([], {
-    hour: "numeric",
-    minute: "2-digit"
-  }).toLowerCase().replace(" ", ""));
-  useEffect(function updateTimeLabel() {
-    const intervalId = setInterval(() => {
+  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,
@@ -53,7 +1014,7 @@ const navigateControlCenter = route => {
   window.parent.postMessage(`navigateTo${capitalizedRoute}`, "*");
 };
 
-const NavigationConfirmationModal = props => {
+const NavigationConfirmationModal = function NavigationConfirmationModal(props) {
   const {
     isOpen,
     destination,
@@ -61,8 +1022,11 @@ const NavigationConfirmationModal = props => {
   } = props;
   const {
     classes
-  } = useStyles$a();
-  const handleConfirm = () => {
+  } = useStyles$f();
+  const {
+    t
+  } = useI18n();
+  const handleConfirm = function handleConfirm() {
     if (!destination) return;
     onClose();
     if (destination === "controlCenter") {
@@ -71,11 +1035,15 @@ const NavigationConfirmationModal = props => {
       navigateControlCenter(destination);
     }
   };
-  const getButtonText = () => {
+  const getButtonText = function getButtonText() {
     if (destination === "controlCenter") {
-      return "Go to Control Center";
+      return t("navigation.modal.goToControlCenter", {
+        defaultValue: "Go to Control Center"
+      });
     }
-    return "Go to Remote Support";
+    return t("navigation.modal.goToRemoteSupport", {
+      defaultValue: "Go to Remote Support"
+    });
   };
   return jsx(VentionModalBase, {
     isOpen: isOpen,
@@ -94,10 +1062,14 @@ const NavigationConfirmationModal = props => {
         })
       }), jsx(Typography, {
         className: classes.title,
-        children: "You are about to exit the application"
+        children: t("navigation.modal.exit.title", {
+          defaultValue: "You are about to exit the application"
+        })
       }), jsx(Typography, {
         className: classes.body,
-        children: "Please make sure your changes are saved before you leave the app."
+        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,
@@ -113,7 +1085,7 @@ const NavigationConfirmationModal = props => {
     })
   });
 };
-const useStyles$a = tss.create(({
+const useStyles$f = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -135,20 +1107,26 @@ const useStyles$a = tss.create(({
     textAlign: "center"
   }),
   button: {
-    width: "320px",
+    minWidth: "320px",
+    width: "auto",
+    maxWidth: "100%",
     height: "80px",
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.button.filled,
     borderRadius: "4px",
-    padding: "8px",
+    padding: "8px 16px",
     boxSizing: "border-box",
-    marginTop: "auto"
+    marginTop: "auto",
+    "&:hover": {
+      backgroundColor: theme.palette.button.filledHover
+    }
   },
   buttonLabel: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: "0 8px",
-    boxSizing: "border-box"
+    boxSizing: "border-box",
+    width: "100%"
   },
   buttonText: {
     fontFamily: "Inter",
@@ -161,7 +1139,7 @@ const useStyles$a = tss.create(({
   }
 }));
 
-const PasswordProtectionModal = props => {
+const PasswordProtectionModal = function PasswordProtectionModal(props) {
   const {
     isOpen,
     onClose,
@@ -171,11 +1149,14 @@ const PasswordProtectionModal = props => {
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const {
     classes
-  } = useStyles$9();
+  } = useStyles$e();
+  const {
+    t
+  } = useI18n();
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState(false);
-  const handleConfirm = () => {
+  const handleConfirm = function handleConfirm() {
     if (password === correctPassword) {
       setPassword("");
       setError(false);
@@ -185,17 +1166,12 @@ const PasswordProtectionModal = props => {
       setError(true);
     }
   };
-  const handleClose = () => {
+  const handleClose = function handleClose() {
     setPassword("");
     setError(false);
     onClose();
   };
-  const handleKeyPress = event => {
-    if (event.key === "Enter") {
-      handleConfirm();
-    }
-  };
-  useEffect(() => {
+  useEffect(function handleKeyboardVisibility() {
     if (!isOpen || !isTouchScreenDevice()) {
       setIsKeyboardVisible(false);
       return;
@@ -234,20 +1210,31 @@ const PasswordProtectionModal = props => {
         className: classes.modalContent,
         children: [jsx(Typography, {
           className: classes.title,
-          children: "Administrator login required"
+          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: "Password",
+            label: t("navigation.modal.password.label", {
+              defaultValue: "Password"
+            }),
             type: showPassword ? "text" : "password",
             value: password,
             onChange: event => {
               setPassword(event.target.value);
               setError(false);
             },
-            onKeyPress: handleKeyPress,
             state: error ? "error" : "default",
-            helperText: error ? "Incorrect password" : "",
+            helperText: error ? t("navigation.modal.password.error", {
+              defaultValue: "Incorrect password"
+            }) : "",
             fullWidth: true,
             size: "xx-large",
             InputProps: {
@@ -257,24 +1244,28 @@ const PasswordProtectionModal = props => {
                   onClick: () => setShowPassword(!showPassword),
                   edge: "end",
                   disableRipple: true,
+                  type: "button",
                   children: jsx(VentionIcon, {
                     type: showPassword ? "eye-closed" : "eye",
                     size: 28,
-                    color: COLORS.slate[900]
+                    color: "#0f172a"
                   })
                 })
               })
             }
           })
         }), jsx(Button, {
-          onClick: handleConfirm,
           className: classes.button,
           disableRipple: true,
+          type: "submit",
+          form: "password-form",
           children: jsx(Box, {
             className: classes.buttonLabel,
             children: jsx(Typography, {
               className: classes.buttonText,
-              children: "Confirm"
+              children: t("navigation.modal.password.confirm", {
+                defaultValue: "Confirm"
+              })
             })
           })
         })]
@@ -282,7 +1273,7 @@ const PasswordProtectionModal = props => {
     })]
   });
 };
-const useStyles$9 = tss.create(({
+const useStyles$e = tss.create(({
   theme
 }) => ({
   modalContent: {
@@ -300,7 +1291,7 @@ const useStyles$9 = tss.create(({
     fontWeight: 700,
     lineHeight: "48px",
     textAlign: "center",
-    color: COLORS.slate[900]
+    color: theme.palette.text.primary
   },
   inputContainer: {
     width: "499px",
@@ -311,12 +1302,12 @@ const useStyles$9 = tss.create(({
   button: {
     width: "250px",
     height: "64px",
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.button.filled,
     borderRadius: "4px",
     padding: "8px",
     boxSizing: "border-box",
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     }
   },
   buttonLabel: {
@@ -337,7 +1328,7 @@ const useStyles$9 = tss.create(({
   }
 }));
 
-const NavigationBarItem = props => {
+const NavigationBarItem = function NavigationBarItem(props) {
   const {
     icon,
     iconDisabled,
@@ -354,17 +1345,18 @@ const NavigationBarItem = props => {
   const {
     classes,
     cx
-  } = useStyles$8();
+  } = 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 = () => {
+  const handleItemClick = function handleItemClick() {
     if (isDisabled || !handleNavigate || !setPasswordProtectedItem) return;
-    // If destination has a password and it's different from current password, show modal
     if (password && password !== currentPassword) {
       setPasswordProtectedItem(props);
       return;
     }
-    // Otherwise navigate directly
     onClick ? onClick() : handleNavigate(path);
   };
   return jsxs(Button, {
@@ -380,11 +1372,13 @@ const NavigationBarItem = props => {
       children: currentIcon
     }), jsx(Typography, {
       className: classes.navLabel,
-      children: label
+      children: t(label, {
+        defaultValue: label
+      })
     })]
   });
 };
-const useStyles$8 = tss.create(({
+const useStyles$d = tss.create(({
   theme
 }) => ({
   tabButton: {
@@ -399,7 +1393,7 @@ const useStyles$8 = tss.create(({
     backgroundColor: "transparent",
     transition: "background-color 0.2s",
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     },
     color: theme.palette.common.white,
     "&.Mui-disabled": {
@@ -407,7 +1401,7 @@ const useStyles$8 = tss.create(({
     }
   },
   active: {
-    backgroundColor: COLORS.slate[600]
+    backgroundColor: theme.palette.button.filledPressed
   },
   disabled: {
     opacity: 0.5,
@@ -426,8 +1420,17 @@ const useStyles$8 = tss.create(({
   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 = props => {
+const NavigationBarRoot = function NavigationBarRoot(props) {
   var _a;
   const {
     children,
@@ -438,22 +1441,28 @@ const NavigationBarRoot = props => {
     isControlCenterDisabled = false,
     isSupportDisabled = false,
     showControlCenterButton = true,
-    showSupportButton = true
+    showSupportButton = true,
+    variant = "fixed"
   } = props;
   const location = useLocation();
   const navigate = useNavigate();
   const theme = useTheme();
   const {
     classes
-  } = useStyles$7();
+  } = 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 = (color, opacity = 1) => {
+  const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
   };
-  const handleNavigate = path => {
+  const handleNavigate = function handleNavigate(path) {
     if (location.pathname !== path) navigate(path);
   };
   useEffect(function updateCurrentPassword() {
@@ -461,7 +1470,7 @@ const NavigationBarRoot = props => {
     const currentPagePassword = React.isValidElement(currentPage) ? currentPage.props.password : undefined;
     setCurrentPassword(currentPagePassword !== null && currentPagePassword !== void 0 ? currentPagePassword : null);
   }, [location.pathname, children]);
-  const handleControlCenterClick = () => {
+  const handleControlCenterClick = function handleControlCenterClick() {
     if (isControlCenterDisabled) return;
     if (onControlCenterClick) {
       onControlCenterClick();
@@ -469,7 +1478,7 @@ const NavigationBarRoot = props => {
       setModalDestination("controlCenter");
     }
   };
-  const handleSupportClick = () => {
+  const handleSupportClick = function handleSupportClick() {
     if (isSupportDisabled) return;
     if (onSupportClick) {
       onSupportClick();
@@ -477,7 +1486,7 @@ const NavigationBarRoot = props => {
       setModalDestination("remoteSupport");
     }
   };
-  const handlePasswordSuccess = () => {
+  const handlePasswordSuccess = function handlePasswordSuccess() {
     if (passwordProtectedItem) {
       if (passwordProtectedItem.onClick) {
         passwordProtectedItem.onClick();
@@ -486,7 +1495,7 @@ const NavigationBarRoot = props => {
       }
     }
   };
-  const processedChildren = React.Children.map(children, child => {
+  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;
@@ -499,14 +1508,20 @@ const NavigationBarRoot = props => {
       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: () => setModalDestination(null)
+      onClose: handleCloseConfirmation
     }), jsx(PasswordProtectionModal, {
       isOpen: passwordProtectedItem !== null,
-      onClose: () => setPasswordProtectedItem(null),
+      onClose: handleClosePassword,
       onSuccess: handlePasswordSuccess,
       correctPassword: (_a = passwordProtectedItem === null || passwordProtectedItem === void 0 ? void 0 : passwordProtectedItem.password) !== null && _a !== void 0 ? _a : ""
     }), jsx("footer", {
@@ -521,8 +1536,8 @@ const NavigationBarRoot = props => {
             disabled: isControlCenterDisabled,
             className: classes.sideButton,
             style: {
-              backgroundColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
-              borderColor: isControlCenterDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              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"
             },
@@ -531,7 +1546,9 @@ const NavigationBarRoot = props => {
               style: {
                 color: isControlCenterDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
               },
-              children: "Control Center"
+              children: t("navigation.bar.controlCenter", {
+                defaultValue: "Control Center"
+              })
             })
           })
         }), jsx("nav", {
@@ -545,8 +1562,8 @@ const NavigationBarRoot = props => {
             disabled: isSupportDisabled,
             className: classes.sideButton,
             style: {
-              backgroundColor: isSupportDisabled ? getFadedColor(COLORS.slate[800]) : COLORS.slate[800],
-              borderColor: isSupportDisabled ? getFadedColor(COLORS.slate[600]) : COLORS.slate[600],
+              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"
             },
@@ -560,7 +1577,9 @@ const NavigationBarRoot = props => {
               style: {
                 color: isSupportDisabled ? getFadedColor(theme.palette.common.white) : theme.palette.common.white
               },
-              children: "Support"
+              children: t("navigation.bar.support", {
+                defaultValue: "Support"
+              })
             })
           }), showTimer && jsx(TimeLabel, {
             className: classes.timeLabel,
@@ -571,23 +1590,32 @@ const NavigationBarRoot = props => {
     })]
   });
 };
-const useStyles$7 = tss.create(({
-  theme
+const useStyles$c = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
-  root: {
+  root: Object.assign({
     boxSizing: "border-box",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     height: "120px",
-    padding: theme.spacing(2, 6),
+    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]}`
-  },
+    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",
@@ -614,14 +1642,14 @@ const useStyles$7 = tss.create(({
     justifyContent: "center",
     height: theme.spacing(11),
     padding: theme.spacing(2, 4),
-    backgroundColor: COLORS.slate[800],
+    backgroundColor: theme.palette.background.brand,
     borderRadius: 4,
-    border: `2px solid ${COLORS.slate[600]}`,
+    border: `2px solid ${theme.palette.border.onColor}`,
     color: theme.palette.common.white,
     textTransform: "none",
     minWidth: 0,
     "&:hover": {
-      backgroundColor: COLORS.slate[700]
+      backgroundColor: theme.palette.button.filledHover
     },
     "&.Mui-disabled": {
       color: theme.palette.common.white
@@ -655,7 +1683,7 @@ const NavigationBar = Object.assign(NavigationBarRoot, {
   Item: NavigationBarItem
 });
 
-const StatusTopBarButton = props => {
+const StatusTopBarButton = function StatusTopBarButton(props) {
   const {
     label,
     onClick,
@@ -672,9 +1700,9 @@ const StatusTopBarButton = props => {
   } = props;
   const {
     classes
-  } = useStyles$6();
+  } = useStyles$b();
   if (!visible) return null;
-  const getFadedColor = (color, opacity = 1) => {
+  const getFadedColor = function getFadedColor(color, opacity = 1) {
     return `${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
   };
   const hasBackgroundColor = !!backgroundColor;
@@ -684,7 +1712,7 @@ const StatusTopBarButton = props => {
   const finalBorderColor = disabled && borderColor ? getFadedColor(borderColor) : borderColor;
   const finalTextColor = disabled && textColor ? getFadedColor(textColor) : textColor;
   const finalIcon = disabled && iconDisabled ? iconDisabled : icon;
-  const handleClick = () => {
+  const handleClick = function handleClick() {
     if (!disabled && onClick) {
       onClick();
     }
@@ -718,7 +1746,7 @@ const StatusTopBarButton = props => {
     })
   });
 };
-const useStyles$6 = tss.create(({
+const useStyles$b = tss.create(({
   theme
 }) => ({
   actionButton: {
@@ -746,14 +1774,17 @@ const useStyles$6 = tss.create(({
   }
 }));
 
-const StatusTopBarRoot = props => {
+const StatusTopBarRoot = function StatusTopBarRoot(props) {
   const {
     status,
-    buttonConfigs = []
+    buttonConfigs = [],
+    variant = "light"
   } = props;
   const {
     classes
-  } = useStyles$5();
+  } = useStyles$a({
+    variant
+  });
   const visibleButtons = buttonConfigs.filter(config => config.visible !== false);
   const hasVisibleButtons = visibleButtons.length > 0;
   return jsxs("header", {
@@ -778,17 +1809,17 @@ const StatusTopBarRoot = props => {
     })]
   });
 };
-const useStyles$5 = tss.create(({
-  theme
+const useStyles$a = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
   root: {
     boxSizing: "border-box",
-    position: "fixed",
-    top: 0,
-    right: 0,
-    left: 0,
-    backgroundColor: theme.palette.common.white,
-    height: "128px"
+    position: "relative",
+    width: "100%",
+    backgroundColor: variant === "dark" ? theme.palette.background.defaultInverse : theme.palette.common.white,
+    height: "120px",
+    flexShrink: 0
   },
   content: {
     display: "flex",
@@ -798,7 +1829,10 @@ const useStyles$5 = tss.create(({
   },
   leftArea: {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    "& .MuiTypography-root": {
+      color: variant === "dark" ? theme.palette.common.white : theme.palette.text.primary
+    }
   },
   rightArea: {
     display: "flex",
@@ -817,30 +1851,35 @@ const useStyles$5 = tss.create(({
 }));
 const StatusTopBar = StatusTopBarRoot;
 
-const Sidebar = props => {
+const Sidebar = function Sidebar(props) {
+  const {
+    items,
+    variant = "card"
+  } = props;
   const {
     classes
-  } = useStyles$4();
+  } = useStyles$9({
+    variant
+  });
   return jsx(Box, {
     className: classes.container,
-    children: props.items.map((item, index) => jsxs(React.Fragment, {
-      children: [jsx(SidebarItemComponent, {
-        item: item
-      }), index < props.items.length - 1 && jsx(Divider, {
-        className: classes.divider
-      })]
+    children: items.map(item => jsx(SidebarItemComponent, {
+      item: item,
+      variant: variant
     }, item.id))
   });
 };
 const ICON_SIZE = 32;
-const SidebarItemComponent = props => {
+const SidebarItemComponent = function SidebarItemComponent(props) {
   const {
-    item
+    item,
+    variant
   } = props;
   const {
     classes
   } = useSidebarItemStyles({
-    state: item.state
+    state: item.state,
+    variant
   });
   const isDisabled = item.state === "disabled";
   return jsx(Button, {
@@ -855,7 +1894,10 @@ const SidebarItemComponent = props => {
       className: classes.content,
       children: [jsxs(Box, {
         className: classes.leftSection,
-        children: [item.icon ? item.icon : jsx(Box, {
+        children: [item.icon ? jsx(Box, {
+          className: classes.iconWrapper,
+          children: item.icon
+        }) : jsx(Box, {
           className: classes.iconPlaceholder
         }), jsxs(Box, {
           className: classes.textContainer,
@@ -880,42 +1922,65 @@ const SidebarItemComponent = props => {
     })
   });
 };
-const useStyles$4 = tss.create(({
-  theme
+const useStyles$9 = tss.withParams().create(({
+  theme,
+  variant
 }) => ({
-  container: {
+  container: Object.assign({
     display: "flex",
     flexDirection: "column",
     width: "100%"
-  },
-  divider: {
-    borderColor: theme.palette.border.main
-  }
+  }, variant === "card" ? {
+    padding: theme.spacing(2),
+    gap: theme.spacing(1)
+  } : {
+    padding: 0,
+    gap: 0
+  })
 }));
-const useSidebarItemStyles = tss.withParams().create(({
+const useSidebarItemStyles = tss.withParams().create(function createSidebarItemStyles({
   theme,
-  state
-}) => {
+  state,
+  variant
+}) {
   const isActive = state === "active";
   const isDisabled = state === "disabled";
-  return {
-    button: {
+  const isAccentVariant = variant === "accent";
+  const getButtonStyles = () => {
+    const baseStyles = {
       width: "100%",
-      height: theme.spacing(14),
-      padding: theme.spacing(7, 5),
+      minHeight: theme.spacing(14),
+      padding: theme.spacing(3, 4),
       textAlign: "left",
       textTransform: "none",
-      borderRadius: 0,
-      backgroundColor: isActive ? theme.palette.background.surface1active : "transparent",
-      border: isActive ? `1px solid ${theme.palette.border.main}` : "1px solid transparent",
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-start",
-      transition: "background-color 0.2s ease",
+      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 ? "transparent" : isActive ? theme.palette.background.surface1active : theme.palette.action.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",
@@ -929,6 +1994,15 @@ const useSidebarItemStyles = tss.withParams().create(({
       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)
     },
@@ -967,17 +2041,24 @@ const LogsTable = memo(({
   hasMoreLogs,
   onLogClick,
   tableHeight,
-  emptyStateMessage = "You have no logs",
+  emptyStateMessage,
   emptyStateIcon
 }) => {
   const {
     classes,
     cx
-  } = useStyles$3({
+  } = 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 => {
@@ -1004,7 +2085,9 @@ const LogsTable = memo(({
           sx: {
             marginTop: 2
           },
-          children: "Loading logs..."
+          children: t("logs.loading", {
+            defaultValue: "Loading logs..."
+          })
         })]
       })
     });
@@ -1016,7 +2099,9 @@ const LogsTable = memo(({
         className: classes.errorState,
         children: jsx(VentionAlert, {
           severity: "error",
-          title: "Error loading logs",
+          title: t("logs.error.loading", {
+            defaultValue: "Error loading logs"
+          }),
           descriptionText: error,
           size: "large"
         })
@@ -1033,7 +2118,7 @@ const LogsTable = memo(({
           children: emptyStateIcon
         }), jsx(Typography, {
           variant: "heading24Medium",
-          children: emptyStateMessage
+          children: emptyMessage
         })]
       })
     });
@@ -1071,8 +2156,30 @@ const LogsTable = memo(({
       color: theme.palette.info.main
     });
   };
-  const formatDate = dateStr => {
-    return dayjs(dateStr).format("YYYY-MM-DD h:mm:ssa");
+  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,
@@ -1091,35 +2198,45 @@ const LogsTable = memo(({
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: "Date"
+                children: t("logs.table.date", {
+                  defaultValue: "Date"
+                })
               })
             }), jsx(TableCell, {
               className: classes.tableHeaderCell,
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: "Type"
+                children: t("logs.table.type", {
+                  defaultValue: "Type"
+                })
               })
             }), jsx(TableCell, {
               className: classes.tableHeaderCell,
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: "Code"
+                children: t("logs.table.code", {
+                  defaultValue: "Code"
+                })
               })
             }), jsx(TableCell, {
               className: classes.tableHeaderCell,
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: "Message"
+                children: t("logs.table.message", {
+                  defaultValue: "Message"
+                })
               })
             }), jsx(TableCell, {
               className: classes.tableHeaderCell,
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: "Description"
+                children: t("logs.table.description", {
+                  defaultValue: "Description"
+                })
               })
             })]
           })
@@ -1138,14 +2255,16 @@ const LogsTable = memo(({
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: formatDate(log.date)
+                children: formatLogDate(log.date)
               })
             }), jsx(TableCell, {
               className: cx(classes.typeCell, getTypeClassName(log.level)),
               children: jsx(Typography, {
                 variant: "heading24Medium",
                 className: classes.tableText,
-                children: log.level
+                children: t(`logs.type.${log.level}`, {
+                  defaultValue: log.level
+                })
               })
             }), jsx(TableCell, {
               children: jsx(Typography, {
@@ -1177,19 +2296,23 @@ const LogsTable = memo(({
       }), jsx(Typography, {
         variant: "uiText14Regular",
         className: classes.loadMoreText,
-        children: "Loading more logs..."
+        children: t("logs.loadingMore", {
+          defaultValue: "Loading more logs..."
+        })
       })]
     }), onLoadMoreLogs && !hasMoreLogs && logs.length > 0 && jsx(Box, {
       className: classes.endMessage,
       children: jsx(Typography, {
         variant: "uiText14Regular",
-        children: "No more logs to load"
+        children: t("logs.noMoreLogs", {
+          defaultValue: "No more logs to load"
+        })
       })
     })]
   });
 });
 LogsTable.displayName = "LogsTable";
-const useStyles$3 = tss.withParams().create(({
+const useStyles$8 = tss.withParams().create(({
   theme,
   tableHeight
 }) => ({
@@ -1303,31 +2426,62 @@ const LogFilterForm = memo(({
   var _a, _b, _c, _d;
   const {
     classes
-  } = useStyles$2();
+  } = 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 typeOptions = [{
+  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: "All"
+    displayText: t("logs.filter.typeOptions.all", {
+      defaultValue: "All"
+    })
   }, {
     value: "error",
-    displayText: "Error"
+    displayText: t("logs.filter.typeOptions.error", {
+      defaultValue: "Error"
+    })
   }, {
     value: "warning",
-    displayText: "Warning"
+    displayText: t("logs.filter.typeOptions.warning", {
+      defaultValue: "Warning"
+    })
   }, {
     value: "info",
-    displayText: "Info"
-  }];
-  const sortOptions = [{
+    displayText: t("logs.filter.typeOptions.info", {
+      defaultValue: "Info"
+    })
+  }], [t]);
+  const sortOptions = useMemo(() => [{
     value: "latest",
-    displayText: "From latest"
+    displayText: t("logs.filter.sortOptions.latest", {
+      defaultValue: "From latest"
+    })
   }, {
     value: "oldest",
-    displayText: "From oldest"
-  }];
+    displayText: t("logs.filter.sortOptions.oldest", {
+      defaultValue: "From oldest"
+    })
+  }], [t]);
   const handleReset = () => {
     setFromDate("");
     setToDate("");
@@ -1336,20 +2490,23 @@ const LogFilterForm = memo(({
     onReset === null || onReset === void 0 ? void 0 : onReset();
   };
   useEffect(function notifyFilterChange() {
-    onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({
+    var _a;
+    (_a = handleFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(handleFilterChangeRef, {
       fromDate,
       toDate,
       logType,
       sortOrder
     });
-  }, [fromDate, toDate, logType, sortOrder, onFilterChange]);
+  }, [fromDate, toDate, logType, sortOrder]);
   return jsxs(Box, {
     className: classes.filterSection,
     children: [jsx(Box, {
       className: classes.filterInput,
       children: jsx(VentionTextInput, {
         size: "xx-large",
-        label: "From",
+        label: t("logs.filter.from", {
+          defaultValue: "From"
+        }),
         value: fromDate,
         onChange: event => setFromDate(event.target.value),
         type: "date"
@@ -1358,7 +2515,9 @@ const LogFilterForm = memo(({
       className: classes.filterInput,
       children: jsx(VentionTextInput, {
         size: "xx-large",
-        label: "To",
+        label: t("logs.filter.to", {
+          defaultValue: "To"
+        }),
         value: toDate,
         onChange: event => setToDate(event.target.value),
         type: "date"
@@ -1368,10 +2527,17 @@ const LogFilterForm = memo(({
       children: jsx(VentionSelect, {
         size: "xx-large",
         variant: "outlined",
-        labelText: "Type",
-        value: logType,
-        onChange: event => setLogType(event.target.value),
-        placeholder: "Choose type",
+        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, {
@@ -1379,7 +2545,9 @@ const LogFilterForm = memo(({
       children: jsx(VentionSelect, {
         size: "xx-large",
         variant: "outlined",
-        labelText: "Sort",
+        labelText: t("logs.filter.sort", {
+          defaultValue: "Sort"
+        }),
         value: sortOrder,
         onChange: event => setSortOrder(event.target.value),
         menuItems: sortOptions
@@ -1388,12 +2556,14 @@ const LogFilterForm = memo(({
       size: "x-large",
       onClick: handleReset,
       className: classes.resetButton,
-      children: "Reset"
+      children: t("logs.filter.reset", {
+        defaultValue: "Reset"
+      })
     })]
   });
 });
 LogFilterForm.displayName = "LogFilterForm";
-const useStyles$2 = tss.create(({
+const useStyles$7 = tss.create(({
   theme
 }) => ({
   filterSection: {
@@ -1457,7 +2627,10 @@ const LogsPagination = memo(({
 }) => {
   const {
     classes
-  } = useStyles$1();
+  } = useStyles$6();
+  const {
+    t
+  } = useI18n();
   const handlePrevious = () => {
     if (currentPage > 1) {
       onPageChange(currentPage - 1);
@@ -1478,7 +2651,11 @@ const LogsPagination = memo(({
       children: "\u2190"
     }), jsxs(Typography, {
       variant: "heading18SemiBold",
-      children: ["Page ", currentPage, " / ", totalPages]
+      children: [t("pagination.page", {
+        defaultValue: "Page"
+      }), " ", currentPage, " ", t("pagination.of", {
+        defaultValue: "of"
+      }), " ", totalPages]
     }), jsx(VentionButton, {
       size: "x-large",
       className: classes.paginationButton,
@@ -1489,7 +2666,7 @@ const LogsPagination = memo(({
   });
 });
 LogsPagination.displayName = "LogsPagination";
-const useStyles$1 = tss.create(({
+const useStyles$6 = tss.create(({
   theme
 }) => ({
   paginationSection: {
@@ -1539,7 +2716,7 @@ const LogsPanel = forwardRef((props, ref) => {
   const {
     classes,
     cx
-  } = useStyles();
+  } = useStyles$5();
   const [logs, setLogs] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -1554,43 +2731,45 @@ const LogsPanel = forwardRef((props, ref) => {
   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(page => __awaiter(void 0, void 0, void 0, function* () {
-    let isCancelled = false;
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = yield dataFetcher({
-        filters,
-        page,
-        pageSize
-      });
-      if (!isCancelled) {
-        if (paginationMode === "infinite-scroll" && page > 1) {
-          setLogs(prev => [...prev, ...result.logs]);
-        } else {
-          setLogs(result.logs);
+  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);
         }
-        setTotalPages(result.totalPages);
-        setHasMorePages(result.hasMorePages);
-        setCurrentPage(result.currentPage);
-        setIsLoading(false);
-      }
-    } catch (error) {
-      if (!isCancelled) {
-        const errorMessage = error instanceof Error ? error.message : "Failed to load logs";
-        setError(errorMessage);
-        setIsLoading(false);
-        if (onError) {
-          onError(error);
+      } 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() {
-      isCancelled = true;
+      controller.abort();
     };
-  }), [dataFetcher, filters, pageSize, paginationMode, onError]);
-  useEffect(function fetchDataOnChange() {
-    fetchData(currentPage);
   }, [fetchData, currentPage]);
   const handlePageChange = useCallback(page => {
     setCurrentPage(page);
@@ -1672,7 +2851,7 @@ const LogsPanel = forwardRef((props, ref) => {
   });
 });
 LogsPanel.displayName = "LogsPanel";
-const useStyles = tss.create(({
+const useStyles$5 = tss.create(({
   theme
 }) => ({
   root: {
@@ -1683,6 +2862,743 @@ const useStyles = tss.create(({
   }
 }));
 
+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:
@@ -1739,4 +3655,4 @@ function getApiBaseUrl(options) {
   return getExecutionEngineHttpUrl(processName);
 }
 
-export { LogFilterForm, LogsPagination, LogsPanel, LogsTable, NavigationBar, NavigationConfirmationModal, PasswordProtectionModal, Sidebar, StatusTopBar, TimeLabel, closeCustomUi, formatDateToInput, getApiBaseUrl, isOnEdge, isTouchScreenDevice, navigateControlCenter, parseLogDate };
+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 };