+ {/* Profile Picture */}
+
+ );
+}
\ No newline at end of file
diff --git a/tenant-dashboard/src/components/settings/SettingsPage.tsx b/tenant-dashboard/src/components/settings/SettingsPage.tsx
new file mode 100644
index 0000000..c2412dc
--- /dev/null
+++ b/tenant-dashboard/src/components/settings/SettingsPage.tsx
@@ -0,0 +1,226 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Settings, User, Bell, Key, Palette, Shield, Save, RotateCcw } from 'lucide-react';
+
+import { useSettingsStore } from '@/stores/settingsStore';
+import { ProfileSettings } from './ProfileSettings';
+import { ApiKeyManager } from './ApiKeyManager';
+import { NotificationSettings } from './NotificationSettings';
+
+interface SettingsPageProps {}
+
+export function SettingsPage({}: SettingsPageProps) {
+ const [activeSection, setActiveSection] = useState('profile');
+ const {
+ isLoading,
+ isSaving,
+ hasUnsavedChanges,
+ lastSaved,
+ saveSettings,
+ loadSettings,
+ resetToDefaults,
+ } = useSettingsStore();
+
+ useEffect(() => {
+ loadSettings().catch(console.error);
+ }, [loadSettings]);
+
+ const handleSave = async () => {
+ try {
+ await saveSettings();
+ } catch (error) {
+ console.error('Failed to save settings:', error);
+ }
+ };
+
+ const sections = [
+ {
+ id: 'profile',
+ title: 'Profile',
+ description: 'Manage your personal information',
+ icon: User,
+ },
+ {
+ id: 'api',
+ title: 'API Configuration',
+ description: 'Configure your Airtable API access',
+ icon: Key,
+ },
+ {
+ id: 'notifications',
+ title: 'Notifications',
+ description: 'Control how you receive updates',
+ icon: Bell,
+ },
+ {
+ id: 'appearance',
+ title: 'Appearance',
+ description: 'Customize the look and feel',
+ icon: Palette,
+ disabled: true, // Prepare for future dark mode
+ },
+ ];
+
+ const renderActiveSection = () => {
+ switch (activeSection) {
+ case 'profile':
+ return
+
+
+
+ {/* Basic Information */}
+
+
+
+
+ {profile.avatar ? (
+ 
+ ) : (
+
+ {profile.avatar && (
+ updateProfile({ avatar: undefined })}
+ >
+ ×
+
+ )}
+
+
+
+ {getInitials()}
+
+ )}
+ document.getElementById('avatar-upload')?.click()}
+ >
+
+
+
+
+ + Click to upload or drag and drop +
++ PNG, JPG up to 5MB +
+
+
+
+
+
+ {/* Preferences */}
+
+
+
+
+
+ handleInputChange('firstName', e.target.value)}
+ placeholder="Enter your first name"
+ className="bg-background"
+ />
+
+
+
+
+ handleInputChange('lastName', e.target.value)}
+ placeholder="Enter your last name"
+ className="bg-background"
+ />
+
+
+
+ handleInputChange('email', e.target.value)}
+ placeholder="Enter your email address"
+ className="bg-background"
+ />
+
+ + This will be used for account notifications and login +
+
+
+
+
+
+ {/* Summary */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Profile Summary
+
+ {profile.firstName || profile.lastName ? (
+
+ Name: {`${profile.firstName} ${profile.lastName}`.trim()}
+ ) : ( +Name not set
+ )} + {profile.email ? ( +Email: {profile.email}
+ ) : ( +Email not set
+ )} ++ Timezone: {timezones.find(tz => tz.value === profile.timezone)?.label} +
++ Language: {languages.find(lang => lang.value === profile.language)?.label} +
+
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ if (isLoading) {
+ return (
+
+
+ Theme customization coming soon
+
+
+ );
+ }
+
+ return (
+
+
+ Loading settings...
+
+ {/* Header */}
+
+
+ You have unsaved changes
+
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/tenant-dashboard/src/stores/settingsStore.ts b/tenant-dashboard/src/stores/settingsStore.ts
new file mode 100644
index 0000000..eb151cb
--- /dev/null
+++ b/tenant-dashboard/src/stores/settingsStore.ts
@@ -0,0 +1,243 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+
+export interface UserSettings {
+ // Profile settings
+ profile: {
+ firstName: string;
+ lastName: string;
+ email: string;
+ avatar?: string;
+ timezone: string;
+ language: string;
+ };
+
+ // Theme preferences
+ theme: {
+ mode: 'light' | 'dark' | 'system';
+ primaryColor: string;
+ compactMode: boolean;
+ };
+
+ // Notification preferences
+ notifications: {
+ email: {
+ enabled: boolean;
+ marketing: boolean;
+ security: boolean;
+ updates: boolean;
+ billing: boolean;
+ };
+ push: {
+ enabled: boolean;
+ mentions: boolean;
+ comments: boolean;
+ updates: boolean;
+ };
+ digest: 'never' | 'daily' | 'weekly';
+ };
+
+ // API configuration
+ api: {
+ airtableKey?: string;
+ hasValidKey: boolean;
+ keyLastTested?: string;
+ };
+}
+
+interface SettingsState {
+ // Settings data
+ settings: UserSettings;
+
+ // UI state
+ isLoading: boolean;
+ isSaving: boolean;
+ lastSaved?: string;
+ hasUnsavedChanges: boolean;
+
+ // Actions
+ updateProfile: (profile: Partial
+
+
+ {/* Action Buttons */}
+ {hasUnsavedChanges && (
+
+
+ Settings
++ Manage your account preferences and configuration +
+
+ {hasUnsavedChanges && (
+
+ Unsaved changes
+
+ )}
+ {lastSaved && !hasUnsavedChanges && (
+
+ + Last saved: {new Date(lastSaved).toLocaleString()} +
+ )} +
+
+
+
+
+ {/* Settings Navigation */}
+
+
+ Settings
+ Choose a category
+
+
+
+
+
+
+ {/* Settings Content */}
+
+
+
+
+
+ {(() => {
+ const section = sections.find(s => s.id === activeSection);
+ const Icon = section?.icon;
+ return Icon ?
+
+ {sections.find(s => s.id === activeSection)?.description}
+
+
+
+ {renderActiveSection()}
+
+
+
+