DemoBuy

Settings Screens

Last updated on 2026-05-31

The settings section provides workspace-level configuration, team management with role-based permissions, and personal profile settings. All three screens live under the /settings/ route within the (dashboard) route group.

General Settings

Route: /settings

Configure company information, localization preferences, data retention policies, and workspace danger zone actions.

Company Information

  • Company name -- text input for your organization name
  • Website URL -- URL input for your company website
  • Company logo -- file upload with preview area, supporting SVG, PNG, or JPG up to 2MB; displays the current logo or an upload placeholder icon

Localization

Three side-by-side Select dropdowns:

Setting Options
Timezone US/Eastern, US/Central, US/Mountain, US/Pacific, UTC, Europe/London, Europe/Berlin, Europe/Paris, Asia/Tokyo, Asia/Shanghai, Australia/Sydney
Currency USD, EUR, GBP, CAD, AUD, JPY
Fiscal Year Start January through December

Data Retention

A Select dropdown controlling how long historical data is kept before archiving. Options: 1 year, 2 years, 3 years, 5 years, and Unlimited.

Save Changes

A primary button at the bottom right to persist all settings changes.

Danger Zone

A red-bordered card with a "Delete Workspace" action that permanently removes the workspace and all associated data. The button is destructive-styled and triggers a confirmation flow.

Key Components

import { PageHeader } from "@/components/shared/page-header"
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select } from "@/components/ui/select"
import { Button } from "@/components/ui/button"

Uses companySettings from seed data.

Team Management

Route: /settings/team

Manage workspace members, send invitations, and review role-based permissions.

Active Members Table

Data table showing all current team members with:

  • Avatar and name -- user avatar with initials fallback
  • Email -- hidden on small screens
  • Role badge -- color-coded badge (purple for owner, blue for admin, gray for viewer)
  • Status -- StatusBadge showing active/inactive/suspended
  • Last active -- relative timestamp (e.g., "2h ago", "3d ago")
  • Remove action -- ghost icon button to remove non-owner members

Invite Member Dialog

A Dialog triggered from a "Invite Member" button in the page header:

  • Email input -- email address field for the invitation
  • Role selector -- Select dropdown with Admin and Viewer options
  • Send button -- triggers toast confirmation with the invited email

Pending Invitations Table

Shown when pending invites exist:

  • Email -- the invited email address
  • Role badge -- color-coded role badge
  • Invited date -- formatted date of invitation
  • Revoke action -- button to cancel the pending invitation

Role Permissions Matrix

A reference table showing what each role can do:

Permission Owner Admin Viewer
View dashboards & reports Yes Yes Yes
Export data Yes Yes Yes
Manage customers & subscriptions Yes Yes No
Create & edit alerts Yes Yes No
Manage integrations Yes Yes No
Invite & remove team members Yes Yes No
Billing & plan management Yes No No
Delete workspace Yes No No

Key Components

Table, Avatar, Badge, StatusBadge, Dialog (with DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter), Select, Input, Button. Uses teamMembers, pendingInvites from seed data.

User Profile

Route: /settings/profile

Personal account settings including avatar, contact information, password management, notification preferences, two-factor authentication, and session management.

Avatar

  • Profile picture -- large avatar with current user image and initials fallback
  • Upload photo button -- file input accepting JPG, PNG, or GIF up to 2MB with instant preview

Personal Information

Two-column form with:

  • Full name -- pre-filled with current user's name
  • Email address -- pre-filled with current user's email

Change Password

Three password fields:

  • Current password -- required for verification
  • New password -- the desired new password
  • Confirm new password -- must match the new password

Validation ensures both fields are filled and passwords match before submission.

Notification Preferences

Three Switch toggle controls:

Preference Description Default
Email Digests Daily summary of key metrics delivered to your inbox On
Alert Notifications Get notified when alert thresholds are triggered On
Weekly Reports Receive a weekly performance report every Monday Off

Two-Factor Authentication

A Switch toggle to enable or disable 2FA. When enabled, a confirmation message describes the protection status.

Active Sessions

List of devices where the user is currently logged in, each showing:

  • Device icon -- Monitor for desktop, Smartphone for mobile, Globe for web
  • Device name -- with "(this device)" indicator for the current session
  • Details -- browser name, location, and last active time
  • Revoke button -- to end non-current sessions

Save Changes

A primary button at the bottom right to persist all profile changes.

Key Components

Avatar, Input, Label, Switch, Card, Button. Uses currentUser from seed data with inline session data.

Next Steps

Previous

Management Screens

Next

Design Tokens