Settings Screens

The Help Desk Kit includes 5 settings screens for workspace-level configuration, multi-channel setup, notification controls, third-party integrations, and security auditing. All screens live under the /settings/ route within the (app) route group.

General Settings

Route: /settings

Workspace-wide configuration covering company profile, ticket defaults, email settings, and branding.

Company Profile

• Company name -- text input for your organization name
• Logo upload -- file upload with preview, supporting SVG, PNG, or JPG
• Timezone -- dropdown selector for workspace timezone
• Business hours -- day-by-day schedule configuration with start/end times for each day of the week

Ticket Settings

• Auto-assignment toggle -- enable/disable automatic ticket assignment
• Default priority -- select the default priority for new tickets
• Ticket ID prefix -- customize the prefix for ticket IDs (e.g., "HD-")
• Auto-close -- configure automatic closing after X days of customer inactivity
• Satisfaction survey trigger -- when to send CSAT surveys (on resolution, on close, manual)

Email Settings

• Support email addresses -- manage connected support email inboxes
• Email templates -- customize auto-reply, notification, and resolution email templates
• Signature editor -- rich text editor for agent email signatures

Branding

• Primary color -- color picker for brand primary color
• Logo and favicon -- upload brand assets
• Custom CSS -- textarea for custom CSS applied to the customer portal

Save Changes

Primary button with unsaved changes indicator. Each section is a collapsible card with inline editing.

Key Components

import { GeneralSettingsForm } from "@/components/settings/general-settings-form"

---

Channel Settings

Route: /settings/channels

Multi-channel configuration for managing all customer communication channels.

Email Tab

• Connected accounts -- list of connected email accounts with sync status
• Forwarding rules -- configure how emails are routed to teams
• Email parsing -- settings for extracting ticket data from emails
• Auto-reply templates -- templates for out-of-hours and confirmation replies

Chat Widget Tab

• Widget appearance -- customizer with live preview on the right (colors, position, greeting text)
• Pre-chat form -- configure required fields before starting a chat
• Offline message form -- form displayed when no agents are available
• Operating hours -- set chat availability hours
• Auto-greeting message -- customize the initial bot greeting

Social Media Tab

• Connected accounts -- Twitter, Facebook, Instagram with connection status and sync settings
• Sync configuration -- choose which social interactions create tickets

Phone Tab

• Phone number setup -- configure support phone numbers
• Voicemail greeting -- upload or record voicemail greeting
• Call routing rules -- route calls by department, time, or language
• Recording toggle -- enable/disable call recording

API Tab

• API key management -- generate, revoke, and manage API keys
• Webhook endpoints -- configure webhook URLs for events
• Rate limits -- view and configure API rate limits
• Documentation link -- link to full API documentation

Key Components

import { ChannelSettings } from "@/components/settings/channel-settings"

---

Notification Preferences

Route: /settings/notifications

Granular notification control with per-event and per-channel configuration.

Notification Matrix

Table with event types as rows and delivery channels as columns:

Event	In-App	Email	Push	Slack
New ticket assigned	Yes	Yes	Yes	No
Customer reply	Yes	Yes	No	No
SLA warning	Yes	Yes	Yes	Yes
SLA breach	Yes	Yes	Yes	Yes
Mention in note	Yes	Yes	No	Yes
Chat request	Yes	No	Yes	No
Team announcement	Yes	Yes	No	Yes
Report ready	No	Yes	No	No

Checkboxes at each intersection allow granular control.

Additional Settings

• Per-user overrides -- section for individual user notification preferences
• Quiet hours -- start/end time, timezone, and active days configuration
• Escalation notifications -- who gets notified at each escalation stage
• Preview section -- sample notification for each event type
• Test Notification -- button to send a test notification to the selected channel

Key Components

import { NotificationPreferences } from "@/components/settings/notification-preferences"

---

Integration Hub

Route: /settings/integrations

Third-party app connections with category browsing, configuration, and sync management.

• Integration grid -- cards showing:
  • App logo and name
  • Description
  • Status badge (connected/disconnected) via StatusBadge
  • Category tag (CRM, Communication, Project Management, Analytics, E-commerce)
• Connected integrations -- displayed at the top with "Configure" and "Disconnect" buttons
• Available integrations -- displayed below with "Connect" button
• Configuration panel -- click to configure:
  • OAuth flow or API key input
  • Field mapping (which data syncs between systems)
  • Sync frequency (real-time, hourly, daily)
  • Sync direction (one-way or two-way)
  • Sync log (recent sync events with status)
• Search and filter -- search by name and filter by category

Supported Integrations

Category	Integrations
Communication	Slack, Microsoft Teams
Project Management	Jira, Linear, Asana
CRM	Salesforce, HubSpot
E-commerce	Shopify, Stripe
Automation	Zapier, Make
Development	GitHub, GitLab
Analytics	Google Analytics, Mixpanel

Key Components

import { IntegrationHub } from "@/components/settings/integration-hub"

---

Audit Log

Route: /settings/audit

Security and compliance audit trail with full-text search and event detail inspection.

• Search -- full-text search across all audit events
• Filters -- filter by user, action type (login, permission change, data export, ticket delete, setting change), date range, and IP address
• Audit table -- columns for timestamp, user avatar and name, action description, affected resource (linked), IP address, and browser/device info
• Event detail view -- click to view full event payload as formatted JSON
• Export -- export as CSV for compliance reporting
• Summary statistics -- total events today, unique users, most common action, and unusual activity alerts (highlighted rows for suspicious patterns like multiple failed logins or bulk data exports)

Key Components

import { AuditLogViewer } from "@/components/settings/audit-log-viewer"

Data Sources

Data	Source	Location
Audit entries	auditLogEntries	data/seed.ts
Users	agents	data/seed.ts

---

Next Steps

• Design Tokens -- oklch color system and theming
• Customization -- how to adapt the kit for your brand
• Accessibility -- WCAG AA compliance details