From 16696147359ee34aed91250a7a84b10afb9fe425 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 18:18:27 +0700
Subject: [PATCH] `feat(analytics): add warned status tracking to summary
 cards, trend chart, and violator table`

---
 .../components/ModerationActionsPanel.tsx     | 147 ++++++++++++++++++
 .../analytics/components/SummaryCards.tsx     |  11 ++
 .../analytics/components/TrendChart.tsx       |  18 ++-
 .../analytics/components/ViolatorTable.tsx    |  30 +++-
 4 files changed, 199 insertions(+), 7 deletions(-)
 create mode 100644 services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx

diff --git a/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx b/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
new file mode 100644
index 0000000..51d5cbc
--- /dev/null
+++ b/services/frontend/src/features/analytics/components/ModerationActionsPanel.tsx
@@ -0,0 +1,147 @@
+import type { ModerationActionRecord } from "../../../shared/api/client";
+import { cn } from "../../../shared/lib/utils";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ScrollArea,
+} from "../../../shared/ui";
+
+interface ModerationActionsPanelProps {
+  actions: ModerationActionRecord[];
+  loading: boolean;
+}
+
+const ACTION_LABELS: Record<string, { label: string; color: string }> = {
+  delete_message: { label: "Hapus Pesan", color: "bg-red-100 text-red-700 border-red-200" },
+  warn_user: { label: "Peringatan", color: "bg-yellow-100 text-yellow-700 border-yellow-200" },
+  mute_user: { label: "Mute", color: "bg-orange-100 text-orange-700 border-orange-200" },
+  kick_user: { label: "Kick", color: "bg-pink-100 text-pink-700 border-pink-200" },
+  ban_user: { label: "Ban", color: "bg-accent/20 text-accent border-accent/30" },
+};
+
+const STATUS_LABELS: Record<string, { label: string; color: string }> = {
+  pending: { label: "Pending", color: "bg-gray-100 text-gray-600" },
+  completed: { label: "Selesai", color: "bg-green-100 text-green-700" },
+  executed: { label: "Tereksekusi", color: "bg-green-100 text-green-700" },
+  failed: { label: "Gagal", color: "bg-red-100 text-red-700" },
+};
+
+export function ModerationActionsPanel({
+  actions,
+  loading,
+}: ModerationActionsPanelProps) {
+  if (loading && !actions?.length) {
+    return <LoadingBox />;
+  }
+
+  if (!actions?.length) {
+    return (
+      <Card>
+        <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
+          Belum ada aksi moderasi.
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+              <span className="text-lg">🛡️</span>
+              Aksi Moderasi
+            </CardTitle>
+            <CardDescription className="text-xs">
+              Riwayat tindakan moderasi yang telah diambil.
+            </CardDescription>
+          </div>
+          <Badge variant="secondary">{actions.length} aksi</Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ScrollArea className="max-h-[320px]">
+          <div className="divide-y divide-sky-50">
+            {actions.map((action) => {
+              const actionStyle = ACTION_LABELS[action.action_type] ?? {
+                label: action.action_type,
+                color: "bg-gray-100 text-gray-600",
+              };
+              const statusStyle = STATUS_LABELS[action.status] ?? {
+                label: action.status,
+                color: "bg-gray-100 text-gray-600",
+              };
+
+              return (
+                <div
+                  key={action.id}
+                  className="px-5 py-3 text-sm hover:bg-sky-50/30 transition-colors"
+                >
+                  <div className="flex items-center justify-between gap-3">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Badge
+                        variant="outline"
+                        className={cn(
+                          "text-[10px] px-1.5 py-0 font-semibold whitespace-nowrap border",
+                          actionStyle.color,
+                        )}
+                      >
+                        {actionStyle.label}
+                      </Badge>
+                      <span className="truncate text-xs font-medium">
+                        {action.username}
+                      </span>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "text-[9px] px-1.5 py-0 shrink-0",
+                        statusStyle.color,
+                      )}
+                    >
+                      {statusStyle.label}
+                    </Badge>
+                  </div>
+                  {action.reason && (
+                    <p className="mt-1 text-[11px] text-muted-foreground line-clamp-1 pl-1">
+                      {action.reason}
+                    </p>
+                  )}
+                  {action.error && (
+                    <p className="mt-0.5 text-[10px] text-red-400 pl-1">
+                      Error: {action.error}
+                    </p>
+                  )}
+                  <div className="mt-1 text-[10px] text-muted-foreground pl-1">
+                    {new Date(action.created_at).toLocaleString("id-ID", {
+                      day: "numeric",
+                      month: "short",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
+
+function LoadingBox() {
+  return (
+    <Card>
+      <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
+        <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+        <span className="ml-2">Memuat data...</span>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/services/frontend/src/features/analytics/components/SummaryCards.tsx b/services/frontend/src/features/analytics/components/SummaryCards.tsx
index deecd2b..de74d65 100644
--- a/services/frontend/src/features/analytics/components/SummaryCards.tsx
+++ b/services/frontend/src/features/analytics/components/SummaryCards.tsx
@@ -31,12 +31,18 @@ export function SummaryCards({
     "Total Pesan": "💬",
     "Rata-rata/jam": "📊",
     Clean: "✅",
+    Warned: "⚠️",
     Flagged: "🚩",
     Pending: "⏳",
     "User Aktif": "👤",
     Channel: "📡",
   };
 
+  const warnedPct =
+    messages && messages.total > 0
+      ? Math.round((messages.warned / messages.total) * 100)
+      : 0;
+
   const cards = [
     {
       label: "Total Pesan",
@@ -53,6 +59,11 @@ export function SummaryCards({
       value: cleanPct > 0 ? `${cleanPct}%` : "—",
       accent: "text-primary",
     },
+    {
+      label: "Warned",
+      value: warnedPct > 0 ? `${warnedPct}%` : "—",
+      accent: "text-yellow-600",
+    },
     {
       label: "Flagged",
       value: flaggedPct > 0 ? `${flaggedPct}%` : "—",
diff --git a/services/frontend/src/features/analytics/components/TrendChart.tsx b/services/frontend/src/features/analytics/components/TrendChart.tsx
index a517151..d1f9e7a 100644
--- a/services/frontend/src/features/analytics/components/TrendChart.tsx
+++ b/services/frontend/src/features/analytics/components/TrendChart.tsx
@@ -24,7 +24,7 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
   const data = trend.map((bucket) => ({
     date: bucket.date,
     clean: bucket.clean,
-    warned: 0,
+    warned: bucket.warned,
     flagged: bucket.flagged,
     error: bucket.error,
     total: bucket.count,
@@ -37,7 +37,7 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-semibold">Tren Harian</CardTitle>
         <CardDescription className="text-xs">
-          Volume pesan per hari dengan status moderasi — area pink = flagged.
+          Volume pesan per hari dengan status moderasi.
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -45,7 +45,9 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
           <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
             <LegendDot color="bg-primary" label="Total" />
             <LegendDot color="bg-emerald-400" label="Clean" />
+            <LegendDot color="bg-yellow-400" label="Warned" />
             <LegendDot color="bg-accent" label="Flagged" />
+            <LegendDot color="bg-orange-300" label="Error" />
           </div>
 
           <div className="overflow-hidden rounded-2xl border border-sky-100 bg-white/60 p-4">
@@ -129,6 +131,18 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
                   fill="url(#trendFillPink)"
                   stroke="#FF9EBB"
                 />
+                <TrendLine
+                  data={data}
+                  keyName="warned"
+                  color="#facc15"
+                  strokeWidth={1.4}
+                />
+                <TrendLine
+                  data={data}
+                  keyName="error"
+                  color="#fdba74"
+                  strokeWidth={1.2}
+                />
 
                 {data.map((item, index) => {
                   const x =
diff --git a/services/frontend/src/features/analytics/components/ViolatorTable.tsx b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
index dd05734..f6fdbbe 100644
--- a/services/frontend/src/features/analytics/components/ViolatorTable.tsx
+++ b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
@@ -49,21 +49,23 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
               Pelanggar Terbanyak
             </CardTitle>
             <CardDescription className="text-xs">
-              Skor: flagged × 3.
+              Skor: flagged × 3 + warned. Flag terbanyak terakhir ditampilkan.
             </CardDescription>
           </div>
           <Badge variant="destructive">{users.length} pelanggar</Badge>
         </div>
       </CardHeader>
       <CardContent className="p-0">
-        <ScrollArea className="max-h-[260px]">
+        <ScrollArea className="max-h-[320px]">
           <table className="w-full text-sm">
             <thead>
               <tr className="sticky top-0 z-10 bg-white border-b border-sky-100 text-left text-[10px] uppercase tracking-wider text-muted-foreground">
                 <th className="py-2 pl-4 pr-2 font-semibold">#</th>
                 <th className="py-2 pr-2 font-semibold">User</th>
                 <th className="py-2 pr-2 font-semibold text-right">Flagged</th>
-                <th className="py-2 pr-4 font-semibold text-right">Skor</th>
+                <th className="py-2 pr-2 font-semibold text-right">Warned</th>
+                <th className="py-2 pr-2 font-semibold text-right">Skor</th>
+                <th className="py-2 pr-4 font-semibold">Flag</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-sky-50">
@@ -113,9 +115,12 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                     <td className="py-1.5 pr-2 text-right font-mono text-xs text-accent tabular-nums">
                       {user.flagged_count}
                     </td>
-                    <td className="py-1.5 pr-4 text-right">
+                    <td className="py-1.5 pr-2 text-right font-mono text-xs text-yellow-600 tabular-nums">
+                      {user.warned_count > 0 ? user.warned_count : "—"}
+                    </td>
+                    <td className="py-1.5 pr-2 text-right">
                       <div className="flex items-center justify-end gap-1.5">
-                        <div className="h-1.5 w-14 overflow-hidden rounded-full bg-pink-50">
+                        <div className="h-1.5 w-12 overflow-hidden rounded-full bg-pink-50">
                           <div
                             className={cn(
                               "h-full rounded-full",
@@ -135,6 +140,21 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                         </span>
                       </div>
                     </td>
+                    <td className="py-1.5 pr-4">
+                      <div className="flex flex-wrap gap-1">
+                        {user.worst_flags?.length > 0
+                          ? user.worst_flags.slice(0, 3).map((flag) => (
+                              <Badge
+                                key={flag}
+                                variant="outline"
+                                className="text-[8px] px-1 py-0 border-accent/30 text-accent"
+                              >
+                                {flag}
+                              </Badge>
+                            ))
+                          : <span className="text-[10px] text-muted-foreground">—</span>}
+                      </div>
+                    </td>
                   </tr>
                 );
               })}