From 115dacb997f42dc9686636be50f52510571f2ed4 Mon Sep 17 00:00:00 2001
From: MythEclipse <asepharyanalm001@gmail.com>
Date: Wed, 3 Jun 2026 03:20:07 +0700
Subject: [PATCH] style(frontend): refactor analytics components with sky
 palette, semantic tokens, and visual polish

---
 .../analytics/components/TopicList.tsx        | 10 +++---
 .../analytics/components/TrendChart.tsx       |  8 ++++-
 .../analytics/components/UserTable.tsx        |  2 +-
 .../analytics/components/ViolatorTable.tsx    | 34 +++++++++++--------
 .../frontend/src/features/analytics/index.tsx | 11 +++---
 5 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/services/frontend/src/features/analytics/components/TopicList.tsx b/services/frontend/src/features/analytics/components/TopicList.tsx
index 906743c..d74d5f2 100644
--- a/services/frontend/src/features/analytics/components/TopicList.tsx
+++ b/services/frontend/src/features/analytics/components/TopicList.tsx
@@ -35,7 +35,7 @@ export function TopicList({ topics, loading }: TopicListProps) {
     <Card>
       <CardHeader className="pb-2">
         <CardTitle className="flex items-center gap-2 text-sm font-semibold">
-          <Flame className="h-4 w-4 text-orange-400" />
+          <Flame className="h-4 w-4 text-primary" />
           Topik Trending
         </CardTitle>
         <CardDescription className="text-xs">
@@ -44,11 +44,11 @@ export function TopicList({ topics, loading }: TopicListProps) {
       </CardHeader>
       <CardContent className="p-0">
         <ScrollArea className="max-h-[260px]">
-          <div className="divide-y divide-border/30">
+          <div className="divide-y divide-sky-50">
             {topics.map((topic, i) => (
               <div
                 key={topic.topic}
-                className="flex items-center gap-3 px-5 py-2 text-sm"
+                className="flex items-center gap-3 px-5 py-2 text-sm border-l-2 border-l-primary"
               >
                 <span className="w-5 shrink-0 text-right font-mono text-[10px] text-muted-foreground">
                   {i + 1}
@@ -57,9 +57,9 @@ export function TopicList({ topics, loading }: TopicListProps) {
                   {topic.topic}
                 </span>
                 <div className="flex items-center gap-2">
-                  <div className="h-1.5 w-12 overflow-hidden rounded-full bg-muted">
+                  <div className="h-1.5 w-12 overflow-hidden rounded-full bg-sky-50">
                     <div
-                      className="h-full rounded-full bg-blue-500/60"
+                      className="h-full rounded-full bg-gradient-to-r from-primary to-pink-300"
                       style={{ width: `${(topic.count / maxCount) * 100}%` }}
                     />
                   </div>
diff --git a/services/frontend/src/features/analytics/components/TrendChart.tsx b/services/frontend/src/features/analytics/components/TrendChart.tsx
index 2b62b40..a517151 100644
--- a/services/frontend/src/features/analytics/components/TrendChart.tsx
+++ b/services/frontend/src/features/analytics/components/TrendChart.tsx
@@ -68,7 +68,13 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
                       stopOpacity="0.02"
                     />
                   </linearGradient>
-                  <linearGradient id="trendFillPink" x1="0" x2="0" y1="0" y2="1">
+                  <linearGradient
+                    id="trendFillPink"
+                    x1="0"
+                    x2="0"
+                    y1="0"
+                    y2="1"
+                  >
                     <stop offset="0%" stopColor="#FF9EBB" stopOpacity="0.3" />
                     <stop
                       offset="100%"
diff --git a/services/frontend/src/features/analytics/components/UserTable.tsx b/services/frontend/src/features/analytics/components/UserTable.tsx
index fb95f93..0dd13de 100644
--- a/services/frontend/src/features/analytics/components/UserTable.tsx
+++ b/services/frontend/src/features/analytics/components/UserTable.tsx
@@ -1,6 +1,6 @@
 import { Users } from "lucide-react";
-import { cn } from "../../../shared/lib/utils";
 import type { UserStat } from "../../../shared/api/client";
+import { cn } from "../../../shared/lib/utils";
 import {
   Badge,
   Card,
diff --git a/services/frontend/src/features/analytics/components/ViolatorTable.tsx b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
index c0b66ac..dd05734 100644
--- a/services/frontend/src/features/analytics/components/ViolatorTable.tsx
+++ b/services/frontend/src/features/analytics/components/ViolatorTable.tsx
@@ -1,6 +1,6 @@
 import { Siren } from "lucide-react";
-import { cn } from "../../../shared/lib/utils";
 import type { ViolatorStat } from "../../../shared/api/client";
+import { cn } from "../../../shared/lib/utils";
 import {
   Badge,
   Card,
@@ -45,7 +45,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
         <div className="flex items-center justify-between">
           <div>
             <CardTitle className="flex items-center gap-2 text-sm font-semibold">
-              <Siren className="h-4 w-4 text-red-400" />
+              <Siren className="h-4 w-4 text-accent" />
               Pelanggar Terbanyak
             </CardTitle>
             <CardDescription className="text-xs">
@@ -59,20 +59,28 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
         <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">
+              <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>
               </tr>
             </thead>
-            <tbody className="divide-y divide-border/20">
+            <tbody className="divide-y divide-sky-50">
               {users.map((user, i) => {
                 const danger = dangerLabel(user.violation_score);
                 return (
                   <tr
                     key={user.user_id}
-                    className="hover:bg-red-500/5 transition-colors"
+                    className={cn(
+                      "transition-colors border-l-2",
+                      i % 2 === 0 ? "bg-white" : "bg-sky-50/20",
+                      danger.variant === "destructive"
+                        ? "border-l-accent/60"
+                        : danger.variant === "warning"
+                          ? "border-l-pink-300/60"
+                          : "border-l-pink-200/40",
+                    )}
                   >
                     <td className="py-1.5 pl-4 pr-2 font-mono text-[10px] text-muted-foreground tabular-nums">
                       {i + 1}
@@ -83,11 +91,11 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                           <img
                             src={user.avatar_url}
                             alt=""
-                            className="h-6 w-6 rounded-full"
+                            className="h-6 w-6 rounded-full ring-2 ring-pink-100"
                             loading="lazy"
                           />
                         ) : (
-                          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-muted text-[10px] font-bold">
+                          <div className="flex h-6 w-6 items-center justify-center rounded-full bg-pink-100 text-[10px] font-bold text-accent">
                             {user.username.charAt(0).toUpperCase()}
                           </div>
                         )}
@@ -102,20 +110,20 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
                         </Badge>
                       </div>
                     </td>
-                    <td className="py-1.5 pr-2 text-right font-mono text-xs text-red-400 tabular-nums">
+                    <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">
                       <div className="flex items-center justify-end gap-1.5">
-                        <div className="h-1.5 w-14 overflow-hidden rounded-full bg-muted">
+                        <div className="h-1.5 w-14 overflow-hidden rounded-full bg-pink-50">
                           <div
                             className={cn(
                               "h-full rounded-full",
                               user.violation_score >= 10
-                                ? "bg-gradient-to-r from-red-600 to-red-400"
+                                ? "bg-gradient-to-r from-accent to-pink-400"
                                 : user.violation_score >= 5
-                                  ? "bg-gradient-to-r from-amber-500 to-amber-400"
-                                  : "bg-gradient-to-r from-yellow-500 to-yellow-400",
+                                  ? "bg-gradient-to-r from-pink-400 to-pink-300"
+                                  : "bg-gradient-to-r from-pink-300 to-pink-200",
                             )}
                             style={{
                               width: `${(user.violation_score / maxScore) * 100}%`,
@@ -138,8 +146,6 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
   );
 }
 
-import { cn } from "../../../shared/lib/utils";
-
 function LoadingBox() {
   return (
     <Card>
diff --git a/services/frontend/src/features/analytics/index.tsx b/services/frontend/src/features/analytics/index.tsx
index e9f9d9a..4dff37a 100644
--- a/services/frontend/src/features/analytics/index.tsx
+++ b/services/frontend/src/features/analytics/index.tsx
@@ -1,5 +1,7 @@
-import { useState } from "react";
 import { motion } from "framer-motion";
+import { useState } from "react";
+import { cardItem, cardStagger } from "../../shared/hooks/useFramerStagger";
+import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -9,8 +11,6 @@ import { TrendChart } from "./components/TrendChart";
 import { UserTable } from "./components/UserTable";
 import { ViolatorTable } from "./components/ViolatorTable";
 import { useAnalytics } from "./hooks/useAnalytics";
-import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
-import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
 
 interface AnalyticsPanelProps {
   guildId: string;
@@ -54,7 +54,10 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (!guildId) {
     return (
-      <EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." />
+      <EmptyStateMascot
+        variant="thinking"
+        message="Menunggu konfigurasi guild..."
+      />
     );
   }