SettingsPageClient Documentation

Overview

The SettingsPageClient component is an integral part of the Vantage analytics & data platform that allows users to manage various personal and organizational settings. This component provides an interactive interface for users to configure settings related to their account, security, appearance, AI integration, billing, user management, and more.

The component uses hooks to manage local state, effects for side operations (like fetching data), and a tabbed interface to facilitate navigation between different settings categories.

Settings

The SettingsPageClient manages several categories of settings presented as tabs. Below is an exhaustive explanation of each setting:

1. Appearance Settings

• Setting Name: Theme Mode

  • Input Type: Dropdown (Light/Dark/System)
  • Description: This setting allows users to choose the visual theme of the interface. Changing the theme alters the color scheme of the entire application.
  • Default Value: System (follows system's theme).

• Setting Name: Display Density

  • Input Type: Dropdown (Comfortable/Compact)
  • Description: This adjusts the compactness of visual elements on the dashboard, affecting the overall space taken up by items.
  • Default Value: Comfortable.

• Setting Name: Animations

  • Input Type: Boolean
  • Description: Toggle animations on or off in the user interface. Disabling animations can improve performance on lower-end devices.
  • Default Value: Enabled.

• Setting Name: Color Preferences

  • Input Type: String (Hex color codes or Color picker)
  • Description: Users can customize specific colors used in their profile, enhancing personalization.
  • Default Value: Default color scheme.

2. Dashboard Settings

• Setting Name: Default Dashboard

  • Input Type: Dropdown (list of available dashboards)
  • Description: This sets the primary dashboard that users will see when they first log in. Changing this affects the user experience significantly as it directs users to their most used dashboard.
  • Default Value: First dashboard in the list.

• Setting Name: Sidebar Items

  • Input Type: Array of objects (with properties for each sidebar item)
  • Description: Users can customize the sidebar to include only the dashboards they frequently access, which can speed up navigation.
  • Default Value: Default sidebar items.

• Setting Name: Dashboard Groups

  • Input Type: Array of objects
  • Description: This setting allows users to categorize their dashboards into groups for easier access and organization.
  • Default Value: Grouping based on user type.

3. Security Settings

• Setting Name: Current Password

  • Input Type: Password
  • Description: The user's existing password which is required to authenticate any password changes. Inaccurate entry will prevent the change.
  • Default Value: N/A.

• Setting Name: New Password

  • Input Type: Password
  • Description: The chosen new password, which must meet security requirements (e.g., minimum length).
  • Default Value: N/A.

• Setting Name: Confirm Password

  • Input Type: Password
  • Description: A repetition of the new password to ensure accuracy. If this does not match, the update will be rejected.
  • Default Value: N/A.

4. AI Settings

• Setting Name: AI Provider

  • Input Type: Dropdown (Available AI providers such as OpenAI or Claude)
  • Description: Users can select which AI provider to utilize for analytical insights and data processing. Changing this impacts overall functionality and output quality of AI features.
  • Default Value: IntuidyAI.

• Setting Name: AI Model

  • Input Type: Dropdown (list of models specific to the selected AI provider)
  • Description: This setting allows users to select the specific model they wish to implement, influencing the characteristics of AI-generated outputs.
  • Default Value: None (it needs to be selected).

5. AI Query Settings

• Setting Name: Process Large Datasets
  • Input Type: Boolean
  • Description: This controls whether the AI system is enabled to handle large datasets optimally. Turning this on can enhance performance but may incur higher resource costs.
  • Default Value: Disabled.

6. AI Context Settings

• Setting Name: Custom AI Instructions
  • Input Type: String
  • Description: Users can input custom instructions that the AI will take into account for future requests, personalizing interactions.
  • Default Value: N/A.

7. Billing Settings

• Setting Name: Token Balance

  • Input Type: Numeric (integer)
  • Description: Displays the current token balance available for the organization, impacting how many queries and AI integrations can be processed.
  • Default Value: 0.

• Setting Name: Billing Mode

  • Input Type: Dropdown (Prepaid/Pay-as-you-go)
  • Description: Determines how billing and token purchases are managed. Changing this setting can affect billing cycles and costs.
  • Default Value: Pay-as-you-go.

8. User and Role Management

• Setting Name: User List
  • Input Type: Array of user objects
  • Description: Represents all users in the organization and allows admins to manage user roles and access.
  • Default Value: Populated from active users.

9. Company Management

• Setting Name: Company List
  • Input Type: Array of companies
  • Description: Shows all companies associated with the organization along with user counts and plan information, used for better administration of resources.
  • Default Value: Populated automatically.

How It Works

The SettingsPageClient component utilizes local state managed through internal hooks. It fetches initial settings using APIs, manages user updates, and reflects changes across the user interface using controlled components. The component structure allows pairing settings with visual components that render based on user input, ensuring a seamless user experience.

Data Expectations

• The component expects an object of initialSettings containing user-specific configuration data for settings.
• It also makes calls to several back-end APIs for real-time updates and settings management.
• AI settings particularly rely on dynamic data from the server to determine available providers and models.

Use Cases & Examples

Use Case 1: User Personalization

A graphic designer in a firm needs their working interface to reflect a dark theme with compact display density to better visualize design elements.

Example Configuration:

{
  "themeMode": "Dark",
  "displayDensity": "Compact",
  "animations": true,
  "colorPreferences": "#FF5733"
}

Use Case 2: AI Integration Strategy

A data analyst wants to enhance query performance by setting AI to process large datasets because they handle voluminous data on a regular basis.

Example Configuration:

{
  "aiProvider": "OpenAI",
  "aiModel": "GPT-4",
  "aiProcessLargeDatasets": true
}

Use Case 3: Security Improvements

An organization needs to enforce stronger password policies and enable two-factor authentication for added security. This configuration can impact their compliance and data protection strategy significantly.

Example Configuration:

{
  "currentPassword": "OldSecurePassword123!",
  "newPassword": "NewSecurePassword456!",
  "confirmPassword": "NewSecurePassword456!",
  "twoFactorAuthentication": true
}

This documentation provides a comprehensive overview of the SettingsPageClient, its configuration options, and practical use cases reflecting its capabilities within the Vantage platform.