index.tsx)¶

Overview¶

The Settings page provides a centralised interface for users to customise their experience, manage account preferences, configure API integrations, and control application settings.

Features¶

User profile management
Theme customisation (light/dark mode)
API key configuration
Notification preferences
Organisation settings
Accessibility options
Security settings

URL Parameters¶

None - authenticated route

Implementation¶

State Management¶

The Settings page uses a modular approach with tab-based navigation and suspense-based loading:

// Settings component manages internal state for each settings section
const [activeTab, setActiveTab] = useState<string>("profile");
const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
const [themePreference, setThemePreference] = useState<
  "light" | "dark" | "system"
>("system");
const [notificationSettings, setNotificationSettings] =
  useState<NotificationSettings>({
    email: true,
    browser: true,
    mobile: false,
  });

Methods¶

// Settings management
const saveApiKey = async (apiKey: ApiKey) =>
// Saves a new API key configuration

const updateTheme = (theme: 'light' | 'dark' | 'system') =>
// Updates the user's theme preference

const updateNotificationSettings = (settings: Partial<NotificationSettings>) =>
// Updates notification preferences

const resetSettings = () =>
// Resets settings to defaults

// Profile management
const updateProfile = async (profileData: ProfileData) =>
// Updates user profile information

const changePassword = async (currentPassword: string, newPassword: string) =>
// Changes the user's password

HTML Structure¶

<div className="min-h-screen bg-gradient-to-br from-white to-gray-50">
  <div className="container py-10">
    <h1 className="text-4xl font-bold mb-2 text-blue">Settings</h1>
    <p className="text-muted-foreground mb-8">Customise your experience</p>

    <Suspense fallback={<LoadingState />}>
      <Settings />
    </Suspense>
  </div>
</div>

The Settings component itself is implemented with a tab-based navigation system:

<div className="settings-container">
  <Tabs defaultValue="profile" className="w-full">
    <TabsList className="grid w-full grid-cols-5">
      <TabsTrigger value="profile">Profile</TabsTrigger>
      <TabsTrigger value="appearance">Appearance</TabsTrigger>
      <TabsTrigger value="api">API Keys</TabsTrigger>
      <TabsTrigger value="notifications">Notifications</TabsTrigger>
      <TabsTrigger value="organisation">Organisation</TabsTrigger>
    </TabsList>

    <TabsContent value="profile">
      <ProfileSettings
        profile={profile}
        onUpdate={updateProfile}
        onPasswordChange={changePassword}
      />
    </TabsContent>

    <TabsContent value="appearance">
      <AppearanceSettings theme={themePreference} onThemeChange={updateTheme} />
    </TabsContent>

    <TabsContent value="api">
      <ApiSettings
        apiKeys={apiKeys}
        onSaveKey={saveApiKey}
        onDeleteKey={deleteApiKey}
      />
    </TabsContent>

    <TabsContent value="notifications">
      <NotificationSettings
        settings={notificationSettings}
        onUpdate={updateNotificationSettings}
      />
    </TabsContent>

    <TabsContent value="organisation">
      <OrganisationSettings
        organisation={organisation}
        onUpdate={updateOrganisation}
      />
    </TabsContent>
  </Tabs>

  <div className="mt-8 pt-6 border-t">
    <h3 className="text-lg font-medium">Danger Zone</h3>
    <div className="mt-4 space-y-4">
      <div className="flex items-center justify-between p-4 border border-red-200 rounded-md bg-red-50">
        <div>
          <h4 className="font-medium text-red-800">Reset All Settings</h4>
          <p className="text-sm text-red-600">
            This will reset all your settings to defaults.
          </p>
        </div>
        <Button variant="destructive" onClick={resetSettings}>
          Reset
        </Button>
      </div>
    </div>
  </div>
</div>

Props¶

No props - page component

Components/API Routes Used¶

Components¶

API Routes¶

/api/settings/profile - Manages user profile settings
/api/settings/theme - Manages theme preferences
/api/settings/apiKeys - Manages API key configuration
/api/settings/notifications - Manages notification preferences
/api/settings/organisation - Manages organisation settings

Routes to Page¶

Direct: /settings
From: Navigation sidebar
From: User dropdown menu

Dependencies¶

import { Suspense } from "react";
import { Settings } from "@/components/settings/settings";
import { Loader2 } from "lucide-react";

Notes¶

Requires authentication
Uses suspense for improved loading experience
Implements modular settings components
Supports real-time setting updates
Provides user feedback for setting changes
Includes danger zone for destructive actions