128 lines
4.6 KiB
TypeScript
128 lines
4.6 KiB
TypeScript
import { AdminMetrics } from '@/components/admin-metrics'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Zap, Settings, Activity, TrendingUp } from 'lucide-react'
|
|
|
|
export default async function AdminAIPage() {
|
|
// Mock AI metrics - in a real app, these would come from analytics
|
|
const aiMetrics = [
|
|
{
|
|
title: 'Total Requests',
|
|
value: '856',
|
|
trend: { value: 12, isPositive: true },
|
|
icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
|
|
},
|
|
{
|
|
title: 'Success Rate',
|
|
value: '98.5%',
|
|
trend: { value: 2, isPositive: true },
|
|
icon: <TrendingUp className="h-5 w-5 text-green-600 dark:text-green-400" />,
|
|
},
|
|
{
|
|
title: 'Avg Response Time',
|
|
value: '1.2s',
|
|
trend: { value: 5, isPositive: true },
|
|
icon: <Activity className="h-5 w-5 text-primary dark:text-primary-foreground" />,
|
|
},
|
|
{
|
|
title: 'Active Features',
|
|
value: '6',
|
|
icon: <Settings className="h-5 w-5 text-purple-600 dark:text-purple-400" />,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
AI Management
|
|
</h1>
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
|
Monitor and configure AI features
|
|
</p>
|
|
</div>
|
|
<Button variant="outline">
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
Configure
|
|
</Button>
|
|
</div>
|
|
|
|
<AdminMetrics metrics={aiMetrics} />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Active AI Features
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{[
|
|
'Title Suggestions',
|
|
'Semantic Search',
|
|
'Paragraph Reformulation',
|
|
'Memory Echo',
|
|
'Language Detection',
|
|
'Auto Labeling',
|
|
].map((feature) => (
|
|
<div
|
|
key={feature}
|
|
className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
|
|
>
|
|
<span className="text-sm text-gray-900 dark:text-white">
|
|
{feature}
|
|
</span>
|
|
<span className="px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900 rounded-full">
|
|
Active
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
AI Provider Status
|
|
</h2>
|
|
<div className="space-y-3">
|
|
{[
|
|
{ name: 'OpenAI', status: 'Connected', requests: '642' },
|
|
{ name: 'Ollama', status: 'Available', requests: '214' },
|
|
].map((provider) => (
|
|
<div
|
|
key={provider.name}
|
|
className="flex items-center justify-between p-3 bg-gray-50 dark:bg-zinc-800 rounded-lg"
|
|
>
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
{provider.name}
|
|
</p>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
|
{provider.requests} requests
|
|
</p>
|
|
</div>
|
|
<span
|
|
className={`px-2 py-1 text-xs font-medium rounded-full ${
|
|
provider.status === 'Connected'
|
|
? 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900'
|
|
: 'text-primary dark:text-primary-foreground bg-primary/10 dark:bg-primary/20'
|
|
}`}
|
|
>
|
|
{provider.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
|
|
Recent AI Requests
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Recent AI requests will be displayed here.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|