Revamp navigation with org switcher and user menu, fix passkey login

Navigation changes: - Add org-switcher dropdown to sidebar showing user's orgs - Add user-menu dropdown with account settings and sign out - Make nav items dynamic based on org context - Move performance page to /dashboard/[slug]/performance - Add reports placeholder page at /dashboard/[slug]/reports - Remove admin link from sidebar (separate layout) - Update mobile nav to match sidebar changes - Install shadcn dropdown-menu and popover components Auth fix: - Mark login request as completed after passkey verification - Previously passkey auth didn't complete the login flow, requiring unnecessary email verification Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-10 15:45:03 +08:00
parent ddd7c0c03b
commit dd7b2ea8e4
34 changed files with 882 additions and 200 deletions
--- a/apps/api-server/src/router.ts
+++ b/apps/api-server/src/router.ts
@@ -153,6 +153,13 @@ const verifyAuthentication = os.auth.webauthn.verifyAuthentication
        message: "Authentication failed",
      });
    }
+
+    // Mark the login request as completed - passkey verification is equivalent to email verification
+    await context.db
+      .updateTable("login_requests")
+      .set({ completed_at: new Date() })
+      .where("id", "=", String(context.loginRequestId))
+      .execute();
  });

 // Me procedures
--- a/apps/publisher-dashboard/package.json
+++ b/apps/publisher-dashboard/package.json
@@ -30,7 +30,7 @@
  },
  "devDependencies": {
    "@internationalized/date": "^3.10.1",
-    "@lucide/svelte": "^0.562.0",
+    "@lucide/svelte": "^0.561.0",
    "@macalinao/eslint-config": "catalog:",
    "@macalinao/tsconfig": "catalog:",
    "@sveltejs/adapter-static": "^3.0.8",
--- a/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/app-sidebar.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-import { createQuery } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
 import { page } from "$app/stores";
-import { api } from "$lib/api/client.js";
 import { cn } from "$lib/utils.js";
+import OrgSwitcher from "./org-switcher.svelte";
+import UserMenu from "./user-menu.svelte";

 interface Props {
  class?: string;
@@ -10,15 +11,34 @@ interface Props {

 let { class: className }: Props = $props();

-// Fetch current user to check superuser status
-const userQuery = createQuery(() => ({
-  queryKey: ["me"],
-  queryFn: () => api.me.get(),
-}));
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<{ slug: string } | undefined>("orgContext");
+const currentSlug = $derived(orgContext?.slug);

-const isSuperuser = $derived(userQuery.data?.isSuperuser ?? false);
-
-const navItems = [
+// Nav items depend on whether we're in an org context
+const navItems = $derived.by(() => {
+  if (currentSlug) {
+    // In org context - org-specific navigation
+    return [
+      {
+        icon: "home",
+        href: `/dashboard/${currentSlug}`,
+        label: "Home",
+      },
+      {
+        icon: "chart",
+        href: `/dashboard/${currentSlug}/performance`,
+        label: "Performance",
+      },
+      {
+        icon: "document",
+        href: `/dashboard/${currentSlug}/reports`,
+        label: "Reports",
+      },
+    ];
+  }
+  // Outside org context - general navigation
+  return [
    {
      icon: "home",
      href: "/",
@@ -29,32 +49,8 @@ const navItems = [
      href: "/dashboard",
      label: "Organizations",
    },
-  {
-    icon: "chart",
-    href: "/performance",
-    label: "Performance",
-  },
-  {
-    icon: "document",
-    href: "/reports",
-    label: "Reports",
-  },
  ];
-
-const bottomItems = [
-  {
-    icon: "settings",
-    href: "/settings",
-    label: "Settings",
-  },
-];
-
-// Admin nav item (only shown for superusers)
-const adminItem = {
-  icon: "shield",
-  href: "/admin",
-  label: "Admin",
-};
+});
 </script>

 <aside
@@ -63,23 +59,9 @@ const adminItem = {
    className,
  )}
 >
-  <!-- App Icon -->
+  <!-- Org Switcher -->
  <div class="flex h-[94px] items-center justify-center">
-    <a
-      href="/"
-      aria-label="Home"
-      class="group flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-[#303035] to-[#26262c] shadow-sm transition-transform duration-200 hover:scale-105"
-    >
-      <svg
-        class="h-4 w-4 text-white transition-transform duration-200 group-hover:scale-110"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2.5"
-      >
-        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-    </a>
+    <OrgSwitcher />
  </div>

  <!-- Main Navigation -->
@@ -169,100 +151,10 @@ const adminItem = {
      </a>
    {/each}

-    <!-- Admin link (superusers only) -->
-    {#if isSuperuser}
-      {@const isActive = $page.url.pathname.startsWith(adminItem.href)}
-      <a
-        href={adminItem.href}
-        class={cn(
-          "group relative flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-          isActive
-            ? "bg-destructive/20 text-destructive"
-            : "text-sidebar-muted hover:bg-destructive/10 hover:text-destructive",
-        )}
-        aria-label={adminItem.label}
-        aria-current={isActive ? "page" : undefined}
-      >
-        {#if isActive}
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-            <path
-              fill-rule="evenodd"
-              d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        {:else}
-          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-            <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
-        {/if}
-
-        <!-- Tooltip -->
-        <span
-          class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
-        >
-          {adminItem.label}
-        </span>
-      </a>
-    {/if}
-
-    <!-- Bottom items -->
-    <div class="mt-auto flex flex-col items-center gap-3">
-      {#each bottomItems as item}
-        {@const isActive = $page.url.pathname === item.href}
-        <a
-          href={item.href}
-          class={cn(
-            "group relative flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-            isActive
-              ? "bg-sidebar-accent text-sidebar-foreground"
-              : "text-sidebar-muted hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
-          )}
-          aria-label={item.label}
-          aria-current={isActive ? "page" : undefined}
-        >
-          {#if item.icon === "settings"}
-            {#if isActive}
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
-                <path
-                  fill-rule="evenodd"
-                  d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            {:else}
-              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
-              </svg>
-            {/if}
-          {/if}
-
-          <span
-            class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-foreground px-2.5 py-1.5 text-xs font-medium text-background opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
-          >
-            {item.label}
-          </span>
-        </a>
-      {/each}
-    </div>
  </nav>

-  <!-- User Avatar -->
+  <!-- User Menu -->
  <div class="flex h-[80px] items-center justify-center">
-    <button
-      class="relative h-6 w-6 overflow-hidden rounded-full ring-1 ring-sidebar-border transition-transform duration-150 hover:scale-110"
-      aria-label="User menu"
-    >
-      <div
-        class="flex h-full w-full items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 text-[10px] font-semibold text-white"
-      >
-        JD
-      </div>
-    </button>
+    <UserMenu />
  </div>
 </aside>
--- a/apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/mobile-nav.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
 import { page } from "$app/stores";
+import { api } from "$lib/api/client";
 import { Button } from "$lib/components/ui/button";
 import { Separator } from "$lib/components/ui/separator";
 import * as Sheet from "$lib/components/ui/sheet";
@@ -13,19 +17,79 @@ let { class: className }: Props = $props();

 let open = $state(false);

-const navItems = [
-  { icon: "home", href: "/", label: "Home" },
-  { icon: "chart", href: "/performance", label: "Performance" },
-  { icon: "document", href: "/reports", label: "Reports" },
-];
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<
+  { slug: string; currentUserRole: string | null } | undefined
+>("orgContext");
+const currentSlug = $derived(orgContext?.slug);
+const currentUserRole = $derived(orgContext?.currentUserRole);

-const bottomItems = [
-  { icon: "settings", href: "/settings", label: "Settings" },
+// Fetch current user
+const userQuery = createQuery(() => ({
+  queryKey: ["me"],
+  queryFn: () => api.me.get(),
+}));
+
+const user = $derived(userQuery.data);
+
+// Generate initials from display name or email
+const initials = $derived.by(() => {
+  if (!user) {
+    return "??";
+  }
+  if (user.displayName) {
+    const parts = user.displayName.split(" ");
+    if (parts.length >= 2) {
+      return (
+        parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
+      ).toUpperCase();
+    }
+    return user.displayName.slice(0, 2).toUpperCase();
+  }
+  return user.email.slice(0, 2).toUpperCase();
+});
+
+// Nav items depend on whether we're in an org context
+const navItems = $derived.by(() => {
+  if (currentSlug) {
+    // In org context - org-specific navigation
+    return [
+      { icon: "home", href: `/dashboard/${currentSlug}`, label: "Home" },
+      {
+        icon: "chart",
+        href: `/dashboard/${currentSlug}/performance`,
+        label: "Performance",
+      },
+      {
+        icon: "document",
+        href: `/dashboard/${currentSlug}/reports`,
+        label: "Reports",
+      },
    ];
+  }
+  // Outside org context - general navigation
+  return [
+    { icon: "home", href: "/", label: "Home" },
+    { icon: "building", href: "/dashboard", label: "Organizations" },
+  ];
+});
+
+const queryClient = useQueryClient();

 function handleNavClick() {
  open = false;
 }
+
+async function handleSignOut() {
+  try {
+    await api.auth.logout();
+    queryClient.clear();
+    open = false;
+    goto("/login");
+  } catch (error) {
+    console.error("Failed to sign out:", error);
+  }
+}
 </script>

 <Sheet.Root bind:open>
@@ -86,35 +150,10 @@ function handleNavClick() {
                />
                <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
-            {/if}
-            {item.label}
-          </a>
-        {/each}
-      </div>
-
-      <Separator class="my-4" />
-
-      <div class="space-y-1">
-        {#each bottomItems as item}
-          {@const isActive = $page.url.pathname === item.href}
-          <a
-            href={item.href}
-            onclick={handleNavClick}
-            class={cn(
-              "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
-              isActive
-                ? "bg-accent text-foreground"
-                : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-            )}
-          >
-            {#if item.icon === "settings"}
+            {:else if item.icon === "building"}
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
-                <circle cx="12" cy="12" r="3" />
-                <path
-                  d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                />
+                <path d="M3 21h18M5 21V5a2 2 0 012-2h10a2 2 0 012 2v16" stroke-linecap="round" stroke-linejoin="round" />
+                <path d="M9 6.5h1.5M9 10h1.5M9 13.5h1.5M13.5 6.5H15M13.5 10H15M13.5 13.5H15M9 21v-4h6v4" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            {/if}
            {item.label}
@@ -126,14 +165,47 @@ function handleNavClick() {
      <div class="mt-auto pt-4">
        <Separator class="mb-4" />
        <div class="flex items-center gap-3 rounded-lg px-3 py-2">
-          <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-chart-1 to-chart-2 text-xs font-semibold text-white">
-            JD
+          {#if user?.avatarUrl}
+            <img src={user.avatarUrl} alt="" class="h-9 w-9 rounded-full object-cover" />
+          {:else}
+            <div class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-600 text-xs font-semibold text-white">
+              {initials}
            </div>
+          {/if}
          <div class="flex-1">
-            <p class="text-sm font-medium text-foreground">John Doe</p>
-            <p class="text-xs text-muted-foreground">john@example.com</p>
+            <p class="text-sm font-medium text-foreground">{user?.displayName ?? user?.email ?? "Loading..."}</p>
+            {#if currentUserRole}
+              <p class="text-xs capitalize text-muted-foreground">{currentUserRole}</p>
+            {:else if user?.email && user?.displayName}
+              <p class="text-xs text-muted-foreground">{user.email}</p>
+            {/if}
          </div>
        </div>
+
+        <div class="mt-2 space-y-1">
+          <a
+            href="/account"
+            onclick={handleNavClick}
+            class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
+              <circle cx="12" cy="7" r="4" />
+            </svg>
+            Account Settings
+          </a>
+          <button
+            onclick={handleSignOut}
+            class="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10"
+          >
+            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+              <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke-linecap="round" stroke-linejoin="round" />
+              <polyline points="16,17 21,12 16,7" stroke-linecap="round" stroke-linejoin="round" />
+              <line x1="21" y1="12" x2="9" y2="12" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+            Sign out
+          </button>
+        </div>
      </div>
    </nav>
  </Sheet.Content>
--- a/apps/publisher-dashboard/src/lib/components/layout/org-switcher.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/org-switcher.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+import { createQuery } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
+import { api } from "$lib/api/client";
+import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+import { cn } from "$lib/utils.js";
+
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<{ slug: string } | undefined>("orgContext");
+const currentSlug = $derived(orgContext?.slug);
+
+// Fetch user's orgs
+const orgsQuery = createQuery(() => ({
+  queryKey: ["orgs"],
+  queryFn: () => api.orgs.list(),
+}));
+
+const orgs = $derived(orgsQuery.data ?? []);
+
+function handleOrgSelect(slug: string) {
+  goto(`/dashboard/${slug}`);
+}
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        aria-label="Switch organization"
+        class="group flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-b from-[#303035] to-[#26262c] shadow-sm transition-transform duration-200 hover:scale-105"
+      >
+        <svg
+          class="h-4 w-4 text-white transition-transform duration-200 group-hover:scale-110"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.5"
+        >
+          <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-56" side="right" sideOffset={8}>
+    <DropdownMenu.Label>Organizations</DropdownMenu.Label>
+    <DropdownMenu.Separator />
+    {#if orgsQuery.isPending}
+      <DropdownMenu.Item disabled>Loading...</DropdownMenu.Item>
+    {:else if orgs.length === 0}
+      <DropdownMenu.Item disabled>No organizations</DropdownMenu.Item>
+    {:else}
+      {#each orgs as org}
+        {@const isActive = currentSlug === org.slug}
+        <DropdownMenu.Item
+          onSelect={() => handleOrgSelect(org.slug)}
+          class={cn(isActive && "bg-accent")}
+        >
+          <div class="flex items-center gap-2">
+            {#if org.logoUrl}
+              <img src={org.logoUrl} alt="" class="h-5 w-5 rounded" />
+            {:else}
+              <div class="flex h-5 w-5 items-center justify-center rounded bg-muted text-[10px] font-medium">
+                {org.displayName.charAt(0).toUpperCase()}
+              </div>
+            {/if}
+            <span class="flex-1 truncate">{org.displayName}</span>
+            {#if isActive}
+              <svg class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20,6 9,17 4,12" stroke-linecap="round" stroke-linejoin="round" />
+              </svg>
+            {/if}
+          </div>
+        </DropdownMenu.Item>
+      {/each}
+    {/if}
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={() => goto("/dashboard/new")}>
+      <div class="flex items-center gap-2">
+        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="12" y1="5" x2="12" y2="19" stroke-linecap="round" />
+          <line x1="5" y1="12" x2="19" y2="12" stroke-linecap="round" />
+        </svg>
+        <span>Create New Organization</span>
+      </div>
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
--- a/apps/publisher-dashboard/src/lib/components/layout/user-menu.svelte
+++ b/apps/publisher-dashboard/src/lib/components/layout/user-menu.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+import { createQuery, useQueryClient } from "@tanstack/svelte-query";
+import { getContext } from "svelte";
+import { goto } from "$app/navigation";
+import { api } from "$lib/api/client";
+import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+
+// Get optional org context (undefined outside org routes)
+const orgContext = getContext<{ currentUserRole: string | null } | undefined>(
+  "orgContext",
+);
+const currentUserRole = $derived(orgContext?.currentUserRole);
+
+// Fetch current user
+const userQuery = createQuery(() => ({
+  queryKey: ["me"],
+  queryFn: () => api.me.get(),
+}));
+
+const user = $derived(userQuery.data);
+
+// Generate initials from display name or email
+const initials = $derived.by(() => {
+  if (!user) {
+    return "??";
+  }
+  if (user.displayName) {
+    const parts = user.displayName.split(" ");
+    if (parts.length >= 2) {
+      return (
+        parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
+      ).toUpperCase();
+    }
+    return user.displayName.slice(0, 2).toUpperCase();
+  }
+  return user.email.slice(0, 2).toUpperCase();
+});
+
+const queryClient = useQueryClient();
+
+async function handleSignOut() {
+  try {
+    await api.auth.logout();
+    // Clear all cached queries
+    queryClient.clear();
+    goto("/login");
+  } catch (error) {
+    console.error("Failed to sign out:", error);
+  }
+}
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        class="relative h-6 w-6 overflow-hidden rounded-full ring-1 ring-sidebar-border transition-transform duration-150 hover:scale-110"
+        aria-label="User menu"
+      >
+        {#if user?.avatarUrl}
+          <img src={user.avatarUrl} alt="" class="h-full w-full object-cover" />
+        {:else}
+          <div
+            class="flex h-full w-full items-center justify-center bg-gradient-to-br from-amber-500 to-orange-600 text-[10px] font-semibold text-white"
+          >
+            {initials}
+          </div>
+        {/if}
+      </button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content class="w-64" side="right" sideOffset={8}>
+    <!-- User info header -->
+    <div class="flex items-center gap-3 p-2">
+      {#if user?.avatarUrl}
+        <img src={user.avatarUrl} alt="" class="h-10 w-10 rounded-full object-cover" />
+      {:else}
+        <div
+          class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-600 text-sm font-semibold text-white"
+        >
+          {initials}
+        </div>
+      {/if}
+      <div class="flex flex-col">
+        <span class="text-sm font-medium">{user?.displayName ?? user?.email ?? "Loading..."}</span>
+        {#if currentUserRole}
+          <span class="text-xs capitalize text-muted-foreground">{currentUserRole}</span>
+        {:else if user?.email && user?.displayName}
+          <span class="text-xs text-muted-foreground">{user.email}</span>
+        {/if}
+      </div>
+    </div>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={() => goto("/account")}>
+      <svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="12" cy="7" r="4" />
+      </svg>
+      Account Settings
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onSelect={handleSignOut} variant="destructive">
+      <svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
+        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke-linecap="round" stroke-linejoin="round" />
+        <polyline points="16,17 21,12 16,7" stroke-linecap="round" stroke-linejoin="round" />
+        <line x1="21" y1="12" x2="9" y2="12" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+      Sign out
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable([]),
+  ...restProps
+}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import CheckIcon from "@lucide/svelte/icons/check";
+import MinusIcon from "@lucide/svelte/icons/minus";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  checked = $bindable(false),
+  indeterminate = $bindable(false),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+  children?: Snippet;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if indeterminate}
+				<MinusIcon class="size-4" />
+			{:else}
+				<CheckIcon class={cn("size-4", !checked && "text-transparent")} />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  sideOffset = 4,
+  portalProps,
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<
+    ComponentProps<typeof DropdownMenuPortal>
+  >;
+} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  ...restProps
+}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  variant = "default",
+  ...restProps
+}: DropdownMenuPrimitive.ItemProps & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-[variant=destructive]:data-highlighted:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  value = $bindable(),
+  ...restProps
+}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+import CircleIcon from "@lucide/svelte/icons/circle";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn, type WithoutChild } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children: childrenProp,
+  ...restProps
+}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="pointer-events-none absolute start-2 flex size-3.5 items-center justify-center"
+		>
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import type { HTMLAttributes } from "svelte/elements";
+import { cn, type WithElementRef } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  children,
+  ...restProps
+}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn(
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		className
+	)}
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  inset,
+  children,
+  ...restProps
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  inset?: boolean;
+} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto size-4" />
+</DropdownMenuPrimitive.SubTrigger>
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let {
+  ref = $bindable(null),
+  ...restProps
+}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps =
+  $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts
+++ b/apps/publisher-dashboard/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+
+export {
+  CheckboxGroup,
+  CheckboxItem,
+  Content,
+  Portal,
+  Root as DropdownMenu,
+  CheckboxGroup as DropdownMenuCheckboxGroup,
+  CheckboxItem as DropdownMenuCheckboxItem,
+  Content as DropdownMenuContent,
+  Portal as DropdownMenuPortal,
+  Group as DropdownMenuGroup,
+  Item as DropdownMenuItem,
+  Label as DropdownMenuLabel,
+  RadioGroup as DropdownMenuRadioGroup,
+  RadioItem as DropdownMenuRadioItem,
+  Separator as DropdownMenuSeparator,
+  Shortcut as DropdownMenuShortcut,
+  Sub as DropdownMenuSub,
+  SubContent as DropdownMenuSubContent,
+  SubTrigger as DropdownMenuSubTrigger,
+  Trigger as DropdownMenuTrigger,
+  GroupHeading as DropdownMenuGroupHeading,
+  Group,
+  GroupHeading,
+  Item,
+  Label,
+  RadioGroup,
+  RadioItem,
+  Root,
+  Separator,
+  Shortcut,
+  Sub,
+  SubContent,
+  SubTrigger,
+  Trigger,
+};
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/index.ts
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,19 @@
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Portal from "./popover-portal.svelte";
+import Trigger from "./popover-trigger.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  Close,
+  Portal,
+  //
+  Root as Popover,
+  Content as PopoverContent,
+  Trigger as PopoverTrigger,
+  Close as PopoverClose,
+  Portal as PopoverPortal,
+};
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/popover-close.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps =
+  $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/popover-content.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+import type { ComponentProps } from "svelte";
+import { Popover as PopoverPrimitive } from "bits-ui";
+import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+import PopoverPortal from "./popover-portal.svelte";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  sideOffset = 4,
+  align = "center",
+  portalProps,
+  ...restProps
+}: PopoverPrimitive.ContentProps & {
+  portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/popover-portal.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/popover-trigger.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+import { cn } from "$lib/utils.js";
+
+let {
+  ref = $bindable(null),
+  class: className,
+  ...restProps
+}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn("", className)}
+	{...restProps}
+/>
--- a/apps/publisher-dashboard/src/lib/components/ui/popover/popover.svelte
+++ b/apps/publisher-dashboard/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+import { Popover as PopoverPrimitive } from "bits-ui";
+
+let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps =
+  $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
--- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/performance/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/performance/+page.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
+import { getContext } from "svelte";
 import FrequentFilters from "$lib/components/dashboard/frequent-filters.svelte";
 import MetricCard from "$lib/components/dashboard/metric-card.svelte";
 import PeakTrafficChart from "$lib/components/dashboard/peak-traffic-chart.svelte";
 import PerformanceTable from "$lib/components/dashboard/performance-table.svelte";
 import DashboardLayout from "$lib/components/layout/dashboard-layout.svelte";

+// Get org context (for future filtering by org)
+const orgContext = getContext<{ slug: string }>("orgContext");
+const slug = $derived(orgContext?.slug);
+
 const metrics = [
  {
    label: "Average daily revenue",
--- a/apps/publisher-dashboard/src/routes/dashboard/[slug]/reports/+page.svelte
+++ b/apps/publisher-dashboard/src/routes/dashboard/[slug]/reports/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+import DashboardLayout from "$lib/components/layout/dashboard-layout.svelte";
+</script>
+
+<svelte:head>
+  <title>Reports - Publisher Dashboard</title>
+</svelte:head>
+
+<DashboardLayout title="Reports">
+  <div class="flex h-[60vh] items-center justify-center">
+    <div class="text-center">
+      <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
+        <svg class="h-8 w-8 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" stroke-linecap="round" stroke-linejoin="round" />
+          <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </div>
+      <h2 class="mb-2 text-xl font-semibold text-foreground">Coming Soon</h2>
+      <p class="text-sm text-muted-foreground">
+        Advanced reporting features are currently in development.
+      </p>
+    </div>
+  </div>
+</DashboardLayout>
--- a/apps/publisher-dashboard/src/routes/performance/+layout.ts
+++ b/apps/publisher-dashboard/src/routes/performance/+layout.ts
@@ -1,2 +0,0 @@
-export const ssr = false;
-export const prerender = true;
--- a/bun.lock
+++ b/bun.lock
@@ -91,7 +91,7 @@
      },
      "devDependencies": {
        "@internationalized/date": "^3.10.1",
-        "@lucide/svelte": "^0.562.0",
+        "@lucide/svelte": "^0.561.0",
        "@macalinao/eslint-config": "catalog:",
        "@macalinao/tsconfig": "catalog:",
        "@sveltejs/adapter-static": "^3.0.8",
@@ -334,7 +334,7 @@

    "@levischuck/tiny-cbor": ["@levischuck/tiny-cbor@0.2.11", "", {}, "sha512-llBRm4dT4Z89aRsm6u2oEZ8tfwL/2l6BwpZ7JcyieouniDECM5AqNgr/y08zalEIvW3RSK4upYyybDcmjXqAow=="],

-    "@lucide/svelte": ["@lucide/svelte@0.562.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-wDMULwtTFN2Sc/TFBm6gfuVCNb4Y5P9LDrwxNnUbV52+IEU7NXZmvxwXoz+vrrpad6Xupq+Hw5eUlqIHEGhouw=="],
+    "@lucide/svelte": ["@lucide/svelte@0.561.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-vofKV2UFVrKE6I4ewKJ3dfCXSV6iP6nWVmiM83MLjsU91EeJcEg7LoWUABLp/aOTxj1HQNbJD1f3g3L0JQgH9A=="],

    "@macalinao/biome-config": ["@macalinao/biome-config@0.1.7", "", { "peerDependencies": { "@biomejs/biome": "^2.3.10" } }, "sha512-JijaB/REJr6D3fGV36d1XGsf2WFofgnMS1WbOYcNJCQpic2XmFALV7GNL28z7rDCN3/DeSovPuW/1yImce7kPA=="],