@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

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

@@ -0,0 +1,532 @@
+'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/saas-factory-auth'
+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>
+  )
+}

package/src/templates/web/ui-auth-payments-ai/template/src/components/client/login-form.tsx

@@ -1,7 +1,15 @@
 'use client'
 
 import React, { useState, useActionState } from 'react'
-import { Button, Card, Input, Label } from '@digilogiclabs/saas-factory-ui'
+import { 
+  Button, 
+  Card, 
+  Input, 
+  Label,
+  SingleStepForm,
+  FormField,
+  FormProvider
+} from '@digilogiclabs/saas-factory-ui'
 import { useAuth } from '@digilogiclabs/saas-factory-auth'
 import { useRouter } from 'next/navigation'
 import { signInAction } from '@/lib/actions/auth'
@@ -69,68 +77,79 @@ export function LoginForm() {
       <Card className="w-full max-w-md p-8">
         <h1 className="text-2xl font-bold text-center mb-6">Sign In</h1>
         
-        {/* Server action errors */}
-        {actionState?.error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {actionState.error}
-          </div>
-        )}
-        
-        {/* Client auth errors */}
-        {error && (
-          <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
-            {error.message}
-          </div>
-        )}
-
-        <form action={handleServerAction} className="space-y-4">
-          <div>
-            <Label htmlFor="email">Email</Label>
-            <Input
-              id="email"
+        {/* Enhanced form with enterprise form system */}
+        <FormProvider>
+          <SingleStepForm
+            onSubmit={async (formData) => {
+              try {
+                const result = await formAction(formData)
+                if (result?.success) {
+                  const emailValue = formData.get('email') as string
+                  const passwordValue = formData.get('password') as string
+                  await signIn(emailValue, passwordValue)
+                  router.push('/')
+                }
+              } catch (err) {
+                console.error('Login error:', err)
+              }
+            }}
+            className="space-y-4"
+            submitButton={{
+              text: loading ? 'Signing In...' : 'Sign In',
+              disabled: loading,
+              className: 'w-full'
+            }}
+            realTimeValidation={true}
+            debounceMs={300}
+          >
+            <FormField
               name="email"
               type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
+              label="Email"
               placeholder="Enter your email"
-              required
+              validation={['required', 'email']}
               disabled={loading}
+              className="mb-4"
             />
-            {actionState?.fieldErrors?.email && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.email[0]}</p>
-            )}
-          </div>
-          <div>
-            <Label htmlFor="password">Password</Label>
-            <Input
-              id="password"
+            
+            <FormField
               name="password"
               type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
+              label="Password"
               placeholder="Enter your password"
-              required
+              validation={['required', 'minLength:6']}
               disabled={loading}
+              className="mb-6"
+              showPasswordStrength={false}
             />
-            {actionState?.fieldErrors?.password && (
-              <p className="text-sm text-red-600 mt-1">{actionState.fieldErrors.password[0]}</p>
-            )}
+          </SingleStepForm>
+        </FormProvider>
+
+        {/* Social Auth */}
+        <Button 
+          type="button" 
+          variant="outline" 
+          className="w-full mt-4"
+          onClick={handleGoogleLogin}
+          disabled={loading}
+        >
+          Sign in with Google
+        </Button>
+
+        {/* Legacy error display */}
+        {actionState?.error && (
+          <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {actionState.error}
           </div>
-          <Button type="submit" className="w-full" disabled={loading}>
-            {loading ? 'Signing In...' : 'Sign In'}
-          </Button>
-          <Button 
-            type="button" 
-            variant="outline" 
-            className="w-full"
-            onClick={handleGoogleLogin}
-            disabled={loading}
-          >
-            Sign in with Google
-          </Button>
-        </form>
+        )}
+        
+        {error && (
+          <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+            {error.message}
+          </div>
+        )}
 
-        <div className="mt-4 text-center">
+        <div className="mt-6 text-center">
           <p className="text-sm text-gray-600 dark:text-gray-300">
             Don&apos;t have an account?{' '}
             <a href="/signup" className="text-blue-600 hover:underline dark:text-blue-400">