Skip to main content

Settings Components

The settings viewer (ViewerNames.settings) contains three panels accessible from a sidebar. Each panel is a self-contained component in @collabdt/core/components/settings/src/.

Source: @collabdt/core/components/settings/

Panels​

ComponentTab keyDescription
AccountSettingsPanelaccountView and edit the current user's profile
OrganizationSettingsPanelorganizationView and edit organization branding and configuration
UsersSettingsPanelusersManage organization users and roles

AccountSettingsPanel​

Displays the current user's profile fields (name, email, etc.) with an edit mode. Also shows the user's role and supports avatar upload.

Behaviour​

  • Reads session.user.id via NextAuth useSession.
  • Fetches the full User record via useUser(id) and the role via useUserRole(id).
  • In edit mode, only changed fields are sent to updateUser.
  • Filtered fields not shown in the UI: id, imageFileId, image, password, emailVerified, createdAt, updatedAt, organizationId, accounts, organization.
  • Avatar upload uses useUploadFileToUser.
  • Password change is handled by a nested ChangePassword sub-component.

Permissions​

Reads ability from usePermissions(). Editing is only available when ability.can("update", "User").

OrganizationSettingsPanel​

Displays and edits the current user's organization record. Supports branding, map defaults, language configuration, and logo/favicon upload.

Behaviour​

  • Fetches the organization via useOrganization(userOrganizationId).
  • Tracks editingValues as a partial Organization diff — only changed fields are sent to updateOrganization.
  • Logo and favicon are uploaded to a public MinIO bucket via uploadOrganizationLogoToPublicBucket.
  • countrySubdivisionsData from MapContext is used to populate the subdivision dropdown.

Permissions​

Requires ability.can("update", "Organization"). The panel renders in read-only mode for users without this permission.

UsersSettingsPanel​

Renders the DataMenu component scoped to ViewerNames.users. This reuses the standard data table/management UI rather than implementing a separate list.

export default function UsersSettingsPanel() {
  return (
    <DataMenu currentViewer={ViewerNames.users} height="h-full" hideTitle hideFrame />
  )
}

Permissions​

Visibility and actions within DataMenu are gated by the user's CASL permissions for the User subject.

Layout structure​

SettingsTabKey type: 'account' | 'users' | 'organization'

Key Files​

FileRole
@collabdt/core/components/settings/src/AccountSettingsPanel.tsxAccount panel
@collabdt/core/components/settings/src/OrganizationSettingsPanel.tsxOrganization panel
@collabdt/core/components/settings/src/UsersSettingsPanel.tsxUsers panel (wraps DataMenu)
@collabdt/core/components/settings/src/SettingsSidebar.tsxTab navigation
@collabdt/core/components/settings/src/types.tsSettingsTabKey type
@collabdt/core/components/settings/src/ChangePassword.tsxPassword change sub-component

Permissions​

PanelRequired permission
Accountread User (always visible); update User to edit
Organizationread Organization; update Organization to edit
UsersControlled by DataMenu / read User