Which direction fits your commit philosophy better?

services/frontend/src/features/analytics/components/ActivityChart.tsx

@@ -35,7 +35,7 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
   });
 
   return (
-    <Card className="col-span-1 lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 lg:col-span-2">
       <CardHeader className="pb-2">
         <CardTitle className="text-sm font-semibold">
           Aktivitas per Jam
@@ -46,9 +46,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
       </CardHeader>
       <CardContent>
         <div className="space-y-3">
-          <div className="grid grid-cols-4 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
+          <div className="grid grid-cols-3 gap-2 text-[10px] uppercase tracking-wider text-muted-foreground">
             <span>Clean</span>
-            <span>Warned</span>
             <span>Flagged</span>
             <span>Error</span>
           </div>
@@ -56,13 +55,12 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
             {data.map((bucket) => {
               const total = Math.max(bucket.total, 1);
               const clean = bucket.clean / total;
-              const warned = bucket.warned / total;
               const flagged = bucket.flagged / total;
               const error = bucket.error / total;
               return (
                 <div
                   key={bucket.hour}
-                  className="grid gap-1 rounded-xl border border-border bg-background/50 p-3"
+                  className="grid gap-1 rounded-xl border border-sky-100 bg-white p-3"
                 >
                   <div className="flex items-center justify-between text-[11px] text-muted-foreground">
                     <span className="font-medium text-foreground">
@@ -70,21 +68,17 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
                     </span>
                     <span>{bucket.total} pesan</span>
                   </div>
-                  <div className="flex h-3 overflow-hidden rounded-full bg-muted">
+                  <div className="flex h-3 overflow-hidden rounded-full bg-sky-50">
                     <div
-                      className="bg-emerald-500/80"
+                      className="bg-gradient-to-r from-primary to-pink-300"
                       style={{ width: `${clean * 100}%` }}
                     />
                     <div
-                      className="bg-amber-500/80"
-                      style={{ width: `${warned * 100}%` }}
-                    />
-                    <div
-                      className="bg-red-500/80"
+                      className="bg-accent/70"
                       style={{ width: `${flagged * 100}%` }}
                     />
                     <div
-                      className="bg-orange-500/80"
+                      className="bg-orange-300/70"
                       style={{ width: `${error * 100}%` }}
                     />
                   </div>
@@ -100,8 +94,8 @@ export function ActivityChart({ hourly, loading }: ActivityChartProps) {
 
 function LoadingBox() {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
-      <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
+      <span className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
       <span className="ml-2">Memuat data...</span>
     </Card>
   );
@@ -109,7 +103,7 @@ function LoadingBox() {
 
 function EmptyBox({ text }: { text: string }) {
   return (
-    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2 glass border-white/5">
+    <Card className="col-span-1 flex h-65 items-center justify-center text-sm text-muted-foreground lg:col-span-2">
       {text}
     </Card>
   );

services/frontend/src/features/analytics/components/ControlBar.tsx

@@ -38,7 +38,7 @@ export function ControlBar({
     <Card>
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center gap-2 text-lg">
-          <BarChart3 className="h-5 w-5 text-muted-foreground" />
+          <BarChart3 className="h-5 w-5 text-primary" />
           Analisis Moderasi
         </CardTitle>
         <CardDescription>
@@ -46,7 +46,7 @@ export function ControlBar({
             <>
               Pantau statistik, tren topik, dan aktivitas user di seluruh
               channel{" "}
-              <span className="font-medium text-foreground">{guildName}</span>.
+              <span className="font-medium text-primary">{guildName}</span>.
             </>
           ) : (
             "Pantau statistik, tren topik, dan aktivitas user."
@@ -55,16 +55,16 @@ export function ControlBar({
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap items-center gap-3">
-          <div className="flex items-center gap-1 rounded-md bg-muted p-0.5">
+          <div className="flex items-center gap-1 rounded-xl bg-sky-50 p-0.5 ring-1 ring-sky-200/50">
             {TIME_RANGES.map((tr) => (
               <button
                 key={tr.value}
                 type="button"
                 onClick={() => onHoursChange(tr.value)}
                 className={cn(
-                  "rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
+                  "rounded-lg px-2.5 py-1 text-xs font-medium transition-all",
                   hours === tr.value
-                    ? "bg-background text-foreground shadow-sm"
+                    ? "bg-primary text-white shadow-sm"
                     : "text-muted-foreground hover:text-foreground",
                 )}
               >
@@ -77,11 +77,11 @@ export function ControlBar({
             disabled={isFetching}
             variant="outline"
             size="sm"
-            className="ml-auto shrink-0"
+            className="ml-auto shrink-0 rounded-xl border-primary/40 text-primary hover:bg-primary/10 hover:text-primary"
           >
             {isFetching ? (
               <span className="flex items-center gap-1.5">
-                <span className="h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                <span className="h-3 w-3 animate-spin rounded-full border-2 border-primary border-t-transparent" />
                 Memuat...
               </span>
             ) : (

services/frontend/src/features/analytics/components/SummaryCards.tsx

@@ -27,6 +27,16 @@ export function SummaryCards({
       ? Math.round((messages.flagged / messages.total) * 100)
       : 0;
 
+  const icons: Record<string, string> = {
+    "Total Pesan": "💬",
+    "Rata-rata/jam": "📊",
+    Clean: "✅",
+    Flagged: "🚩",
+    Pending: "⏳",
+    "User Aktif": "👤",
+    Channel: "📡",
+  };
+
   const cards = [
     {
       label: "Total Pesan",
@@ -41,37 +51,42 @@ export function SummaryCards({
     {
       label: "Clean",
       value: cleanPct > 0 ? `${cleanPct}%` : "—",
-      accent: "text-emerald-400",
+      accent: "text-primary",
     },
     {
       label: "Flagged",
       value: flaggedPct > 0 ? `${flaggedPct}%` : "—",
-      accent: "text-red-400",
+      accent: "text-accent",
     },
     {
       label: "Pending",
       value: formatNum(messages?.pending),
-      accent: "text-slate-400",
+      accent: "text-muted-foreground",
     },
     {
       label: "User Aktif",
       value: formatNum(activeUsersCount),
-      accent: "text-violet-400",
+      accent: "text-primary",
     },
     {
       label: "Channel",
       value: formatNum(totalChannels),
-      accent: "text-blue-400",
+      accent: "text-primary",
     },
   ];
 
   return (
     <div className="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-8">
       {cards.map((card) => (
-        <Card key={card.label} className="overflow-hidden glass border-white/5">
+        <Card key={card.label} className="overflow-hidden">
           <CardContent className="p-3">
-            <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
-              {card.label}
+            <div className="flex items-center gap-1.5">
+              <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary/10 text-[10px]">
+                {icons[card.label] ?? "📋"}
+              </span>
+              <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
+                {card.label}
+              </div>
             </div>
             <div
               className={cn(

services/frontend/src/features/analytics/components/TrendChart.tsx

@@ -43,10 +43,9 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
       <CardContent>
         <div className="space-y-4">
           <div className="flex flex-wrap gap-3 text-[10px] uppercase tracking-wider text-muted-foreground">
-            <LegendDot color="bg-blue-500" label="Total" />
-            <LegendDot color="bg-emerald-500" label="Clean" />
-            <LegendDot color="bg-amber-500" label="Warned" />
-            <LegendDot color="bg-red-500" label="Flagged" />
+            <LegendDot color="bg-primary" label="Total" />
+            <LegendDot color="bg-emerald-400" label="Clean" />
+            <LegendDot color="bg-accent" label="Flagged" />
           </div>
 
           <div className="overflow-hidden rounded-2xl border border-border bg-background/50 p-4">

services/frontend/src/features/analytics/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { motion } from "framer-motion";
 import { ActivityChart } from "./components/ActivityChart";
 import { ControlBar } from "./components/ControlBar";
 import { Heatmap } from "./components/Heatmap";
@@ -8,6 +9,8 @@ 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;
@@ -43,7 +46,7 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (error && !analyticsMessages) {
     return (
-      <div className="rounded-lg border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-300">
+      <div className="rounded-2xl border border-red-300/40 bg-red-50/60 p-6 text-sm text-red-600 shadow-sm">
         {error}
       </div>
     );
@@ -51,46 +54,61 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
 
   if (!guildId) {
     return (
-      <div className="flex min-h-[300px] flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-8">
-        <p className="text-sm text-muted-foreground">
-          Menunggu konfigurasi guild...
-        </p>
-      </div>
+      <EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." />
     );
   }
 
   return (
-    <div className="flex flex-col gap-4">
-      <ControlBar
-        guildName={guildName}
-        hours={hours}
-        isFetching={isFetching}
-        onHoursChange={setHours}
-        onRefresh={() => {
-          refresh();
-          refreshViolators();
-        }}
-      />
-      <SummaryCards
-        messages={analyticsMessages}
-        activeUsersCount={activeUsersCount}
-        totalChannels={totalChannels}
-        loading={loading}
-      />
-      <div className="grid grid-cols-3 gap-4">
-        <ActivityChart hourly={hourly} loading={loading} />
-        <div className="col-span-1">
-          <TopicList topics={topics} loading={loading} />
+    <motion.div
+      className="flex flex-col gap-4"
+      variants={cardStagger}
+      initial="initial"
+      animate="animate"
+    >
+      <motion.div variants={cardItem}>
+        <ControlBar
+          guildName={guildName}
+          hours={hours}
+          isFetching={isFetching}
+          onHoursChange={setHours}
+          onRefresh={() => {
+            refresh();
+            refreshViolators();
+          }}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <SummaryCards
+          messages={analyticsMessages}
+          activeUsersCount={activeUsersCount}
+          totalChannels={totalChannels}
+          loading={loading}
+        />
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <ActivityChart hourly={hourly} loading={loading} />
+          <div className="col-span-1">
+            <TopicList topics={topics} loading={loading} />
+          </div>
         </div>
-      </div>
-      {hours >= 48 && <TrendChart trend={trend} loading={loading} />}
-      <div className="grid grid-cols-3 gap-4">
-        <Heatmap cells={heatmap} loading={loading} />
-        <div className="col-span-1">
-          <UserTable users={topUsers} loading={loading} />
+      </motion.div>
+      {hours >= 48 && (
+        <motion.div variants={cardItem}>
+          <TrendChart trend={trend} loading={loading} />
+        </motion.div>
+      )}
+      <motion.div variants={cardItem}>
+        <div className="grid grid-cols-3 gap-4">
+          <Heatmap cells={heatmap} loading={loading} />
+          <div className="col-span-1">
+            <UserTable users={topUsers} loading={loading} />
+          </div>
         </div>
-      </div>
-      <ViolatorTable users={violators} loading={loading} />
-    </div>
+      </motion.div>
+      <motion.div variants={cardItem}>
+        <ViolatorTable users={violators} loading={loading} />
+      </motion.div>
+    </motion.div>
   );
 }