Skip to main content

UserDetails

Displays detailed user information in a read-only or editable form. Used in admin panels to view existing users or create new ones. Supports avatar upload, role selection, and password entry for new users.

Usage​

import UserDetails, { UserDetailsRef } from '@collabdt/core/components/viewers/Data/userDetails/UserDetails';

const detailsRef = useRef<UserDetailsRef>(null);

<UserDetails
  ref={detailsRef}
  selectedUser={user}
  setSelectedUser={setUser}
  editing={isEditing}
  setEditing={setIsEditing}
  setActiveChanges={setHasChanges}
  onCreated={() => refetchUsers()}
/>

// Save programmatically
await detailsRef.current?.saveChanges();

Props​

PropTypeRequiredDefaultDescription
selectedUserPartial<User>No—The user to display or edit. A negative id indicates a new user.
setSelectedUser(user: User) => voidNo—Callback to update the selected user in parent state.
editingbooleanNofalseEnables edit mode for fields.
setEditing(editing: boolean) => voidNo—Callback to toggle edit mode externally.
setActiveChanges(hasChanges: boolean) => voidNo—Notifies parent when unsaved changes exist.
usersUser[]No—
hideTitlebooleanNo—Hides the "User Details" heading when true.
onDelete() => voidNo—
onCreated() => voidNo—Called after a new user is successfully created.

Ref Methods​

MethodSignatureDescription
saveChanges() => Promise<void>Validates and persists edits. Creates the user if id < 0, otherwise patches the existing user.

Behaviour​

  • New user mode: When selectedUser.id is negative, the component renders a creation form with name, email, role, and password fields.
  • Password validation: Requires 12–65 characters with uppercase, lowercase, digit, and special character. Inline feedback shows strength.
  • Role selection: Populated from useOrganizationRoles based on the current session's organization.
  • Avatar upload: In edit mode, clicking the avatar opens a file picker. The image uploads to MinIO via a presigned URL and associates with the user.
  • Loading states: The submit button shows a spinner while the request is in flight.
  • Error states: Validation errors and API failures surface via toast.error.

Permissions​

{ability.can("update", "Role") && <UserDetails editing={true} ... />}

Role updates and avatar changes require the update action on the Role subject.