@digilogiclabs/create-saas-app 2.11.0 → 2.12.1

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

@@ -1,396 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { 
-  Card, 
-  PageTransition,
-  MobileContainer,
-  ResponsiveGrid,
-  useAnimationTokens,
-  useGlassmorphism
-} from '@digilogiclabs/saas-factory-ui'
-import { 
-  ArrowLeft,
-  MessageSquare,
-  Database,
-  BookOpen,
-  BarChart3,
-  Settings,
-  Search,
-  Plus,
-  Zap,
-  Brain,
-  Activity,
-  FileText,
-  Lightbulb,
-  Sparkles,
-  Clock,
-  TrendingUp,
-  Users,
-  Download,
-  Share2,
-  RefreshCw,
-  AlertCircle,
-  CheckCircle,
-  Loader2
-} from 'lucide-react'
-import { useAuth } from '@digilogiclabs/app-sdk'
-import Link from 'next/link'
-import { useRAGSystem } from '../../../hooks/useRAGSystem'
-import { RAGChatInterface } from '../../../components/rag/RAGChatInterface'
-import { KnowledgeManager } from '../../../components/rag/KnowledgeManager'
-import { RAGAnalytics } from '../../../components/rag/RAGAnalytics'
-import type { GenericRAGDocumentSchema } from '@digilogiclabs/saas-factory-ai-types'
-import { toast } from 'sonner'
-
-export default function AIPage() {
-  const { user, loading } = useAuth()
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'chat' | 'knowledge' | 'analytics' | 'settings'>('dashboard')
-  
-  const animations = useAnimationTokens()
-  const glass = useGlassmorphism()
-
-  // Initialize RAG system
-  const ragSystem = useRAGSystem<GenericRAGDocumentSchema>({
-    domain: 'generic', // Can be configured: 'plants', 'ecommerce', 'education'
-    enableStreaming: true,
-    enableCache: true,
-    autoInitialize: true
-  })
-
-  const handleSync = async () => {
-    try {
-      await ragSystem.syncKnowledgeBase()
-    } catch (error) {
-      console.error('Sync failed:', error)
-    }
-  }
-
-  const getHealthColor = (health: string) => {
-    switch (health) {
-      case 'healthy': return 'text-green-500'
-      case 'degraded': return 'text-yellow-500'
-      case 'down': return 'text-red-500'
-      default: return 'text-gray-500'
-    }
-  }
-
-  const getHealthIcon = (health: string) => {
-    switch (health) {
-      case 'healthy': return CheckCircle
-      case 'degraded': return AlertCircle
-      case 'down': return AlertCircle
-      default: return Loader2
-    }
-  }
-
-  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>
-    )
-  }
-
-  const renderDashboard = () => {
-    const HealthIcon = getHealthIcon(ragSystem.health)
-    
-    return (
-      <div className="space-y-6">
-        {/* System Status */}
-        <Card className={`${glass.card} ${glass.border} p-6`}>
-          <div className="flex items-center justify-between mb-4">
-            <h3 className="text-xl font-semibold">System Status</h3>
-            <button
-              onClick={handleSync}
-              disabled={ragSystem.isLoading}
-              className={`p-2 rounded-xl ${glass.card} ${glass.border} ${animations.hover.scale} disabled:opacity-50`}
-            >
-              {ragSystem.isLoading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                <RefreshCw className="w-4 h-4" />
-              )}
-            </button>
-          </div>
-          
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="flex items-center gap-3">
-              <HealthIcon className={`w-5 h-5 ${getHealthColor(ragSystem.health)}`} />
-              <div>
-                <p className="font-medium">System Health</p>
-                <p className="text-sm text-gray-600 dark:text-gray-300 capitalize">
-                  {ragSystem.health}
-                </p>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-3">
-              <Activity className="w-5 h-5 text-blue-500" />
-              <div>
-                <p className="font-medium">Status</p>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
-                  {ragSystem.isReady ? 'Ready' : 'Initializing...'}
-                </p>
-              </div>
-            </div>
-            
-            <div className="flex items-center gap-3">
-              <Clock className="w-5 h-5 text-purple-500" />
-              <div>
-                <p className="font-medium">Last Sync</p>
-                <p className="text-sm text-gray-600 dark:text-gray-300">
-                  {ragSystem.lastSyncAt 
-                    ? ragSystem.lastSyncAt.toLocaleString()
-                    : 'Never'
-                  }
-                </p>
-              </div>
-            </div>
-          </div>
-        </Card>
-
-        {/* Statistics Overview */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card className={`${glass.card} ${glass.border} p-6 text-center ${animations.hover.lift}`}>
-            <div className="text-3xl font-bold text-blue-500 mb-2">
-              {ragSystem.totalQueries}
-            </div>
-            <div className="text-sm text-gray-600 dark:text-gray-300">Total Queries</div>
-          </Card>
-          
-          <Card className={`${glass.card} ${glass.border} p-6 text-center ${animations.hover.lift}`}>
-            <div className="text-3xl font-bold text-green-500 mb-2">
-              {ragSystem.totalDocuments}
-            </div>
-            <div className="text-sm text-gray-600 dark:text-gray-300">Knowledge Docs</div>
-          </Card>
-          
-          <Card className={`${glass.card} ${glass.border} p-6 text-center ${animations.hover.lift}`}>
-            <div className="text-3xl font-bold text-purple-500 mb-2">
-              {ragSystem.cacheSize}
-            </div>
-            <div className="text-sm text-gray-600 dark:text-gray-300">Cached Responses</div>
-          </Card>
-          
-          <Card className={`${glass.card} ${glass.border} p-6 text-center ${animations.hover.lift}`}>
-            <div className="text-3xl font-bold text-orange-500 mb-2">
-              {ragSystem.queryHistory.length}
-            </div>
-            <div className="text-sm text-gray-600 dark:text-gray-300">Recent Queries</div>
-          </Card>
-        </div>
-
-        {/* Quick Actions */}
-        <Card className={`${glass.card} ${glass.border} p-6`}>
-          <h3 className="text-xl font-semibold mb-4">Quick Actions</h3>
-          
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-            <button
-              onClick={() => setActiveTab('chat')}
-              disabled={!ragSystem.canQuery}
-              className={`p-4 rounded-xl ${glass.card} ${glass.border} ${animations.hover.lift} ${animations.transition.smooth} disabled:opacity-50 text-left`}
-            >
-              <MessageSquare className="w-8 h-8 text-blue-500 mb-3" />
-              <h4 className="font-semibold mb-1">AI Chat</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
-                Chat with your knowledge base
-              </p>
-            </button>
-            
-            <button
-              onClick={() => setActiveTab('knowledge')}
-              className={`p-4 rounded-xl ${glass.card} ${glass.border} ${animations.hover.lift} ${animations.transition.smooth} text-left`}
-            >
-              <Database className="w-8 h-8 text-green-500 mb-3" />
-              <h4 className="font-semibold mb-1">Knowledge Base</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
-                Manage your documents
-              </p>
-            </button>
-            
-            <button
-              onClick={() => setActiveTab('analytics')}
-              className={`p-4 rounded-xl ${glass.card} ${glass.border} ${animations.hover.lift} ${animations.transition.smooth} text-left`}
-            >
-              <BarChart3 className="w-8 h-8 text-purple-500 mb-3" />
-              <h4 className="font-semibold mb-1">Analytics</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
-                View usage insights
-              </p>
-            </button>
-            
-            <button
-              onClick={() => ragSystem.clearCache()}
-              className={`p-4 rounded-xl ${glass.card} ${glass.border} ${animations.hover.lift} ${animations.transition.smooth} text-left`}
-            >
-              <RefreshCw className="w-8 h-8 text-orange-500 mb-3" />
-              <h4 className="font-semibold mb-1">Clear Cache</h4>
-              <p className="text-sm text-gray-600 dark:text-gray-300">
-                Reset cached responses
-              </p>
-            </button>
-          </div>
-        </Card>
-
-        {/* Recent Query History */}
-        {ragSystem.queryHistory.length > 0 && (
-          <Card className={`${glass.card} ${glass.border} p-6`}>
-            <h3 className="text-xl font-semibold mb-4">Recent Queries</h3>
-            
-            <div className="space-y-3">
-              {ragSystem.queryHistory.slice(0, 5).map((query, index) => (
-                <div 
-                  key={index}
-                  className={`p-3 rounded-lg bg-gray-50 dark:bg-gray-800/50 ${animations.hover.lift}`}
-                >
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <p className="font-medium line-clamp-1">{query.query}</p>
-                      <div className="flex items-center gap-2 mt-1 text-sm text-gray-600 dark:text-gray-300">
-                        <Clock className="w-3 h-3" />
-                        {new Date(query.timestamp).toLocaleTimeString()}
-                        {query.category && (
-                          <>
-                            <span>•</span>
-                            <span className="capitalize">{query.category}</span>
-                          </>
-                        )}
-                      </div>
-                    </div>
-                    <button
-                      onClick={() => {
-                        setActiveTab('chat')
-                        // Would trigger a new query with this text
-                      }}
-                      className={`p-1 rounded ${animations.hover.scale}`}
-                    >
-                      <RefreshCw className="w-4 h-4" />
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </Card>
-        )}
-      </div>
-    )
-  }
-
-  const renderChat = () => (
-    <Card className={`${glass.card} ${glass.border} p-6 h-[calc(100vh-200px)]`}>
-      <RAGChatInterface 
-        ragSystem={ragSystem}
-        enableStreaming={true}
-        showSources={true}
-        showConfidence={true}
-        onError={(error) => toast.error(error.message)}
-      />
-    </Card>
-  )
-
-  const renderKnowledge = () => (
-    <Card className={`${glass.card} ${glass.border} p-6`}>
-      <KnowledgeManager 
-        ragSystem={ragSystem}
-        enableBulkOperations={true}
-        enableExport={true}
-        onSuccess={(message) => toast.success(message)}
-        onError={(error) => toast.error(error)}
-      />
-    </Card>
-  )
-
-  const renderAnalytics = () => (
-    <Card className={`${glass.card} ${glass.border} p-6`}>
-      <RAGAnalytics 
-        ragSystem={ragSystem}
-        timeRange="7d"
-        showDetailedMetrics={true}
-      />
-    </Card>
-  )
-
-  const tabs = [
-    { id: 'dashboard', label: 'Dashboard', icon: Brain },
-    { id: 'chat', label: 'AI Chat', icon: MessageSquare },
-    { id: 'knowledge', label: 'Knowledge', icon: BookOpen },
-    { id: 'analytics', label: 'Analytics', icon: BarChart3 },
-  ]
-
-  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 Knowledge Assistant</h1>
-                  <p className="text-gray-600 dark:text-gray-300">
-                    Powered by RAG v4.0.0
-                  </p>
-                </div>
-              </div>
-              
-              {ragSystem.hasError && (
-                <div className="flex items-center gap-2 text-red-500">
-                  <AlertCircle className="w-5 h-5" />
-                  <span className="text-sm">System Error</span>
-                </div>
-              )}
-            </div>
-
-            {/* Tab Navigation */}
-            <div className={`${glass.card} ${glass.border} rounded-2xl p-1 mb-8 inline-flex`}>
-              {tabs.map((tab) => {
-                const Icon = tab.icon
-                return (
-                  <button
-                    key={tab.id}
-                    onClick={() => setActiveTab(tab.id as any)}
-                    className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
-                      activeTab === tab.id
-                        ? 'bg-blue-500 text-white shadow-lg'
-                        : 'text-gray-600 dark:text-gray-300 hover:bg-white/10'
-                    }`}
-                  >
-                    <Icon className="w-4 h-4" />
-                    {tab.label}
-                  </button>
-                )
-              })}
-            </div>
-
-            {/* Tab Content */}
-            <div className="space-y-6">
-              {activeTab === 'dashboard' && renderDashboard()}
-              {activeTab === 'chat' && renderChat()}
-              {activeTab === 'knowledge' && renderKnowledge()}
-              {activeTab === 'analytics' && renderAnalytics()}
-            </div>
-          </MobileContainer>
-        </div>
-      </main>
-    </PageTransition>
-  )
-}

package/dist/templates/web/ui-auth-payments-audio/template/src/components/__tests__/example.test.tsx

@@ -1,49 +0,0 @@
-/**
- * Example test file demonstrating testing patterns for SaaS Factory components
- * 
- * This is optional and serves as a reference for testing your components.
- * You can delete this file if you don't need example tests.
- */
-
-import { render, screen } from '@testing-library/react'
-import { Button } from '@digilogiclabs/saas-factory-ui'
-
-// Example: Testing UI components
-describe('UI Components', () => {
-  it('renders button with correct text', () => {
-    render(<Button>Click me</Button>)
-    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
-  })
-
-  it('button can be disabled', () => {
-    render(<Button disabled>Disabled button</Button>)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-})
-
-// Example: Testing custom components
-function MockComponent({ title }: { title: string }) {
-  return <h1>{title}</h1>
-}
-
-describe('Custom Components', () => {
-  it('renders with correct title', () => {
-    render(<MockComponent title="Test Title" />)
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Title')
-  })
-})
-
-// Example: Testing utilities
-function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(amount)
-}
-
-describe('Utilities', () => {
-  it('formats currency correctly', () => {
-    expect(formatCurrency(1000)).toBe('$1,000.00')
-    expect(formatCurrency(0)).toBe('$0.00')
-  })
-})

package/dist/templates/web/ui-auth-payments-audio/template/src/test/setup.ts

@@ -1,74 +0,0 @@
-import '@testing-library/jest-dom'
-import { vi, beforeEach, afterAll } from 'vitest'
-
-// Mock Next.js router
-vi.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    refresh: vi.fn(),
-    replace: vi.fn(),
-    prefetch: vi.fn(),
-  }),
-  useSearchParams: () => new URLSearchParams(),
-  usePathname: () => '/',
-}))
-
-// Mock App SDK (optional - only if testing auth/payment components)
-vi.mock('@digilogiclabs/app-sdk', () => ({
-  useAuth: () => ({
-    user: null,
-    loading: false,
-    error: null,
-    signIn: vi.fn(),
-    signUp: vi.fn(),
-    signOut: vi.fn(),
-    signInWithOAuth: vi.fn(),
-  }),
-  usePayments: () => ({
-    createCheckoutSession: vi.fn(),
-    createPortalSession: vi.fn(),
-    subscription: null,
-    loading: false,
-  }),
-  DLLProvider: ({ children }: { children: React.ReactNode }) => children,
-}))
-
-// Global test utilities
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Suppress console warnings in tests unless needed
-const originalConsoleError = console.error
-const originalConsoleWarn = console.warn
-
-beforeEach(() => {
-  console.error = (...args: any[]) => {
-    if (
-      typeof args[0] === 'string' &&
-      args[0].includes('Warning: ReactDOM.render is no longer supported')
-    ) {
-      return
-    }
-    originalConsoleError.call(console, ...args)
-  }
-
-  console.warn = (...args: any[]) => {
-    if (
-      typeof args[0] === 'string' &&
-      args[0].includes('useLayoutEffect does nothing on the server')
-    ) {
-      return
-    }
-    originalConsoleWarn.call(console, ...args)
-  }
-})
-
-afterAll(() => {
-  console.error = originalConsoleError
-  console.warn = originalConsoleWarn
-})

package/dist/templates/web/ui-auth-payments-audio/template/vitest.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-    setupFiles: ['./src/test/setup.ts'],
-    globals: true,
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-})

package/dist/templates/web/ui-auth-payments-video/template/src/components/__tests__/example.test.tsx

@@ -1,49 +0,0 @@
-/**
- * Example test file demonstrating testing patterns for SaaS Factory components
- * 
- * This is optional and serves as a reference for testing your components.
- * You can delete this file if you don't need example tests.
- */
-
-import { render, screen } from '@testing-library/react'
-import { Button } from '@digilogiclabs/saas-factory-ui'
-
-// Example: Testing UI components
-describe('UI Components', () => {
-  it('renders button with correct text', () => {
-    render(<Button>Click me</Button>)
-    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument()
-  })
-
-  it('button can be disabled', () => {
-    render(<Button disabled>Disabled button</Button>)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-})
-
-// Example: Testing custom components
-function MockComponent({ title }: { title: string }) {
-  return <h1>{title}</h1>
-}
-
-describe('Custom Components', () => {
-  it('renders with correct title', () => {
-    render(<MockComponent title="Test Title" />)
-    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Test Title')
-  })
-})
-
-// Example: Testing utilities
-function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-  }).format(amount)
-}
-
-describe('Utilities', () => {
-  it('formats currency correctly', () => {
-    expect(formatCurrency(1000)).toBe('$1,000.00')
-    expect(formatCurrency(0)).toBe('$0.00')
-  })
-})

package/dist/templates/web/ui-auth-payments-video/template/src/test/setup.ts

@@ -1,74 +0,0 @@
-import '@testing-library/jest-dom'
-import { vi, beforeEach, afterAll } from 'vitest'
-
-// Mock Next.js router
-vi.mock('next/navigation', () => ({
-  useRouter: () => ({
-    push: vi.fn(),
-    back: vi.fn(),
-    forward: vi.fn(),
-    refresh: vi.fn(),
-    replace: vi.fn(),
-    prefetch: vi.fn(),
-  }),
-  useSearchParams: () => new URLSearchParams(),
-  usePathname: () => '/',
-}))
-
-// Mock App SDK (optional - only if testing auth/payment components)
-vi.mock('@digilogiclabs/app-sdk', () => ({
-  useAuth: () => ({
-    user: null,
-    loading: false,
-    error: null,
-    signIn: vi.fn(),
-    signUp: vi.fn(),
-    signOut: vi.fn(),
-    signInWithOAuth: vi.fn(),
-  }),
-  usePayments: () => ({
-    createCheckoutSession: vi.fn(),
-    createPortalSession: vi.fn(),
-    subscription: null,
-    loading: false,
-  }),
-  DLLProvider: ({ children }: { children: React.ReactNode }) => children,
-}))
-
-// Global test utilities
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}))
-
-// Suppress console warnings in tests unless needed
-const originalConsoleError = console.error
-const originalConsoleWarn = console.warn
-
-beforeEach(() => {
-  console.error = (...args: any[]) => {
-    if (
-      typeof args[0] === 'string' &&
-      args[0].includes('Warning: ReactDOM.render is no longer supported')
-    ) {
-      return
-    }
-    originalConsoleError.call(console, ...args)
-  }
-
-  console.warn = (...args: any[]) => {
-    if (
-      typeof args[0] === 'string' &&
-      args[0].includes('useLayoutEffect does nothing on the server')
-    ) {
-      return
-    }
-    originalConsoleWarn.call(console, ...args)
-  }
-})
-
-afterAll(() => {
-  console.error = originalConsoleError
-  console.warn = originalConsoleWarn
-})

package/dist/templates/web/ui-auth-payments-video/template/vitest.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
-import path from 'path'
-
-export default defineConfig({
-  plugins: [react()],
-  test: {
-    environment: 'jsdom',
-    setupFiles: ['./src/test/setup.ts'],
-    globals: true,
-  },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-})

package/dist/templates/web/ui-only/template/.eslintrc.js

@@ -1,8 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  extends: ['next/core-web-vitals'],
-  rules: {
-    // Add any custom rules here
-  },
-}
-