@payez/next-mvp 3.5.0 → 3.6.1

package/src/api-handlers/admin/stats.ts

@@ -0,0 +1,240 @@
+/**
+ * Admin Stats API Handler
+ *
+ * Aggregates dashboard statistics from users, Redis sessions, and audit logs.
+ * Uses service account HMAC auth for Vibe API requests.
+ *
+ * @version 1.0
+ * @requires Admin role (vibe_app_admin or payez_admin)
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { getStartupIDPConfig } from '../../lib/startup-init';
+import { getRedis } from '../../lib/redis';
+import { ADMIN_ROLES } from '../../lib/roles';
+
+interface VibeRequestOptions {
+  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+  body?: unknown;
+}
+
+async function checkAdminRole(getAuthOptions: () => Promise<any>): Promise<{ isAdmin: boolean; error?: NextResponse }> {
+  const authOptions = await getAuthOptions();
+  const session = await getServerSession(authOptions) as any;
+
+  if (!session?.user) {
+    return {
+      isAdmin: false,
+      error: NextResponse.json({ success: false, error: 'Please sign in' }, { status: 401 }),
+    };
+  }
+
+  const userRoles = (session.user?.roles as string[]) || [];
+  const hasAdminRole = ADMIN_ROLES.some(role => userRoles.includes(role));
+
+  if (!hasAdminRole) {
+    return {
+      isAdmin: false,
+      error: NextResponse.json({ success: false, error: 'Admin access required' }, { status: 403 }),
+    };
+  }
+
+  return { isAdmin: true };
+}
+
+async function vibeServiceRequest<T = unknown>(
+  endpoint: string,
+  options: VibeRequestOptions
+): Promise<{ ok: boolean; status: number; data: T | null; error?: string }> {
+  const idpUrl = process.env.NEXT_PUBLIC_IDP_URL || process.env.IDP_URL;
+  const clientId = process.env.VIBE_CLIENT_ID;
+  const signingKey = process.env.VIBE_HMAC_KEY;
+
+  if (!idpUrl || !clientId || !signingKey) {
+    return { ok: false, status: 500, data: null, error: 'Vibe not configured' };
+  }
+
+  const timestamp = Math.floor(Date.now() / 1000);
+  const stringToSign = `${timestamp}|${options.method}|${endpoint}`;
+
+  const crypto = await import('crypto');
+  const signature = crypto
+    .createHmac('sha256', Buffer.from(signingKey, 'base64'))
+    .update(stringToSign)
+    .digest('base64');
+
+  const proxyUrl = `${idpUrl}/api/vibe/proxy`;
+
+  const idpConfig = getStartupIDPConfig();
+  const idpClientId = idpConfig?.clientSlug || idpConfig?.clientId;
+
+  try {
+    const res = await fetch(proxyUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Vibe-Client-Id': clientId,
+        'X-Vibe-Timestamp': String(timestamp),
+        'X-Vibe-Signature': signature,
+        ...(idpClientId && { 'X-Client-Id': idpClientId }),
+      },
+      body: JSON.stringify({
+        endpoint,
+        method: options.method,
+        data: options.body ?? null,
+      }),
+      cache: 'no-store',
+    });
+
+    if (res.status === 204) return { ok: true, status: 204, data: null };
+    if (!res.ok) {
+      const errorText = await res.text();
+      return { ok: false, status: res.status, data: null, error: errorText };
+    }
+
+    const body = await res.json();
+    return { ok: true, status: res.status, data: body };
+  } catch (error) {
+    return { ok: false, status: 0, data: null, error: String(error) };
+  }
+}
+
+export interface AdminStatsHandlerConfig {
+  getAuthOptions: () => Promise<any>;
+  appSlug?: string;
+}
+
+/**
+ * GET /api/admin/stats - Dashboard statistics
+ * Aggregates users + tier breakdown, active Redis sessions, and recent audit activity.
+ */
+export function createStatsHandler(config: AdminStatsHandlerConfig) {
+  const getSessionPrefix = () => {
+    const appSlug = config.appSlug || process.env.APP_SLUG || process.env.CLIENT_ID || 'app';
+    return `${appSlug}:sess:`;
+  };
+
+  return {
+    async GET(_request: NextRequest) {
+      const adminCheck = await checkAdminRole(config.getAuthOptions);
+      if (adminCheck.error) return adminCheck.error;
+
+      try {
+        // Fetch from 3 sources in parallel
+        const [usersResult, sessionCount, auditResult] = await Promise.allSettled([
+          // 1. Users + tier breakdown via HMAC proxy (Vibe collection query)
+          vibeServiceRequest<any>('/v1/collections/vibe_app/tables/users/query', {
+            method: 'POST',
+            body: { page: 1, pageSize: 500, orderBy: 'created_at', orderDirection: 'desc' },
+          }),
+
+          // 2. Active sessions from Redis
+          (async () => {
+            const redis = getRedis();
+            const sessionPrefix = getSessionPrefix();
+            const sessionKeys: string[] = [];
+            let cursor = '0';
+            do {
+              const [newCursor, keys] = await redis.scan(cursor, 'MATCH', `${sessionPrefix}*`, 'COUNT', 100);
+              cursor = newCursor;
+              sessionKeys.push(...keys.filter((k: string) => !k.includes(':ver:')));
+            } while (cursor !== '0');
+            return sessionKeys.length;
+          })(),
+
+          // 3. Recent audit activity via HMAC proxy
+          vibeServiceRequest<any>('/v1/audit?pageSize=10&sortDir=desc', { method: 'GET' }),
+        ]);
+
+        // Parse users — deduplicate by user_id
+        let totalUsers = 0;
+        let tierBreakdown: Record<string, number> = {};
+        if (usersResult.status === 'fulfilled' && usersResult.value.ok && usersResult.value.data) {
+          const data = usersResult.value.data;
+          const rawUsers = data.data || data.documents || data.users || [];
+
+          // Deduplicate by user_id (keeps latest document_id)
+          const userMap = new Map();
+          for (const u of rawUsers) {
+            const uid = u.user_id || u.id || u.document_id;
+            const existing = userMap.get(uid);
+            if (!existing || (u.document_id || '') > (existing.document_id || '')) {
+              userMap.set(uid, u);
+            }
+          }
+          const uniqueUsers = Array.from(userMap.values());
+          totalUsers = uniqueUsers.length;
+
+          // Build tier breakdown from deduplicated users (unless API provides one)
+          tierBreakdown = data.tierBreakdown || data.tiers || {};
+          if (Object.keys(tierBreakdown).length === 0) {
+            for (const user of uniqueUsers) {
+              const tier = user.tier || 'free';
+              tierBreakdown[tier] = (tierBreakdown[tier] || 0) + 1;
+            }
+          }
+        }
+
+        // Parse active sessions count
+        let activeSessions = 0;
+        if (sessionCount.status === 'fulfilled') {
+          activeSessions = sessionCount.value;
+        }
+
+        // Parse audit events for recent activity
+        let recentActivity: any[] = [];
+        if (auditResult.status === 'fulfilled' && auditResult.value.ok && auditResult.value.data) {
+          const data = auditResult.value.data;
+
+          // Handle multiple possible response shapes
+          let events: any[] = [];
+          if (Array.isArray(data)) {
+            events = data;
+          } else if (Array.isArray(data.data)) {
+            events = data.data;
+          } else if (Array.isArray(data.entries)) {
+            events = data.entries;
+          } else if (Array.isArray(data.items)) {
+            events = data.items;
+          } else if (Array.isArray(data.documents)) {
+            events = data.documents;
+          } else if (data.success && Array.isArray(data.results)) {
+            events = data.results;
+          }
+
+          recentActivity = events.slice(0, 5).map((e: any) => ({
+            id: e.audit_log_id || e.id || e.document_id,
+            type: e.category || e.type || 'admin',
+            action: e.action || e.event || e.message || 'Unknown action',
+            actor: e.admin_email || e.actor || e.user || e.actor_email || 'System',
+            target: e.target_type ? `${e.target_type}:${e.target_id}` : (e.target || e.target_user),
+            details: e.description || e.details,
+            timestamp: e.created_at || e.timestamp || e.date,
+            success: e.is_success ?? e.success ?? true,
+          }));
+        }
+
+        // Calculate tier percentages
+        const tiers = Object.entries(tierBreakdown).map(([name, count]) => ({
+          name,
+          count: count as number,
+          pct: totalUsers > 0 ? Math.round(((count as number) / totalUsers) * 100) : 0,
+        }));
+
+        return NextResponse.json({
+          totalUsers,
+          activeSessions,
+          tiers,
+          recentActivity,
+        });
+      } catch (error: any) {
+        console.error('[admin/stats] Error:', error);
+        return NextResponse.json(
+          { error: error.message || 'Internal error' },
+          { status: 500 }
+        );
+      }
+    },
+  };
+}

package/src/auth/utils/idp-client.ts

@@ -187,6 +187,7 @@ export async function idpOAuthCallback(oauthData: {
         access_token: oauthData.accessToken || '',
         refresh_token: oauthData.refreshToken || '',
         expires_at: oauthData.expiresAt || 0,
+        client_id: clientId,
       }),
     });
 

package/src/components/account/MobileNavDrawer.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { useSession, signIn } from 'next-auth/react';
+import { usePathname } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import { X } from 'lucide-react';
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+export interface NavSection {
+  title?: string;
+  items: Array<{
+    label: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: () => void;
+  }>;
+}
+
+export interface MobileNavDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  navItems: NavItem[];
+  /** Extra sections like Admin, rendered after nav items with optional title */
+  customSections?: NavSection[];
+  /** Base path for account link (default: '/account') */
+  basePath?: string;
+  /** Custom sign-in handler (default: next-auth signIn) */
+  onSignIn?: () => void;
+  /** Callback URL after sign in (default: '/dashboard') */
+  signInCallbackUrl?: string;
+  /** Custom unauthenticated actions (replaces default Login + Start Free buttons) */
+  unauthActions?: React.ReactNode;
+  /** Custom authenticated footer (replaces default "Account Settings" link) */
+  authFooter?: React.ReactNode;
+}
+
+export function MobileNavDrawer({
+  isOpen,
+  onClose,
+  navItems,
+  customSections,
+  basePath = '/account',
+  onSignIn,
+  signInCallbackUrl = '/dashboard',
+  unauthActions,
+  authFooter,
+}: MobileNavDrawerProps) {
+  const { data: session } = useSession();
+  const pathname = usePathname();
+  const isAuthenticated = !!session?.user;
+
+  const isActiveRoute = useCallback(
+    (href: string) => pathname?.startsWith(href) ?? false,
+    [pathname],
+  );
+
+  // Close on Escape key
+  useEffect(() => {
+    function handleEscape(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape);
+      return () => document.removeEventListener('keydown', handleEscape);
+    }
+  }, [isOpen, onClose]);
+
+  // Lock body scroll when open
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = '';
+      };
+    }
+  }, [isOpen]);
+
+  const handleSignIn = () => {
+    onClose();
+    if (onSignIn) {
+      onSignIn();
+    } else {
+      signIn(undefined, { callbackUrl: signInCallbackUrl });
+    }
+  };
+
+  const handleSectionItemClick = (item: NavSection['items'][number]) => {
+    onClose();
+    if (item.onClick) {
+      item.onClick();
+    }
+  };
+
+  // Derive display initial from name or email
+  const userName = (session?.user as any)?.name;
+  const userEmail = session?.user?.email;
+  const displaySource = userName || userEmail;
+  const userInitial = displaySource?.charAt(0).toUpperCase() || '?';
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`
+          fixed inset-0 bg-black/50 backdrop-blur-sm z-40 lg:hidden
+          transition-opacity duration-300
+          ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}
+        `}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      {/* Slide-out Drawer */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Navigation menu"
+        aria-expanded={isOpen}
+        className={`
+          fixed top-0 right-0 bottom-0 w-80 max-w-[85vw]
+          bg-white dark:bg-slate-900
+          shadow-[-8px_0_32px_rgba(0,0,0,0.15)]
+          dark:shadow-[-8px_0_32px_rgba(0,0,0,0.4)]
+          z-50 lg:hidden
+          overflow-y-auto
+          transition-transform duration-300 ease-out
+          ${isOpen ? 'translate-x-0' : 'translate-x-full'}
+        `}
+      >
+        {/* Drawer Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10">
+          <span className="text-lg font-semibold text-gray-900 dark:text-white">
+            Menu
+          </span>
+          <button
+            onClick={onClose}
+            className="
+              p-2 rounded-xl
+              text-gray-400 hover:text-gray-900
+              dark:hover:text-white
+              hover:bg-gray-100 dark:hover:bg-white/10
+              transition-colors
+            "
+            aria-label="Close menu"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* User Info (if authenticated) */}
+        {isAuthenticated && session?.user && (
+          <div className="p-4 border-b border-gray-200 dark:border-white/10">
+            <div className="flex items-center gap-3">
+              {session.user.image ? (
+                <Image
+                  src={session.user.image}
+                  alt=""
+                  width={48}
+                  height={48}
+                  className="w-12 h-12 rounded-full"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-lg">
+                  {userInitial}
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                {userName && (
+                  <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">
+                    {userName}
+                  </p>
+                )}
+                {userEmail && (
+                  <p className="text-xs text-gray-500 dark:text-slate-400 truncate">
+                    {userEmail}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Navigation Items */}
+        <div className="p-2">
+          {navItems.map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              onClick={onClose}
+              className={`
+                flex items-center gap-3 px-4 py-3.5 rounded-xl
+                transition-colors duration-200
+                ${isActiveRoute(item.href)
+                  ? 'bg-blue-500/10 text-blue-500'
+                  : 'text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-white/10'
+                }
+              `}
+            >
+              {item.icon && <span className="text-xl">{item.icon}</span>}
+              <span className="font-medium">{item.label}</span>
+              {isActiveRoute(item.href) && (
+                <span className="ml-auto w-2 h-2 rounded-full bg-blue-500" />
+              )}
+            </Link>
+          ))}
+        </div>
+
+        {/* Custom Sections */}
+        {customSections?.map((section, sectionIndex) => (
+          <div
+            key={sectionIndex}
+            className="p-2 border-t border-gray-200 dark:border-white/10"
+          >
+            {section.title && (
+              <p className="px-4 py-2 text-xs font-semibold text-gray-500 dark:text-slate-400 uppercase tracking-wider">
+                {section.title}
+              </p>
+            )}
+            {section.items.map((item, itemIndex) =>
+              item.href ? (
+                <Link
+                  key={itemIndex}
+                  href={item.href}
+                  onClick={onClose}
+                  className="
+                    flex items-center gap-3 px-4 py-3 rounded-xl
+                    text-gray-900 dark:text-white
+                    hover:bg-gray-100 dark:hover:bg-white/10
+                    transition-colors
+                  "
+                >
+                  {item.icon && <span className="text-xl">{item.icon}</span>}
+                  <span className="font-medium">{item.label}</span>
+                </Link>
+              ) : (
+                <button
+                  key={itemIndex}
+                  onClick={() => handleSectionItemClick(item)}
+                  className="
+                    flex items-center gap-3 px-4 py-3 rounded-xl w-full text-left
+                    text-gray-900 dark:text-white
+                    hover:bg-gray-100 dark:hover:bg-white/10
+                    transition-colors
+                  "
+                >
+                  {item.icon && <span className="text-xl">{item.icon}</span>}
+                  <span className="font-medium">{item.label}</span>
+                </button>
+              ),
+            )}
+          </div>
+        ))}
+
+        {/* Auth Actions */}
+        <div className="p-4 mt-auto border-t border-gray-200 dark:border-white/10">
+          {!isAuthenticated ? (
+            unauthActions ?? (
+              <div className="space-y-3">
+                <button
+                  onClick={handleSignIn}
+                  className="
+                    w-full px-4 py-3 rounded-xl
+                    text-blue-500 font-semibold
+                    border border-blue-500/30
+                    hover:bg-blue-500/10
+                    transition-colors
+                  "
+                >
+                  Login
+                </button>
+              </div>
+            )
+          ) : (
+            authFooter ?? (
+              <Link
+                href={basePath}
+                onClick={onClose}
+                className="
+                  flex items-center justify-center gap-2
+                  w-full px-4 py-3 rounded-xl
+                  text-gray-500 dark:text-slate-400 font-medium
+                  hover:bg-gray-100 dark:hover:bg-white/10
+                  transition-colors
+                "
+              >
+                Account Settings
+              </Link>
+            )
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/components/account/UserAvatarMenu.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { useSession, signOut } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 import { User, Settings, Shield, LogOut } from 'lucide-react';
 
 export interface UserAvatarMenuProps {
@@ -119,12 +120,23 @@ export function UserAvatarMenu({
       {/* Avatar trigger button */}
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center justify-center h-10 w-10 rounded-full bg-[#349AD5] text-white font-semibold text-lg hover:bg-[#2980b9] transition-colors focus:outline-none focus:ring-2 focus:ring-[#349AD5] focus:ring-offset-2 dark:focus:ring-offset-slate-900"
+        className="flex items-center justify-center h-10 w-10 rounded-full overflow-hidden bg-blue-500 text-white font-semibold text-lg hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900"
         aria-label="User menu"
         aria-expanded={isOpen}
         aria-haspopup="true"
       >
-        {userInitial}
+        {session.user.image ? (
+          <Image
+            src={session.user.image}
+            alt=""
+            width={40}
+            height={40}
+            className="w-10 h-10 rounded-full object-cover"
+            unoptimized
+          />
+        ) : (
+          userInitial
+        )}
       </button>
 
       {/* Dropdown menu */}
@@ -138,21 +150,39 @@ export function UserAvatarMenu({
         >
           {/* User identity label */}
           <div className="px-4 py-3 border-b border-gray-200 dark:border-slate-700">
-            {userName && (
-              <p className="text-sm font-medium text-gray-700 dark:text-slate-200 truncate">
-                {userName}
-              </p>
-            )}
-            {userEmail && (
-              <p className="text-sm text-gray-500 dark:text-slate-400 truncate">
-                {userEmail}
-              </p>
-            )}
-            {!userName && !userEmail && (
-              <p className="text-sm text-gray-500 dark:text-slate-400">
-                Signed in
-              </p>
-            )}
+            <div className="flex items-center gap-3">
+              {session.user.image ? (
+                <Image
+                  src={session.user.image}
+                  alt=""
+                  width={32}
+                  height={32}
+                  className="w-8 h-8 rounded-full flex-shrink-0"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white font-semibold text-sm flex-shrink-0">
+                  {userInitial}
+                </div>
+              )}
+              <div className="min-w-0">
+                {userName && (
+                  <p className="text-sm font-medium text-gray-700 dark:text-slate-200 truncate">
+                    {userName}
+                  </p>
+                )}
+                {userEmail && (
+                  <p className="text-sm text-gray-500 dark:text-slate-400 truncate">
+                    {userEmail}
+                  </p>
+                )}
+                {!userName && !userEmail && (
+                  <p className="text-sm text-gray-500 dark:text-slate-400">
+                    Signed in
+                  </p>
+                )}
+              </div>
+            </div>
           </div>
 
           {/* Menu items */}

package/src/components/account/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 /**
  * Account Components for @payez/next-mvp
  *
@@ -6,3 +8,6 @@
 
 export { UserAvatarMenu } from './UserAvatarMenu';
 export type { UserAvatarMenuProps } from './UserAvatarMenu';
+
+export { MobileNavDrawer } from './MobileNavDrawer';
+export type { MobileNavDrawerProps, NavItem, NavSection } from './MobileNavDrawer';

package/src/index.ts

@@ -29,8 +29,8 @@ export { isUnauthenticatedRoute, configurePublicRoutes, getRouteConfig } from '.
 export { createMvpMiddleware } from './middleware/create-middleware';
 
 // Account Components
-export { UserAvatarMenu } from './components/account';
-export type { UserAvatarMenuProps } from './components/account';
+export { UserAvatarMenu, MobileNavDrawer } from './components/account';
+export type { UserAvatarMenuProps, MobileNavDrawerProps, NavItem, NavSection } from './components/account';
 
 // Admin Logging & Analytics (client-side components and hooks)
 export {