@digilogiclabs/create-saas-app 1.17.1 → 1.18.0

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

@@ -0,0 +1,466 @@
+'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>
+  )
+}