@digilogiclabs/create-saas-app 1.14.0 → 1.17.0

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

@@ -1,6 +1,23 @@
 import { Suspense } from 'react'
-import { Button, Card } from '@digilogiclabs/saas-factory-ui'
-import { User, Settings, CreditCard, Activity } from 'lucide-react'
+import { 
+  Button, 
+  Card, 
+  DashboardLayout,
+  CommandPalette,
+  Tour 
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  User, 
+  Settings, 
+  CreditCard, 
+  Activity, 
+  Home,
+  Brain,
+  Users,
+  BarChart,
+  Plus,
+  Search
+} from 'lucide-react'
 import { requireAuth } from '@/lib/auth-server'
 import Link from 'next/link'
 
@@ -90,11 +107,44 @@ export default async function DashboardPage() {
   // Server-side authentication requirement
   const user = await requireAuth()
 
+  const sidebarNavigation = [
+    { name: 'Overview', href: '/dashboard', icon: Home, current: true },
+    { name: 'Profile', href: '/profile', icon: User },
+    { name: 'Settings', href: '/settings', icon: Settings },
+    { name: 'Billing', href: '/billing', icon: CreditCard },
+    { name: 'Analytics', href: '/analytics', icon: BarChart }
+  ]
+
+  const tourSteps = [
+    {
+      target: '[data-tour="overview"]',
+      title: 'Dashboard Overview',
+      content: 'Get a quick overview of your account stats and recent activity.'
+    },
+    {
+      target: '[data-tour="stats"]',
+      title: 'Account Statistics',
+      content: 'View your key metrics and performance indicators here.'
+    },
+    {
+      target: '[data-tour="actions"]',
+      title: 'Quick Actions',
+      content: 'Access your most commonly used features from these cards.'
+    }
+  ]
+
   return (
-    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <DashboardLayout
+      navigation={sidebarNavigation}
+      headerActions={[
+        <CommandPalette key="command-palette" />,
+        <Tour key="tour" steps={tourSteps} />
+      ]}
+    >
+      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
         {/* Header */}
-        <div className="mb-8">
+        <div className="mb-8" data-tour="overview">
           <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
             Welcome back, {user.name || user.email}!
           </h1>
@@ -104,12 +154,14 @@ export default async function DashboardPage() {
         </div>
 
         {/* Stats - Streaming with Suspense */}
-        <Suspense fallback={<UserStatsSkeleton />}>
-          <UserStats userId={user.id} />
-        </Suspense>
+        <div data-tour="stats">
+          <Suspense fallback={<UserStatsSkeleton />}>
+            <UserStats userId={user.id} />
+          </Suspense>
+        </div>
 
         {/* Quick Actions */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8" data-tour="actions">
           <Card className="p-6">
             <div className="flex items-center mb-4">
               <User className="h-6 w-6 text-blue-600 dark:text-blue-400 mr-3" />
@@ -179,5 +231,6 @@ export default async function DashboardPage() {
         </Card>
       </div>
     </div>
+    </DashboardLayout>
   )
 }

package/src/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>
+  )
+}