690519:1631 224 to 226 AI #01

2026-05-19 16:31:50 +07:00
parent 3e25097470
commit ea5499123e
127 changed files with 12387 additions and 42 deletions
@@ -0,0 +1,67 @@
+// File: components/ai/intent-classification/analytics/analytics-summary-cards.tsx
+// Change Log
+// - 2026-05-19: สร้าง Summary Cards สำหรับ Analytics Dashboard (T036, US3).
+
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import type { ClassificationAnalytics } from '@/lib/services/ai-intent.service';
+
+interface AnalyticsSummaryCardsProps {
+  data: ClassificationAnalytics;
+}
+
+/**
+ * แสดงสรุปสถิติหลักในรูปแบบ Cards
+ * Total Requests, Pattern Hit Rate, Avg Confidence, Avg Latency
+ */
+export function AnalyticsSummaryCards({ data }: AnalyticsSummaryCardsProps) {
+  const cards = [
+    {
+      title: 'Total Requests',
+      value: data.totalRequests.toLocaleString(),
+      subtitle: `${data.successCount} สำเร็จ / ${data.failedCount} ล้มเหลว`,
+      color: 'text-blue-600',
+    },
+    {
+      title: 'Pattern Hit Rate',
+      value: `${data.patternHitRate}%`,
+      subtitle: 'เป้าหมาย: 70-80%',
+      color: data.patternHitRate >= 70 ? 'text-green-600' : 'text-amber-600',
+    },
+    {
+      title: 'Avg Confidence',
+      value: data.avgConfidence.toFixed(2),
+      subtitle: 'เป้าหมาย: ≥ 0.70',
+      color: data.avgConfidence >= 0.7 ? 'text-green-600' : 'text-amber-600',
+    },
+    {
+      title: 'Avg Latency',
+      value: `${data.avgLatencyMs.toFixed(1)}ms`,
+      subtitle: 'Pattern < 10ms, LLM < 2000ms',
+      color: data.avgLatencyMs < 100 ? 'text-green-600' : 'text-amber-600',
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {cards.map((card) => (
+        <Card key={card.title}>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {card.title}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className={`text-2xl font-bold ${card.color}`}>
+              {card.value}
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {card.subtitle}
+            </p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}