feat(dash): improved frontend dashboard (#6)

Co-authored-by: Sharang Parnerkar <parnerkarsharang@gmail.com>
Reviewed-on: #6

src/pages/organization/dashboard.rs

@@ -0,0 +1,170 @@
+use dioxus::prelude::*;
+
+use crate::components::{MemberRow, PageHeader};
+use crate::models::{BillingUsage, MemberRole, OrgMember};
+
+/// Organization dashboard with billing stats, member table, and invite modal.
+///
+/// Shows current billing usage, a table of organization members
+/// with role management, and a button to invite new members.
+#[component]
+pub fn OrgDashboardPage() -> Element {
+    let members = use_signal(mock_members);
+    let usage = mock_usage();
+    let mut show_invite = use_signal(|| false);
+    let mut invite_email = use_signal(String::new);
+
+    let members_list = members.read().clone();
+
+    // Format token counts for display
+    let tokens_display = format_tokens(usage.tokens_used);
+    let tokens_limit_display = format_tokens(usage.tokens_limit);
+
+    rsx! {
+        section { class: "org-dashboard-page",
+            PageHeader {
+                title: "Organization".to_string(),
+                subtitle: "Manage members and billing".to_string(),
+                actions: rsx! {
+                    button { class: "btn-primary", onclick: move |_| show_invite.set(true), "Invite Member" }
+                },
+            }
+
+            // Stats bar
+            div { class: "org-stats-bar",
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{usage.seats_used}/{usage.seats_total}" }
+                    span { class: "org-stat-label", "Seats Used" }
+                }
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{tokens_display}" }
+                    span { class: "org-stat-label", "of {tokens_limit_display} tokens" }
+                }
+                div { class: "org-stat",
+                    span { class: "org-stat-value", "{usage.billing_cycle_end}" }
+                    span { class: "org-stat-label", "Cycle Ends" }
+                }
+            }
+
+            // Members table
+            div { class: "org-table-wrapper",
+                table { class: "org-table",
+                    thead {
+                        tr {
+                            th { "Name" }
+                            th { "Email" }
+                            th { "Role" }
+                            th { "Joined" }
+                        }
+                    }
+                    tbody {
+                        for member in members_list {
+                            MemberRow {
+                                key: "{member.id}",
+                                member,
+                                on_role_change: move |_| {},
+                            }
+                        }
+                    }
+                }
+            }
+
+            // Invite modal
+            if *show_invite.read() {
+                div {
+                    class: "modal-overlay",
+                    onclick: move |_| show_invite.set(false),
+                    div {
+                        class: "modal-content",
+                        // Prevent clicks inside modal from closing it
+                        onclick: move |evt: Event<MouseData>| evt.stop_propagation(),
+                        h3 { "Invite New Member" }
+                        div { class: "form-group",
+                            label { "Email Address" }
+                            input {
+                                class: "form-input",
+                                r#type: "email",
+                                placeholder: "colleague@company.com",
+                                value: "{invite_email}",
+                                oninput: move |evt: Event<FormData>| {
+                                    invite_email.set(evt.value());
+                                },
+                            }
+                        }
+                        div { class: "modal-actions",
+                            button {
+                                class: "btn-secondary",
+                                onclick: move |_| show_invite.set(false),
+                                "Cancel"
+                            }
+                            button {
+                                class: "btn-primary",
+                                onclick: move |_| show_invite.set(false),
+                                "Send Invite"
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Formats a token count into a human-readable string (e.g. "1.2M").
+fn format_tokens(count: u64) -> String {
+    const M: u64 = 1_000_000;
+    const K: u64 = 1_000;
+
+    if count >= M {
+        format!("{:.1}M", count as f64 / M as f64)
+    } else if count >= K {
+        format!("{:.0}K", count as f64 / K as f64)
+    } else {
+        count.to_string()
+    }
+}
+
+/// Returns mock organization members.
+fn mock_members() -> Vec<OrgMember> {
+    vec![
+        OrgMember {
+            id: "m1".into(),
+            name: "Max Mustermann".into(),
+            email: "max@example.com".into(),
+            role: MemberRole::Admin,
+            joined_at: "2026-01-10".into(),
+        },
+        OrgMember {
+            id: "m2".into(),
+            name: "Erika Musterfrau".into(),
+            email: "erika@example.com".into(),
+            role: MemberRole::Member,
+            joined_at: "2026-01-15".into(),
+        },
+        OrgMember {
+            id: "m3".into(),
+            name: "Johann Schmidt".into(),
+            email: "johann@example.com".into(),
+            role: MemberRole::Member,
+            joined_at: "2026-02-01".into(),
+        },
+        OrgMember {
+            id: "m4".into(),
+            name: "Anna Weber".into(),
+            email: "anna@example.com".into(),
+            role: MemberRole::Viewer,
+            joined_at: "2026-02-10".into(),
+        },
+    ]
+}
+
+/// Returns mock billing usage data.
+fn mock_usage() -> BillingUsage {
+    BillingUsage {
+        seats_used: 4,
+        seats_total: 25,
+        tokens_used: 847_000,
+        tokens_limit: 1_000_000,
+        billing_cycle_end: "2026-03-01".into(),
+    }
+}

src/pages/organization/mod.rs

@@ -0,0 +1,35 @@
+mod dashboard;
+mod pricing;
+
+pub use dashboard::*;
+pub use pricing::*;
+
+use dioxus::prelude::*;
+
+use crate::app::Route;
+use crate::components::sub_nav::{SubNav, SubNavItem};
+
+/// Shell layout for the Organization section.
+///
+/// Renders a horizontal tab bar (Pricing, Dashboard) above
+/// the child route outlet. Sits inside the main `AppShell` layout.
+#[component]
+pub fn OrgShell() -> Element {
+    let tabs = vec![
+        SubNavItem {
+            label: "Pricing",
+            route: Route::OrgPricingPage {},
+        },
+        SubNavItem {
+            label: "Dashboard",
+            route: Route::OrgDashboardPage {},
+        },
+    ];
+
+    rsx! {
+        div { class: "org-shell",
+            SubNav { items: tabs }
+            div { class: "shell-content", Outlet::<Route> {} }
+        }
+    }
+}

src/pages/organization/pricing.rs

@@ -0,0 +1,88 @@
+use dioxus::prelude::*;
+
+use crate::app::Route;
+use crate::components::{PageHeader, PricingCard};
+use crate::models::PricingPlan;
+
+/// Organization pricing page displaying three plan tiers.
+///
+/// Clicking "Get Started" on any plan navigates to the
+/// organization dashboard.
+#[component]
+pub fn OrgPricingPage() -> Element {
+    let navigator = use_navigator();
+    let plans = mock_plans();
+
+    rsx! {
+        section { class: "pricing-page",
+            PageHeader {
+                title: "Pricing".to_string(),
+                subtitle: "Choose the plan that fits your organization".to_string(),
+            }
+            div { class: "pricing-grid",
+                for plan in plans {
+                    PricingCard {
+                        key: "{plan.id}",
+                        plan,
+                        on_select: move |_| {
+                            navigator.push(Route::OrgDashboardPage {});
+                        },
+                    }
+                }
+            }
+        }
+    }
+}
+
+/// Returns mock pricing plans.
+fn mock_plans() -> Vec<PricingPlan> {
+    vec![
+        PricingPlan {
+            id: "starter".into(),
+            name: "Starter".into(),
+            price_eur: 49,
+            features: vec![
+                "Up to 5 users".into(),
+                "1 LLM provider".into(),
+                "100K tokens/month".into(),
+                "Community support".into(),
+                "Basic analytics".into(),
+            ],
+            highlighted: false,
+            max_seats: Some(5),
+        },
+        PricingPlan {
+            id: "team".into(),
+            name: "Team".into(),
+            price_eur: 199,
+            features: vec![
+                "Up to 25 users".into(),
+                "All LLM providers".into(),
+                "1M tokens/month".into(),
+                "Priority support".into(),
+                "Advanced analytics".into(),
+                "Custom MCP tools".into(),
+                "SSO integration".into(),
+            ],
+            highlighted: true,
+            max_seats: Some(25),
+        },
+        PricingPlan {
+            id: "enterprise".into(),
+            name: "Enterprise".into(),
+            price_eur: 499,
+            features: vec![
+                "Unlimited users".into(),
+                "All LLM providers".into(),
+                "Unlimited tokens".into(),
+                "Dedicated support".into(),
+                "Full observability".into(),
+                "Custom integrations".into(),
+                "SLA guarantee".into(),
+                "On-premise deployment".into(),
+            ],
+            highlighted: false,
+            max_seats: None,
+        },
+    ]
+}