@digilogiclabs/create-saas-app 1.0.1

package/dist/templates/web/ui-auth-payments-ai/template/src/app/error.tsx

@@ -0,0 +1,67 @@
+'use client'
+
+import { useEffect } from 'react'
+import { Button, Card } from '@digilogiclabs/saas-factory-ui'
+import { RefreshCw, Home, AlertCircle } from 'lucide-react'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="mb-6">
+          <div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900 rounded-full flex items-center justify-center mb-4">
+            <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-gray-600 dark:text-gray-300 mb-6">
+            We apologize for the inconvenience. Please try again or return to the home page.
+          </p>
+        </div>
+
+        <div className="space-y-3">
+          <Button
+            onClick={reset}
+            className="w-full"
+            variant="default"
+          >
+            <RefreshCw className="w-4 h-4 mr-2" />
+            Try Again
+          </Button>
+          
+          <Button
+            onClick={() => window.location.href = '/'}
+            variant="outline"
+            className="w-full"
+          >
+            <Home className="w-4 h-4 mr-2" />
+            Go Home
+          </Button>
+        </div>
+
+        {process.env.NODE_ENV === 'development' && (
+          <details className="mt-6 text-left">
+            <summary className="text-sm font-medium text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
+              Error Details (Development)
+            </summary>
+            <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded-md overflow-auto">
+              {error.message}
+              {error.stack}
+            </pre>
+          </details>
+        )}
+      </Card>
+    </div>
+  )
+}

package/dist/templates/web/ui-auth-payments-ai/template/src/app/globals.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import SaaS Factory UI styles */
+@import '@digilogiclabs/saas-factory-ui/dist/index.css';
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222.2 84% 4.9%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 84% 4.9%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom animations for enhanced visual effects */
+@keyframes slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+.animate-slide-down {
+  animation: slide-down 0.6s ease-out;
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out;
+  animation-fill-mode: both;
+}
+
+.animate-marquee {
+  animation: marquee 20s linear infinite;
+}
+
+.animation-delay-2000 {
+  animation-delay: 2s;
+}
+
+.animation-delay-4000 {
+  animation-delay: 4s;
+}
+

package/dist/templates/web/ui-auth-payments-ai/template/src/app/layout.tsx

@@ -0,0 +1,35 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { AppProviders } from '@/components/providers/app-providers'
+import { Header } from '@/components/shared/header'
+import { Footer } from '@/components/shared/footer'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: '{{titleCaseName}}',
+  description: '{{description}}',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={inter.className}>
+        <AppProviders>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">
+              {children}
+            </main>
+            <Footer />
+          </div>
+        </AppProviders>
+      </body>
+    </html>
+  )
+}

package/dist/templates/web/ui-auth-payments-ai/template/src/app/loading.tsx

@@ -0,0 +1,20 @@
+import { Card } from '@digilogiclabs/saas-factory-ui'
+import { Loader2 } from 'lucide-react'
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md p-8 text-center">
+        <div className="flex flex-col items-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-600 dark:text-blue-400 mb-4" />
+          <h2 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
+            Loading
+          </h2>
+          <p className="text-sm text-gray-600 dark:text-gray-300">
+            Please wait while we load your content...
+          </p>
+        </div>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,6 @@
+import { LoginForm } from '@/components/client/login-form'
+
+export default function LoginPage() {
+  return <LoginForm />
+}
+

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

@@ -0,0 +1,364 @@
+'use client'
+
+import React from 'react'
+import { 
+  MultiStepForm,
+  FormField,
+  FormSection,
+  FormProvider,
+  Card,
+  MobileContainer,
+  PageTransition
+} from '@digilogiclabs/saas-factory-ui'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { useRouter } from 'next/navigation'
+import { 
+  User, 
+  Brain, 
+  Users, 
+  Target, 
+  CreditCard,
+  CheckCircle,
+  ArrowLeft
+} from 'lucide-react'
+import Link from 'next/link'
+
+export default function OnboardingPage() {
+  const { user } = useAuth()
+  const router = useRouter()
+
+  const handleOnboardingComplete = async (formData: FormData) => {
+    console.log('Onboarding completed:', Object.fromEntries(formData))
+    // Save onboarding data to user profile
+    // Redirect to main app
+    router.push('/dashboard')
+  }
+
+  if (!user) {
+    router.push('/login')
+    return null
+  }
+
+  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="/" 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">Welcome to {{projectName}}</h1>
+                <p className="text-gray-600 dark:text-gray-300">Let's get you set up</p>
+              </div>
+            </div>
+          </div>
+
+          {/* Multi-Step Onboarding Form */}
+          <Card className="max-w-4xl mx-auto p-8">
+            <FormProvider>
+              <MultiStepForm
+                onComplete={handleOnboardingComplete}
+                autoSave={true}
+                progressTracking={true}
+                allowSkip={false}
+                steps={[
+                  {
+                    id: 'profile',
+                    title: 'Personal Information',
+                    description: 'Tell us about yourself',
+                    icon: User,
+                    fields: [
+                      {
+                        name: 'fullName',
+                        type: 'text',
+                        label: 'Full Name',
+                        placeholder: 'Enter your full name',
+                        validation: ['required', 'minLength:2'],
+                        defaultValue: user.user_metadata?.full_name || ''
+                      },
+                      {
+                        name: 'company',
+                        type: 'text',
+                        label: 'Company',
+                        placeholder: 'Enter your company name',
+                        validation: ['required']
+                      },
+                      {
+                        name: 'role',
+                        type: 'select',
+                        label: 'Role',
+                        placeholder: 'Select your role',
+                        options: [
+                          { value: 'developer', label: 'Developer' },
+                          { value: 'designer', label: 'Designer' },
+                          { value: 'product-manager', label: 'Product Manager' },
+                          { value: 'entrepreneur', label: 'Entrepreneur' },
+                          { value: 'content-creator', label: 'Content Creator' },
+                          { value: 'student', label: 'Student' },
+                          { value: 'other', label: 'Other' }
+                        ],
+                        validation: ['required']
+                      },
+                      {
+                        name: 'industry',
+                        type: 'select',
+                        label: 'Industry',
+                        placeholder: 'Select your industry',
+                        options: [
+                          { value: 'technology', label: 'Technology' },
+                          { value: 'healthcare', label: 'Healthcare' },
+                          { value: 'finance', label: 'Finance' },
+                          { value: 'education', label: 'Education' },
+                          { value: 'media', label: 'Media & Entertainment' },
+                          { value: 'retail', label: 'Retail' },
+                          { value: 'manufacturing', label: 'Manufacturing' },
+                          { value: 'other', label: 'Other' }
+                        ],
+                        validation: ['required']
+                      }
+                    ]
+                  },
+                  {
+                    id: 'ai-preferences',
+                    title: 'AI Preferences',
+                    description: 'Customize your AI experience',
+                    icon: Brain,
+                    component: (
+                      <div className="space-y-6">
+                        <FormSection title="AI Usage Goals" className="space-y-4">
+                          <FormField
+                            name="usageGoals"
+                            type="multiSelect"
+                            label="What do you plan to use AI for?"
+                            options={[
+                              { value: 'content-creation', label: 'Content Creation' },
+                              { value: 'code-generation', label: 'Code Generation' },
+                              { value: 'data-analysis', label: 'Data Analysis' },
+                              { value: 'customer-support', label: 'Customer Support' },
+                              { value: 'marketing', label: 'Marketing & SEO' },
+                              { value: 'research', label: 'Research & Analysis' },
+                              { value: 'automation', label: 'Workflow Automation' },
+                              { value: 'creative-projects', label: 'Creative Projects' }
+                            ]}
+                            validation={['required']}
+                            helpText="Select all that apply"
+                          />
+                        </FormSection>
+
+                        <FormSection title="Content Preferences" className="space-y-4">
+                          <FormField
+                            name="contentTypes"
+                            type="multiSelect"
+                            label="What types of content do you create?"
+                            options={[
+                              { value: 'text', label: 'Text & Articles' },
+                              { value: 'audio', label: 'Audio & Podcasts' },
+                              { value: 'video', label: 'Video Content' },
+                              { value: 'images', label: 'Images & Graphics' },
+                              { value: 'presentations', label: 'Presentations' },
+                              { value: 'social-media', label: 'Social Media Posts' },
+                              { value: 'documentation', label: 'Documentation' },
+                              { value: 'code', label: 'Code & Technical Content' }
+                            ]}
+                            validation: ['required']
+                          />
+
+                          <FormField
+                            name: 'creativityLevel'
+                            type: 'range'
+                            label: 'Creativity Level'
+                            min: 0
+                            max: 100
+                            defaultValue: 50
+                            helpText: 'Lower values are more conservative, higher values are more creative'
+                            showValue: true
+                          />
+                        </FormSection>
+
+                        <FormSection title="AI Model Preferences" className="space-y-4">
+                          <FormField
+                            name="preferredModels"
+                            type="multiSelect"
+                            label="Preferred AI Models"
+                            options={[
+                              { value: 'gpt-4', label: 'GPT-4 (Text & Chat)' },
+                              { value: 'gpt-4-turbo', label: 'GPT-4 Turbo (Faster)' },
+                              { value: 'claude-3', label: 'Claude 3 (Analysis)' },
+                              { value: 'elevenlabs', label: 'ElevenLabs (Voice)' },
+                              { value: 'whisper', label: 'Whisper (Speech-to-Text)' },
+                              { value: 'dall-e', label: 'DALL-E (Images)' },
+                              { value: 'stable-diffusion', label: 'Stable Diffusion (Images)' }
+                            ]}
+                            helpText="We'll prioritize these models for your requests"
+                          />
+                        </FormSection>
+                      </div>
+                    )
+                  },
+                  {
+                    id: 'team-setup',
+                    title: 'Team Setup',
+                    description: 'Set up your team and collaboration',
+                    icon: Users,
+                    fields: [
+                      {
+                        name: 'teamSize',
+                        type: 'select',
+                        label: 'Team Size',
+                        placeholder: 'Select your team size',
+                        options: [
+                          { value: 'solo', label: 'Just me' },
+                          { value: 'small', label: '2-5 people' },
+                          { value: 'medium', label: '6-20 people' },
+                          { value: 'large', label: '21-100 people' },
+                          { value: 'enterprise', label: '100+ people' }
+                        ],
+                        validation: ['required']
+                      },
+                      {
+                        name: 'inviteMembers',
+                        type: 'textarea',
+                        label: 'Invite Team Members',
+                        placeholder: 'Enter email addresses, one per line',
+                        helpText: 'Invite your team members to collaborate (optional)',
+                        rows: 4
+                      },
+                      {
+                        name: 'workspacePreferences',
+                        type: 'multiSelect',
+                        label: 'Workspace Features',
+                        options: [
+                          { value: 'shared-projects', label: 'Shared Projects' },
+                          { value: 'team-templates', label: 'Team Templates' },
+                          { value: 'usage-analytics', label: 'Usage Analytics' },
+                          { value: 'approval-workflows', label: 'Approval Workflows' },
+                          { value: 'brand-guidelines', label: 'Brand Guidelines' },
+                          { value: 'api-access', label: 'API Access' }
+                        ],
+                        helpText: 'Features you'd like enabled for your team'
+                      }
+                    ]
+                  },
+                  {
+                    id: 'subscription',
+                    title: 'Choose Your Plan',
+                    description: 'Select a plan that fits your needs',
+                    icon: CreditCard,
+                    component: (
+                      <div className="space-y-6">
+                        <FormField
+                          name="selectedPlan"
+                          type="radio"
+                          label="Choose Your Plan"
+                          options={[
+                            {
+                              value: 'starter',
+                              label: 'Starter Plan',
+                              description: 'Perfect for individuals and small projects',
+                              price: '$9/month',
+                              features: [
+                                '1,000 AI requests/month',
+                                'Basic AI models',
+                                'Email support',
+                                '5GB storage'
+                              ]
+                            },
+                            {
+                              value: 'pro',
+                              label: 'Pro Plan',
+                              description: 'Best for growing teams and businesses',
+                              price: '$29/month',
+                              features: [
+                                '10,000 AI requests/month',
+                                'Advanced AI models',
+                                'Priority support',
+                                '50GB storage',
+                                'Team collaboration',
+                                'API access'
+                              ],
+                              recommended: true
+                            },
+                            {
+                              value: 'enterprise',
+                              label: 'Enterprise Plan',
+                              description: 'For large organizations with custom needs',
+                              price: 'Custom pricing',
+                              features: [
+                                'Unlimited AI requests',
+                                'All AI models',
+                                'Dedicated support',
+                                'Unlimited storage',
+                                'Advanced security',
+                                'Custom integrations'
+                              ]
+                            }
+                          ]}
+                          validation={['required']}
+                        />
+
+                        <FormField
+                          name="billingInterval"
+                          type="radio"
+                          label="Billing Interval"
+                          options={[
+                            { value: 'monthly', label: 'Monthly billing' },
+                            { value: 'yearly', label: 'Yearly billing (save 20%)' }
+                          ]}
+                          defaultValue="monthly"
+                          validation={['required']}
+                        />
+                      </div>
+                    )
+                  },
+                  {
+                    id: 'completion',
+                    title: 'All Set!',
+                    description: 'Your account is ready to go',
+                    icon: CheckCircle,
+                    component: (
+                      <div className="text-center space-y-6">
+                        <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto">
+                          <CheckCircle className="w-8 h-8 text-white" />
+                        </div>
+                        <div>
+                          <h3 className="text-xl font-semibold mb-2">Welcome to {{projectName}}!</h3>
+                          <p className="text-gray-600 dark:text-gray-300">
+                            Your account has been set up successfully. You're ready to start using AI to supercharge your productivity.
+                          </p>
+                        </div>
+                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
+                          <div className="p-4 rounded-lg bg-blue-50 dark:bg-blue-900/20">
+                            <Brain className="w-6 h-6 text-blue-500 mx-auto mb-2" />
+                            <div className="font-medium">AI Tools Ready</div>
+                            <div className="text-gray-600 dark:text-gray-400">Access all AI capabilities</div>
+                          </div>
+                          <div className="p-4 rounded-lg bg-green-50 dark:bg-green-900/20">
+                            <Users className="w-6 h-6 text-green-500 mx-auto mb-2" />
+                            <div className="font-medium">Team Configured</div>
+                            <div className="text-gray-600 dark:text-gray-400">Collaboration features enabled</div>
+                          </div>
+                          <div className="p-4 rounded-lg bg-purple-50 dark:bg-purple-900/20">
+                            <Target className="w-6 h-6 text-purple-500 mx-auto mb-2" />
+                            <div className="font-medium">Goals Set</div>
+                            <div className="text-gray-600 dark:text-gray-400">Personalized experience ready</div>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  }
+                ]}
+                submitButtonText="Complete Setup"
+                nextButtonText="Continue"
+                previousButtonText="Back"
+                className="space-y-6"
+              />
+            </FormProvider>
+          </Card>
+        </MobileContainer>
+      </main>
+    </PageTransition>
+  )
+}