@digilogiclabs/create-saas-app 1.10.6 → 1.12.0

package/src/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/src/templates/web/ui-auth-payments-ai/template/src/app/globals.css

@@ -0,0 +1,43 @@
+@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;
+  }
+}
+

package/src/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/src/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/src/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/src/templates/web/ui-auth-payments-ai/template/src/app/page.tsx

@@ -0,0 +1,380 @@
+'use client'
+
+import { 
+  Button, 
+  Card, 
+  PageTransition,
+  MobileContainer,
+  MobileHero,
+  ResponsiveGrid,
+  NetworkAwareContent,
+  OfflineWrapper,
+  SwipeableCard,
+  PullToRefresh,
+  useNetworkInfo,
+  useOfflineState,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowRight, 
+  Zap, 
+  Shield, 
+  Rocket, 
+  CheckCircle, 
+  LogOut, 
+  User, 
+  MessageSquare, 
+  Mic, 
+  Video, 
+  Image as ImageIcon,
+  Brain,
+  Sparkles,
+  Wand2,
+  Headphones,
+  Monitor,
+  FileText
+} from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import { AITextGenerator, AIAudioGenerator, AIVideoGenerator, AIChat, AIProvider } from '@digilogiclabs/saas-factory-ai'
+import Link from 'next/link'
+import { useState } from 'react'
+
+export default function Home() {
+  const { user, signOut, loading } = useAuth()
+  const networkInfo = useNetworkInfo()
+  const isOnline = useOfflineState()
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const [activeAITool, setActiveAITool] = useState<'text' | 'audio' | 'video' | 'chat'>('chat')
+  
+  // Modern design tokens
+  const animations = useAnimationTokens()
+  const glass = useGlassmorphism()
+  
+  const projectName = "{{projectName}}"
+  const projectDescription = "{{description}}"
+  
+  const heroConfig = {
+    badge: {
+      text: "🤖 AI-Powered Platform",
+      variant: "secondary" as const,
+      icon: Brain
+    },
+    title: {
+      text: "Welcome to " + projectName,
+      highlight: projectName,
+      size: "xl" as const
+    },
+    description: projectDescription + ". Harness the power of AI for text generation, audio creation, video production, and intelligent conversations."
+  }
+
+  const handleSignOut = async () => {
+    try {
+      await signOut()
+    } catch (err) {
+      console.error('Sign out error:', err)
+    }
+  }
+
+  const handleRefresh = async () => {
+    setIsRefreshing(true)
+    // Simulate refresh
+    await new Promise(resolve => setTimeout(resolve, 1500))
+    setIsRefreshing(false)
+  }
+
+  const aiTools = [
+    {
+      id: 'chat' as const,
+      title: 'AI Chat',
+      description: 'Intelligent conversations and assistance',
+      icon: MessageSquare,
+      color: 'blue',
+      gradient: 'from-blue-500 to-cyan-500'
+    },
+    {
+      id: 'text' as const,
+      title: 'Text Generation',
+      description: 'Create content, articles, and copy',
+      icon: FileText,
+      color: 'purple',
+      gradient: 'from-purple-500 to-pink-500'
+    },
+    {
+      id: 'audio' as const,
+      title: 'Audio Generation',
+      description: 'Generate music, voices, and sound effects',
+      icon: Headphones,
+      color: 'green',
+      gradient: 'from-green-500 to-emerald-500'
+    },
+    {
+      id: 'video' as const,
+      title: 'Video Generation',
+      description: 'Create videos, animations, and visual content',
+      icon: Monitor,
+      color: 'orange',
+      gradient: 'from-orange-500 to-red-500'
+    }
+  ]
+
+  const renderAITool = () => {
+    const aiConfig = {
+      apiKey: process.env.NEXT_PUBLIC_AI_API_KEY || '',
+      provider: 'openai' as const,
+      model: 'gpt-4'
+    }
+
+    switch (activeAITool) {
+      case 'chat':
+        return (
+          <div className={`${glass.card} ${glass.border} rounded-2xl p-6 h-96`}>
+            <AIProvider config={aiConfig}>
+              <AIChat
+                placeholder="Ask me anything..."
+                showTypingIndicator={true}
+                enableFileUpload={true}
+                maxMessages={50}
+                className="h-full"
+              />
+            </AIProvider>
+          </div>
+        )
+      case 'text':
+        return (
+          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+            <AIProvider config={aiConfig}>
+              <AITextGenerator
+                placeholder="Describe what you want to generate..."
+                maxLength={2000}
+                showWordCount={true}
+                templates={[
+                  'Blog post',
+                  'Product description',
+                  'Email',
+                  'Social media post',
+                  'Technical documentation'
+                ]}
+                className="min-h-64"
+              />
+            </AIProvider>
+          </div>
+        )
+      case 'audio':
+        return (
+          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+            <AIProvider config={aiConfig}>
+              <AIAudioGenerator
+                placeholder="Describe the audio you want to create..."
+                supportedFormats={['mp3', 'wav', 'ogg']}
+                maxDuration={300}
+                showWaveform={true}
+                className="min-h-64"
+              />
+            </AIProvider>
+          </div>
+        )
+      case 'video':
+        return (
+          <div className={`${glass.card} ${glass.border} rounded-2xl p-6`}>
+            <AIProvider config={aiConfig}>
+              <AIVideoGenerator
+                placeholder="Describe the video you want to create..."
+                supportedFormats={['mp4', 'webm']}
+                maxDuration={60}
+                resolution="1080p"
+                showPreview={true}
+                className="min-h-64"
+              />
+            </AIProvider>
+          </div>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <PageTransition type="fade" duration={300}>
+      <OfflineWrapper
+        cacheStrategy="stale-while-revalidate"
+        showOfflineIndicator={true}
+        backgroundSync={true}
+      >
+        <PullToRefresh 
+          onRefresh={handleRefresh}
+          threshold={80}
+          loadingIndicator="spinner"
+          hapticOnTrigger={true}
+          networkAware={true}
+        >
+          <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
+            {/* Glassmorphism background overlay */}
+            <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+            <div className="relative z-10">
+              <MobileContainer className="py-8">
+                {/* Simple Auth Status */}
+                {user && (
+                  <div className="flex justify-end mb-8">
+                    <div className="flex items-center gap-4">
+                      <span className="text-sm text-gray-600 dark:text-gray-300">
+                        Welcome, {user.email?.split('@')[0]}
+                      </span>
+                      <Button variant="outline" size="sm" onClick={handleSignOut}>
+                        <LogOut className="w-4 h-4 mr-2" />
+                        Sign Out
+                      </Button>
+                    </div>
+                  </div>
+                )}
+                
+                {!user && !loading && (
+                  <div className="flex justify-end mb-8">
+                    <div className="flex gap-2">
+                      <Link href="/login">
+                        <Button variant="outline" size="sm">Sign In</Button>
+                      </Link>
+                      <Link href="/signup">
+                        <Button size="sm">Sign Up</Button>
+                      </Link>
+                    </div>
+                  </div>
+                )}
+
+                {/* Hero Section */}
+                <MobileHero
+                  badge={heroConfig.badge}
+                  title={heroConfig.title}
+                  description={heroConfig.description}
+                  actions={[
+                    {
+                      label: "View Pricing",
+                      href: "/checkout",
+                      icon: ArrowRight,
+                      variant: "default",
+                      size: "lg"
+                    },
+                    {
+                      label: "Learn More",
+                      variant: "outline",
+                      size: "lg"
+                    }
+                  ]}
+                  className="text-center mb-12"
+                />
+
+                {/* AI Tool Selector */}
+                <div className="mb-8">
+                  <h2 className="text-2xl font-bold text-center mb-6 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
+                    Choose Your AI Tool
+                  </h2>
+                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+                    {aiTools.map((tool) => {
+                      const Icon = tool.icon
+                      const isActive = activeAITool === tool.id
+                      return (
+                        <button
+                          key={tool.id}
+                          onClick={() => setActiveAITool(tool.id)}
+                          className={`
+                            ${glass.card} ${glass.border} 
+                            rounded-2xl p-4 text-center transition-all duration-300
+                            ${isActive 
+                              ? `bg-gradient-to-r ${tool.gradient} text-white shadow-lg scale-105` 
+                              : `${animations.hover.scale} hover:shadow-lg`
+                            }
+                          `}
+                        >
+                          <div className={`mx-auto w-12 h-12 rounded-xl flex items-center justify-center mb-3 ${
+                            isActive ? 'bg-white/20' : `${glass.accent}`
+                          }`}>
+                            <Icon className={`h-6 w-6 ${isActive ? 'text-white' : `text-${tool.color}-400`}`} />
+                          </div>
+                          <h3 className="font-semibold text-sm mb-1">{tool.title}</h3>
+                          <p className={`text-xs ${isActive ? 'text-white/80' : 'text-gray-600 dark:text-gray-300'}`}>
+                            {tool.description}
+                          </p>
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+
+                {/* AI Tool Interface */}
+                <div className="mb-12">
+                  {renderAITool()}
+                </div>
+
+                {/* Features Overview */}
+                <ResponsiveGrid columns={{ base: 1, sm: 2, md: 4 }} gap="lg" className="mb-16">
+                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
+                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+                      <Brain className="h-6 w-6 text-purple-400" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">Advanced AI Models</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      Powered by the latest AI technology for superior results
+                    </p>
+                  </div>
+
+                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
+                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+                      <Zap className="h-6 w-6 text-yellow-400" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">Lightning Fast</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      Generate content in seconds with optimized processing
+                    </p>
+                  </div>
+
+                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
+                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+                      <Shield className="h-6 w-6 text-green-400" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">Secure & Private</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      Your data and creations are always protected and private
+                    </p>
+                  </div>
+
+                  <div className={`${glass.card} ${glass.border} text-center p-6 rounded-2xl ${animations.hover.scale} ${animations.transition.smooth}`}>
+                    <div className={`mx-auto w-12 h-12 ${glass.accent} rounded-xl flex items-center justify-center mb-4 ${animations.hover.glow}`}>
+                      <Sparkles className="h-6 w-6 text-pink-400" />
+                    </div>
+                    <h3 className="text-lg font-semibold mb-2">Creative Freedom</h3>
+                    <p className="text-sm text-gray-600 dark:text-gray-300">
+                      Unlimited possibilities for your creative projects
+                    </p>
+                  </div>
+                </ResponsiveGrid>
+
+                {/* Usage Stats */}
+                <div className={`${glass.card} ${glass.border} rounded-2xl p-6 mb-16`}>
+                  <h2 className="text-xl font-bold text-center mb-6">Your AI Usage</h2>
+                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-purple-400 mb-2">1,247</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">Text Generated</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-green-400 mb-2">23</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">Audio Created</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-orange-400 mb-2">8</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">Videos Made</div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-3xl font-bold text-blue-400 mb-2">5.2k</div>
+                      <div className="text-sm text-gray-600 dark:text-gray-300">Chat Messages</div>
+                    </div>
+                  </div>
+                </div>
+              </MobileContainer>
+            </div>
+          </main>
+        </PullToRefresh>
+      </OfflineWrapper>
+    </PageTransition>
+  )
+}