@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -1,310 +1,306 @@
-'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/app-sdk'
-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>
-  )
+'use client'
+
+import { 
+  Card, 
+  
+  
+  
+} from '@digilogiclabs/saas-factory-ui'
+import { 
+  ArrowLeft,
+  MessageSquare,
+  FileText,
+  Headphones,
+  Monitor,
+  Clock,
+  TrendingUp,
+  Zap,
+  Download,
+  Share2,
+  Heart,
+  MoreHorizontal
+} from 'lucide-react'
+
+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 = null; const loading = false
+  const [generations, setGenerations] = useState<AIGeneration[]>([])
+  const [selectedType, setSelectedType] = useState<'all' | 'chat' | 'text' | 'audio' | 'video'>('all')
+  
+
+  // 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-primary"></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-primary hover:underline">
+            Sign In
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <main className={`min-h-screen bg-background relative overflow-hidden`}>
+        <div className={`absolute inset-0 bg-muted opacity-30`} />
+        <div className="relative z-10">
+          <div className="max-w-4xl mx-auto px-4">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-8">
+              <div className="flex items-center gap-4">
+                <Link href="/" className={`rounded-xl border border-border bg-card p-2 rounded-xl hover:scale-[1.02] transition-transform`}>
+                  <ArrowLeft className="w-5 h-5" />
+                </Link>
+                <div>
+                  <h1 className="text-2xl font-bold">AI Dashboard</h1>
+                  <p className="text-muted-foreground">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={`rounded-xl border border-border bg-card rounded-2xl p-4 text-center hover:-translate-y-0.5 transition-transform`}>
+                <div className="text-2xl font-bold text-primary mb-1">{stats.totalGenerations}</div>
+                <div className="text-xs text-muted-foreground">Total</div>
+              </div>
+              <div className={`rounded-xl border border-border bg-card rounded-2xl p-4 text-center hover:-translate-y-0.5 transition-transform`}>
+                <div className="text-2xl font-bold text-purple-400 mb-1">{stats.textGenerated}</div>
+                <div className="text-xs text-muted-foreground">Text</div>
+              </div>
+              <div className={`rounded-xl border border-border bg-card rounded-2xl p-4 text-center hover:-translate-y-0.5 transition-transform`}>
+                <div className="text-2xl font-bold text-green-400 mb-1">{stats.audioCreated}</div>
+                <div className="text-xs text-muted-foreground">Audio</div>
+              </div>
+              <div className={`rounded-xl border border-border bg-card rounded-2xl p-4 text-center hover:-translate-y-0.5 transition-transform`}>
+                <div className="text-2xl font-bold text-orange-400 mb-1">{stats.videosProduced}</div>
+                <div className="text-xs text-muted-foreground">Video</div>
+              </div>
+              <div className={`rounded-xl border border-border bg-card rounded-2xl p-4 text-center hover:-translate-y-0.5 transition-transform`}>
+                <div className="text-2xl font-bold text-primary mb-1">{stats.chatSessions}</div>
+                <div className="text-xs text-muted-foreground">Chat</div>
+              </div>
+            </div>
+
+            {/* Filter Tabs */}
+            <div className={`rounded-xl border border-border bg-card 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-primary text-primary-foreground shadow-lg'
+                      : 'text-muted-foreground 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={`rounded-xl border border-border bg-card rounded-2xl p-6 hover:-translate-y-0.5 transition-transform transition-all duration-300`}
+                  >
+                    <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-muted-foreground mb-2">
+                            {generation.prompt}
+                          </p>
+                          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                            <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 rounded-xl border border-border bg-card hover:scale-[1.02] transition-transform`}>
+                          <Download className="w-4 h-4" />
+                        </button>
+                        <button className={`p-2 rounded-xl rounded-xl border border-border bg-card hover:scale-[1.02] transition-transform`}>
+                          <Share2 className="w-4 h-4" />
+                        </button>
+                        <button className={`p-2 rounded-xl rounded-xl border border-border bg-card hover:scale-[1.02] transition-transform`}>
+                          <MoreHorizontal className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                    
+                    <div className={`p-4 rounded-xl bg-muted`}>
+                      <p className="text-sm line-clamp-3">{generation.content}</p>
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+
+            {filteredGenerations.length === 0 && (
+              <div className={`rounded-xl border border-border bg-card rounded-2xl p-12 text-center`}>
+                <div className="text-muted-foreground 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-muted-foreground 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-primary text-primary-foreground rounded-xl hover:bg-primary/90 transition-colors"
+                >
+                  <Zap className="w-4 h-4" />
+                  Start Creating
+                </Link>
+              </div>
+            )}
+          </div>
+        </div>
+      </main>
+    </div>
+  )
 }