97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
// File: app/(admin)/admin/ai/intent-classification/analytics/page.tsx
|
|
// Change Log
|
|
// - 2026-05-19: สร้างหน้า Analytics Dashboard สำหรับ Intent Classification (T037, US3).
|
|
|
|
'use client';
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { useIntentAnalytics } from '@/hooks/ai/use-intent-classification';
|
|
import { AnalyticsSummaryCards } from '@/components/ai/intent-classification/analytics/analytics-summary-cards';
|
|
import { MethodBreakdownTable } from '@/components/ai/intent-classification/analytics/method-breakdown-table';
|
|
import { IntentBreakdownTable } from '@/components/ai/intent-classification/analytics/intent-breakdown-table';
|
|
import { RecalibrationPanel } from '@/components/ai/intent-classification/analytics/recalibration-panel';
|
|
|
|
/**
|
|
* หน้า Analytics Dashboard สำหรับ Intent Classification
|
|
* แสดง Summary Cards, Method Breakdown, Intent Breakdown, Recalibration
|
|
*/
|
|
export default function IntentAnalyticsPage() {
|
|
const { data, isLoading, isError, error } = useIntentAnalytics();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<h1 className="text-2xl font-bold">Intent Classification Analytics</h1>
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<Skeleton key={i} className="h-[120px]" />
|
|
))}
|
|
</div>
|
|
<Skeleton className="h-[300px]" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="p-6">
|
|
<h1 className="text-2xl font-bold mb-4">Intent Classification Analytics</h1>
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<p className="text-destructive">
|
|
เกิดข้อผิดพลาด: {error instanceof Error ? error.message : 'ไม่สามารถโหลดข้อมูลได้'}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">Intent Classification Analytics</h1>
|
|
<p className="text-sm text-muted-foreground">ข้อมูลย้อนหลัง 30 วัน</p>
|
|
</div>
|
|
|
|
{/* Summary Cards */}
|
|
<AnalyticsSummaryCards data={data} />
|
|
|
|
{/* Method Breakdown */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Classification Method Breakdown</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<MethodBreakdownTable data={data.byMethod} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Intent Breakdown */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Intent Code Breakdown</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<IntentBreakdownTable data={data.byIntent} />
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Recalibration */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Recalibration Recommendations</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<RecalibrationPanel data={data.recalibration} />
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|