@digilogiclabs/create-saas-app 1.0.1

package/src/templates/web/ui-auth-payments-ai/template/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "{{packageName}}",
+  "version": "0.1.0",
+  "description": "{{description}} - Full-Stack AI Platform (with Platform Core + UI + Auth + Payments + AI)",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@digilogiclabs/platform-core": "^0.1.0",
+    "@digilogiclabs/saas-factory-ui": "^0.27.3",
+    "@digilogiclabs/saas-factory-auth": "^1.0.6",
+    "@digilogiclabs/saas-factory-payments": "^1.2.8",
+    "@digilogiclabs/saas-factory-ai": "^4.0.4",
+    "stripe": "^14.0.0",
+    "@stripe/react-stripe-js": "^2.0.0",
+    "@stripe/stripe-js": "^2.0.0",
+    "tailwindcss": "^3.3.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "tailwind-merge": "^2.0.0",
+    "next-themes": "^0.2.1",
+    "lucide-react": "^0.542.0",
+    "zod": "^3.22.4",
+    "@supabase/supabase-js": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^8.0.0",
+    "eslint-config-next": "^15.0.0",
+    "prettier": "^3.0.0",
+    "vitest": "^1.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "jsdom": "^24.0.0",
+    "@digilogiclabs/saas-factory-ai-types": "^4.0.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+

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

@@ -0,0 +1,310 @@
+'use client'
+
+import { 
+  Card, 
+  PageTransition,
+  MobileContainer,
+  ResponsiveGrid,
+  useAnimationTokens,
+  useGlassmorphism
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  MessageSquare,
+  FileText,
+  Headphones,
+  Monitor,
+  Clock,
+  TrendingUp,
+  Zap,
+  Download,
+  Share2,
+  Heart,
+  MoreHorizontal
+} from 'lucide-react'
+import { useAuth } from '@digilogiclabs/saas-factory-auth'
+import Link from 'next/link'
+import { useState, useEffect } from 'react'
+
+interface AIGeneration {
+  id: string
+  type: 'chat' | 'text' | 'audio' | 'video'
+  title: string
+  prompt: string
+  content: string
+  createdAt: string
+  status: 'completed' | 'processing' | 'failed'
+  metadata?: any
+}
+
+export default function AIPage() {
+  const { user, loading } = useAuth()
+  const [generations, setGenerations] = useState<AIGeneration[]>([])
+  const [selectedType, setSelectedType] = useState<'all' | 'chat' | 'text' | 'audio' | 'video'>('all')
+  
+  const animations = useAnimationTokens()
+  const glass = useGlassmorphism()
+
+  // Mock data for demonstration
+  useEffect(() => {
+    const mockGenerations: AIGeneration[] = [
+      {
+        id: '1',
+        type: 'text',
+        title: 'Blog Post: AI in Healthcare',
+        prompt: 'Write a blog post about AI applications in healthcare',
+        content: 'Artificial Intelligence is revolutionizing healthcare by enabling faster diagnoses...',
+        createdAt: '2024-01-15T10:30:00Z',
+        status: 'completed',
+        metadata: { wordCount: 847, template: 'Blog post' }
+      },
+      {
+        id: '2',
+        type: 'audio',
+        title: 'Meditation Music',
+        prompt: 'Create calming meditation music with nature sounds',
+        content: 'Audio file: meditation-music-v1.mp3',
+        createdAt: '2024-01-15T09:15:00Z',
+        status: 'completed',
+        metadata: { duration: 300, format: 'mp3' }
+      },
+      {
+        id: '3',
+        type: 'video',
+        title: 'Product Demo',
+        prompt: 'Create a product demonstration video for a mobile app',
+        content: 'Video file: product-demo-v1.mp4',
+        createdAt: '2024-01-14T16:45:00Z',
+        status: 'completed',
+        metadata: { duration: 60, resolution: '1080p' }
+      },
+      {
+        id: '4',
+        type: 'chat',
+        title: 'Technical Discussion',
+        prompt: 'How do I optimize React performance?',
+        content: 'Here are the best practices for optimizing React performance...',
+        createdAt: '2024-01-14T14:20:00Z',
+        status: 'completed',
+        metadata: { messageCount: 8 }
+      }
+    ]
+    setGenerations(mockGenerations)
+  }, [])
+
+  const filteredGenerations = selectedType === 'all' 
+    ? generations 
+    : generations.filter(gen => gen.type === selectedType)
+
+  const stats = {
+    totalGenerations: generations.length,
+    textGenerated: generations.filter(g => g.type === 'text').length,
+    audioCreated: generations.filter(g => g.type === 'audio').length,
+    videosProduced: generations.filter(g => g.type === 'video').length,
+    chatSessions: generations.filter(g => g.type === 'chat').length
+  }
+
+  const getTypeIcon = (type: AIGeneration['type']) => {
+    switch (type) {
+      case 'text': return FileText
+      case 'audio': return Headphones
+      case 'video': return Monitor
+      case 'chat': return MessageSquare
+      default: return FileText
+    }
+  }
+
+  const getTypeColor = (type: AIGeneration['type']) => {
+    switch (type) {
+      case 'text': return 'purple'
+      case 'audio': return 'green'
+      case 'video': return 'orange'
+      case 'chat': return 'blue'
+      default: return 'gray'
+    }
+  }
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h2 className="text-2xl font-bold mb-4">Access Denied</h2>
+          <p className="mb-4">You need to sign in to access the AI dashboard.</p>
+          <Link href="/login" className="text-blue-500 hover:underline">
+            Sign In
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <PageTransition type="slide" direction="up" duration={300}>
+      <main className={`min-h-screen ${glass.background.primary} relative overflow-hidden`}>
+        <div className={`absolute inset-0 ${glass.background.accent} opacity-30`} />
+        <div className="relative z-10">
+          <MobileContainer className="py-8">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-8">
+              <div className="flex items-center gap-4">
+                <Link href="/" className={`${glass.card} ${glass.border} p-2 rounded-xl ${animations.hover.scale}`}>
+                  <ArrowLeft className="w-5 h-5" />
+                </Link>
+                <div>
+                  <h1 className="text-2xl font-bold">AI Dashboard</h1>
+                  <p className="text-gray-600 dark:text-gray-300">Manage your AI generations</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Stats Overview */}
+            <div className="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-4 text-center ${animations.hover.lift}`}>
+                <div className="text-2xl font-bold text-blue-400 mb-1">{stats.totalGenerations}</div>
+                <div className="text-xs text-gray-600 dark:text-gray-300">Total</div>
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-4 text-center ${animations.hover.lift}`}>
+                <div className="text-2xl font-bold text-purple-400 mb-1">{stats.textGenerated}</div>
+                <div className="text-xs text-gray-600 dark:text-gray-300">Text</div>
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-4 text-center ${animations.hover.lift}`}>
+                <div className="text-2xl font-bold text-green-400 mb-1">{stats.audioCreated}</div>
+                <div className="text-xs text-gray-600 dark:text-gray-300">Audio</div>
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-4 text-center ${animations.hover.lift}`}>
+                <div className="text-2xl font-bold text-orange-400 mb-1">{stats.videosProduced}</div>
+                <div className="text-xs text-gray-600 dark:text-gray-300">Video</div>
+              </div>
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-4 text-center ${animations.hover.lift}`}>
+                <div className="text-2xl font-bold text-blue-400 mb-1">{stats.chatSessions}</div>
+                <div className="text-xs text-gray-600 dark:text-gray-300">Chat</div>
+              </div>
+            </div>
+
+            {/* Filter Tabs */}
+            <div className={`${glass.card} ${glass.border} rounded-2xl p-1 mb-8 inline-flex`}>
+              {['all', 'chat', 'text', 'audio', 'video'].map((type) => (
+                <button
+                  key={type}
+                  onClick={() => setSelectedType(type as any)}
+                  className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
+                    selectedType === type
+                      ? 'bg-blue-500 text-white shadow-lg'
+                      : 'text-gray-600 dark:text-gray-300 hover:bg-white/10'
+                  }`}
+                >
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </button>
+              ))}
+            </div>
+
+            {/* Generations Grid */}
+            <div className="grid gap-6">
+              {filteredGenerations.map((generation) => {
+                const Icon = getTypeIcon(generation.type)
+                const color = getTypeColor(generation.type)
+                
+                return (
+                  <div
+                    key={generation.id}
+                    className={`${glass.card} ${glass.border} rounded-2xl p-6 ${animations.hover.lift} ${animations.transition.smooth}`}
+                  >
+                    <div className="flex items-start justify-between mb-4">
+                      <div className="flex items-start gap-4">
+                        <div className={`w-12 h-12 rounded-xl bg-${color}-500/20 flex items-center justify-center`}>
+                          <Icon className={`w-6 h-6 text-${color}-400`} />
+                        </div>
+                        <div className="flex-1">
+                          <h3 className="font-semibold text-lg mb-1">{generation.title}</h3>
+                          <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+                            {generation.prompt}
+                          </p>
+                          <div className="flex items-center gap-4 text-xs text-gray-500">
+                            <div className="flex items-center gap-1">
+                              <Clock className="w-3 h-3" />
+                              {formatDate(generation.createdAt)}
+                            </div>
+                            {generation.metadata && (
+                              <div className="flex items-center gap-2">
+                                {generation.metadata.wordCount && (
+                                  <span>{generation.metadata.wordCount} words</span>
+                                )}
+                                {generation.metadata.duration && (
+                                  <span>{generation.metadata.duration}s</span>
+                                )}
+                                {generation.metadata.resolution && (
+                                  <span>{generation.metadata.resolution}</span>
+                                )}
+                                {generation.metadata.messageCount && (
+                                  <span>{generation.metadata.messageCount} messages</span>
+                                )}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <button className={`p-2 rounded-xl ${glass.card} ${glass.border} ${animations.hover.scale}`}>
+                          <Download className="w-4 h-4" />
+                        </button>
+                        <button className={`p-2 rounded-xl ${glass.card} ${glass.border} ${animations.hover.scale}`}>
+                          <Share2 className="w-4 h-4" />
+                        </button>
+                        <button className={`p-2 rounded-xl ${glass.card} ${glass.border} ${animations.hover.scale}`}>
+                          <MoreHorizontal className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                    
+                    <div className={`p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50`}>
+                      <p className="text-sm line-clamp-3">{generation.content}</p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {filteredGenerations.length === 0 && (
+              <div className={`${glass.card} ${glass.border} rounded-2xl p-12 text-center`}>
+                <div className="text-gray-400 mb-4">
+                  <FileText className="w-16 h-16 mx-auto" />
+                </div>
+                <h3 className="text-xl font-semibold mb-2">No generations found</h3>
+                <p className="text-gray-600 dark:text-gray-300 mb-6">
+                  {selectedType === 'all' 
+                    ? "You haven't created any AI content yet." 
+                    : `No ${selectedType} generations found.`
+                  }
+                </p>
+                <Link 
+                  href="/"
+                  className="inline-flex items-center gap-2 px-6 py-3 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-colors"
+                >
+                  <Zap className="w-4 h-4" />
+                  Start Creating
+                </Link>
+              </div>
+            )}
+          </MobileContainer>
+        </div>
+      </main>
+    </PageTransition>
+  )
+}

package/src/templates/web/ui-auth-payments-ai/template/src/app/api/ai/audio/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const supabase = await createClient()
+    const { data: { session } } = await supabase.auth.getSession()
+    
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { prompt, duration = 30, format = 'mp3', voice = 'default' } = await request.json()
+
+    if (!prompt) {
+      return NextResponse.json({ error: 'Audio prompt is required' }, { status: 400 })
+    }
+
+    // Mock audio generation response
+    // In a real implementation, this would generate actual audio files
+    const mockAudioUrl = `data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+D2vm4eBiuZ2/LCdSMHMoXO8te`
+
+    const response = {
+      id: `audio_${Date.now()}`,
+      prompt,
+      audioUrl: mockAudioUrl,
+      duration: duration,
+      format: format,
+      voice: voice,
+      status: 'completed',
+      timestamp: new Date().toISOString(),
+    }
+
+    // Log the generation
+    await supabase
+      .from('ai_conversations')
+      .insert({
+        user_id: session.user.id,
+        message_type: 'audio_generation',
+        user_message: prompt,
+        ai_response: `Audio generated: ${duration}s, ${format}, ${voice} voice`,
+        metadata: { duration, format, voice, audioUrl: mockAudioUrl },
+        created_at: new Date().toISOString()
+      })
+
+    return NextResponse.json(response)
+
+  } catch (error) {
+    console.error('AI Audio Generation API Error:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/src/app/api/ai/chat/route.ts

@@ -0,0 +1,49 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const supabase = await createClient()
+    const { data: { session } } = await supabase.auth.getSession()
+    
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { message, history = [] } = await request.json()
+
+    if (!message) {
+      return NextResponse.json({ error: 'Message is required' }, { status: 400 })
+    }
+
+    // Here you would integrate with your AI service
+    // For now, we'll return a mock response
+    const mockResponse = {
+      id: `msg_${Date.now()}`,
+      role: 'assistant',
+      content: `I received your message: "${message}". This is a mock AI response. In a real implementation, this would connect to OpenAI, Anthropic, or your preferred AI service.`,
+      timestamp: new Date().toISOString(),
+    }
+
+    // Log the conversation (optional)
+    await supabase
+      .from('ai_conversations')
+      .insert({
+        user_id: session.user.id,
+        message_type: 'chat',
+        user_message: message,
+        ai_response: mockResponse.content,
+        created_at: new Date().toISOString()
+      })
+
+    return NextResponse.json(mockResponse)
+
+  } catch (error) {
+    console.error('AI Chat API Error:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/src/app/api/ai/text/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const supabase = await createClient()
+    const { data: { session } } = await supabase.auth.getSession()
+    
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { prompt, template, maxLength = 1000 } = await request.json()
+
+    if (!prompt) {
+      return NextResponse.json({ error: 'Prompt is required' }, { status: 400 })
+    }
+
+    // Mock text generation response
+    const mockGeneratedText = `Generated content based on: "${prompt}"
+    
+This is a mock text generation response. In a real implementation, this would:
+- Connect to OpenAI's GPT models
+- Use Anthropic's Claude
+- Integrate with Google's PaLM
+- Or your preferred text generation service
+
+Template: ${template || 'General'}
+Max Length: ${maxLength} characters
+
+The generated content would be contextually relevant, well-structured, and match the requested template style.`
+
+    const response = {
+      id: `text_${Date.now()}`,
+      content: mockGeneratedText,
+      wordCount: mockGeneratedText.split(' ').length,
+      characterCount: mockGeneratedText.length,
+      template: template || 'General',
+      timestamp: new Date().toISOString(),
+    }
+
+    // Log the generation
+    await supabase
+      .from('ai_conversations')
+      .insert({
+        user_id: session.user.id,
+        message_type: 'text_generation',
+        user_message: prompt,
+        ai_response: response.content,
+        metadata: { template, maxLength },
+        created_at: new Date().toISOString()
+      })
+
+    return NextResponse.json(response)
+
+  } catch (error) {
+    console.error('AI Text Generation API Error:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/src/app/api/ai/video/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createClient } from '@/lib/supabase/server'
+
+export async function POST(request: NextRequest) {
+  try {
+    // Check authentication
+    const supabase = await createClient()
+    const { data: { session } } = await supabase.auth.getSession()
+    
+    if (!session) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const { 
+      prompt, 
+      duration = 10, 
+      format = 'mp4', 
+      resolution = '1080p',
+      style = 'realistic'
+    } = await request.json()
+
+    if (!prompt) {
+      return NextResponse.json({ error: 'Video prompt is required' }, { status: 400 })
+    }
+
+    // Mock video generation response
+    // In a real implementation, this would generate actual video files
+    const mockVideoUrl = `data:video/mp4;base64,AAAAHGZ0eXBtcDQyAAAAAAAcZnR5cG1wNDIAAAAAAG1wNDJpc29tYXZjMQAAAiRtb29`
+    const mockThumbnailUrl = `data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj`
+
+    const response = {
+      id: `video_${Date.now()}`,
+      prompt,
+      videoUrl: mockVideoUrl,
+      thumbnailUrl: mockThumbnailUrl,
+      duration: duration,
+      format: format,
+      resolution: resolution,
+      style: style,
+      status: 'completed',
+      processingTime: 15, // Mock processing time in seconds
+      timestamp: new Date().toISOString(),
+    }
+
+    // Log the generation
+    await supabase
+      .from('ai_conversations')
+      .insert({
+        user_id: session.user.id,
+        message_type: 'video_generation',
+        user_message: prompt,
+        ai_response: `Video generated: ${duration}s, ${resolution}, ${style} style`,
+        metadata: { 
+          duration, 
+          format, 
+          resolution, 
+          style, 
+          videoUrl: mockVideoUrl,
+          thumbnailUrl: mockThumbnailUrl
+        },
+        created_at: new Date().toISOString()
+      })
+
+    return NextResponse.json(response)
+
+  } catch (error) {
+    console.error('AI Video Generation API Error:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

package/src/templates/web/ui-auth-payments-ai/template/src/app/auth/callback/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const requestUrl = new URL(request.url);
+  
+  // Placeholder auth callback - requires @digilogiclabs/saas-factory-auth package
+  console.log('Auth callback triggered - requires auth package for full functionality');
+  
+  // URL to redirect to after sign in process completes
+  return NextResponse.redirect(requestUrl.origin);
+}