Copy page

Frontend

System settings

The System Settings area lives under /system/settings and groups the platform administration pages. Each page uses AppPageScaffold + AppPageBreadcrumb for consistent layout.

Pages

Route	Purpose
/system/settings/modules	List, enable/disable, delete, and inspect registered microservice modules
/system/settings/modules/[code]	Edit a single module's metadata and configuration entries
/system/settings/organizations	List organizations
/system/settings/organizations/[uuid]	Edit an organization
/system/settings/organizations/create	Create an organization
/system/settings/users	List users (entity list table)
/system/settings/users/[uuid]	Edit a user (with change-password dialog)
/system/settings/users/create	Create a user
/system/settings/profile	Edit the current user's profile
/system/settings/security	Security settings
/system/settings/email-providers	Manage email provider configurations
/system/settings/templates	Manage templates

Modules

The modules page (/system/settings/modules) fetches services via fetchServices() and groups them by code using groupByCode() from src/lib/services-store.svelte.ts. Each group shows aggregated status badges (online, going_live, offline, unknown) computed by aggregateStatus().

Actions per module:

• Toggle — toggleModule(code) enables/disables the module
• Delete — deleteModule(code) with a DeleteDialog confirmation
• Configure — navigates to /system/settings/modules/[code]

The page also reflects the backend health chip from backendState.healthChip via useHealthChip() (chipLabel, chipClass).

Code
<script lang="ts">
  import { servicesStore, toggleModule, deleteModule } from "$lib/services-store.svelte.ts";
  import { useHealthChip } from "$lib/composables/use-health-chip.svelte.ts";

  const health = useHealthChip();
  const services = $derived(servicesStore.services);
  const grouped = $derived(groupByCode(services));
</script>

{#each grouped as [code, instances]}
  <div class="module-card">
    <span class="status-badge">{$derived(aggregateStatus(instances))}</span>
    <Switch checked={instances[0].enabled} onchange={() => toggleModule(code)} />
    <button onclick={() => goto(`/system/settings/modules/${code}`)}>Configure</button>
  </div>
{/each}

Module detail

/system/settings/modules/[code] has two tabs:

1. Service info — editable fields: name, description, base_url, icon, icon_type (icon | url | image_url), author, github_repo_url. Saved via updateService(code, data).
2. Module config — lazy-loaded key/value entries fetched with fetchModuleConfig(code) and saved individually via updateModuleConfigKey(code, key, value).

The module's icon is rendered with <DynamicIcon> (see UI components) when icon_type is icon.

Organizations

The organizations list and forms use standard entity patterns. The create page (/system/settings/organizations/create) and edit page (/system/settings/organizations/[uuid]) use FormPageLayout and SuperForms with the form guards described in Authentication & sessions.

Code
<script lang="ts">
  import { superForm } from "sveltekit-superforms";
  import { useFormGuard, useUnsavedChangesGuard } from "$lib/composables/use-form-guard.svelte.ts";

  const { form, $tainted, $errors, isTainted } = superForm(data.form);
  const formGuard = useFormGuard(() => $tainted, () => $errors, (p) => isTainted(p));
  const navGuard = useUnsavedChangesGuard(() => formGuard.hasChanges, "settings.unsavedChangesConfirm");
</script>

<svelte:window onbeforeunload={navGuard.handleBeforeUnload} />

<FormPageLayout title={$t("settings.organizationEdit")}>
  <!-- form fields -->
</FormPageLayout>

Users

The users list (/system/settings/users) renders an EntityListTable with row actions including edit and change password. The change-password action opens ChangePasswordDialog, which loads the active password policy and validates against it (see Password policy).

The user edit page (/system/settings/users/[uuid]) and create page (/system/settings/users/create) use SuperForms with useFormGuard and useUnsavedChangesGuard.

Profile

/system/settings/profile edits the current user's profile. It uses SuperForms with the form guards and includes avatar preview/color selection (see UI components).

Email providers

/system/settings/email-providers manages email provider configurations (provider name, API key, endpoint, from email/name, reply-to). It talks to the EMAILSENDER microservice through the backend proxy at /ws/EMAILSENDER/api/v1/entities/providers using apiFetchExt from src/lib/api-ext.ts. ApiUnreachableError is handled gracefully — when the microservice is offline and the error has already been notified, the page suppresses duplicate notifications.

Templates

/system/settings/templates manages templates. It uses the standard AppPageScaffold layout.

Next steps

• App shell & sidebar
• Authentication & sessions
• Entity list table — used by the users list
• Component catalog — every custom/wrapped component
• API reference