refactor(fe): replace TanStack Query with SWR + UI/data cleanup

Rombak data layer frontend: - Hapus @tanstack/react-query (package.json, lockfile, provider di dashboard layout) — ganti SWR 2.4.2 + SWRConfig (revalidateOnFocus false, deduping 10s, no retry on 404) - Semua hooks data ditulis ulang ke useSWR; useAction() helper baru pengganti useMutation dengan surface kompatibel (mutate/mutateAsync/ isPending/error) - useMessages + useMessagesHasMore share satu SWR key — probe cursor yang tadinya dobel fetch API sekarang deduped - WS sync (messages/media/recordings) pindah dari queryClient ke SWR mutate dengan filter key + revalidate:false - useMessageSearch() dipakai search-panel & search-overlay; search overlay backdrop div -> button (fix a11y lint) Rapikan UI + isi data: - Tab stats recordings: placeholder 'coming soon' diganti stat asli (total, ukuran, speaker unik, top speakers) - Empty states konsisten via EmptyState (images/review/recordings), EmptyState terima className - biome check --write: 0 error, 8 warning pre-existing - Verifikasi: tsc --noEmit PASS, next build PASS (11 halaman static), API live dicek — semua endpoint dashboard/messages/guilds/config/ voice/media/recordings/review balikin data
2026-08-01 09:19:39 +07:00
parent 1f91f99de3
commit 01c18b2060
26 changed files with 5145 additions and 329 deletions
@@ -24,7 +24,7 @@ type DashboardTab = "stats" | "live" | "users" | "channels";

 export default function DashboardPage() {
  const [tab, setTab] = useState<DashboardTab>("stats");
-  const { data: stats, isLoading, error, refetch } = useStats();
+  const { data: stats, isLoading, error, mutate: refetch } = useStats();
  const { data: review = [] } = useReview();

  const modQueueItems: ModQueueItem[] = review.slice(0, 10).map((msg) => ({
@@ -1,25 +1,18 @@
 "use client";

-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Suspense, useEffect, useState } from "react";
-import { TopNav } from "@/components/layout/top-nav";
-import { MobileNav } from "@/components/layout/mobile-nav";
-import { WsProvider, useWebSocket } from "@/lib/ws/context";
-import { ChatbotProvider, useChatbot } from "@/components/chatbot/chatbot-context";
+import { SWRConfig } from "swr";
 import { ChatbotContainer } from "@/components/chatbot/chatbot-container";
+import {
+  ChatbotProvider,
+  useChatbot,
+} from "@/components/chatbot/chatbot-context";
+import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
+import { MobileNav } from "@/components/layout/mobile-nav";
+import { TopNav } from "@/components/layout/top-nav";
 import { MiniPlayer } from "@/components/media/mini-player";
 import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
-import { HiddenSidebar } from "@/components/layout/hidden-sidebar";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 10_000,
-      retry: 1,
-      refetchOnWindowFocus: false,
-    },
-  },
-});
+import { useWebSocket, WsProvider } from "@/lib/ws/context";

 function ChatbotExpressionSync() {
  const ws = useWebSocket();
@@ -54,14 +47,24 @@ export default function DashboardLayout({
  const [guildId, setGuildId] = useState("");

  return (
-    <QueryClientProvider client={queryClient}>
+    <SWRConfig
+      value={{
+        revalidateOnFocus: false,
+        dedupingInterval: 10_000,
+        shouldRetryOnError: (err) =>
+          (err as { statusCode?: number })?.statusCode !== 404,
+      }}
+    >
      <WsProvider>
        <MediaPlayerProvider>
          <ChatbotProvider>
            <ChatbotExpressionSync />
            <div className="min-h-screen bg-canvas">
              <TopNav />
-              <HiddenSidebar guildId={guildId} onGuildChange={(g) => setGuildId(g ?? "")} />
+              <HiddenSidebar
+                guildId={guildId}
+                onGuildChange={(g) => setGuildId(g ?? "")}
+              />

              {/* Sub-nav space — filled per-page */}
              <div className="pt-11">
@@ -85,6 +88,6 @@ export default function DashboardLayout({
          </ChatbotProvider>
        </MediaPlayerProvider>
      </WsProvider>
-    </QueryClientProvider>
+    </SWRConfig>
  );
 }
@@ -1,17 +1,17 @@
 "use client";

-import { useCallback, useEffect, useState } from "react";
-import { useSearchParams, useRouter } from "next/navigation";
 import { Flag, Image, Loader2, RefreshCw, Search } from "lucide-react";
-import { MessageList } from "@/components/messages/message-list";
-import { MessageDetailView } from "@/components/messages/message-detail-view";
-import { SearchOverlay } from "@/components/messages/search-overlay";
-import { extractFirstImage } from "@/components/messages/message-card";
-import { renderMessageContent } from "@/lib/format";
-import { SubNav } from "@/components/layout/sub-nav";
-import { ErrorState, LoadingSkeleton } from "@/components/shared";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
 import { GlassCard } from "@/components/glass/card";
 import { GlassPanel } from "@/components/glass/panel";
+import { SubNav } from "@/components/layout/sub-nav";
+import { extractFirstImage } from "@/components/messages/message-card";
+import { MessageDetailView } from "@/components/messages/message-detail-view";
+import { MessageList } from "@/components/messages/message-list";
+import { SearchOverlay } from "@/components/messages/search-overlay";
+import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
+import { GuildSelector } from "@/components/shared/guild-selector";
 import { Button } from "@/components/ui/button";
 import {
  Select,
@@ -32,10 +32,10 @@ import {
  useReview,
  useTextChannels,
 } from "@/hooks";
+import { renderMessageContent } from "@/lib/format";
 import type { MessageRecord } from "@/lib/types";
 import { cn } from "@/lib/utils";
 import { useWebSocket } from "@/lib/ws/context";
-import { GuildSelector } from "@/components/shared/guild-selector";

 type MessagesTab = "all" | "images" | "review";

@@ -185,10 +185,7 @@ export default function MessagesPage() {
        <div className="flex gap-4">
          {/* Left pane */}
          <div
-            className={cn(
-              "space-y-2",
-              detailId ? "w-1/2 lg:w-2/5" : "w-full",
-            )}
+            className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}
          >
            {tab === "all" && (
              <MessageList
@@ -205,10 +202,7 @@ export default function MessagesPage() {
              <ImageGrid items={images ?? []} onSelect={setDetailId} />
            )}
            {tab === "review" && (
-              <ReviewList
-                items={reviews ?? []}
-                onSelect={setDetailId}
-              />
+              <ReviewList items={reviews ?? []} onSelect={setDetailId} />
            )}
          </div>

@@ -216,7 +210,10 @@ export default function MessagesPage() {
          {detailId && (
            <div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
              {detailLoading ? (
-                <GlassPanel dense className="flex items-center justify-center py-12">
+                <GlassPanel
+                  dense
+                  className="flex items-center justify-center py-12"
+                >
                  <Loader2 className="size-5 animate-spin text-text-secondary/60" />
                </GlassPanel>
              ) : detailMessage ? (
@@ -288,9 +285,12 @@ function ImageGrid({
        );
      })}
      {items.length === 0 && (
-        <div className="col-span-3 py-12 text-center text-xs text-text-secondary/40">
-          No images
-        </div>
+        <EmptyState
+          icon={Image}
+          title="No images"
+          description="Messages with image attachments will show up here."
+          className="col-span-3"
+        />
      )}
    </div>
  );
@@ -325,9 +325,11 @@ function ReviewList({
        </GlassCard>
      ))}
      {items.length === 0 && (
-        <div className="py-12 text-center text-xs text-text-secondary/40">
-          No flagged messages
-        </div>
+        <EmptyState
+          icon={Flag}
+          title="No flagged messages"
+          description="Messages flagged by AI moderation will appear here for review."
+        />
      )}
    </div>
  );
@@ -1,18 +1,26 @@
 "use client";

-import { useState } from "react";
+import { Clock, Database, Mic, Users } from "lucide-react";
+import { useMemo, useState } from "react";
+import { StatCard } from "@/components/dashboard/stat-card";
 import { SubNav } from "@/components/layout/sub-nav";
 import { RecordingCard } from "@/components/recordings/recording-card";
 import { RecordingPlayer } from "@/components/recordings/recording-player";
-import { ErrorState, LoadingSkeleton } from "@/components/shared";
+import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
 import { useRecordings, useRecordingsWsSync } from "@/hooks";
+import { formatBytes } from "@/lib/format";
 import type { VoiceRecording } from "@/lib/types";
 import { useWebSocket } from "@/lib/ws/context";

 type RecordingsTab = "library" | "stats";

 export default function RecordingsPage() {
-  const { data: recordings, isLoading, error, refetch } = useRecordings();
+  const {
+    data: recordings,
+    isLoading,
+    error,
+    mutate: refetch,
+  } = useRecordings();
  const [playingId, setPlayingId] = useState<string | null>(null);
  const [tab, setTab] = useState<RecordingsTab>("library");
  const ws = useWebSocket();
@@ -25,6 +33,31 @@ export default function RecordingsPage() {
      ? recordings.find((r: VoiceRecording) => r.id === playingId)
      : null;

+  const stats = useMemo(() => {
+    const list = recordings ?? [];
+    const totalSize = list.reduce((sum, r) => sum + (r.size_bytes ?? 0), 0);
+    const byUser = new Map<
+      string,
+      { name: string; count: number; size: number }
+    >();
+    for (const rec of list) {
+      const key = rec.user_id ?? rec.username;
+      const cur = byUser.get(key) ?? { name: rec.username, count: 0, size: 0 };
+      cur.count += 1;
+      cur.size += rec.size_bytes ?? 0;
+      byUser.set(key, cur);
+    }
+    const topUsers = [...byUser.values()]
+      .sort((a, b) => b.count - a.count)
+      .slice(0, 8);
+    return {
+      total: list.length,
+      totalSize,
+      uniqueUsers: byUser.size,
+      topUsers,
+    };
+  }, [recordings]);
+
  return (
    <div className="space-y-4 animate-fade-in-up">
      <SubNav
@@ -51,18 +84,72 @@ export default function RecordingsPage() {
              />
            ))}
            {(recordings ?? []).length === 0 && (
-              <div className="py-12 text-center text-sm text-text-secondary/40">
-                No recordings yet
-              </div>
+              <EmptyState
+                icon={Mic}
+                title="No recordings yet"
+                description="Voice recordings will appear here once members speak in a monitored voice channel."
+              />
            )}
          </div>
        ))}

-      {tab === "stats" && (
-        <div className="py-12 text-center text-sm text-text-secondary/40">
-          Recording stats coming soon
-        </div>
-      )}
+      {tab === "stats" &&
+        (isLoading ? (
+          <LoadingSkeleton count={4} height="h-28" columns={3} />
+        ) : stats.total === 0 ? (
+          <EmptyState
+            icon={Clock}
+            title="No recording stats yet"
+            description="Recordings are captured from monitored voice channels."
+          />
+        ) : (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+              <StatCard
+                label="Total Recordings"
+                value={stats.total}
+                icon={Mic}
+              />
+              <StatCard
+                label="Total Size"
+                value={stats.totalSize}
+                icon={Database}
+                formatter={(v) => formatBytes(v)}
+              />
+              <StatCard
+                label="Unique Speakers"
+                value={stats.uniqueUsers}
+                icon={Users}
+              />
+            </div>
+
+            {stats.topUsers.length > 0 && (
+              <div className="space-y-1.5">
+                <p className="text-xs text-text-secondary font-medium uppercase tracking-wide">
+                  Top Speakers
+                </p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  {stats.topUsers.map((u) => (
+                    <div
+                      key={u.name}
+                      className="flex items-center gap-3 rounded-lg border border-border/40 bg-card/40 px-3 py-2"
+                    >
+                      <span className="flex size-7 items-center justify-center rounded-md bg-primary/10 font-mono text-xs text-primary">
+                        {u.count}
+                      </span>
+                      <span className="flex-1 min-w-0 truncate text-sm text-text-primary">
+                        {u.name}
+                      </span>
+                      <span className="text-[10px] font-mono text-text-secondary/50">
+                        {formatBytes(u.size)}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}

      <RecordingPlayer
        url={currentTrack?.download_url ?? undefined}
@@ -7,8 +7,8 @@ import { GlassDivider } from "@/components/glass/divider";
 import { SubNav } from "@/components/layout/sub-nav";
 import { LoadingSkeleton } from "@/components/shared";
 import { useConfig } from "@/hooks";
-import { useWebSocket } from "@/lib/ws/context";
 import { cn } from "@/lib/utils";
+import { useWebSocket } from "@/lib/ws/context";

 type SettingsTab = "connection" | "appearance" | "config" | "about";

@@ -32,7 +32,8 @@ export default function SettingsPage() {
  };

  const statusDot = {
-    connected: "bg-emerald-500 shadow-[0_0_8px] shadow-emerald-500/60 animate-pulse",
+    connected:
+      "bg-emerald-500 shadow-[0_0_8px] shadow-emerald-500/60 animate-pulse",
    connecting: "bg-accent-amber animate-pulse",
    disconnected: "bg-destructive",
    error: "bg-destructive",
@@ -49,9 +50,21 @@ export default function SettingsPage() {
    <div className="space-y-4 animate-fade-in-up max-w-2xl">
      <SubNav
        tabs={[
-          { id: "connection", label: "Connection", icon: <Wifi className="size-3" /> },
-          { id: "appearance", label: "Appearance", icon: <Sun className="size-3" /> },
-          { id: "config", label: "Config", icon: <Server className="size-3" /> },
+          {
+            id: "connection",
+            label: "Connection",
+            icon: <Wifi className="size-3" />,
+          },
+          {
+            id: "appearance",
+            label: "Appearance",
+            icon: <Sun className="size-3" />,
+          },
+          {
+            id: "config",
+            label: "Config",
+            icon: <Server className="size-3" />,
+          },
          { id: "about", label: "About", icon: <Shield className="size-3" /> },
        ]}
        activeTab={tab}
@@ -62,11 +75,15 @@ export default function SettingsPage() {
        <GlassCard variant="base">
          <div className="flex items-center justify-between">
            <div>
-              <span className="text-sm font-semibold text-text-primary">WebSocket</span>
+              <span className="text-sm font-semibold text-text-primary">
+                WebSocket
+              </span>
            </div>
            <div className="flex items-center gap-2">
              <span className={cn("size-2 rounded-full", statusDot)} />
-              <span className="text-xs font-mono text-text-secondary">{statusLabel}</span>
+              <span className="text-xs font-mono text-text-secondary">
+                {statusLabel}
+              </span>
            </div>
          </div>
        </GlassCard>
@@ -76,8 +93,14 @@ export default function SettingsPage() {
        <GlassCard variant="base">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
-              {theme === "dark" ? <Moon className="size-4 text-primary" /> : <Sun className="size-4 text-primary" />}
-              <span className="text-sm font-semibold text-text-primary">Theme</span>
+              {theme === "dark" ? (
+                <Moon className="size-4 text-primary" />
+              ) : (
+                <Sun className="size-4 text-primary" />
+              )}
+              <span className="text-sm font-semibold text-text-primary">
+                Theme
+              </span>
            </div>
            <button
              type="button"
@@ -97,18 +120,37 @@ export default function SettingsPage() {
              <LoadingSkeleton count={6} height="h-6" />
            ) : config ? (
              <>
-                <ConfigRow label="Monitor Guild" value={config.monitorGuildId || "Not configured"} />
+                <ConfigRow
+                  label="Monitor Guild"
+                  value={config.monitorGuildId || "Not configured"}
+                />
                <GlassDivider />
-                <ConfigRow label="Voice Guild" value={config.voiceGuildId || "Not configured"} />
+                <ConfigRow
+                  label="Voice Guild"
+                  value={config.voiceGuildId || "Not configured"}
+                />
                <GlassDivider />
-                <ConfigRow label="Voice Channel" value={config.voiceChannelId || "Not configured"} />
+                <ConfigRow
+                  label="Voice Channel"
+                  value={config.voiceChannelId || "Not configured"}
+                />
                <GlassDivider />
-                <ConfigRow label="AI Analysis" value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"} />
+                <ConfigRow
+                  label="AI Analysis"
+                  value={config.aiAnalysisEnabled ? "Enabled" : "Disabled"}
+                />
                <GlassDivider />
-                <ConfigRow label="Auto-Delete Flagged" value={config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"} />
+                <ConfigRow
+                  label="Auto-Delete Flagged"
+                  value={
+                    config.autoDeleteFlaggedEnabled ? "Enabled" : "Disabled"
+                  }
+                />
              </>
            ) : (
-              <p className="text-xs text-text-secondary/60">Unable to load config.</p>
+              <p className="text-xs text-text-secondary/60">
+                Unable to load config.
+              </p>
            )}
          </div>
        </GlassCard>
@@ -117,9 +159,12 @@ export default function SettingsPage() {
      {tab === "about" && (
        <GlassCard variant="base">
          <div className="space-y-2">
-            <h2 className="text-base font-bold text-primary">Discord Automod</h2>
+            <h2 className="text-base font-bold text-primary">
+              Discord Automod
+            </h2>
            <p className="text-xs text-text-secondary/80 leading-relaxed">
-              AI-powered message moderation, voice recording, and real-time monitoring for Discord communities.
+              AI-powered message moderation, voice recording, and real-time
+              monitoring for Discord communities.
            </p>
            <div className="text-[10px] font-mono text-text-secondary/40 mt-4">
              v0.1.0
@@ -135,7 +180,9 @@ function ConfigRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex items-center justify-between py-0.5">
      <span className="text-xs text-text-secondary">{label}</span>
-      <span className="text-[11px] font-mono text-text-primary/80 max-w-[240px] truncate text-right">{value}</span>
+      <span className="text-[11px] font-mono text-text-primary/80 max-w-[240px] truncate text-right">
+        {value}
+      </span>
    </div>
  );
 }
@@ -1,12 +1,11 @@
 "use client";

 import { useCallback, useEffect, useState } from "react";
-import { VoiceConnectionCard } from "@/components/voice/connection-card";
-import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
-import { MicControl } from "@/components/voice/mic-control";
-import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
 import { SubNav } from "@/components/layout/sub-nav";
-import { useWebSocket } from "@/lib/ws/context";
+import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
+import { VoiceConnectionCard } from "@/components/voice/connection-card";
+import { MicControl } from "@/components/voice/mic-control";
+import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
 import {
  useGuilds,
  useMicTransmit,
@@ -16,6 +15,7 @@ import {
  useVoiceDisconnect,
  useVoiceStatus,
 } from "@/hooks";
+import { useWebSocket } from "@/lib/ws/context";

 type VoiceTab = "connection" | "activity";

@@ -83,7 +83,12 @@ export default function VoicePage() {
        selectedChannel={selectedChannel}
        onGuildChange={handleGuildChange}
        onChannelChange={(v) => setSelectedChannel(v ?? "")}
-        onConnect={() => connectMut.mutate({ guildId: selectedGuild, channelId: selectedChannel })}
+        onConnect={() =>
+          connectMut.mutate({
+            guildId: selectedGuild,
+            channelId: selectedChannel,
+          })
+        }
        onDisconnect={() => disconnectMut.mutate(undefined)}
        connecting={connectMut.isPending}
      />