feat(analytics): add daily trend and activity heatmap endpoints, and implement corresponding frontend components

- Added new API endpoints for daily trend data and activity heatmap in analyticsRoutes.ts. - Created new frontend components: ActivityChart, ControlBar, Heatmap, SummaryCards, TopicList, TrendChart, UserTable, and ViolatorTable for displaying analytics data. - Implemented loading and empty states in the new components. - Enhanced the existing moderation tests with remote fallback handling for Indonesian text normalization.
2026-05-31 00:41:34 +07:00
parent 4e9e370eb1
commit 71e240c1e7
21 changed files with 2130 additions and 1066 deletions
@@ -0,0 +1,117 @@
+import { Users } from "lucide-react";
+import type { UserStat } from "../../api/analytics";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { ScrollArea } from "../ui/scroll-area";
+
+interface UserTableProps {
+  users: UserStat[];
+  loading: boolean;
+}
+
+export function UserTable({ users, loading }: UserTableProps) {
+  if (loading && !users?.length) {
+    return <LoadingBox />;
+  }
+
+  if (!users?.length) {
+    return (
+      <Card>
+        <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
+          Belum ada aktivitas user.
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const maxMsgs = Math.max(...users.map((u) => u.message_count), 1);
+  const medals = ["🥇", "🥈", "🥉"];
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-sm font-semibold">
+          <Users className="h-4 w-4 text-violet-400" />
+          User Paling Aktif
+        </CardTitle>
+        <CardDescription className="text-xs">
+          Leaderboard berdasarkan jumlah pesan.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ScrollArea className="max-h-[260px]">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="sticky top-0 z-10 bg-card/95 backdrop-blur border-b border-border 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">Pesan</th>
+                <th className="py-2 pr-2 font-semibold text-right">Edit</th>
+                <th className="py-2 pr-2 font-semibold text-right">Hapus</th>
+                <th className="py-2 pr-4 font-semibold text-right">Flag</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/20">
+              {users.map((user, i) => (
+                <tr key={user.user_id} className="hover:bg-muted/20 transition-colors">
+                  <td className="py-1.5 pl-4 pr-2 font-mono text-[10px] text-muted-foreground tabular-nums">
+                    {medals[i] ?? i + 1}
+                  </td>
+                  <td className="py-1.5 pr-2">
+                    <div className="flex items-center gap-2">
+                      {user.avatar_url ? (
+                        <img src={user.avatar_url} alt="" className="h-6 w-6 rounded-full" loading="lazy" />
+                      ) : (
+                        <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-bold">
+                          {user.username.charAt(0).toUpperCase()}
+                        </div>
+                      )}
+                      <span className="max-w-[100px] truncate text-xs font-medium">{user.username}</span>
+                    </div>
+                  </td>
+                  <td className="py-1.5 pr-2 text-right">
+                    <div className="flex items-center justify-end gap-1.5">
+                      <div className="h-1 w-8 overflow-hidden rounded-full bg-muted">
+                        <div
+                          className="h-full rounded-full bg-blue-500/60"
+                          style={{ width: `${(user.message_count / maxMsgs) * 100}%` }}
+                        />
+                      </div>
+                      <span className="font-mono text-xs tabular-nums">{user.message_count}</span>
+                    </div>
+                  </td>
+                  <td className="py-1.5 pr-2 text-right font-mono text-[10px] text-muted-foreground tabular-nums">
+                    {user.edited_count > 0 ? user.edited_count : "—"}
+                  </td>
+                  <td className="py-1.5 pr-2 text-right font-mono text-[10px] text-muted-foreground tabular-nums">
+                    {user.deleted_count > 0 ? user.deleted_count : "—"}
+                  </td>
+                  <td className="py-1.5 pr-4 text-right">
+                    {user.flagged_count > 0 ? (
+                      <Badge variant="destructive" className="text-[9px] px-1 py-0">
+                        {user.flagged_count}
+                      </Badge>
+                    ) : (
+                      <span className="text-[10px] text-muted-foreground">—</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </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>
+  );
+}