Settings & Profile

​

Overview

​

Page Layout

​

Header Section

• Large gradient text (purple brand color)
• Subtitle: “Manage your account preferences and configurations”

• Icon: Save icon
• Text: “Save Changes” (or “Saving…” when loading)
• State: Disabled while saving
• Action: Saves profile changes

​

Navigation Tabs

• Vertical sidebar navigation (left side)
• 5 tabs with icons
• Active tab highlighted (purple background)
• Full width cards

• Horizontal tab bar (top)
• Icon-only buttons
• Hover labels on hover
• Compact layout

1. Profile (User icon)
2. Notifications (Bell icon)
3. Security (Shield icon)
4. Integrations (Globe icon)
5. Danger Zone (Alert Triangle icon, red)

​

Profile Tab

​

Profile Information Card

• Title: “Profile Information” (gradient text)
• Description: “Update your personal and company details”

​

Avatar Section

• Size: 80x80px
• Shape: Circular
• Content:
  • Custom image (if uploaded)
  • Default: User icon placeholder
• Fallback: Initials or default user.png

​

Profile Form Fields

​

Field 1: Full Name

• Min: 2 characters
• Max: 100 characters
• Letters, spaces, hyphens allowed

John Smith

​

Field 2: Email Address

john@example.com

​

Field 3: Company

• Max: 200 characters
• Any text allowed

Acme Corporation

​

Field 4: Phone Number

• E.164 format recommended
• Country code required
• Numbers, +, -, () allowed

+1-202-555-0123

​

Field 5: Timezone

• America/New_York (EST/EDT)
• America/Los_Angeles (PST/PDT)
• Europe/London (GMT/BST)
• Europe/Berlin (CET/CEST)
• Asia/Karachi (PKT)
• Asia/Dubai (GST)
• Asia/Singapore (SGT)
• Australia/Sydney (AEST/AEDT)
• UTC (Coordinated Universal Time)

​

Save Profile

1. Click “Save Changes”
2. Sends PUT request to /api/user/profile
3. Shows loading state (“Saving…”)
4. Success toast: “Profile updated successfully!”
5. Updates local state with new data

{
  "name": "John Smith",
  "company": "Acme Corp",
  "phone": "+1-202-555-0123",
  "timezone": "America/New_York"
}

{
  "user": {
    "id": "user_abc123",
    "name": "John Smith",
    "email": "john@example.com",
    "company": "Acme Corp",
    "phone": "+1-202-555-0123",
    "timezone": "America/New_York"
  }
}

• Missing required fields
• Invalid email format
• Invalid phone format
• Invalid timezone

• Toast notification (top-center)
• Duration: 4 seconds
• Green checkmark icon

• Red toast notification
• Specific error from API
• “Something went wrong. Please try again.”

​

Notifications Tab

​

Notification Preferences Card

• Title: “Notification Preferences”
• Description: “Choose how you want to be notified”

​

Notification Types

​

Email Notifications

​

SMS Notifications

​

Call Alerts

​

Weekly Reports

​

System Updates

• Email notifications for low balance
• SMS alerts for failed calls
• Weekly usage reports
• System maintenance notifications
• New feature announcements

​

Security Tab

​

Security Settings Card

• Title: “Security Settings”
• Description: “Manage your account security preferences”

​

Security Options

​

Two-Factor Authentication (2FA)

• Toggle attempts to enable
• Shows error toast
• Automatically resets to OFF
• Cannot be enabled currently

​

Session Timeout

• 15 minutes
• 30 minutes
• 1 hour
• 2 hours
• Never

• Selection shows error toast
• Value doesn’t persist
• Default: 30 minutes

​

IP Whitelist

192.168.1.1
10.0.0.1
172.16.0.1

• Text: “Save”
• Variant: Outline (purple border)
• Status: ❌ Not available
• Error: “IP Whitelist is not available for you! please try again later.”

​

Change Password

• Text: “Change Password”
• Icon: Key icon
• Variant: Outline (red border)
• Status: ❌ Not available
• Error: “Change password option is not available for you! please try again later.”

• Current password field
• New password field
• Confirm password field
• Password strength indicator
• Minimum 8 characters
• Require uppercase, lowercase, number, special char

​

Integrations Tab

​

Telephony Integration Card

• Title: “Telephony Integration”
• Description: “Configure your telephony settings”

​

Integration Buttons

​

Twilio Integration

• Connect Twilio SIP trunk
• Configure Twilio phone numbers
• Set up Twilio credentials
• Manage Twilio outbound calling

​

Telnyx Integration

• Connect Telnyx SIP trunk
• Configure Telnyx phone numbers
• Set up Telnyx credentials
• Manage Telnyx outbound calling

​

Plivo Integration

• Connect Plivo SIP trunk
• Configure Plivo phone numbers
• Set up Plivo credentials
• Manage Plivo outbound calling

​

Custom Telephony

• Connect custom SIP provider
• BYOC (Bring Your Own Carrier)
• Custom SIP trunk configuration
• Advanced telephony setup

​

Danger Zone Tab

​

Danger Zone Card

• Border: Red (red-200)
• Background: White
• Shadow: Red-tinted shadow

• Title: “Danger Zone” (red text)
• Icon: Alert Triangle (red)
• Description: “Irreversible and destructive actions”

​

Destructive Actions

​

Delete Account

• Border: Red (red-200)
• Background: Red-50
• Title: “Delete Account” (red-900)
• Description: “Permanently delete your account and all associated data. This action cannot be undone.”

• Text: “Delete Account”
• Icon: Trash icon
• Variant: Destructive (red background)
• Status: ❌ Not available
• Error: “Delete account is not available for you! please try again later.”

• User account
• All organizations owned
• All agents created
• All call logs
• All recordings
• All transcripts
• API keys
• Phone numbers

• Call logs for compliance (legal requirement)
• Billing records (financial records)
• Anonymous usage statistics

1. Click “Delete Account”
2. Modal appears with warning
3. Must type “DELETE” to confirm
4. Enter password for verification
5. 7-day grace period (account recoverable)
6. Permanent deletion after 7 days

​

Reset All Data

• Border: Orange (orange-200)
• Background: Orange-50
• Title: “Reset All Data” (orange-900)
• Description: “Delete all call logs, feedback data, and analytics. Your agents and settings will be preserved.”

• Text: “Reset Data”
• Icon: Trash icon
• Variant: Outline (orange border)
• Status: ❌ Not available
• Error: “Reset data is not available for you! please try again later.”

• All call logs
• All feedback data
• All analytics data
• All transcripts
• All recordings
• All post-call analysis results

• User account
• Organizations
• Agents and configurations
• Phone numbers
• API keys
• Settings and preferences

1. Click “Reset Data”
2. Modal appears with warning
3. Must type “RESET” to confirm
4. Enter password for verification
5. Immediate deletion (no grace period)
6. Cannot be undone

​

API Reference

​

Get User Profile

GET /api/user/profile
Authorization: Bearer YOUR_SESSION_TOKEN

{
  "user": {
    "id": "user_abc123",
    "name": "John Smith",
    "email": "john@example.com",
    "image": "https://...",
    "company": "Acme Corp",
    "phone": "+1-202-555-0123",
    "timezone": "America/New_York"
  }
}

​

Update User Profile

PUT /api/user/profile
Authorization: Bearer YOUR_SESSION_TOKEN
Content-Type: application/json

{
  "name": "John Smith",
  "company": "Acme Corp",
  "phone": "+1-202-555-0123",
  "timezone": "America/New_York"
}

{
  "user": {
    "id": "user_abc123",
    "name": "John Smith",
    "email": "john@example.com",
    "image": "https://...",
    "company": "Acme Corp",
    "phone": "+1-202-555-0123",
    "timezone": "America/New_York"
  }
}

​

Timezone Auto-Detection

​

How It Works

1. User logs in to TalkifAI
2. Browser timezone detected via JavaScript
3. TimezoneInit component runs
4. Sends timezone to backend
5. Saved to user profile

const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
// Example: "America/New_York"

POST /api/user/timezone
Content-Type: application/json

{
  "timezone": "America/New_York"
}

• Only saves if user.timezone is null
• Doesn’t overwrite existing timezone
• Runs once on first login
• User can manually change later

​

Supported Timezones

• America/New_York (EST/EDT)
• America/Chicago (CST/CDT)
• America/Denver (MST/MDT)
• America/Los_Angeles (PST/PDT)
• America/Sao_Paulo (BRT)
• America/Mexico_City (CST)

• Europe/London (GMT/BST)
• Europe/Paris (CET/CEST)
• Europe/Berlin (CET/CEST)
• Europe/Moscow (MSK)
• Europe/Istanbul (TRT)

• Asia/Dubai (GST)
• Asia/Karachi (PKT)
• Asia/Kolkata (IST)
• Asia/Bangkok (ICT)
• Asia/Singapore (SGT)
• Asia/Tokyo (JST)
• Asia/Shanghai (CST)

• Africa/Cairo (EET)
• Africa/Johannesburg (SAST)
• Africa/Lagos (WAT)
• Africa/Nairobi (EAT)

• Australia/Sydney (AEST/AEDT)
• Australia/Melbourne (AEST/AEDT)
• Pacific/Auckland (NZST/NZDT)
• Pacific/Fiji (FJT)

• UTC (Coordinated Universal Time)

​

Keyboard Shortcuts

• Ctrl+S — Save changes
• Ctrl+1 — Profile tab
• Ctrl+2 — Notifications tab
• Ctrl+3 — Security tab
• Ctrl+4 — Integrations tab
• Ctrl+5 — Danger Zone tab

​

Mobile Responsiveness

​

Desktop (≥1024px)

• Layout: Two-column (sidebar + content)
• Navigation: Vertical sidebar (left)
• Content: 3/4 width
• Cards: Full-width
• Form: 2-column grid

​

Tablet (768px - 1023px)

• Layout: Single column
• Navigation: Horizontal tabs (top)
• Content: Full width
• Cards: Full-width
• Form: 2-column grid

​

Mobile (under 768px)

• Layout: Single column
• Navigation: Horizontal icon tabs (top)
• Content: Full width with padding
• Cards: Full-width with mobile padding
• Form: 1-column grid
• Buttons: Full width
• Avatar: Centered

​

Error States

​

API Errors

• Message: “Failed to fetch user profile”
• Display: Console error only
• Recovery: Retry on page reload

• Message: Toast notification (red)
• Display: “Something went wrong. Please try again.”
• Recovery: Click “Save Changes” again

​

Validation Errors

• Error: “Name is required”
• Display: Inline error below field
• Fix: Enter name (min 2 chars)

• Error: “Invalid phone number format”
• Display: Inline error below field
• Fix: Use E.164 format (+1234567890)

• Error: “Invalid timezone”
• Display: Toast notification
• Fix: Select from dropdown

​

Related Documentation

• Organization Management — Manage organizations
• API Keys — Manage API keys
• Telephony — Configure telephony integrations
• Team Management — Manage team members