Copy page

Frontend

System Settings

System Settings

Relevant source files

The following files were used as context for generating this wiki page:

• src/lib/breadcrumb/settings-breadcrumb.ts
• src/lib/components/ui/color-picker/color-picker.svelte
• src/lib/user-profile-store.svelte.ts
• src/routes/(app)/+layout.svelte
• src/routes/(app)/system/settings/+layout.svelte
• src/routes/(app)/system/settings/+page.svelte
• src/routes/(app)/system/settings/organizations/+page.svelte
• src/routes/(app)/system/settings/profile/+page.svelte
• src/routes/(app)/system/settings/security/+page.svelte

The System Settings area, located under the /system/settings route group, provides a centralized interface for managing user profiles, security configurations, organizational structures, and system-level resources like modules and templates. It utilizes a unified layout with vertical tab navigation and integrated breadcrumbs for consistent navigation across sub-sections.

Route Redirection

The root of the settings group (/system/settings) does not contain its own content. Instead, it issues a 307 Temporary Redirect to the profile section to ensure users land on a valid settings page immediately.

• Redirect Target: /system/settings/profile src/routes/(app)/system/settings/+page.svelte:4-4.

Settings Layout & Navigation

The settings route group uses a shared +layout.svelte to maintain a consistent UI across all sub-pages. This layout is built upon the AppPageScaffold and features a two-column design: a sidebar for tab navigation and a main content area for the specific settings forms.

Tab Navigation

The navigation sidebar contains links to the six primary settings sections src/routes/(app)/system/settings/+layout.svelte:21-28:

• Profile: Personal user information and avatar customization.
• Organizations: Management of tenant organizations.
• Users: User account administration.
• Security: Password, OIDC, and account deletion settings.
• Modules: System extension and module management.
• Templates: PDF, Excel, and Email template configuration.

Breadcrumb Integration

The layout integrates with the global breadcrumb system using settingsTabMenuSegment. This provides a dropdown menu in the breadcrumb bar, allowing users to switch between settings tabs without using the sidebar src/lib/breadcrumb/settings-breadcrumb.ts:4-54.

Visual Representation of Settings Structure

Code
graph TD
    subgraph "System Settings Group (/system/settings)"
        Layout["settings/+layout.svelte"]
        Redirect["settings/+page.svelte (307 Redirect)"]
        
        subgraph "Sub-sections"
            Profile["/profile"]
            Security["/security"]
            Orgs["/organizations"]
            Users["/users"]
            Modules["/modules"]
            Templates["/templates"]
        end
    end

    Redirect -->|redirects to| Profile
    Layout -->|wraps| Profile
    Layout -->|wraps| Security
    Layout -->|wraps| Orgs
    Layout -->|wraps| Users
    Layout -->|wraps| Modules
    Layout -->|wraps| Templates

    Layout -.-> Breadcrumb["settingsTabMenuSegment"]

Sources: src/routes/(app)/system/settings/+layout.svelte:19-38, src/routes/(app)/system/settings/+page.svelte:1-5, src/lib/breadcrumb/settings-breadcrumb.ts:11-42

Settings Sub-Sections

The following sections provide a high-level overview of the settings sub-modules. For deep technical implementation details, refer to the respective child pages.

User Profile & Security

Managed via userProfileStore, the profile section allows users to update their display names, email addresses, and visual identity (avatars). The security section handles sensitive configurations including password changes and OpenID Connect (OIDC) parameters for Identity Provider (IDP) integration src/routes/(app)/system/settings/security/+page.svelte:108-144.

• Profile State: Reactive $state synced with sessionStorage src/lib/user-profile-store.svelte.ts:41-56.
• Audit: Security settings include version history tracking via the entity.versionHistory sheet src/routes/(app)/system/settings/security/+page.svelte:45-47.

For details, see User Profile & Security Settings.

Organizations & Users

These sections provide administrative tools for managing the multi-tenant aspects of the platform.

• Organizations: Uses EntityListTable to list and manage organizations, including branding options like custom colors via the ColorPicker component src/routes/(app)/system/settings/organizations/+page.svelte:4-14.
• Users: Standardized interface for creating and editing user accounts and permissions.

For details, see Organizations & Users Management.

Modules & Templates

These sections manage the functional extensibility and output generation of the system.

• Modules: Interface for uploading module packages (zip/tar.gz) and managing installed extensions.
• Templates: Repository for document and communication templates (PDF, HTML, Excel).

For details, see Modules & Templates Management.

Data Flow & Code Entities

The settings area interacts with several core services to maintain state and perform updates.

Code Entity	Role	File Path
userProfileStore	Reactive store for the currently logged-in user's profile data.	src/lib/user-profile-store.svelte.ts
settingsTabMenuSegment	Generates the breadcrumb navigation logic for settings.	src/lib/breadcrumb/settings-breadcrumb.ts
AppPageScaffold	The base layout component providing header and content slots.	src/lib/components/AppPageScaffold.svelte
apiFetch	Standardized fetch wrapper used for PATCHing profile and security updates.	src/lib/api.ts

Settings Interaction Diagram

Code
sequenceDiagram
    participant UI as settings/+layout.svelte
    participant Store as userProfileStore
    participant API as apiFetch (/api/v1/auth/me)
    participant Storage as sessionStorage

    UI->>Store: Access userProfileStore.current
    Store->>Storage: loadFromStorage()
    UI->>API: PATCH profile updates (Profile Page)
    API-->>UI: 200 OK (updated profile)
    UI->>Store: userProfileStore.set(profile)
    Store->>Storage: setItem('user', next)
    Store-->>UI: Reactive update ($state)

Sources: src/lib/user-profile-store.svelte.ts:32-56, src/routes/(app)/system/settings/profile/+page.svelte:69-134, src/routes/(app)/+layout.svelte:10-42

---