@digilogiclabs/create-saas-app 2.8.0 → 2.9.0

package/src/templates/web/ui-auth-payments-ai/template/src/app/settings/page.tsx

@@ -1,532 +1,389 @@
-'use client'
-
-import React, { useState } from 'react'
-import { 
-  FormBuilder,
-  FormSection,
-  FormField,
-  FormProvider,
-  Button,
-  Card,
-  MobileContainer,
-  PageTransition,
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent
-} from '@digilogiclabs/saas-factory-ui'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import { useRouter } from 'next/navigation'
-import { 
-  User, 
-  Shield, 
-  Brain, 
-  Bell, 
-  Palette, 
-  Database,
-  Key,
-  Users,
-  ArrowLeft,
-  Save
-} from 'lucide-react'
-import Link from 'next/link'
-
-export default function SettingsPage() {
-  const { user } = useAuth()
-  const router = useRouter()
-  const [activeTab, setActiveTab] = useState('profile')
-  const [isLoading, setIsLoading] = useState(false)
-
-  if (!user) {
-    router.push('/login')
-    return null
-  }
-
-  const handleSaveSettings = async (formData: FormData, section: string) => {
-    setIsLoading(true)
-    console.log(`Saving ${section} settings:`, Object.fromEntries(formData))
-    
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1000))
-    
-    setIsLoading(false)
-    // Show success message
-  }
-
-  return (
-    <PageTransition type="slide" direction="up" duration={300}>
-      <main className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5">
-        <MobileContainer className="py-8">
-          {/* Header */}
-          <div className="flex items-center justify-between mb-8">
-            <div className="flex items-center gap-4">
-              <Link href="/dashboard" className="p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:scale-105 transition-transform">
-                <ArrowLeft className="w-5 h-5" />
-              </Link>
-              <div>
-                <h1 className="text-2xl font-bold">Settings</h1>
-                <p className="text-gray-600 dark:text-gray-300">Manage your account and preferences</p>
-              </div>
-            </div>
-          </div>
-
-          <Card className="max-w-6xl mx-auto">
-            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-              <TabsList className="grid w-full grid-cols-6 mb-8">
-                <TabsTrigger value="profile" className="flex items-center gap-2">
-                  <User className="w-4 h-4" />
-                  <span className="hidden sm:inline">Profile</span>
-                </TabsTrigger>
-                <TabsTrigger value="security" className="flex items-center gap-2">
-                  <Shield className="w-4 h-4" />
-                  <span className="hidden sm:inline">Security</span>
-                </TabsTrigger>
-                <TabsTrigger value="ai" className="flex items-center gap-2">
-                  <Brain className="w-4 h-4" />
-                  <span className="hidden sm:inline">AI</span>
-                </TabsTrigger>
-                <TabsTrigger value="notifications" className="flex items-center gap-2">
-                  <Bell className="w-4 h-4" />
-                  <span className="hidden sm:inline">Alerts</span>
-                </TabsTrigger>
-                <TabsTrigger value="appearance" className="flex items-center gap-2">
-                  <Palette className="w-4 h-4" />
-                  <span className="hidden sm:inline">Theme</span>
-                </TabsTrigger>
-                <TabsTrigger value="team" className="flex items-center gap-2">
-                  <Users className="w-4 h-4" />
-                  <span className="hidden sm:inline">Team</span>
-                </TabsTrigger>
-              </TabsList>
-
-              {/* Profile Settings */}
-              <TabsContent value="profile" className="space-y-6">
-                <FormProvider>
-                  <FormBuilder
-                    onSubmit={(formData) => handleSaveSettings(formData, 'profile')}
-                    autoSave={true}
-                    autoSaveInterval={30000}
-                    className="space-y-6"
-                  >
-                    <FormSection 
-                      title="Personal Information" 
-                      description="Update your basic profile information"
-                      collapsible={false}
-                    >
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <FormField
-                          name="firstName"
-                          type="text"
-                          label="First Name"
-                          placeholder="Enter your first name"
-                          defaultValue={user.user_metadata?.first_name || ''}
-                          validation={['required', 'minLength:2']}
-                        />
-                        
-                        <FormField
-                          name="lastName"
-                          type="text"
-                          label="Last Name"
-                          placeholder="Enter your last name"
-                          defaultValue={user.user_metadata?.last_name || ''}
-                          validation={['required', 'minLength:2']}
-                        />
-                      </div>
-
-                      <FormField
-                        name="email"
-                        type="email"
-                        label="Email Address"
-                        placeholder="Enter your email"
-                        defaultValue={user.email || ''}
-                        validation={['required', 'email']}
-                        helpText="Changing your email will require verification"
-                      />
-
-                      <FormField
-                        name="avatar"
-                        type="file"
-                        label="Profile Picture"
-                        accept="image/*"
-                        maxSize={5000000} // 5MB
-                        helpText="Upload a profile picture (max 5MB)"
-                        preview={true}
-                      />
-
-                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                        <FormField
-                          name="company"
-                          type="text"
-                          label="Company"
-                          placeholder="Enter your company name"
-                          defaultValue={user.user_metadata?.company || ''}
-                        />
-                        
-                        <FormField
-                          name="jobTitle"
-                          type="text"
-                          label="Job Title"
-                          placeholder="Enter your job title"
-                          defaultValue={user.user_metadata?.job_title || ''}
-                        />
-                      </div>
-
-                      <FormField
-                        name="bio"
-                        type="textarea"
-                        label="Bio"
-                        placeholder="Tell us about yourself..."
-                        rows={4}
-                        maxLength={500}
-                        showCharacterCount={true}
-                        defaultValue={user.user_metadata?.bio || ''}
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Contact Information" 
-                      description="How we can reach you"
-                      collapsible={true}
-                    >
-                      <FormField
-                        name="phone"
-                        type="tel"
-                        label="Phone Number"
-                        placeholder="+1 (555) 123-4567"
-                        defaultValue={user.user_metadata?.phone || ''}
-                        validation={['phone']}
-                      />
-
-                      <FormField
-                        name="timezone"
-                        type="select"
-                        label="Timezone"
-                        placeholder="Select your timezone"
-                        options={[
-                          { value: 'America/New_York', label: 'Eastern Time (ET)' },
-                          { value: 'America/Chicago', label: 'Central Time (CT)' },
-                          { value: 'America/Denver', label: 'Mountain Time (MT)' },
-                          { value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
-                          { value: 'Europe/London', label: 'London (GMT)' },
-                          { value: 'Europe/Paris', label: 'Paris (CET)' },
-                          { value: 'Asia/Tokyo', label: 'Tokyo (JST)' },
-                          { value: 'Australia/Sydney', label: 'Sydney (AEST)' }
-                        ]}
-                        defaultValue={user.user_metadata?.timezone || 'America/New_York'}
-                        validation={['required']}
-                      />
-                    </FormSection>
-
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
-                        <Save className="w-4 h-4" />
-                        {isLoading ? 'Saving...' : 'Save Changes'}
-                      </Button>
-                    </div>
-                  </FormBuilder>
-                </FormProvider>
-              </TabsContent>
-
-              {/* Security Settings */}
-              <TabsContent value="security" className="space-y-6">
-                <FormProvider>
-                  <FormBuilder
-                    onSubmit={(formData) => handleSaveSettings(formData, 'security')}
-                    className="space-y-6"
-                  >
-                    <FormSection 
-                      title="Password & Authentication" 
-                      description="Manage your login credentials"
-                      collapsible={false}
-                    >
-                      <FormField
-                        name="currentPassword"
-                        type="password"
-                        label="Current Password"
-                        placeholder="Enter your current password"
-                        validation={['required']}
-                      />
-
-                      <FormField
-                        name="newPassword"
-                        type="password"
-                        label="New Password"
-                        placeholder="Enter a new password"
-                        validation={['minLength:8', 'hasUppercase', 'hasLowercase', 'hasNumber']}
-                        showPasswordStrength={true}
-                        helpText="Password must be at least 8 characters with uppercase, lowercase, and number"
-                      />
-
-                      <FormField
-                        name="confirmNewPassword"
-                        type="password"
-                        label="Confirm New Password"
-                        placeholder="Confirm your new password"
-                        validation={['required']}
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Two-Factor Authentication" 
-                      description="Add an extra layer of security"
-                      collapsible={true}
-                    >
-                      <FormField
-                        name="enableTwoFactor"
-                        type="checkbox"
-                        label="Enable Two-Factor Authentication"
-                        helpText="Require a code from your phone in addition to your password"
-                      />
-
-                      <FormField
-                        name="twoFactorMethod"
-                        type="radio"
-                        label="Authentication Method"
-                        options={[
-                          { value: 'sms', label: 'SMS Text Message' },
-                          { value: 'app', label: 'Authenticator App (Recommended)' },
-                          { value: 'email', label: 'Email' }
-                        ]}
-                        defaultValue="app"
-                        dependsOn="enableTwoFactor"
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Login Sessions" 
-                      description="Manage your active sessions"
-                      collapsible={true}
-                    >
-                      <div className="space-y-4">
-                        <div className="p-4 border rounded-lg">
-                          <div className="flex justify-between items-start">
-                            <div>
-                              <div className="font-medium">Current Session</div>
-                              <div className="text-sm text-gray-600 dark:text-gray-300">
-                                Chrome on Mac • 192.168.1.100 • Active now
-                              </div>
-                            </div>
-                            <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Current</span>
-                          </div>
-                        </div>
-                        
-                        <Button variant="outline" size="sm">
-                          Sign Out All Other Sessions
-                        </Button>
-                      </div>
-                    </FormSection>
-
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
-                        <Shield className="w-4 h-4" />
-                        {isLoading ? 'Updating...' : 'Update Security'}
-                      </Button>
-                    </div>
-                  </FormBuilder>
-                </FormProvider>
-              </TabsContent>
-
-              {/* AI Preferences */}
-              <TabsContent value="ai" className="space-y-6">
-                <FormProvider>
-                  <FormBuilder
-                    onSubmit={(formData) => handleSaveSettings(formData, 'ai')}
-                    autoSave={true}
-                    className="space-y-6"
-                  >
-                    <FormSection 
-                      title="AI Model Preferences" 
-                      description="Configure your preferred AI models and behavior"
-                      collapsible={false}
-                    >
-                      <FormField
-                        name="defaultTextModel"
-                        type="select"
-                        label="Default Text Model"
-                        options={[
-                          { value: 'gpt-4', label: 'GPT-4 (Most capable)' },
-                          { value: 'gpt-4-turbo', label: 'GPT-4 Turbo (Faster)' },
-                          { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo (Cost-effective)' },
-                          { value: 'claude-3', label: 'Claude 3 (Great for analysis)' }
-                        ]}
-                        defaultValue="gpt-4"
-                        validation={['required']}
-                      />
-
-                      <FormField
-                        name="creativityLevel"
-                        type="range"
-                        label="Creativity Level"
-                        min={0}
-                        max={100}
-                        defaultValue={70}
-                        showValue={true}
-                        helpText="Lower values are more conservative, higher values are more creative"
-                      />
-
-                      <FormField
-                        name="responseLength"
-                        type="select"
-                        label="Default Response Length"
-                        options={[
-                          { value: 'short', label: 'Short (1-2 paragraphs)' },
-                          { value: 'medium', label: 'Medium (3-5 paragraphs)' },
-                          { value: 'long', label: 'Long (6+ paragraphs)' },
-                          { value: 'auto', label: 'Auto (context-dependent)' }
-                        ]}
-                        defaultValue="medium"
-                        validation={['required']}
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Content Filters" 
-                      description="Control what content is generated"
-                      collapsible={true}
-                    >
-                      <FormField
-                        name="contentFilters"
-                        type="multiSelect"
-                        label="Enable Content Filters"
-                        options={[
-                          { value: 'violence', label: 'Violence & Gore' },
-                          { value: 'adult', label: 'Adult Content' },
-                          { value: 'hate', label: 'Hate Speech' },
-                          { value: 'harmful', label: 'Harmful Instructions' },
-                          { value: 'personal', label: 'Personal Information' }
-                        ]}
-                        defaultValue={['violence', 'adult', 'hate', 'harmful', 'personal']}
-                        helpText="These filters help ensure generated content meets community standards"
-                      />
-
-                      <FormField
-                        name="allowCodeGeneration"
-                        type="checkbox"
-                        label="Allow Code Generation"
-                        defaultValue={true}
-                        helpText="Enable AI to generate code snippets and programming examples"
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Usage & Limits" 
-                      description="Manage your AI usage preferences"
-                      collapsible={true}
-                    >
-                      <FormField
-                        name="monthlyLimit"
-                        type="number"
-                        label="Monthly Request Limit"
-                        placeholder="Enter limit (0 for unlimited)"
-                        min={0}
-                        defaultValue={0}
-                        helpText="Set a limit to control your usage and costs"
-                      />
-
-                      <FormField
-                        name="lowUsageAlerts"
-                        type="checkbox"
-                        label="Low Usage Alerts"
-                        defaultValue={true}
-                        helpText="Get notified when you're approaching your usage limits"
-                      />
-                    </FormSection>
-
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
-                        <Brain className="w-4 h-4" />
-                        {isLoading ? 'Saving...' : 'Save AI Preferences'}
-                      </Button>
-                    </div>
-                  </FormBuilder>
-                </FormProvider>
-              </TabsContent>
-
-              {/* Notification Settings */}
-              <TabsContent value="notifications" className="space-y-6">
-                <FormProvider>
-                  <FormBuilder
-                    onSubmit={(formData) => handleSaveSettings(formData, 'notifications')}
-                    autoSave={true}
-                    className="space-y-6"
-                  >
-                    <FormSection 
-                      title="Email Notifications" 
-                      description="Choose what emails you want to receive"
-                      collapsible={false}
-                    >
-                      <FormField
-                        name="emailNotifications"
-                        type="multiSelect"
-                        label="Email Preferences"
-                        options={[
-                          { value: 'account', label: 'Account & Security Updates' },
-                          { value: 'billing', label: 'Billing & Payment Notifications' },
-                          { value: 'features', label: 'New Features & Updates' },
-                          { value: 'tips', label: 'Tips & Best Practices' },
-                          { value: 'marketing', label: 'Marketing & Promotional Emails' }
-                        ]}
-                        defaultValue={['account', 'billing', 'features']}
-                      />
-
-                      <FormField
-                        name="emailFrequency"
-                        type="select"
-                        label="Email Frequency"
-                        options={[
-                          { value: 'immediate', label: 'Immediate' },
-                          { value: 'daily', label: 'Daily Digest' },
-                          { value: 'weekly', label: 'Weekly Summary' },
-                          { value: 'never', label: 'Never (Critical only)' }
-                        ]}
-                        defaultValue="daily"
-                        validation={['required']}
-                      />
-                    </FormSection>
-
-                    <FormSection 
-                      title="Push Notifications" 
-                      description="Browser and mobile push notifications"
-                      collapsible={true}
-                    >
-                      <FormField
-                        name="pushNotifications"
-                        type="checkbox"
-                        label="Enable Push Notifications"
-                        defaultValue={true}
-                        helpText="Receive real-time notifications in your browser"
-                      />
-
-                      <FormField
-                        name="pushTypes"
-                        type="multiSelect"
-                        label="Push Notification Types"
-                        options={[
-                          { value: 'generation-complete', label: 'AI Generation Complete' },
-                          { value: 'usage-alerts', label: 'Usage Limit Alerts' },
-                          { value: 'team-invites', label: 'Team Invitations' },
-                          { value: 'system-maintenance', label: 'System Maintenance' }
-                        ]}
-                        defaultValue={['generation-complete', 'usage-alerts']}
-                        dependsOn="pushNotifications"
-                      />
-                    </FormSection>
-
-                    <div className="flex justify-end">
-                      <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
-                        <Bell className="w-4 h-4" />
-                        {isLoading ? 'Saving...' : 'Save Notification Preferences'}
-                      </Button>
-                    </div>
-                  </FormBuilder>
-                </FormProvider>
-              </TabsContent>
-
-              {/* More tabs would continue here... */}
-            </Tabs>
-          </Card>
-        </MobileContainer>
-      </main>
-    </PageTransition>
-  )
-}
+'use client'
+
+import React, { useState } from 'react'
+import {
+  Button,
+  Card,
+  Input,
+  Label,
+  MobileContainer,
+  PageTransition,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+} from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/app-sdk'
+import { useRouter } from 'next/navigation'
+import {
+  User,
+  Shield,
+  Brain,
+  Bell,
+  Palette,
+  Users,
+  ArrowLeft,
+  Save
+} from 'lucide-react'
+import Link from 'next/link'
+
+export default function SettingsPage() {
+  const { user } = useAuth()
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState('profile')
+  const [isLoading, setIsLoading] = useState(false)
+
+  if (!user) {
+    router.push('/login')
+    return null
+  }
+
+  const handleSaveSettings = async (e: React.FormEvent, section: string) => {
+    e.preventDefault()
+    setIsLoading(true)
+    const formData = new FormData(e.target as HTMLFormElement)
+    console.log(`Saving ${section} settings:`, Object.fromEntries(formData))
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    setIsLoading(false)
+  }
+
+  return (
+    <PageTransition type="slide" direction="up" duration={300}>
+      <main className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-secondary/5">
+        <MobileContainer className="py-8">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-8">
+            <div className="flex items-center gap-4">
+              <Link href="/dashboard" className="p-2 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 hover:scale-105 transition-transform">
+                <ArrowLeft className="w-5 h-5" />
+              </Link>
+              <div>
+                <h1 className="text-2xl font-bold">Settings</h1>
+                <p className="text-gray-600 dark:text-gray-300">Manage your account and preferences</p>
+              </div>
+            </div>
+          </div>
+
+          <Card className="max-w-6xl mx-auto">
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid w-full grid-cols-6 mb-8">
+                <TabsTrigger value="profile" className="flex items-center gap-2">
+                  <User className="w-4 h-4" />
+                  <span className="hidden sm:inline">Profile</span>
+                </TabsTrigger>
+                <TabsTrigger value="security" className="flex items-center gap-2">
+                  <Shield className="w-4 h-4" />
+                  <span className="hidden sm:inline">Security</span>
+                </TabsTrigger>
+                <TabsTrigger value="ai" className="flex items-center gap-2">
+                  <Brain className="w-4 h-4" />
+                  <span className="hidden sm:inline">AI</span>
+                </TabsTrigger>
+                <TabsTrigger value="notifications" className="flex items-center gap-2">
+                  <Bell className="w-4 h-4" />
+                  <span className="hidden sm:inline">Alerts</span>
+                </TabsTrigger>
+                <TabsTrigger value="appearance" className="flex items-center gap-2">
+                  <Palette className="w-4 h-4" />
+                  <span className="hidden sm:inline">Theme</span>
+                </TabsTrigger>
+                <TabsTrigger value="team" className="flex items-center gap-2">
+                  <Users className="w-4 h-4" />
+                  <span className="hidden sm:inline">Team</span>
+                </TabsTrigger>
+              </TabsList>
+
+              {/* Profile Settings */}
+              <TabsContent value="profile" className="space-y-6 p-6">
+                <form onSubmit={(e) => handleSaveSettings(e, 'profile')} className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Personal Information</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Update your basic profile information</p>
+                    <div className="space-y-4">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                          <Label htmlFor="firstName">First Name</Label>
+                          <Input id="firstName" name="firstName" placeholder="Enter your first name" required />
+                        </div>
+                        <div>
+                          <Label htmlFor="lastName">Last Name</Label>
+                          <Input id="lastName" name="lastName" placeholder="Enter your last name" required />
+                        </div>
+                      </div>
+                      <div>
+                        <Label htmlFor="email">Email Address</Label>
+                        <Input id="email" name="email" type="email" placeholder="Enter your email" defaultValue={user.email || ''} required />
+                        <p className="text-xs text-gray-500 mt-1">Changing your email will require verification</p>
+                      </div>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                          <Label htmlFor="company">Company</Label>
+                          <Input id="company" name="company" placeholder="Enter your company name" />
+                        </div>
+                        <div>
+                          <Label htmlFor="jobTitle">Job Title</Label>
+                          <Input id="jobTitle" name="jobTitle" placeholder="Enter your job title" />
+                        </div>
+                      </div>
+                      <div>
+                        <Label htmlFor="bio">Bio</Label>
+                        <textarea id="bio" name="bio" placeholder="Tell us about yourself..." rows={4} className="w-full p-3 border rounded-lg bg-background" />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Contact Information</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">How we can reach you</p>
+                    <div className="space-y-4">
+                      <div>
+                        <Label htmlFor="phone">Phone Number</Label>
+                        <Input id="phone" name="phone" type="tel" placeholder="+1 (555) 123-4567" />
+                      </div>
+                      <div>
+                        <Label htmlFor="timezone">Timezone</Label>
+                        <select id="timezone" name="timezone" className="w-full p-3 border rounded-lg bg-background">
+                          <option value="America/New_York">Eastern Time (ET)</option>
+                          <option value="America/Chicago">Central Time (CT)</option>
+                          <option value="America/Denver">Mountain Time (MT)</option>
+                          <option value="America/Los_Angeles">Pacific Time (PT)</option>
+                          <option value="Europe/London">London (GMT)</option>
+                          <option value="Europe/Paris">Paris (CET)</option>
+                          <option value="Asia/Tokyo">Tokyo (JST)</option>
+                          <option value="Australia/Sydney">Sydney (AEST)</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
+                      <Save className="w-4 h-4" />
+                      {isLoading ? 'Saving...' : 'Save Changes'}
+                    </Button>
+                  </div>
+                </form>
+              </TabsContent>
+
+              {/* Security Settings */}
+              <TabsContent value="security" className="space-y-6 p-6">
+                <form onSubmit={(e) => handleSaveSettings(e, 'security')} className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Password &amp; Authentication</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your login credentials</p>
+                    <div className="space-y-4">
+                      <div>
+                        <Label htmlFor="currentPassword">Current Password</Label>
+                        <Input id="currentPassword" name="currentPassword" type="password" placeholder="Enter your current password" required />
+                      </div>
+                      <div>
+                        <Label htmlFor="newPassword">New Password</Label>
+                        <Input id="newPassword" name="newPassword" type="password" placeholder="Enter a new password" />
+                        <p className="text-xs text-gray-500 mt-1">Password must be at least 8 characters with uppercase, lowercase, and number</p>
+                      </div>
+                      <div>
+                        <Label htmlFor="confirmNewPassword">Confirm New Password</Label>
+                        <Input id="confirmNewPassword" name="confirmNewPassword" type="password" placeholder="Confirm your new password" />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Two-Factor Authentication</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Add an extra layer of security</p>
+                    <div className="space-y-3">
+                      <label className="flex items-center gap-2">
+                        <input type="checkbox" name="enableTwoFactor" className="rounded" />
+                        <span className="text-sm">Enable Two-Factor Authentication</span>
+                      </label>
+                      <div className="space-y-2 ml-6">
+                        <label className="flex items-center gap-2">
+                          <input type="radio" name="twoFactorMethod" value="sms" />
+                          <span className="text-sm">SMS Text Message</span>
+                        </label>
+                        <label className="flex items-center gap-2">
+                          <input type="radio" name="twoFactorMethod" value="app" defaultChecked />
+                          <span className="text-sm">Authenticator App (Recommended)</span>
+                        </label>
+                        <label className="flex items-center gap-2">
+                          <input type="radio" name="twoFactorMethod" value="email" />
+                          <span className="text-sm">Email</span>
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Login Sessions</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your active sessions</p>
+                    <div className="p-4 border rounded-lg mb-4">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <div className="font-medium">Current Session</div>
+                          <div className="text-sm text-gray-600 dark:text-gray-300">
+                            Chrome on Mac &bull; Active now
+                          </div>
+                        </div>
+                        <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Current</span>
+                      </div>
+                    </div>
+                    <Button variant="outline" size="sm" type="button">
+                      Sign Out All Other Sessions
+                    </Button>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
+                      <Shield className="w-4 h-4" />
+                      {isLoading ? 'Updating...' : 'Update Security'}
+                    </Button>
+                  </div>
+                </form>
+              </TabsContent>
+
+              {/* AI Preferences */}
+              <TabsContent value="ai" className="space-y-6 p-6">
+                <form onSubmit={(e) => handleSaveSettings(e, 'ai')} className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">AI Model Preferences</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Configure your preferred AI models and behavior</p>
+                    <div className="space-y-4">
+                      <div>
+                        <Label htmlFor="defaultTextModel">Default Text Model</Label>
+                        <select id="defaultTextModel" name="defaultTextModel" className="w-full p-3 border rounded-lg bg-background" defaultValue="gpt-4">
+                          <option value="gpt-4">GPT-4 (Most capable)</option>
+                          <option value="gpt-4-turbo">GPT-4 Turbo (Faster)</option>
+                          <option value="gpt-3.5-turbo">GPT-3.5 Turbo (Cost-effective)</option>
+                          <option value="claude-3">Claude 3 (Great for analysis)</option>
+                        </select>
+                      </div>
+                      <div>
+                        <Label htmlFor="creativityLevel">Creativity Level</Label>
+                        <input type="range" id="creativityLevel" name="creativityLevel" min={0} max={100} defaultValue={70} className="w-full" />
+                        <p className="text-xs text-gray-500 mt-1">Lower values are more conservative, higher values are more creative</p>
+                      </div>
+                      <div>
+                        <Label htmlFor="responseLength">Default Response Length</Label>
+                        <select id="responseLength" name="responseLength" className="w-full p-3 border rounded-lg bg-background" defaultValue="medium">
+                          <option value="short">Short (1-2 paragraphs)</option>
+                          <option value="medium">Medium (3-5 paragraphs)</option>
+                          <option value="long">Long (6+ paragraphs)</option>
+                          <option value="auto">Auto (context-dependent)</option>
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Usage &amp; Limits</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Manage your AI usage preferences</p>
+                    <div className="space-y-4">
+                      <div>
+                        <Label htmlFor="monthlyLimit">Monthly Request Limit</Label>
+                        <Input id="monthlyLimit" name="monthlyLimit" type="number" min={0} defaultValue={0} placeholder="Enter limit (0 for unlimited)" />
+                        <p className="text-xs text-gray-500 mt-1">Set a limit to control your usage and costs</p>
+                      </div>
+                      <label className="flex items-center gap-2">
+                        <input type="checkbox" name="lowUsageAlerts" defaultChecked className="rounded" />
+                        <span className="text-sm">Get notified when approaching usage limits</span>
+                      </label>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
+                      <Brain className="w-4 h-4" />
+                      {isLoading ? 'Saving...' : 'Save AI Preferences'}
+                    </Button>
+                  </div>
+                </form>
+              </TabsContent>
+
+              {/* Notification Settings */}
+              <TabsContent value="notifications" className="space-y-6 p-6">
+                <form onSubmit={(e) => handleSaveSettings(e, 'notifications')} className="space-y-6">
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Email Notifications</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Choose what emails you want to receive</p>
+                    <div className="space-y-3">
+                      {[
+                        { value: 'account', label: 'Account & Security Updates', checked: true },
+                        { value: 'billing', label: 'Billing & Payment Notifications', checked: true },
+                        { value: 'features', label: 'New Features & Updates', checked: true },
+                        { value: 'tips', label: 'Tips & Best Practices', checked: false },
+                        { value: 'marketing', label: 'Marketing & Promotional Emails', checked: false },
+                      ].map(opt => (
+                        <label key={opt.value} className="flex items-center gap-2">
+                          <input type="checkbox" name="emailNotifications" value={opt.value} defaultChecked={opt.checked} className="rounded" />
+                          <span className="text-sm">{opt.label}</span>
+                        </label>
+                      ))}
+                    </div>
+                    <div className="mt-4">
+                      <Label htmlFor="emailFrequency">Email Frequency</Label>
+                      <select id="emailFrequency" name="emailFrequency" className="w-full p-3 border rounded-lg bg-background" defaultValue="daily">
+                        <option value="immediate">Immediate</option>
+                        <option value="daily">Daily Digest</option>
+                        <option value="weekly">Weekly Summary</option>
+                        <option value="never">Never (Critical only)</option>
+                      </select>
+                    </div>
+                  </div>
+
+                  <div>
+                    <h3 className="text-lg font-semibold mb-1">Push Notifications</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">Browser and mobile push notifications</p>
+                    <div className="space-y-3">
+                      <label className="flex items-center gap-2">
+                        <input type="checkbox" name="pushNotifications" defaultChecked className="rounded" />
+                        <span className="text-sm">Enable Push Notifications</span>
+                      </label>
+                      <div className="ml-6 space-y-2">
+                        {[
+                          { value: 'generation-complete', label: 'AI Generation Complete', checked: true },
+                          { value: 'usage-alerts', label: 'Usage Limit Alerts', checked: true },
+                          { value: 'team-invites', label: 'Team Invitations', checked: false },
+                          { value: 'system-maintenance', label: 'System Maintenance', checked: false },
+                        ].map(opt => (
+                          <label key={opt.value} className="flex items-center gap-2">
+                            <input type="checkbox" name="pushTypes" value={opt.value} defaultChecked={opt.checked} className="rounded" />
+                            <span className="text-sm">{opt.label}</span>
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button type="submit" disabled={isLoading} className="flex items-center gap-2">
+                      <Bell className="w-4 h-4" />
+                      {isLoading ? 'Saving...' : 'Save Notification Preferences'}
+                    </Button>
+                  </div>
+                </form>
+              </TabsContent>
+
+              {/* Appearance placeholder */}
+              <TabsContent value="appearance" className="p-6">
+                <div className="text-center py-12 text-gray-500">
+                  <Palette className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                  <h3 className="text-lg font-semibold mb-2">Appearance Settings</h3>
+                  <p>Theme and display preferences coming soon.</p>
+                </div>
+              </TabsContent>
+
+              {/* Team placeholder */}
+              <TabsContent value="team" className="p-6">
+                <div className="text-center py-12 text-gray-500">
+                  <Users className="w-12 h-12 mx-auto mb-4 opacity-50" />
+                  <h3 className="text-lg font-semibold mb-2">Team Settings</h3>
+                  <p>Team management and collaboration settings coming soon.</p>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </Card>
+        </MobileContainer>
+      </main>
+    </PageTransition>
+  )
+}