MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(frontend): refactor analytics components with sky palette, semantic tokens, and visual polish

Browse Source
This commit is contained in:
MythEclipse
2026-06-03 03:20:07 +07:00
parent e8deba93cc
commit 115dacb997
5 changed files with 40 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/features/analytics/components/TopicList.tsx
+5 -5
View File
@@ -35,7 +35,7 @@ export function TopicList({ topics, loading }: TopicListProps) {
<Card> <Card>
<CardHeader className="pb-2"> <CardHeader className="pb-2">
<CardTitle className="flex items-center gap-2 text-sm font-semibold"> <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 Topik Trending
</CardTitle> </CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">
@@ -44,11 +44,11 @@ export function TopicList({ topics, loading }: TopicListProps) {
</CardHeader> </CardHeader>
<CardContent className="p-0"> <CardContent className="p-0">
<ScrollArea className="max-h-[260px]"> <ScrollArea className="max-h-[260px]">
<div className="divide-y divide-border/30"> <div className="divide-y divide-sky-50">
{topics.map((topic, i) => ( {topics.map((topic, i) => (
<div <div
key={topic.topic} 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"> <span className="w-5 shrink-0 text-right font-mono text-[10px] text-muted-foreground">
{i + 1} {i + 1}
@@ -57,9 +57,9 @@ export function TopicList({ topics, loading }: TopicListProps) {
{topic.topic} {topic.topic}
</span> </span>
<div className="flex items-center gap-2"> <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 <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}%` }} style={{ width: `${(topic.count / maxCount) * 100}%` }}
/> />
</div> </div>
services/frontend/src/features/analytics/components/TrendChart.tsx
+7 -1
View File
@@ -68,7 +68,13 @@ export function TrendChart({ trend, loading }: TrendChartProps) {
stopOpacity="0.02" stopOpacity="0.02"
/> />
</linearGradient> </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="0%" stopColor="#FF9EBB" stopOpacity="0.3" />
<stop <stop
offset="100%" offset="100%"
services/frontend/src/features/analytics/components/UserTable.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Users } from "lucide-react"; import { Users } from "lucide-react";
import { cn } from "../../../shared/lib/utils";
import type { UserStat } from "../../../shared/api/client"; import type { UserStat } from "../../../shared/api/client";
import { cn } from "../../../shared/lib/utils";
import { import {
Badge, Badge,
Card, Card,
services/frontend/src/features/analytics/components/ViolatorTable.tsx
+20 -14
View File
@@ -1,6 +1,6 @@
import { Siren } from "lucide-react"; import { Siren } from "lucide-react";
import { cn } from "../../../shared/lib/utils";
import type { ViolatorStat } from "../../../shared/api/client"; import type { ViolatorStat } from "../../../shared/api/client";
import { cn } from "../../../shared/lib/utils";
import { import {
Badge, Badge,
Card, Card,
@@ -45,7 +45,7 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<CardTitle className="flex items-center gap-2 text-sm font-semibold"> <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 Pelanggar Terbanyak
</CardTitle> </CardTitle>
<CardDescription className="text-xs"> <CardDescription className="text-xs">
@@ -59,20 +59,28 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
<ScrollArea className="max-h-[260px]"> <ScrollArea className="max-h-[260px]">
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <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 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">User</th>
<th className="py-2 pr-2 font-semibold text-right">Flagged</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-4 font-semibold text-right">Skor</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border/20"> <tbody className="divide-y divide-sky-50">
{users.map((user, i) => { {users.map((user, i) => {
const danger = dangerLabel(user.violation_score); const danger = dangerLabel(user.violation_score);
return ( return (
<tr <tr
key={user.user_id} 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"> <td className="py-1.5 pl-4 pr-2 font-mono text-[10px] text-muted-foreground tabular-nums">
{i + 1} {i + 1}
@@ -83,11 +91,11 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
<img <img
src={user.avatar_url} src={user.avatar_url}
alt="" alt=""
className="h-6 w-6 rounded-full" className="h-6 w-6 rounded-full ring-2 ring-pink-100"
loading="lazy" 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()} {user.username.charAt(0).toUpperCase()}
</div> </div>
)} )}
@@ -102,20 +110,20 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
</Badge> </Badge>
</div> </div>
</td> </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} {user.flagged_count}
</td> </td>
<td className="py-1.5 pr-4 text-right"> <td className="py-1.5 pr-4 text-right">
<div className="flex items-center justify-end gap-1.5"> <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 <div
className={cn( className={cn(
"h-full rounded-full", "h-full rounded-full",
user.violation_score >= 10 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 : user.violation_score >= 5
? "bg-gradient-to-r from-amber-500 to-amber-400" ? "bg-gradient-to-r from-pink-400 to-pink-300"
: "bg-gradient-to-r from-yellow-500 to-yellow-400", : "bg-gradient-to-r from-pink-300 to-pink-200",
)} )}
style={{ style={{
width: `${(user.violation_score / maxScore) * 100}%`, width: `${(user.violation_score / maxScore) * 100}%`,
@@ -138,8 +146,6 @@ export function ViolatorTable({ users, loading }: ViolatorTableProps) {
); );
} }
import { cn } from "../../../shared/lib/utils";
function LoadingBox() { function LoadingBox() {
return ( return (
<Card> <Card>
services/frontend/src/features/analytics/index.tsx
+7 -4
View File
@@ -1,5 +1,7 @@
import { useState } from "react";
import { motion } from "framer-motion"; 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 { ActivityChart } from "./components/ActivityChart";
import { ControlBar } from "./components/ControlBar"; import { ControlBar } from "./components/ControlBar";
import { Heatmap } from "./components/Heatmap"; import { Heatmap } from "./components/Heatmap";
@@ -9,8 +11,6 @@ import { TrendChart } from "./components/TrendChart";
import { UserTable } from "./components/UserTable"; import { UserTable } from "./components/UserTable";
import { ViolatorTable } from "./components/ViolatorTable"; import { ViolatorTable } from "./components/ViolatorTable";
import { useAnalytics } from "./hooks/useAnalytics"; import { useAnalytics } from "./hooks/useAnalytics";
import { cardStagger, cardItem } from "../../shared/hooks/useFramerStagger";
import { EmptyStateMascot } from "../../widgets/mascot/ChibiMascot";
interface AnalyticsPanelProps { interface AnalyticsPanelProps {
guildId: string; guildId: string;
@@ -54,7 +54,10 @@ export function AnalyticsPanel({ guildId, guildName }: AnalyticsPanelProps) {
if (!guildId) { if (!guildId) {
return ( return (
<EmptyStateMascot variant="thinking" message="Menunggu konfigurasi guild..." /> <EmptyStateMascot
variant="thinking"
message="Menunggu konfigurasi guild..."
/>
); );
} }