feat(leptos): Phase 5 dashboard feature

2026-07-03 22:46:58 +07:00
parent 52d53fc7f7
commit 8a2e914f08
10 changed files with 870 additions and 6 deletions
@@ -24,6 +24,7 @@ pub async fn get_dashboard_users(
 #[derive(serde::Deserialize)]
 pub struct PaginatedUsers {
    pub data: Vec<DashboardUser>,
+    #[serde(rename = "nextCursor")]
    pub next_cursor: Option<String>,
 }

@@ -52,6 +53,7 @@ pub async fn get_dashboard_channels(
 #[derive(serde::Deserialize)]
 pub struct PaginatedChannels {
    pub data: Vec<DashboardChannel>,
+    #[serde(rename = "nextCursor")]
    pub next_cursor: Option<String>,
 }

@@ -844,10 +844,212 @@ img {
  object-fit: cover;
 }

+/* ── Dashboard Panel ──────────────────────────────────── */
+.dashboard-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.dashboard-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-4);
+}
+
+.dashboard-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-4);
+}
+
+.dashboard-metric-card {
+  padding: var(--space-4);
+  overflow: hidden;
+}
+
+.dashboard-metric-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.dashboard-metric-label {
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.dashboard-metric-value {
+  margin-top: var(--space-1);
+  font-size: 1.5rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+.dashboard-metric-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-lg);
+  font-size: 1.25rem;
+}
+
+.dashboard-wide-card {
+  grid-column: span 2;
+}
+
+.dashboard-top-channels,
+.dashboard-summary-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.dashboard-top-channel-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.dashboard-moderation-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+.dashboard-queue-card {
+  padding: var(--space-4);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-raised);
+  text-align: center;
+}
+
+.dashboard-queue-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.dashboard-queue-label {
+  margin-top: var(--space-1);
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+}
+
+.dashboard-list-card {
+  overflow: hidden;
+}
+
+.dashboard-list-toolbar {
+  margin-bottom: var(--space-4);
+}
+
+.dashboard-summary-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  padding: var(--space-3);
+  border: 1px solid var(--surface-border);
+  border-radius: var(--radius-lg);
+  background: var(--surface-base);
+  transition: background var(--transition-fast), border-color var(--transition-fast);
+}
+
+.dashboard-summary-row:hover {
+  border-color: var(--color-primary);
+  background: var(--surface-raised);
+}
+
+.dashboard-summary-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--radius-full);
+  background: var(--surface-overlay);
+  color: var(--text-secondary);
+  font-weight: 700;
+  overflow: hidden;
+}
+
+.dashboard-summary-avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.dashboard-channel-avatar {
+  color: var(--color-primary);
+  background: rgba(35, 161, 235, 0.1);
+}
+
+.dashboard-summary-main {
+  min-width: 0;
+  flex: 1;
+}
+
+.dashboard-summary-title {
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.dashboard-summary-text {
+  margin-top: var(--space-1);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.dashboard-summary-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  color: var(--text-tertiary);
+  font-size: 0.75rem;
+}
+
+.dashboard-list-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  padding: var(--space-10) var(--space-4);
+  text-align: center;
+}
+
+.tone-primary { background: rgba(35, 161, 235, 0.1); color: var(--color-primary); }
+.tone-success { background: rgba(34, 197, 94, 0.1); color: var(--color-success); }
+.tone-error { background: rgba(239, 68, 68, 0.1); color: var(--color-error); }
+.tone-warning { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); }
+.tone-info { background: rgba(59, 130, 246, 0.1); color: var(--color-info); }
+.tone-secondary { background: var(--surface-overlay); color: var(--text-secondary); }
+
 /* ── Responsive ───────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .dashboard-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
@media (max-width: 768px) {
  .grid-cols-2 { grid-template-columns: 1fr; }
  .grid-cols-3 { grid-template-columns: 1fr; }
+  .dashboard-stats-grid { grid-template-columns: 1fr; }
+  .dashboard-wide-card { grid-column: span 1; }
+  .dashboard-moderation-grid { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
 }
@media (min-width: 769px) {
@@ -2,8 +2,9 @@ use leptos::prelude::*;
 use shared_types::ui_state::Tab;
 use crate::auth::AuthOverlay;
 use crate::ws::context::WsContext;
-use crate::features::messages::MessagesPanel;
+use crate::features::dashboard::DashboardPanel;
 use crate::features::live::LivePanel;
+use crate::features::messages::MessagesPanel;

 #[derive(Clone)]
 pub struct AppConfig {
@@ -95,7 +96,7 @@ pub fn App() -> impl IntoView {
                        {move || match ui.active_tab.get() {
                            Tab::Messages => view! { <MessagesPanel /> }.into_any(),
                            Tab::Live => view! { <LivePanel /> }.into_any(),
-                            Tab::Dashboard => view! { <div>"Dashboard Panel"</div> }.into_any(),
+                            Tab::Dashboard => view! { <DashboardPanel /> }.into_any(),
                        }}
                    </div>
                </main>
@@ -0,0 +1,137 @@
+use leptos::prelude::*;
+use shared_types::dashboard::DashboardChannel;
+
+#[component]
+pub fn ChannelSummaryList(
+    channels: Vec<DashboardChannel>,
+    loading: bool,
+    error: Option<String>,
+    search: String,
+    has_more: bool,
+    on_search_change: Box<dyn Fn(String) + Send + Sync + 'static>,
+    on_load_more: Box<dyn Fn() + Send + Sync + 'static>,
+    on_retry: Box<dyn Fn() + Send + Sync + 'static>,
+) -> impl IntoView {
+    let search_cb = StoredValue::new(on_search_change);
+    let load_more_cb = StoredValue::new(on_load_more);
+    let retry_cb = StoredValue::new(on_retry);
+
+    view! {
+        <div class="card dashboard-list-card">
+            <div class="card-header">
+                <div class="card-title">"Kanal"</div>
+                <p class="card-description">"Ringkasan aktivitas, flagged message, dan budaya kanal."</p>
+            </div>
+            <div class="card-content">
+                <div class="dashboard-list-toolbar">
+                    <input
+                        class="input w-full"
+                        placeholder="Search channels..."
+                        prop:value=search
+                        on:input=move |ev| search_cb.with_value(|cb| cb(event_target_value(&ev)))
+                    />
+                </div>
+
+                {move || {
+                    if loading && channels.is_empty() {
+                        view! { <ListSkeleton /> }.into_any()
+                    } else if let Some(err) = error.clone() {
+                        view! {
+                            <div class="dashboard-list-empty">
+                                <div class="text-error text-xl">"⚠"</div>
+                                <p class="text-sm text-secondary">{err}</p>
+                                <button class="btn btn-outline btn-sm" on:click=move |_| retry_cb.with_value(|cb| cb())>
+                                    "Retry"
+                                </button>
+                            </div>
+                        }.into_any()
+                    } else if channels.is_empty() {
+                        view! {
+                            <div class="dashboard-list-empty">
+                                <div class="text-2xl">"#"</div>
+                                <p class="text-sm text-secondary">"No channels found."</p>
+                            </div>
+                        }.into_any()
+                    } else {
+                        view! {
+                            <div class="dashboard-summary-list">
+                                {channels.clone().into_iter().map(|channel| view! {
+                                    <ChannelRow channel=channel />
+                                }).collect::<Vec<_>>()}
+                            </div>
+                        }.into_any()
+                    }
+                }}
+
+                {move || {
+                    (has_more && !loading).then(|| view! {
+                        <div class="mt-4 text-center">
+                            <button class="btn btn-outline btn-sm" on:click=move |_| load_more_cb.with_value(|cb| cb())>
+                                "Load more channels"
+                            </button>
+                        </div>
+                    })
+                }}
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn ChannelRow(channel: DashboardChannel) -> impl IntoView {
+    let name = channel.channel_name.clone().unwrap_or_else(|| channel.channel_id.clone());
+    let summary = channel
+        .culture_summary
+        .clone()
+        .unwrap_or_else(|| format!("{} messages", format_number(channel.total_messages)));
+    let last_seen = channel.last_message_at.map(format_timestamp);
+
+    view! {
+        <div class="dashboard-summary-row">
+            <div class="dashboard-summary-avatar dashboard-channel-avatar">
+                <span>"#"</span>
+            </div>
+            <div class="dashboard-summary-main">
+                <div class="dashboard-summary-title">{format!("#{}", name)}</div>
+                <div class="dashboard-summary-text">{summary}</div>
+                <div class="dashboard-summary-meta">
+                    <span>{format!("{} messages", format_number(channel.total_messages))}</span>
+                    <span>{format!("{} flagged", format_number(channel.flagged_count))}</span>
+                    {last_seen.map(|t| view! { <span>{format!("Last: {}", t)}</span> })}
+                </div>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn ListSkeleton() -> impl IntoView {
+    view! {
+        <div class="dashboard-summary-list">
+            {(0..5).map(|_| view! {
+                <div class="dashboard-summary-row">
+                    <div class="skeleton skeleton-circular" style="width:40px;height:40px"></div>
+                    <div class="dashboard-summary-main">
+                        <div class="skeleton" style="height:16px;width:160px"></div>
+                        <div class="skeleton mt-2" style="height:14px;width:240px"></div>
+                    </div>
+                </div>
+            }).collect::<Vec<_>>()}
+        </div>
+    }
+}
+
+fn format_number(value: u64) -> String {
+    let raw = value.to_string();
+    let mut out = String::new();
+    for (idx, ch) in raw.chars().rev().enumerate() {
+        if idx > 0 && idx % 3 == 0 { out.push(','); }
+        out.push(ch);
+    }
+    out.chars().rev().collect()
+}
+
+fn format_timestamp(ts: i64) -> String {
+    let d = js_sys::Date::new(&wasm_bindgen::JsValue::from_f64((ts as f64) * 1000.0));
+    d.to_locale_date_string("en-US", &wasm_bindgen::JsValue::UNDEFINED).into()
+}
@@ -0,0 +1,7 @@
+pub mod stats_overview;
+pub mod user_summary_list;
+pub mod channel_summary_list;
+
+pub use stats_overview::StatsOverview;
+pub use user_summary_list::UserSummaryList;
+pub use channel_summary_list::ChannelSummaryList;
@@ -0,0 +1,145 @@
+use leptos::prelude::*;
+use shared_types::dashboard::{DashboardStats, TopChannel};
+
+#[component]
+pub fn StatsOverview(
+    stats: Option<DashboardStats>,
+    loading: bool,
+    error: Option<String>,
+    on_retry: Box<dyn Fn() + Send + Sync + 'static>,
+) -> impl IntoView {
+    let retry = StoredValue::new(on_retry);
+
+    view! {
+        <div class="dashboard-stats">
+            {move || {
+                if loading {
+                    view! { <StatsSkeleton /> }.into_any()
+                } else if let Some(err) = error.clone() {
+                    view! {
+                        <div class="card p-6 text-center">
+                            <div class="text-error text-2xl mb-2">"⚠"</div>
+                            <p class="text-sm text-secondary mb-4">{err}</p>
+                            <button class="btn btn-outline btn-sm" on:click=move |_| retry.with_value(|cb| cb())>
+                                "Retry"
+                            </button>
+                        </div>
+                    }.into_any()
+                } else if let Some(stats) = stats.clone() {
+                    view! {
+                        <div class="dashboard-stats-grid">
+                            <MetricCard label="Total Messages" value=stats.total_messages icon="💬" tone="primary" />
+                            <MetricCard label="Today's Messages" value=stats.today_messages icon="📅" tone="success" />
+                            <MetricCard label="Total Users" value=stats.total_users icon="👥" tone="primary" />
+                            <MetricCard label="Active 24h" value=stats.active_users_24h icon="🟢" tone="success" />
+                            <MetricCard label="Flagged" value=stats.total_flagged icon="🚩" tone="error" />
+                            <MetricCard label="Clean" value=stats.total_clean icon="✅" tone="success" />
+                            <MetricCard label="Voice Recordings" value=stats.total_voice_recordings icon="🎙" tone="info" />
+                            <MetricCard label="AI Profiles" value=stats.total_profiles icon="🧠" tone="warning" />
+
+                            <div class="card dashboard-wide-card">
+                                <div class="card-header">
+                                    <div class="card-title">"Top Channels"</div>
+                                </div>
+                                <div class="card-content">
+                                    <TopChannels channels=stats.top_channels.clone() />
+                                </div>
+                            </div>
+
+                            <div class="card dashboard-wide-card">
+                                <div class="card-header">
+                                    <div class="card-title">"Moderation Queue"</div>
+                                </div>
+                                <div class="card-content">
+                                    <div class="dashboard-moderation-grid">
+                                        <QueueMetric label="Pending" value=stats.moderation_overview.pending tone="secondary" />
+                                        <QueueMetric label="Processing" value=stats.moderation_overview.processing tone="warning" />
+                                        <QueueMetric label="Errors" value=stats.moderation_overview.error tone="error" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    }.into_any()
+                } else {
+                    view! {
+                        <div class="card p-6 text-center">
+                            <p class="text-sm text-secondary">"No dashboard data available yet."</p>
+                        </div>
+                    }.into_any()
+                }
+            }}
+        </div>
+    }
+}
+
+#[component]
+fn MetricCard(label: &'static str, value: u64, icon: &'static str, tone: &'static str) -> impl IntoView {
+    view! {
+        <div class="card dashboard-metric-card">
+            <div class="dashboard-metric-content">
+                <div>
+                    <div class="dashboard-metric-label">{label}</div>
+                    <div class="dashboard-metric-value">{format_number(value)}</div>
+                </div>
+                <div class=format!("dashboard-metric-icon tone-{}", tone)>{icon}</div>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn QueueMetric(label: &'static str, value: u64, tone: &'static str) -> impl IntoView {
+    view! {
+        <div class=format!("dashboard-queue-card tone-{}", tone)>
+            <div class="dashboard-queue-value">{format_number(value)}</div>
+            <div class="dashboard-queue-label">{label}</div>
+        </div>
+    }
+}
+
+#[component]
+fn TopChannels(channels: Vec<TopChannel>) -> impl IntoView {
+    if channels.is_empty() {
+        return view! { <p class="text-sm text-secondary">"No channel data yet."</p> }.into_any();
+    }
+
+    view! {
+        <div class="dashboard-top-channels">
+            {channels.into_iter().map(|ch| {
+                let name = ch.channel_name.unwrap_or_else(|| ch.channel_id.clone());
+                view! {
+                    <div class="dashboard-top-channel-row">
+                        <span class="truncate">{format!("#{}", name)}</span>
+                        <span class="font-semibold">{format_number(ch.message_count)}</span>
+                    </div>
+                }
+            }).collect::<Vec<_>>()}
+        </div>
+    }.into_any()
+}
+
+#[component]
+fn StatsSkeleton() -> impl IntoView {
+    view! {
+        <div class="dashboard-stats-grid">
+            {(0..8).map(|_| view! {
+                <div class="card dashboard-metric-card">
+                    <div class="skeleton" style="height:14px;width:96px"></div>
+                    <div class="skeleton mt-2" style="height:32px;width:72px"></div>
+                </div>
+            }).collect::<Vec<_>>()}
+        </div>
+    }
+}
+
+fn format_number(value: u64) -> String {
+    let raw = value.to_string();
+    let mut out = String::new();
+    for (idx, ch) in raw.chars().rev().enumerate() {
+        if idx > 0 && idx % 3 == 0 {
+            out.push(',');
+        }
+        out.push(ch);
+    }
+    out.chars().rev().collect()
+}
@@ -0,0 +1,142 @@
+use leptos::prelude::*;
+use shared_types::dashboard::DashboardUser;
+
+#[component]
+pub fn UserSummaryList(
+    users: Vec<DashboardUser>,
+    loading: bool,
+    error: Option<String>,
+    search: String,
+    has_more: bool,
+    on_search_change: Box<dyn Fn(String) + Send + Sync + 'static>,
+    on_load_more: Box<dyn Fn() + Send + Sync + 'static>,
+    on_retry: Box<dyn Fn() + Send + Sync + 'static>,
+) -> impl IntoView {
+    let search_cb = StoredValue::new(on_search_change);
+    let load_more_cb = StoredValue::new(on_load_more);
+    let retry_cb = StoredValue::new(on_retry);
+
+    view! {
+        <div class="card dashboard-list-card">
+            <div class="card-header">
+                <div class="card-title">"Pengguna"</div>
+                <p class="card-description">"Ringkasan aktivitas dan trust score pengguna."</p>
+            </div>
+            <div class="card-content">
+                <div class="dashboard-list-toolbar">
+                    <input
+                        class="input w-full"
+                        placeholder="Search users..."
+                        prop:value=search
+                        on:input=move |ev| search_cb.with_value(|cb| cb(event_target_value(&ev)))
+                    />
+                </div>
+
+                {move || {
+                    if loading && users.is_empty() {
+                        view! { <ListSkeleton /> }.into_any()
+                    } else if let Some(err) = error.clone() {
+                        view! {
+                            <div class="dashboard-list-empty">
+                                <div class="text-error text-xl">"⚠"</div>
+                                <p class="text-sm text-secondary">{err}</p>
+                                <button class="btn btn-outline btn-sm" on:click=move |_| retry_cb.with_value(|cb| cb())>
+                                    "Retry"
+                                </button>
+                            </div>
+                        }.into_any()
+                    } else if users.is_empty() {
+                        view! {
+                            <div class="dashboard-list-empty">
+                                <div class="text-2xl">"👤"</div>
+                                <p class="text-sm text-secondary">"No users found."</p>
+                            </div>
+                        }.into_any()
+                    } else {
+                        view! {
+                            <div class="dashboard-summary-list">
+                                {users.clone().into_iter().map(|user| view! {
+                                    <UserRow user=user />
+                                }).collect::<Vec<_>>()}
+                            </div>
+                        }.into_any()
+                    }
+                }}
+
+                {move || {
+                    (has_more && !loading).then(|| view! {
+                        <div class="mt-4 text-center">
+                            <button class="btn btn-outline btn-sm" on:click=move |_| load_more_cb.with_value(|cb| cb())>
+                                "Load more users"
+                            </button>
+                        </div>
+                    })
+                }}
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn UserRow(user: DashboardUser) -> impl IntoView {
+    let name = user.username.clone().unwrap_or_else(|| user.user_id.clone());
+    let summary = user
+        .profile_summary
+        .clone()
+        .unwrap_or_else(|| format!("{} messages", format_number(user.total_messages)));
+    let trust = user.trust_score.map(|score| format!("Trust: {:.2}", score));
+    let last_seen = user.last_message_at.map(format_timestamp);
+
+    view! {
+        <div class="dashboard-summary-row">
+            <div class="dashboard-summary-avatar">
+                {if let Some(url) = user.avatar_url.clone() {
+                    view! { <img src=url alt="" class="dashboard-summary-avatar-img" /> }.into_any()
+                } else {
+                    view! { <span>"👤"</span> }.into_any()
+                }}
+            </div>
+            <div class="dashboard-summary-main">
+                <div class="dashboard-summary-title">{name}</div>
+                <div class="dashboard-summary-text">{summary}</div>
+                <div class="dashboard-summary-meta">
+                    <span>{format!("{} flagged", format_number(user.flagged_count))}</span>
+                    {trust.map(|t| view! { <span>{t}</span> })}
+                    {last_seen.map(|t| view! { <span>{format!("Last: {}", t)}</span> })}
+                </div>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn ListSkeleton() -> impl IntoView {
+    view! {
+        <div class="dashboard-summary-list">
+            {(0..5).map(|_| view! {
+                <div class="dashboard-summary-row">
+                    <div class="skeleton skeleton-circular" style="width:40px;height:40px"></div>
+                    <div class="dashboard-summary-main">
+                        <div class="skeleton" style="height:16px;width:160px"></div>
+                        <div class="skeleton mt-2" style="height:14px;width:240px"></div>
+                    </div>
+                </div>
+            }).collect::<Vec<_>>()}
+        </div>
+    }
+}
+
+fn format_number(value: u64) -> String {
+    let raw = value.to_string();
+    let mut out = String::new();
+    for (idx, ch) in raw.chars().rev().enumerate() {
+        if idx > 0 && idx % 3 == 0 { out.push(','); }
+        out.push(ch);
+    }
+    out.chars().rev().collect()
+}
+
+fn format_timestamp(ts: i64) -> String {
+    let d = js_sys::Date::new(&wasm_bindgen::JsValue::from_f64((ts as f64) * 1000.0));
+    d.to_locale_date_string("en-US", &wasm_bindgen::JsValue::UNDEFINED).into()
+}
@@ -0,0 +1,223 @@
+pub mod components;
+
+use components::{ChannelSummaryList, StatsOverview, UserSummaryList};
+use leptos::prelude::*;
+use shared_types::dashboard::{DashboardChannel, DashboardStats, DashboardUser};
+use std::sync::Arc;
+use wasm_bindgen_futures::spawn_local;
+
+#[derive(Clone, PartialEq)]
+enum DashboardTab {
+    Stats,
+    Users,
+    Channels,
+}
+
+#[component]
+pub fn DashboardPanel() -> impl IntoView {
+    let active_tab = RwSignal::new(DashboardTab::Stats);
+
+    let stats = RwSignal::new(None::<DashboardStats>);
+    let stats_loading = RwSignal::new(false);
+    let stats_error = RwSignal::new(None::<String>);
+
+    let users = RwSignal::new(Vec::<DashboardUser>::new());
+    let users_loading = RwSignal::new(false);
+    let users_error = RwSignal::new(None::<String>);
+    let users_search = RwSignal::new(String::new());
+    let users_cursor = RwSignal::new(None::<String>);
+
+    let channels = RwSignal::new(Vec::<DashboardChannel>::new());
+    let channels_loading = RwSignal::new(false);
+    let channels_error = RwSignal::new(None::<String>);
+    let channels_search = RwSignal::new(String::new());
+    let channels_cursor = RwSignal::new(None::<String>);
+
+    let fetch_stats: Arc<dyn Fn() + Send + Sync + 'static> = Arc::new(move || {
+        stats_loading.set(true);
+        stats_error.set(None);
+        spawn_local(async move {
+            match crate::api::dashboard::get_dashboard_stats().await {
+                Ok(data) => stats.set(Some(data)),
+                Err(err) => stats_error.set(Some(format!("Failed to load stats: {}", err))),
+            }
+            stats_loading.set(false);
+        });
+    });
+
+    let fetch_users: Arc<dyn Fn(bool) + Send + Sync + 'static> = Arc::new(move |reset: bool| {
+        if users_loading.get() {
+            return;
+        }
+        users_loading.set(true);
+        users_error.set(None);
+
+        let cursor = if reset { None } else { users_cursor.get() };
+        let search = users_search.get();
+        spawn_local(async move {
+            let search_ref = (!search.trim().is_empty()).then_some(search.trim());
+            match crate::api::dashboard::get_dashboard_users(Some(20), cursor.as_deref(), search_ref).await {
+                Ok(page) => {
+                    if reset {
+                        users.set(page.data);
+                    } else {
+                        let mut current = users.get();
+                        current.extend(page.data);
+                        users.set(current);
+                    }
+                    users_cursor.set(page.next_cursor);
+                }
+                Err(err) => users_error.set(Some(format!("Failed to load users: {}", err))),
+            }
+            users_loading.set(false);
+        });
+    });
+
+    let fetch_channels: Arc<dyn Fn(bool) + Send + Sync + 'static> = Arc::new(move |reset: bool| {
+        if channels_loading.get() {
+            return;
+        }
+        channels_loading.set(true);
+        channels_error.set(None);
+
+        let cursor = if reset { None } else { channels_cursor.get() };
+        let search = channels_search.get();
+        spawn_local(async move {
+            let search_ref = (!search.trim().is_empty()).then_some(search.trim());
+            match crate::api::dashboard::get_dashboard_channels(Some(20), cursor.as_deref(), search_ref, None).await {
+                Ok(page) => {
+                    if reset {
+                        channels.set(page.data);
+                    } else {
+                        let mut current = channels.get();
+                        current.extend(page.data);
+                        channels.set(current);
+                    }
+                    channels_cursor.set(page.next_cursor);
+                }
+                Err(err) => channels_error.set(Some(format!("Failed to load channels: {}", err))),
+            }
+            channels_loading.set(false);
+        });
+    });
+
+    {
+        let fetch_stats = fetch_stats.clone();
+        let fetch_users = fetch_users.clone();
+        let fetch_channels = fetch_channels.clone();
+        create_effect(move |_| {
+            fetch_stats();
+            fetch_users(true);
+            fetch_channels(true);
+        });
+    }
+
+    view! {
+        <div class="dashboard-panel">
+            <div class="dashboard-header">
+                <div>
+                    <h2 class="text-2xl font-bold">"Dashboard Guild"</h2>
+                    <p class="text-sm text-secondary mt-2">
+                        "Pantau statistik, profil pengguna, dan aktivitas kanal komunitas IMPHNEN."
+                    </p>
+                </div>
+            </div>
+
+            <div class="tabs">
+                <div class="tab-list mb-6">
+                    <DashboardTabButton tab=DashboardTab::Stats active_tab=active_tab label="Statistik" icon="📊" />
+                    <DashboardTabButton tab=DashboardTab::Users active_tab=active_tab label="Pengguna" icon="👥" />
+                    <DashboardTabButton tab=DashboardTab::Channels active_tab=active_tab label="Kanal" icon="#" />
+                </div>
+
+                <div class="tab-content" style:display=move || if active_tab.get() == DashboardTab::Stats { "block" } else { "none" }>
+                    <StatsOverview
+                        stats=stats.get()
+                        loading=stats_loading.get()
+                        error=stats_error.get()
+                        on_retry=Box::new({
+                            let fetch_stats = fetch_stats.clone();
+                            move || fetch_stats()
+                        })
+                    />
+                </div>
+
+                <div class="tab-content" style:display=move || if active_tab.get() == DashboardTab::Users { "block" } else { "none" }>
+                    <UserSummaryList
+                        users=users.get()
+                        loading=users_loading.get()
+                        error=users_error.get()
+                        search=users_search.get()
+                        has_more=users_cursor.get().is_some()
+                        on_search_change=Box::new({
+                            let fetch_users = fetch_users.clone();
+                            move |value| {
+                                users_search.set(value);
+                                users_cursor.set(None);
+                                fetch_users(true);
+                            }
+                        })
+                        on_load_more=Box::new({
+                            let fetch_users = fetch_users.clone();
+                            move || fetch_users(false)
+                        })
+                        on_retry=Box::new({
+                            let fetch_users = fetch_users.clone();
+                            move || fetch_users(true)
+                        })
+                    />
+                </div>
+
+                <div class="tab-content" style:display=move || if active_tab.get() == DashboardTab::Channels { "block" } else { "none" }>
+                    <ChannelSummaryList
+                        channels=channels.get()
+                        loading=channels_loading.get()
+                        error=channels_error.get()
+                        search=channels_search.get()
+                        has_more=channels_cursor.get().is_some()
+                        on_search_change=Box::new({
+                            let fetch_channels = fetch_channels.clone();
+                            move |value| {
+                                channels_search.set(value);
+                                channels_cursor.set(None);
+                                fetch_channels(true);
+                            }
+                        })
+                        on_load_more=Box::new({
+                            let fetch_channels = fetch_channels.clone();
+                            move || fetch_channels(false)
+                        })
+                        on_retry=Box::new({
+                            let fetch_channels = fetch_channels.clone();
+                            move || fetch_channels(true)
+                        })
+                    />
+                </div>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+fn DashboardTabButton(
+    tab: DashboardTab,
+    active_tab: RwSignal<DashboardTab>,
+    label: &'static str,
+    icon: &'static str,
+) -> impl IntoView {
+    let tab_for_class = tab.clone();
+    let tab_for_aria = tab.clone();
+    let tab_for_click = tab;
+
+    view! {
+        <button
+            class="tab-trigger"
+            class:active=move || active_tab.get() == tab_for_class
+            aria-selected=move || if active_tab.get() == tab_for_aria { "true" } else { "false" }
+            on:click=move |_| active_tab.set(tab_for_click.clone())
+        >
+            <span>{icon}</span>
+            <span>{label}</span>
+        </button>
+    }
+}
@@ -1,2 +1,3 @@
+pub mod dashboard;
 pub mod live;
 pub mod messages;
@@ -20,7 +20,8 @@ pub struct DashboardStats {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct TopChannel {
    pub channel_id: String,
-    pub channel_name: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub channel_name: Option<String>,
    pub message_count: u64,
 }

@@ -34,7 +35,8 @@ pub struct ModerationOverview {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct DashboardUser {
    pub user_id: String,
-    pub username: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub username: Option<String>,
    #[serde(skip_serializing_if = "Option::is_none")]
    pub avatar_url: Option<String>,
    #[serde(skip_serializing_if = "Option::is_none")]
@@ -62,8 +64,10 @@ pub struct DashboardUserDetail {
 #[derive(Debug, Clone, Serialize, Deserialize)]
 pub struct DashboardChannel {
    pub channel_id: String,
-    pub channel_name: String,
-    pub guild_id: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub channel_name: Option<String>,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub guild_id: Option<String>,
    pub total_messages: u64,
    pub flagged_count: u64,
    #[serde(skip_serializing_if = "Option::is_none")]