@digilogiclabs/create-saas-app 2.11.0 → 2.12.0

package/dist/templates/web/ui-auth-payments-ai-rag/template/components/rag/RAGAnalytics.tsx

@@ -1,466 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Card } from '@digilogiclabs/saas-factory-ui'
-import { 
-  TrendingUp,
-  TrendingDown,
-  Activity,
-  Users,
-  Clock,
-  Database,
-  MessageSquare,
-  BarChart3,
-  PieChart,
-  Calendar,
-  RefreshCw,
-  Download
-} from 'lucide-react'
-import { 
-  LineChart, 
-  Line, 
-  AreaChart, 
-  Area, 
-  XAxis, 
-  YAxis, 
-  CartesianGrid, 
-  Tooltip, 
-  ResponsiveContainer,
-  BarChart,
-  Bar,
-  PieChart as RechartsPieChart,
-  Cell
-} from 'recharts'
-import type { UseRAGSystemReturn } from '../../hooks/useRAGSystem'
-
-interface RAGAnalyticsProps {
-  ragSystem: UseRAGSystemReturn<any>
-  timeRange?: '1d' | '7d' | '30d' | '90d'
-  showDetailedMetrics?: boolean
-  className?: string
-}
-
-interface AnalyticsData {
-  usage: {
-    totalQueries: number
-    successfulQueries: number
-    failedQueries: number
-    averageResponseTime: number
-    queriesPerDay: Array<{ date: string; queries: number }>
-  }
-  knowledge: {
-    totalDocuments: number
-    documentsAdded: number
-    documentsUpdated: number
-    documentsDeleted: number
-    categoriesDistribution: Array<{ category: string; count: number }>
-  }
-  performance: {
-    averageConfidence: number
-    responseTimeDistribution: Array<{ range: string; count: number }>
-    popularQueries: Array<{ query: string; count: number; averageConfidence: number }>
-  }
-  users: {
-    activeUsers: number
-    newUsers: number
-    userSatisfaction: number
-    feedbackDistribution: Array<{ type: string; count: number }>
-  }
-}
-
-const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']
-
-export function RAGAnalytics({
-  ragSystem,
-  timeRange = '7d',
-  showDetailedMetrics = true,
-  className = ''
-}: RAGAnalyticsProps) {
-  const [analyticsData, setAnalyticsData] = useState<AnalyticsData | null>(null)
-  const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange)
-  const [isLoading, setIsLoading] = useState(false)
-
-  useEffect(() => {
-    loadAnalyticsData()
-  }, [selectedTimeRange, ragSystem])
-
-  const loadAnalyticsData = async () => {
-    if (!ragSystem.ragSystem) return
-
-    setIsLoading(true)
-    try {
-      const data = await ragSystem.getAnalytics(selectedTimeRange)
-      if (data) {
-        setAnalyticsData(data)
-      } else {
-        // Generate mock data for demonstration
-        setAnalyticsData(generateMockData())
-      }
-    } catch (error) {
-      console.error('Failed to load analytics:', error)
-      setAnalyticsData(generateMockData()) // Fallback to mock data
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const generateMockData = (): AnalyticsData => {
-    const days = parseInt(selectedTimeRange.replace('d', ''))
-    const queriesPerDay = Array.from({ length: days }, (_, i) => ({
-      date: new Date(Date.now() - (days - 1 - i) * 24 * 60 * 60 * 1000).toLocaleDateString(),
-      queries: Math.floor(Math.random() * 50) + 10
-    }))
-
-    return {
-      usage: {
-        totalQueries: ragSystem.totalQueries || Math.floor(Math.random() * 1000) + 500,
-        successfulQueries: Math.floor(Math.random() * 900) + 450,
-        failedQueries: Math.floor(Math.random() * 50) + 10,
-        averageResponseTime: Math.floor(Math.random() * 2000) + 500,
-        queriesPerDay
-      },
-      knowledge: {
-        totalDocuments: ragSystem.totalDocuments || Math.floor(Math.random() * 500) + 100,
-        documentsAdded: Math.floor(Math.random() * 50) + 10,
-        documentsUpdated: Math.floor(Math.random() * 30) + 5,
-        documentsDeleted: Math.floor(Math.random() * 10) + 1,
-        categoriesDistribution: [
-          { category: 'general', count: 45 },
-          { category: 'faq', count: 32 },
-          { category: 'guides', count: 28 },
-          { category: 'reference', count: 15 },
-          { category: 'manual', count: 12 }
-        ]
-      },
-      performance: {
-        averageConfidence: 0.78,
-        responseTimeDistribution: [
-          { range: '0-500ms', count: 45 },
-          { range: '500-1000ms', count: 35 },
-          { range: '1000-2000ms', count: 15 },
-          { range: '2000ms+', count: 5 }
-        ],
-        popularQueries: [
-          { query: 'How to get started?', count: 45, averageConfidence: 0.89 },
-          { query: 'What are the features?', count: 38, averageConfidence: 0.85 },
-          { query: 'Pricing information', count: 32, averageConfidence: 0.82 },
-          { query: 'Technical support', count: 28, averageConfidence: 0.75 },
-          { query: 'API documentation', count: 24, averageConfidence: 0.88 }
-        ]
-      },
-      users: {
-        activeUsers: Math.floor(Math.random() * 100) + 50,
-        newUsers: Math.floor(Math.random() * 20) + 5,
-        userSatisfaction: 4.2,
-        feedbackDistribution: [
-          { type: 'positive', count: 78 },
-          { type: 'neutral', count: 15 },
-          { type: 'negative', count: 7 }
-        ]
-      }
-    }
-  }
-
-  const exportAnalytics = () => {
-    if (!analyticsData) return
-
-    const exportData = {
-      timeRange: selectedTimeRange,
-      exportedAt: new Date().toISOString(),
-      data: analyticsData
-    }
-
-    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
-      type: 'application/json'
-    })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = `rag-analytics-${selectedTimeRange}-${new Date().toISOString().split('T')[0]}.json`
-    a.click()
-    URL.revokeObjectURL(url)
-  }
-
-  if (!analyticsData) {
-    return (
-      <div className={`space-y-6 ${className}`}>
-        <div className="flex items-center justify-center h-64">
-          <div className="text-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
-            <p>Loading analytics data...</p>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold">RAG Analytics</h2>
-          <p className="text-gray-600 dark:text-gray-300">
-            Performance insights for your AI knowledge system
-          </p>
-        </div>
-        
-        <div className="flex items-center gap-3">
-          <select
-            value={selectedTimeRange}
-            onChange={(e) => setSelectedTimeRange(e.target.value as any)}
-            className="px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-          >
-            <option value="1d">Last 24 hours</option>
-            <option value="7d">Last 7 days</option>
-            <option value="30d">Last 30 days</option>
-            <option value="90d">Last 90 days</option>
-          </select>
-          
-          <button
-            onClick={loadAnalyticsData}
-            disabled={isLoading}
-            className="p-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 disabled:opacity-50"
-          >
-            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
-          </button>
-          
-          <button
-            onClick={exportAnalytics}
-            className="flex items-center gap-2 px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800"
-          >
-            <Download className="w-4 h-4" />
-            Export
-          </button>
-        </div>
-      </div>
-
-      {/* Key Metrics */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <Card className="p-6">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
-              <MessageSquare className="w-6 h-6 text-blue-600" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{analyticsData.usage.totalQueries.toLocaleString()}</p>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Total Queries</p>
-            </div>
-          </div>
-          <div className="mt-2 flex items-center gap-1 text-sm">
-            <TrendingUp className="w-4 h-4 text-green-500" />
-            <span className="text-green-500">+12%</span>
-            <span className="text-gray-500">vs last period</span>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-green-100 dark:bg-green-900/30 rounded-lg">
-              <Database className="w-6 h-6 text-green-600" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{analyticsData.knowledge.totalDocuments.toLocaleString()}</p>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Knowledge Docs</p>
-            </div>
-          </div>
-          <div className="mt-2 flex items-center gap-1 text-sm">
-            <TrendingUp className="w-4 h-4 text-green-500" />
-            <span className="text-green-500">+{analyticsData.knowledge.documentsAdded}</span>
-            <span className="text-gray-500">this period</span>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
-              <Clock className="w-6 h-6 text-purple-600" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">{analyticsData.usage.averageResponseTime}ms</p>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Avg Response Time</p>
-            </div>
-          </div>
-          <div className="mt-2 flex items-center gap-1 text-sm">
-            <TrendingDown className="w-4 h-4 text-green-500" />
-            <span className="text-green-500">-5%</span>
-            <span className="text-gray-500">faster</span>
-          </div>
-        </Card>
-
-        <Card className="p-6">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-orange-100 dark:bg-orange-900/30 rounded-lg">
-              <TrendingUp className="w-6 h-6 text-orange-600" />
-            </div>
-            <div>
-              <p className="text-2xl font-bold">
-                {Math.round(analyticsData.performance.averageConfidence * 100)}%
-              </p>
-              <p className="text-sm text-gray-600 dark:text-gray-300">Avg Confidence</p>
-            </div>
-          </div>
-          <div className="mt-2 flex items-center gap-1 text-sm">
-            <TrendingUp className="w-4 h-4 text-green-500" />
-            <span className="text-green-500">+3%</span>
-            <span className="text-gray-500">improvement</span>
-          </div>
-        </Card>
-      </div>
-
-      {/* Charts */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Query Volume Chart */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <BarChart3 className="w-5 h-5" />
-            Query Volume
-          </h3>
-          <ResponsiveContainer width="100%" height={300}>
-            <AreaChart data={analyticsData.usage.queriesPerDay}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="date" />
-              <YAxis />
-              <Tooltip />
-              <Area 
-                type="monotone" 
-                dataKey="queries" 
-                stroke="#3b82f6" 
-                fill="#3b82f6" 
-                fillOpacity={0.3} 
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </Card>
-
-        {/* Response Time Distribution */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <Clock className="w-5 h-5" />
-            Response Time Distribution
-          </h3>
-          <ResponsiveContainer width="100%" height={300}>
-            <BarChart data={analyticsData.performance.responseTimeDistribution}>
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="range" />
-              <YAxis />
-              <Tooltip />
-              <Bar dataKey="count" fill="#10b981" />
-            </BarChart>
-          </ResponsiveContainer>
-        </Card>
-
-        {/* Categories Distribution */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <PieChart className="w-5 h-5" />
-            Knowledge Categories
-          </h3>
-          <ResponsiveContainer width="100%" height={300}>
-            <RechartsPieChart>
-              <Pie
-                data={analyticsData.knowledge.categoriesDistribution}
-                cx="50%"
-                cy="50%"
-                outerRadius={80}
-                dataKey="count"
-                label={({ category, count }) => `${category}: ${count}`}
-              >
-                {analyticsData.knowledge.categoriesDistribution.map((entry, index) => (
-                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-                ))}
-              </Pie>
-              <Tooltip />
-            </RechartsPieChart>
-          </ResponsiveContainer>
-        </Card>
-
-        {/* User Feedback */}
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <Users className="w-5 h-5" />
-            User Feedback
-          </h3>
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">Overall Satisfaction</span>
-              <span className="text-2xl font-bold text-green-500">
-                {analyticsData.users.userSatisfaction}/5.0
-              </span>
-            </div>
-            
-            {analyticsData.users.feedbackDistribution.map((feedback, index) => (
-              <div key={feedback.type} className="space-y-2">
-                <div className="flex justify-between text-sm">
-                  <span className="capitalize">{feedback.type}</span>
-                  <span>{feedback.count}</span>
-                </div>
-                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                  <div
-                    className="h-2 rounded-full"
-                    style={{
-                      width: `${(feedback.count / analyticsData.users.feedbackDistribution.reduce((sum, f) => sum + f.count, 0)) * 100}%`,
-                      backgroundColor: COLORS[index % COLORS.length]
-                    }}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        </Card>
-      </div>
-
-      {/* Popular Queries */}
-      {showDetailedMetrics && (
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <Activity className="w-5 h-5" />
-            Popular Queries
-          </h3>
-          <div className="space-y-3">
-            {analyticsData.performance.popularQueries.map((query, index) => (
-              <div key={index} className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                <div className="flex-1">
-                  <p className="font-medium">{query.query}</p>
-                  <p className="text-sm text-gray-600 dark:text-gray-300">
-                    {query.count} queries • {Math.round(query.averageConfidence * 100)}% avg confidence
-                  </p>
-                </div>
-                <div className="text-right">
-                  <div className="text-2xl font-bold text-blue-500">#{index + 1}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </Card>
-      )}
-
-      {/* System Health Summary */}
-      <Card className="p-6">
-        <h3 className="text-lg font-semibold mb-4">System Health Summary</h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div className="text-center">
-            <div className="text-3xl font-bold text-green-500 mb-2">
-              {Math.round((analyticsData.usage.successfulQueries / analyticsData.usage.totalQueries) * 100)}%
-            </div>
-            <p className="text-sm text-gray-600 dark:text-gray-300">Success Rate</p>
-          </div>
-          
-          <div className="text-center">
-            <div className="text-3xl font-bold text-blue-500 mb-2">
-              {analyticsData.users.activeUsers}
-            </div>
-            <p className="text-sm text-gray-600 dark:text-gray-300">Active Users</p>
-          </div>
-          
-          <div className="text-center">
-            <div className="text-3xl font-bold text-purple-500 mb-2">
-              {Math.round((analyticsData.knowledge.documentsAdded / analyticsData.knowledge.totalDocuments) * 100)}%
-            </div>
-            <p className="text-sm text-gray-600 dark:text-gray-300">Growth Rate</p>
-          </div>
-        </div>
-      </Card>
-    </div>
-  )
-}