@payez/next-mvp 3.0.0

package/src/components/admin/StatsTab.tsx

@@ -0,0 +1,379 @@
+/**
+ * =============================================================================
+ * VIBE ADMIN STATS TAB
+ * =============================================================================
+ *
+ * Generic dashboard stats overview tab.
+ * Shows high-level metrics about users, sessions, and system health.
+ *
+ * =============================================================================
+ */
+
+'use client';
+
+import React, { useState, useEffect, useCallback, ReactNode } from 'react';
+import {
+  Users,
+  Activity,
+  Clock,
+  TrendingUp,
+  Shield,
+  Server,
+  type LucideIcon,
+} from 'lucide-react';
+
+// -----------------------------------------------------------------------------
+// TYPES
+// -----------------------------------------------------------------------------
+
+export interface StatCard {
+  id: string;
+  label: string;
+  value: string | number;
+  change?: string;
+  changeType?: 'positive' | 'negative' | 'neutral';
+  icon?: LucideIcon;
+  color?: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'cyan';
+}
+
+export interface QuickAction {
+  id: string;
+  label: string;
+  description: string;
+  onClick: () => void;
+  icon?: LucideIcon;
+}
+
+export interface RecentActivity {
+  id: string;
+  type: string;
+  message: string;
+  timestamp: string;
+  user?: string;
+}
+
+export interface SystemStatus {
+  service: string;
+  status: 'healthy' | 'degraded' | 'down';
+  latency?: number;
+}
+
+export interface StatsTabProps {
+  isDark?: boolean;
+  /** API endpoint to fetch stats (default: /api/admin/stats) */
+  apiBasePath?: string;
+  /** Custom stat cards to display */
+  customStats?: StatCard[];
+  /** Quick actions shown in the sidebar */
+  quickActions?: QuickAction[];
+  /** Additional content to render below stats */
+  children?: ReactNode;
+}
+
+// -----------------------------------------------------------------------------
+// COMPONENT
+// -----------------------------------------------------------------------------
+
+export function StatsTab({
+  isDark = true,
+  apiBasePath = '/api/admin/stats',
+  customStats,
+  quickActions,
+  children,
+}: StatsTabProps) {
+  const [stats, setStats] = useState<StatCard[]>([]);
+  const [recentActivity, setRecentActivity] = useState<RecentActivity[]>([]);
+  const [systemStatus, setSystemStatus] = useState<SystemStatus[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const themeClasses = {
+    cardBg: isDark ? 'bg-slate-800 border-slate-700' : 'bg-white border-gray-200 shadow-sm',
+    textPrimary: isDark ? 'text-white' : 'text-gray-900',
+    textSecondary: isDark ? 'text-gray-400' : 'text-gray-600',
+    textMuted: isDark ? 'text-gray-500' : 'text-gray-500',
+  };
+
+  const colorClasses: Record<string, { bg: string; text: string; icon: string }> = {
+    blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', icon: 'text-blue-400' },
+    green: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', icon: 'text-emerald-400' },
+    purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', icon: 'text-purple-400' },
+    orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', icon: 'text-orange-400' },
+    red: { bg: 'bg-red-500/10', text: 'text-red-400', icon: 'text-red-400' },
+    cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', icon: 'text-cyan-400' },
+  };
+
+  const defaultIcons: Record<string, LucideIcon> = {
+    users: Users,
+    sessions: Activity,
+    uptime: Clock,
+    growth: TrendingUp,
+    security: Shield,
+    system: Server,
+  };
+
+  const fetchStats = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(apiBasePath);
+      if (!res.ok) throw new Error('Failed to fetch stats');
+
+      const data = await res.json();
+
+      // Map API response to stat cards
+      const apiStats: StatCard[] = [];
+
+      if (data.totalUsers !== undefined) {
+        apiStats.push({
+          id: 'users',
+          label: 'Total Users',
+          value: data.totalUsers,
+          change: data.userGrowth ? `+${data.userGrowth}%` : undefined,
+          changeType: 'positive',
+          icon: Users,
+          color: 'blue',
+        });
+      }
+
+      if (data.activeSessions !== undefined) {
+        apiStats.push({
+          id: 'sessions',
+          label: 'Active Sessions',
+          value: data.activeSessions,
+          icon: Activity,
+          color: 'green',
+        });
+      }
+
+      if (data.todayLogins !== undefined) {
+        apiStats.push({
+          id: 'logins',
+          label: 'Today Logins',
+          value: data.todayLogins,
+          icon: Clock,
+          color: 'purple',
+        });
+      }
+
+      if (data.newUsersToday !== undefined) {
+        apiStats.push({
+          id: 'new_users',
+          label: 'New Users Today',
+          value: data.newUsersToday,
+          icon: TrendingUp,
+          color: 'orange',
+        });
+      }
+
+      // Merge custom stats with API stats
+      setStats(customStats ? [...apiStats, ...customStats] : apiStats);
+
+      // Set recent activity if available
+      if (data.recentActivity) {
+        setRecentActivity(data.recentActivity);
+      }
+
+      // Set system status if available
+      if (data.systemStatus) {
+        setSystemStatus(data.systemStatus);
+      }
+    } catch (err: any) {
+      setError(err.message);
+      // Use custom stats as fallback
+      if (customStats) {
+        setStats(customStats);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [apiBasePath, customStats]);
+
+  useEffect(() => {
+    fetchStats();
+    // Refresh stats every 60 seconds
+    const interval = setInterval(fetchStats, 60000);
+    return () => clearInterval(interval);
+  }, [fetchStats]);
+
+  const getTimeAgo = (dateStr: string) => {
+    const now = new Date();
+    const date = new Date(dateStr);
+    const diffMs = now.getTime() - date.getTime();
+    const diffSec = Math.floor(diffMs / 1000);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHour = Math.floor(diffMin / 60);
+
+    if (diffSec < 60) return 'Just now';
+    if (diffMin < 60) return `${diffMin}m ago`;
+    if (diffHour < 24) return `${diffHour}h ago`;
+    return date.toLocaleDateString();
+  };
+
+  if (loading && stats.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <svg className="animate-spin h-8 w-8 text-blue-400" viewBox="0 0 24 24" fill="none">
+          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+        </svg>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Error Banner */}
+      {error && (
+        <div className={`p-4 rounded-lg ${isDark ? 'bg-red-900/30 border-red-700' : 'bg-red-50 border-red-300'} border ${isDark ? 'text-red-300' : 'text-red-700'}`}>
+          {error}
+          <button onClick={fetchStats} className="ml-4 underline">Retry</button>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map((stat) => {
+          const Icon = stat.icon || defaultIcons[stat.id] || Activity;
+          const colors = colorClasses[stat.color || 'blue'];
+
+          return (
+            <div key={stat.id} className={`${themeClasses.cardBg} border rounded-xl p-5`}>
+              <div className="flex items-start justify-between">
+                <div>
+                  <p className={`text-sm ${themeClasses.textSecondary}`}>{stat.label}</p>
+                  <p className={`text-3xl font-bold ${themeClasses.textPrimary} mt-1`}>
+                    {typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value}
+                  </p>
+                  {stat.change && (
+                    <p className={`text-sm mt-1 ${
+                      stat.changeType === 'positive' ? 'text-emerald-400' :
+                      stat.changeType === 'negative' ? 'text-red-400' :
+                      themeClasses.textMuted
+                    }`}>
+                      {stat.change}
+                    </p>
+                  )}
+                </div>
+                <div className={`p-3 rounded-lg ${colors.bg}`}>
+                  <Icon className={`w-6 h-6 ${colors.icon}`} />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Recent Activity */}
+        <div className={`lg:col-span-2 ${themeClasses.cardBg} border rounded-xl`}>
+          <div className={`px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+            <h3 className={`font-semibold ${themeClasses.textPrimary}`}>Recent Activity</h3>
+          </div>
+          <div className="p-5">
+            {recentActivity.length > 0 ? (
+              <div className="space-y-4">
+                {recentActivity.map((activity) => (
+                  <div key={activity.id} className="flex items-start gap-3">
+                    <div className={`w-2 h-2 rounded-full mt-2 ${
+                      activity.type === 'login' ? 'bg-green-400' :
+                      activity.type === 'signup' ? 'bg-blue-400' :
+                      activity.type === 'error' ? 'bg-red-400' :
+                      'bg-gray-400'
+                    }`} />
+                    <div className="flex-1 min-w-0">
+                      <p className={`text-sm ${themeClasses.textPrimary}`}>{activity.message}</p>
+                      <div className={`flex items-center gap-2 text-xs ${themeClasses.textMuted} mt-1`}>
+                        {activity.user && <span>{activity.user}</span>}
+                        <span>{getTimeAgo(activity.timestamp)}</span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className={`text-center py-8 ${themeClasses.textMuted}`}>
+                No recent activity
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Quick Actions & System Status */}
+        <div className="space-y-6">
+          {/* Quick Actions */}
+          {quickActions && quickActions.length > 0 && (
+            <div className={`${themeClasses.cardBg} border rounded-xl`}>
+              <div className={`px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+                <h3 className={`font-semibold ${themeClasses.textPrimary}`}>Quick Actions</h3>
+              </div>
+              <div className="p-3">
+                {quickActions.map((action) => {
+                  const Icon = action.icon || Activity;
+                  return (
+                    <button
+                      key={action.id}
+                      onClick={action.onClick}
+                      className={`w-full text-left p-3 rounded-lg transition-colors ${
+                        isDark ? 'hover:bg-slate-700' : 'hover:bg-gray-100'
+                      }`}
+                    >
+                      <div className="flex items-center gap-3">
+                        <Icon className={`w-5 h-5 ${themeClasses.textSecondary}`} />
+                        <div>
+                          <p className={`font-medium ${themeClasses.textPrimary}`}>{action.label}</p>
+                          <p className={`text-xs ${themeClasses.textMuted}`}>{action.description}</p>
+                        </div>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {/* System Status */}
+          {systemStatus.length > 0 && (
+            <div className={`${themeClasses.cardBg} border rounded-xl`}>
+              <div className={`px-5 py-4 border-b ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
+                <h3 className={`font-semibold ${themeClasses.textPrimary}`}>System Status</h3>
+              </div>
+              <div className="p-5 space-y-3">
+                {systemStatus.map((service) => (
+                  <div key={service.service} className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <div className={`w-2 h-2 rounded-full ${
+                        service.status === 'healthy' ? 'bg-emerald-400' :
+                        service.status === 'degraded' ? 'bg-amber-400' :
+                        'bg-red-400'
+                      }`} />
+                      <span className={themeClasses.textPrimary}>{service.service}</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {service.latency !== undefined && (
+                        <span className={`text-xs ${themeClasses.textMuted}`}>{service.latency}ms</span>
+                      )}
+                      <span className={`text-xs px-2 py-0.5 rounded ${
+                        service.status === 'healthy' ? 'bg-emerald-500/20 text-emerald-400' :
+                        service.status === 'degraded' ? 'bg-amber-500/20 text-amber-400' :
+                        'bg-red-500/20 text-red-400'
+                      }`}>
+                        {service.status}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Custom children content */}
+      {children}
+    </div>
+  );
+}
+
+export default StatsTab;

package/src/components/admin/VibeAdminContext.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React, { createContext, useContext, ReactNode } from 'react';
+
+// -----------------------------------------------------------------------------
+// TYPES
+// -----------------------------------------------------------------------------
+
+export interface VibeAdminConfig {
+  /** Collection name for this tenant (e.g., "ideal_resume", "idealvibe_app") */
+  collectionName: string;
+  /** Display name for the app (e.g., "IdealResume", "IdealVibe") */
+  appName: string;
+  /** Optional logo URL */
+  logoUrl?: string;
+  /** Base path for admin routes (default: /vibe-admin) */
+  basePath?: string;
+  /** Custom tabs to add to the admin panel */
+  customTabs?: AdminTab[];
+  /** Theme mode override */
+  isDarkMode?: boolean;
+}
+
+export interface AdminTab {
+  id: string;
+  label: string;
+  icon?: React.ElementType;
+  component: React.ComponentType;
+}
+
+export interface VibeAdminContextValue extends VibeAdminConfig {
+  /** All tabs including defaults and custom */
+  allTabs: AdminTab[];
+}
+
+// -----------------------------------------------------------------------------
+// CONTEXT
+// -----------------------------------------------------------------------------
+
+const VibeAdminContext = createContext<VibeAdminContextValue | null>(null);
+
+// -----------------------------------------------------------------------------
+// HOOK
+// -----------------------------------------------------------------------------
+
+export function useVibeAdmin(): VibeAdminContextValue {
+  const context = useContext(VibeAdminContext);
+  if (!context) {
+    throw new Error('useVibeAdmin must be used within a VibeAdminProvider');
+  }
+  return context;
+}
+
+// -----------------------------------------------------------------------------
+// PROVIDER
+// -----------------------------------------------------------------------------
+
+interface VibeAdminProviderProps {
+  config: VibeAdminConfig;
+  children: ReactNode;
+}
+
+export function VibeAdminProvider({ config, children }: VibeAdminProviderProps) {
+  // Default tabs - will be populated with actual components
+  const defaultTabs: AdminTab[] = [
+    { id: 'stats', label: 'Stats', component: () => null },
+    { id: 'users', label: 'Users', component: () => null },
+    { id: 'sessions', label: 'Sessions', component: () => null },
+    { id: 'analytics', label: 'Analytics', component: () => null },
+  ];
+
+  const allTabs = [...defaultTabs, ...(config.customTabs || [])];
+
+  const value: VibeAdminContextValue = {
+    ...config,
+    basePath: config.basePath || '/vibe-admin',
+    allTabs,
+  };
+
+  return (
+    <VibeAdminContext.Provider value={value}>
+      {children}
+    </VibeAdminContext.Provider>
+  );
+}
+
+export default VibeAdminProvider;

package/src/components/admin/VibeAdminLayout.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React, { ReactNode } from 'react';
+import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import Link from 'next/link';
+import { useVibeAdmin } from './VibeAdminContext';
+import {
+  Shield,
+  LayoutDashboard,
+  Users,
+  Activity,
+  BarChart3,
+  Database,
+  Settings,
+  ArrowLeft,
+  type LucideIcon,
+} from 'lucide-react';
+
+interface VibeAdminLayoutProps {
+  children?: ReactNode;
+  activeTabId?: string;
+  onTabChange?: (tabId: string) => void;
+  headerContent?: ReactNode;
+  isDarkMode?: boolean;
+  adminRole?: string;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+const defaultNavItems: NavItem[] = [
+  { id: 'stats', label: 'Dashboard', icon: LayoutDashboard },
+  { id: 'users', label: 'Users', icon: Users },
+  { id: 'sessions', label: 'Sessions', icon: Activity },
+  { id: 'analytics', label: 'Analytics', icon: BarChart3 },
+  { id: 'data', label: 'Data Browser', icon: Database },
+  { id: 'settings', label: 'Settings', icon: Settings },
+];
+
+export function VibeAdminLayout({
+  children,
+  activeTabId = 'stats',
+  onTabChange,
+  headerContent,
+  isDarkMode: isDarkModeProp,
+  adminRole = 'vibe_app_admin',
+}: VibeAdminLayoutProps) {
+  const { data: session, status } = useSession();
+  const router = useRouter();
+  const adminConfig = useVibeAdmin();
+  
+  const isDark = isDarkModeProp ?? adminConfig.isDarkMode ?? false;
+  const basePath = adminConfig.basePath || '/vibe-admin';
+  
+  const navItems = [...defaultNavItems];
+  adminConfig.customTabs?.forEach((tab) => {
+    navItems.push({
+      id: tab.id,
+      label: tab.label,
+      icon: (tab.icon as LucideIcon) || LayoutDashboard,
+    });
+  });
+
+  const userRoles = (session?.user as any)?.roles || [];
+  const hasAdminRole = userRoles.includes(adminRole) || userRoles.includes('payez_admin');
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      router.push('/account-auth/login?callbackUrl=' + basePath);
+      return;
+    }
+    if (status === 'authenticated' && !hasAdminRole) {
+      router.push('/?error=unauthorized');
+    }
+  }, [status, hasAdminRole, router, basePath]);
+
+  if (status === 'loading') {
+    return (
+      <div className={'min-h-screen flex items-center justify-center ' + (isDark ? 'bg-slate-950' : 'bg-gray-50')}>
+        <div className="flex flex-col items-center gap-4">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500" />
+          <p className={isDark ? 'text-slate-400' : 'text-slate-600'}>Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'authenticated' && !hasAdminRole) {
+    return (
+      <div className={'min-h-screen flex items-center justify-center ' + (isDark ? 'bg-slate-950' : 'bg-gray-50')}>
+        <div className="text-center">
+          <Shield className={'w-16 h-16 mx-auto mb-4 ' + (isDark ? 'text-red-400' : 'text-red-500')} />
+          <h1 className={'text-2xl font-bold mb-2 ' + (isDark ? 'text-white' : 'text-gray-900')}>
+            Access Denied
+          </h1>
+          <p className={'mb-6 ' + (isDark ? 'text-slate-400' : 'text-slate-600')}>
+            You do not have permission to access the admin panel.
+          </p>
+          <Link
+            href="/"
+            className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Return to Home
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (status === 'unauthenticated') {
+    return null;
+  }
+
+  return (
+    <div className={'min-h-screen ' + (isDark ? 'bg-slate-950 text-white' : 'bg-gray-50 text-gray-900')}>
+      <header className={'sticky top-0 z-40 border-b ' + (isDark ? 'bg-slate-900 border-slate-800' : 'bg-white border-gray-200')}>
+        <div className="container mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              {adminConfig.logoUrl && (
+                <div className={'p-2 rounded-lg ' + (isDark ? 'bg-indigo-900/30' : 'bg-indigo-100')}>
+                  <img src={adminConfig.logoUrl} alt={adminConfig.appName} className="w-6 h-6" />
+                </div>
+              )}
+              <div>
+                <h1 className="text-xl font-bold">Platform Admin</h1>
+                <p className={'text-sm ' + (isDark ? 'text-slate-400' : 'text-slate-600')}>
+                  {adminConfig.appName} - {adminConfig.collectionName}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              {headerContent}
+              <Link
+                href="/"
+                className={'flex items-center gap-2 px-3 py-2 rounded-lg transition-colors ' + (isDark ? 'hover:bg-slate-800 text-slate-400' : 'hover:bg-gray-100 text-slate-600')}
+              >
+                <ArrowLeft className="w-4 h-4" />
+                Back to App
+              </Link>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto px-4 py-4">
+        <nav className={'flex items-center gap-1 mb-6 border-b ' + (isDark ? 'border-slate-800' : 'border-gray-200')}>
+          {navItems.map((item) => {
+            const isActive = activeTabId === item.id;
+            const Icon = item.icon;
+            const activeClass = isDark
+              ? 'border-indigo-500 text-indigo-400'
+              : 'border-indigo-600 text-indigo-700';
+            const inactiveClass = isDark
+              ? 'border-transparent text-slate-400 hover:text-white hover:border-slate-600'
+              : 'border-transparent text-slate-600 hover:text-gray-900 hover:border-gray-300';
+
+            return (
+              <button
+                key={item.id}
+                onClick={() => onTabChange?.(item.id)}
+                className={'flex items-center gap-2 px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px ' + (isActive ? activeClass : inactiveClass)}
+              >
+                <Icon className="w-4 h-4" />
+                {item.label}
+              </button>
+            );
+          })}
+        </nav>
+
+        <main className="min-w-0">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default VibeAdminLayout;