# System Settings

# System Settings

<details>
<summary>Relevant source files</summary>

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

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

</details>



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

```mermaid
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](#6.2.1).

### 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](#6.2.2).

### 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](#6.2.3).

## 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

```mermaid
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]()

---