feat(analytics): refactor ActivityChart and TrendChart to use custom rendering and improve data visualization

frontend/src/components/analytics/TrendChart.tsx

@@ -1,4 +1,3 @@
-import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from "recharts";
 import type { TrendBucket } from "../../api/analytics";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
 
@@ -32,39 +31,66 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
         <CardDescription className="text-xs">Volume pesan per hari dengan status moderasi.</CardDescription>
       </CardHeader>
       <CardContent>
-        <ResponsiveContainer width="100%" height={200}>
-          <LineChart data={data} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
-            <XAxis dataKey="date" tick={{ fontSize: 10, fill: "#64748b" }} tickLine={false} axisLine={{ stroke: "#334155" }} tickFormatter={(d: string) => d.slice(5)} />
-            <YAxis tick={{ fontSize: 10, fill: "#64748b" }} tickLine={false} axisLine={false} width={28} />
-            <Tooltip
-              contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #334155", borderRadius: "6px", fontSize: "11px", color: "#e2e8f0" }}
-              formatter={(value: unknown, name: unknown) => {
-                const v = typeof value === "number" ? value : String(value);
-                return [v, label(String(name))];
-              }}
-              labelFormatter={(l: unknown) => String(l)}
-            />
-            <Legend wrapperStyle={{ fontSize: "11px" }} />
-            <Line type="monotone" dataKey="total" stroke="#3b82f6" strokeWidth={2} dot={false} name="Total" />
-            <Line type="monotone" dataKey="clean" stroke="#10b981" strokeWidth={1.5} dot={false} name="Clean" />
-            <Line type="monotone" dataKey="warned" stroke="#f59e0b" strokeWidth={1.5} dot={false} name="Warned" />
-            <Line type="monotone" dataKey="flagged" stroke="#ef4444" strokeWidth={1.5} dot={false} name="Flagged" />
-          </LineChart>
-        </ResponsiveContainer>
+        <div className="space-y-4">
+          <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
+            <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-blue-500" /> Total</span>
+            <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-emerald-500" /> Clean</span>
+            <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-amber-500" /> Warned</span>
+            <span className="flex items-center gap-1"><span className="h-2 w-2 rounded-full bg-red-500" /> Flagged</span>
+          </div>
+          <div className="rounded-2xl border border-border bg-background/50 p-4">
+            <svg viewBox={`0 0 ${Math.max(data.length - 1, 1)} 100`} className="h-55 w-full overflow-visible">
+              <g stroke="#334155" strokeWidth="0.5" opacity="0.6">
+                {Array.from({ length: 5 }, (_, index) => {
+                  const y = (index / 4) * 100;
+                  return <line key={index} x1="0" x2={Math.max(data.length - 1, 1)} y1={y} y2={y} />;
+                })}
+              </g>
+              <TrendPath data={data} color="#3b82f6" strokeWidth={2} keyName="total" />
+              <TrendPath data={data} color="#10b981" strokeWidth={1.5} keyName="clean" />
+              <TrendPath data={data} color="#f59e0b" strokeWidth={1.5} keyName="warned" />
+              <TrendPath data={data} color="#ef4444" strokeWidth={1.5} keyName="flagged" />
+            </svg>
+            <div className="mt-3 grid grid-cols-2 gap-2 text-[11px] text-muted-foreground sm:grid-cols-4">
+              {data.map((item) => (
+                <div key={item.date} className="truncate rounded-lg bg-muted/30 px-2 py-1 text-center">
+                  {item.date.slice(5)}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </CardContent>
     </Card>
   );
 }
 
-function label(key: string): string {
-  const map: Record<string, string> = { total: "Total", clean: "Clean", warned: "Warned", flagged: "Flagged" };
-  return map[key] ?? key;
+function TrendPath({
+  data,
+  color,
+  strokeWidth,
+  keyName,
+}: {
+  data: Array<Record<string, number | string>>;
+  color: string;
+  strokeWidth: number;
+  keyName: string;
+}) {
+  const values = data.map((item) => Number(item[keyName] ?? 0));
+  const maxValue = Math.max(...values, 1);
+  const points = values.map((value, index) => {
+    const x = data.length <= 1 ? 0 : (index / (data.length - 1)) * 100;
+    const y = 100 - (value / maxValue) * 90 - 5;
+    return `${x},${y}`;
+  });
+
+  return <polyline fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinejoin="round" strokeLinecap="round" points={points.join(" ")} />;
 }
 
 function LoadingBox() {
   return (
     <Card className="col-span-3">
-      <CardContent className="flex h-[260px] items-center justify-center text-sm text-muted-foreground">
+      <CardContent className="flex h-65 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>