@payez/next-mvp 3.0.0

package/src/components/admin/index.ts

@@ -0,0 +1,59 @@
+/**
+ * =============================================================================
+ * VIBE ADMIN COMPONENTS
+ * =============================================================================
+ *
+ * Generic admin panel components for Vibe-powered applications.
+ * These components are designed to be multi-tenant and can be configured
+ * per-collection via the VibeAdminProvider.
+ *
+ * Usage:
+ * ------
+ * import {
+ *   VibeAdminProvider,
+ *   VibeAdminLayout,
+ *   SessionsTab,
+ *   AnalyticsTab,
+ *   StatsTab,
+ * } from '@payez/next-mvp/components/admin';
+ *
+ * =============================================================================
+ */
+
+// Context & Provider
+export {
+  VibeAdminProvider,
+  useVibeAdmin,
+  type VibeAdminConfig,
+  type AdminTab,
+  type VibeAdminContextValue,
+} from './VibeAdminContext';
+
+// Layout
+export { VibeAdminLayout } from './VibeAdminLayout';
+
+// Tab Components
+export { SessionsTab, type SessionsTabProps, type LoginSession, type SessionStats } from './SessionsTab';
+export { AnalyticsTab, type AnalyticsTabProps } from './AnalyticsTab';
+export { StatsTab, type StatsTabProps, type StatCard, type QuickAction, type RecentActivity, type SystemStatus } from './StatsTab';
+export { DataBrowserTab, type DataBrowserTabProps, type CollectionInfo, type TableInfo } from './DataBrowserTab';
+export {
+  LoggingSettingsTab,
+  type LoggingSettingsTabProps,
+  type LogLevel,
+  type LogLevels,
+  type RetentionSettings,
+  type StorageLimits,
+  type UsageStats,
+  type LoggingSettings,
+} from './LoggingSettingsTab';
+export {
+  AlertSettingsTab,
+  type AlertSettingsTabProps,
+  type DeliveryMode,
+  type AlertConfig,
+  type AlertsConfig,
+  type RateLimit,
+  type AlertSettings,
+  type AlertHistoryItem,
+} from './AlertSettingsTab';

package/src/components/auth/FederatedAuthSection.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React from 'react';
+import { FederatedProvider } from '@/types/auth';
+
+interface Props {
+  providers: FederatedProvider[];
+  onProviderClick: (provider: FederatedProvider) => void;
+  isLoading?: boolean;
+}
+
+const providerIcons: Record<FederatedProvider, { label: string; svg: React.ReactNode; color: string }> = {
+  google: {
+    label: 'Google',
+    color: '#4285F4',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+      </svg>
+    ),
+  },
+  microsoft: {
+    label: 'Microsoft',
+    color: '#0078D4',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <rect x="1" y="1" width="9" height="9" fill="#F25022"/>
+        <rect x="12" y="1" width="9" height="9" fill="#7FBA00"/>
+        <rect x="1" y="12" width="9" height="9" fill="#00A4EF"/>
+        <rect x="12" y="12" width="9" height="9" fill="#FFB900"/>
+      </svg>
+    ),
+  },
+  facebook: {
+    label: 'Facebook',
+    color: '#1877F2',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="#1877F2">
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+      </svg>
+    ),
+  },
+  github: {
+    label: 'GitHub',
+    color: '#000000',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+      </svg>
+    ),
+  },
+  apple: {
+    label: 'Apple',
+    color: '#000000',
+    svg: (
+      <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+      </svg>
+    ),
+  },
+};
+
+export function FederatedAuthSection({ providers, onProviderClick, isLoading }: Props) {
+  if (!providers.length) {
+    return null;
+  }
+
+  return (
+    <div className="space-y-3">
+      {providers.map((provider) => {
+        const config = providerIcons[provider];
+        return (
+          <button
+            key={provider}
+            type="button"
+            onClick={() => onProviderClick(provider)}
+            disabled={isLoading}
+            className={`w-full px-4 py-3 rounded-lg border-2 font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed`}
+            style={{
+              border: '1px solid var(--border-default)',
+              color: 'var(--text-primary)',
+              background: 'var(--bg-default)',
+            }}
+          >
+            {config.svg}
+            Continue with {config.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/auth/ModeAwareLoginPage.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuthConfig } from '../../client/AuthContext';
+import { FederatedProvider } from '@/types/auth';
+import { FederatedAuthSection } from './FederatedAuthSection';
+import { TraditionalAuthSection } from './TraditionalAuthSection';
+
+interface Props {
+  onFederatedSignIn?: (provider: FederatedProvider) => void;
+  onTraditionalSignIn?: (email: string, password: string) => Promise<void>;
+  onForgotPassword?: () => void;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+export function ModeAwareLoginPage({
+  onFederatedSignIn,
+  onTraditionalSignIn,
+  onForgotPassword,
+  isLoading = false,
+  error = null,
+}: Props) {
+  const config = useAuthConfig();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [localLoading, setLocalLoading] = useState(false);
+
+  const handleFederatedClick = (provider: FederatedProvider) => {
+    onFederatedSignIn?.(provider);
+  };
+
+  const handleTraditionalSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!onTraditionalSignIn) return;
+
+    setLocalLoading(true);
+    try {
+      await onTraditionalSignIn(email, password);
+    } finally {
+      setLocalLoading(false);
+    }
+  };
+
+  const isFederated = config.mode === 'federated';
+  const isTraditional = config.mode === 'traditional';
+  const totalLoading = isLoading || localLoading;
+
+  return (
+    <>
+      {error && (
+        <div
+          className="mb-6 px-4 py-3 rounded-lg"
+          style={{
+            background: 'var(--color-error, #ef4444)',
+            color: 'white',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Federated Only Mode */}
+      {isFederated && (
+        <FederatedAuthSection
+          providers={config.providers}
+          onProviderClick={handleFederatedClick}
+          isLoading={totalLoading}
+        />
+      )}
+
+      {/* Traditional Only Mode */}
+      {isTraditional && (
+        <TraditionalAuthSection
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleTraditionalSubmit}
+          isLoading={totalLoading}
+          buttonText="Sign In"
+          showForgotPassword={config.enableRecovery}
+          onForgotPassword={onForgotPassword}
+        />
+      )}
+
+      {/* Hybrid Mode - Show both */}
+      {isFederated === false && isTraditional === false && (
+        <>
+          <FederatedAuthSection
+            providers={config.providers}
+            onProviderClick={handleFederatedClick}
+            isLoading={totalLoading}
+          />
+
+          {config.providers.length > 0 && (
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div
+                  className="w-full"
+                  style={{
+                    borderTop: '1px solid var(--border-default)',
+                  }}
+                ></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span
+                  className="px-2"
+                  style={{
+                    background: 'var(--bg-card)',
+                    color: 'var(--text-secondary)',
+                  }}
+                >
+                  Or sign in with email
+                </span>
+              </div>
+            </div>
+          )}
+
+          <TraditionalAuthSection
+            email={email}
+            password={password}
+            onEmailChange={setEmail}
+            onPasswordChange={setPassword}
+            onSubmit={handleTraditionalSubmit}
+            isLoading={totalLoading}
+            buttonText="Sign In"
+            showForgotPassword={config.enableRecovery}
+            onForgotPassword={onForgotPassword}
+          />
+        </>
+      )}
+    </>
+  );
+}

package/src/components/auth/ModeAwareSignupPage.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuthConfig } from '../../client/AuthContext';
+import { FederatedProvider } from '@/types/auth';
+import { FederatedAuthSection } from './FederatedAuthSection';
+import { TraditionalAuthSection } from './TraditionalAuthSection';
+
+interface Props {
+  onFederatedSignUp?: (provider: FederatedProvider) => void;
+  onTraditionalSignUp?: (email: string, password: string, confirmPassword: string) => Promise<void>;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+export function ModeAwareSignupPage({
+  onFederatedSignUp,
+  onTraditionalSignUp,
+  isLoading = false,
+  error = null,
+}: Props) {
+  const config = useAuthConfig();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [localLoading, setLocalLoading] = useState(false);
+
+  const handleFederatedClick = (provider: FederatedProvider) => {
+    onFederatedSignUp?.(provider);
+  };
+
+  const handleTraditionalSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!onTraditionalSignUp) return;
+
+    if (password !== confirmPassword) {
+      alert('Passwords do not match');
+      return;
+    }
+
+    setLocalLoading(true);
+    try {
+      await onTraditionalSignUp(email, password, confirmPassword);
+    } finally {
+      setLocalLoading(false);
+    }
+  };
+
+  const isFederated = config.mode === 'federated';
+  const isTraditional = config.mode === 'traditional';
+  const totalLoading = isLoading || localLoading;
+
+  return (
+    <>
+      {error && (
+        <div
+          className="mb-6 px-4 py-3 rounded-lg"
+          style={{
+            background: 'var(--color-error, #ef4444)',
+            color: 'white',
+          }}
+        >
+          {error}
+        </div>
+      )}
+
+      {/* Federated Only Mode */}
+      {isFederated && (
+        <FederatedAuthSection
+          providers={config.providers}
+          onProviderClick={handleFederatedClick}
+          isLoading={totalLoading}
+        />
+      )}
+
+      {/* Traditional Only Mode */}
+      {isTraditional && config.enableEmailSignup && (
+        <form onSubmit={handleTraditionalSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Email Address
+            </label>
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@example.com"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Password
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder="••••••••"
+              disabled={totalLoading}
+              required
+              className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+              style={{
+                border: '1px solid var(--border-default)',
+                color: 'var(--text-primary)',
+                background: 'var(--bg-default)',
+              }}
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={totalLoading}
+            className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
+            style={{
+              border: '1px solid var(--border-default)',
+              color: 'white',
+              background: 'var(--color-primary, #10b981)',
+            }}
+          >
+            {totalLoading ? 'Creating Account...' : 'Create Account'}
+          </button>
+        </form>
+      )}
+
+      {/* Hybrid Mode - Show both */}
+      {isFederated === false && isTraditional === false && (
+        <>
+          <FederatedAuthSection
+            providers={config.providers}
+            onProviderClick={handleFederatedClick}
+            isLoading={totalLoading}
+          />
+
+          {config.providers.length > 0 && config.enableEmailSignup && (
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div
+                  className="w-full"
+                  style={{
+                    borderTop: '1px solid var(--border-default)',
+                  }}
+                ></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span
+                  className="px-2"
+                  style={{
+                    background: 'var(--bg-card)',
+                    color: 'var(--text-secondary)',
+                  }}
+                >
+                  Or sign up with email
+                </span>
+              </div>
+            </div>
+          )}
+
+          {config.enableEmailSignup && (
+            <form onSubmit={handleTraditionalSubmit} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="you@example.com"
+                  disabled={totalLoading}
+                  required
+                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+                  style={{
+                    border: '1px solid var(--border-default)',
+                    color: 'var(--text-primary)',
+                    background: 'var(--bg-default)',
+                  }}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Password
+                </label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="••••••••"
+                  disabled={totalLoading}
+                  required
+                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+                  style={{
+                    border: '1px solid var(--border-default)',
+                    color: 'var(--text-primary)',
+                    background: 'var(--bg-default)',
+                  }}
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                  Confirm Password
+                </label>
+                <input
+                  type="password"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  placeholder="••••••••"
+                  disabled={totalLoading}
+                  required
+                  className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+                  style={{
+                    border: '1px solid var(--border-default)',
+                    color: 'var(--text-primary)',
+                    background: 'var(--bg-default)',
+                  }}
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={totalLoading}
+                className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
+                style={{
+                  border: '1px solid var(--border-default)',
+                  color: 'white',
+                  background: 'var(--color-primary, #10b981)',
+                }}
+              >
+                {totalLoading ? 'Creating Account...' : 'Create Account'}
+              </button>
+            </form>
+          )}
+        </>
+      )}
+    </>
+  );
+}

package/src/components/auth/TraditionalAuthSection.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React from 'react';
+
+interface Props {
+  email: string;
+  password: string;
+  onEmailChange: (email: string) => void;
+  onPasswordChange: (password: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  isLoading?: boolean;
+  buttonText?: string;
+  showForgotPassword?: boolean;
+  onForgotPassword?: () => void;
+}
+
+export function TraditionalAuthSection({
+  email,
+  password,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  isLoading,
+  buttonText = 'Sign In',
+  showForgotPassword = true,
+  onForgotPassword,
+}: Props) {
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      {/* Email */}
+      <div>
+        <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+          Email Address
+        </label>
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => onEmailChange(e.target.value)}
+          placeholder="you@example.com"
+          disabled={isLoading}
+          required
+          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+          style={{
+            border: '1px solid var(--border-default)',
+            color: 'var(--text-primary)',
+            background: 'var(--bg-default)',
+          }}
+        />
+      </div>
+
+      {/* Password */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label className="block text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
+            Password
+          </label>
+          {showForgotPassword && onForgotPassword && (
+            <button
+              type="button"
+              onClick={onForgotPassword}
+              className="text-xs hover:underline"
+              style={{ color: 'var(--text-primary)' }}
+            >
+              Forgot?
+            </button>
+          )}
+        </div>
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => onPasswordChange(e.target.value)}
+          placeholder="••••••••"
+          disabled={isLoading}
+          required
+          className="w-full px-4 py-3 rounded-lg border transition-colors focus:outline-none focus:ring-2 disabled:opacity-50"
+          style={{
+            border: '1px solid var(--border-default)',
+            color: 'var(--text-primary)',
+            background: 'var(--bg-default)',
+          }}
+        />
+      </div>
+
+      {/* Submit Button */}
+      <button
+        type="submit"
+        disabled={isLoading}
+        className="w-full py-3 px-4 rounded-lg font-semibold focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors mt-6"
+        style={{
+          border: '1px solid var(--border-default)',
+          color: 'white',
+          background: 'var(--color-primary, #10b981)',
+        }}
+      >
+        {isLoading ? 'Signing in...' : buttonText}
+      </button>
+    </form>
+  );
+}

package/src/components/recovery/CompleteStep.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+
+interface Props {
+  onGoToLogin: () => void;
+}
+
+export function CompleteStep({ onGoToLogin }: Props) {
+  return (
+    <div className="bg-white border border-gray-300 rounded p-8 text-center">
+      <div className="bg-green-50 border border-green-200 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+        <svg className="w-8 h-8 text-green-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      </div>
+
+      <h2 className="text-2xl font-semibold text-gray-900 mb-2">Password Reset Complete</h2>
+
+      <p className="text-gray-600 mb-2">
+        Your password has been successfully reset and your account lockout has been cleared.
+      </p>
+
+      <p className="text-gray-600 mb-6">
+        You can now log in with your new password.
+      </p>
+
+      <button
+        onClick={onGoToLogin}
+        className="w-full py-2 px-4 border border-gray-300 rounded text-gray-900 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900"
+      >
+        Go to Login
+      </button>
+    </div>
+  );
+}