@payez/next-mvp 3.9.1 → 4.0.1

package/dist/pages/security/security-patch.js

@@ -1,302 +0,0 @@
-"use strict";
-// Patch script to add re-authentication to security page
-const fs = require('fs');
-const path = 'E:/Repos/PayEz-Next-MVP/packages/next-mvp/src/pages/security/EnhancedSecurityPage.tsx';
-let content = fs.readFileSync(path, 'utf8');
-// 1. Add ReAuthModal component after StatusBadge
-const statusBadgeEnd = `// Status Badge Component
-function StatusBadge({ enabled, label, isDark }: { enabled: boolean; label?: string; isDark: boolean }) {
-  const bgClass = enabled
-    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-    : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
-  return (
-    <span className={\`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium \${bgClass}\`}>
-      {label || (enabled ? 'Enabled' : 'Not Active')}
-    </span>
-  );
-}`;
-const reAuthModal = `// Status Badge Component
-function StatusBadge({ enabled, label, isDark }: { enabled: boolean; label?: string; isDark: boolean }) {
-  const bgClass = enabled
-    ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
-    : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
-  return (
-    <span className={\`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium \${bgClass}\`}>
-      {label || (enabled ? 'Enabled' : 'Not Active')}
-    </span>
-  );
-}
-
-// Re-Authentication Modal Component (Security Addendum)
-type ReAuthAction = 'enable_2fa' | 'disable_2fa' | 'export_data' | 'delete_account' | null;
-
-function ReAuthModal({
-  isOpen,
-  action,
-  require2FA,
-  onConfirm,
-  onCancel,
-  isDark,
-}: {
-  isOpen: boolean;
-  action: ReAuthAction;
-  require2FA: boolean;
-  onConfirm: (password: string, twoFactorCode?: string) => void;
-  onCancel: () => void;
-  isDark: boolean;
-}) {
-  const [password, setPassword] = React.useState('');
-  const [twoFactorCode, setTwoFactorCode] = React.useState('');
-  const [showPassword, setShowPassword] = React.useState(false);
-  const [error, setError] = React.useState('');
-
-  if (!isOpen) return null;
-
-  const getTitle = () => {
-    switch (action) {
-      case 'enable_2fa': return 'Enable Two-Factor Authentication';
-      case 'disable_2fa': return 'Disable Two-Factor Authentication';
-      case 'export_data': return 'Export Your Data';
-      case 'delete_account': return 'Delete Account';
-      default: return 'Confirm Action';
-    }
-  };
-
-  const getDescription = () => {
-    switch (action) {
-      case 'enable_2fa': return 'Enter your password to enable 2FA.';
-      case 'disable_2fa': return 'Enter your password to disable 2FA. This will make your account less secure.';
-      case 'export_data': return require2FA
-        ? 'Enter your password or 2FA code to request a data export.'
-        : 'Enter your password to request a data export.';
-      case 'delete_account': return require2FA
-        ? 'Enter your password AND 2FA code to permanently delete your account.'
-        : 'Enter your password to permanently delete your account.';
-      default: return 'Please re-authenticate to continue.';
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    if (!password && !(action === 'export_data' && twoFactorCode)) {
-      setError('Password is required');
-      return;
-    }
-    if (action === 'delete_account' && require2FA && !twoFactorCode) {
-      setError('2FA code is required for account deletion');
-      return;
-    }
-    onConfirm(password, twoFactorCode || undefined);
-  };
-
-  const bgOverlay = 'bg-black/50';
-  const modalBg = isDark ? 'bg-slate-800' : 'bg-white';
-  const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-  const textMuted = isDark ? 'text-slate-400' : 'text-gray-500';
-  const inputBg = isDark ? 'bg-slate-700' : 'bg-white';
-  const inputBorder = isDark ? 'border-slate-600' : 'border-gray-300';
-
-  const isDestructive = action === 'disable_2fa' || action === 'delete_account';
-
-  return (
-    <div className={\`fixed inset-0 z-50 flex items-center justify-center \${bgOverlay}\`}>
-      <div className={\`w-full max-w-md mx-4 rounded-lg shadow-xl \${modalBg} border \${borderColor}\`}>
-        <div className={\`px-6 py-4 border-b \${borderColor}\`}>
-          <h3 className={\`text-lg font-semibold \${textPrimary}\`}>{getTitle()}</h3>
-          <p className={\`text-sm mt-1 \${textMuted}\`}>{getDescription()}</p>
-        </div>
-        <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
-          <div>
-            <label className={\`block text-sm font-medium mb-1 \${textMuted}\`}>Password</label>
-            <div className="relative">
-              <input
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className={\`w-full px-3 py-2 rounded-md border \${inputBorder} \${inputBg} \${textPrimary} focus:ring-2 focus:ring-blue-500 focus:border-transparent\`}
-                placeholder="Enter your password"
-                autoFocus
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className={\`absolute right-2 top-1/2 -translate-y-1/2 text-xs \${textMuted}\`}
-              >
-                {showPassword ? 'Hide' : 'Show'}
-              </button>
-            </div>
-          </div>
-
-          {(require2FA || action === 'export_data') && (
-            <div>
-              <label className={\`block text-sm font-medium mb-1 \${textMuted}\`}>
-                {action === 'export_data' ? '2FA Code (optional if password provided)' : '2FA Code'}
-              </label>
-              <input
-                type="text"
-                value={twoFactorCode}
-                onChange={(e) => setTwoFactorCode(e.target.value.replace(/\\D/g, '').slice(0, 6))}
-                className={\`w-full px-3 py-2 rounded-md border \${inputBorder} \${inputBg} \${textPrimary} focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-center tracking-widest\`}
-                placeholder="000000"
-                maxLength={6}
-              />
-            </div>
-          )}
-
-          {error && (
-            <div className="bg-red-900/30 border border-red-600 rounded-lg p-2">
-              <p className="text-red-400 text-sm">{error}</p>
-            </div>
-          )}
-
-          <div className="flex gap-3 pt-2">
-            <button
-              type="button"
-              onClick={onCancel}
-              className={\`flex-1 px-4 py-2 rounded-md border \${borderColor} \${textMuted} hover:bg-slate-700/20\`}
-            >
-              Cancel
-            </button>
-            <button
-              type="submit"
-              className={\`flex-1 px-4 py-2 rounded-md text-white \${
-                isDestructive ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'
-              }\`}
-            >
-              Confirm
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}`;
-content = content.replace(statusBadgeEnd, reAuthModal);
-// 2. Add state for re-auth modal after the showPasswords state
-const stateLocation = `const [showPasswords, setShowPasswords] = useState({ current: false, new: false, confirm: false });`;
-const newState = `const [showPasswords, setShowPasswords] = useState({ current: false, new: false, confirm: false });
-
-  // Re-authentication modal state (Security Addendum)
-  const [reAuthModal, setReAuthModal] = useState<{
-    isOpen: boolean;
-    action: ReAuthAction;
-  }>({ isOpen: false, action: null });`;
-content = content.replace(stateLocation, newState);
-// 3. Add handler functions after useEffect for security data fetch
-const fetchEffectEnd = `useEffect(() => {
-    if (profileData) fetchSecurityData();
-  }, [profileData, fetchSecurityData]);`;
-const handlersAddition = `useEffect(() => {
-    if (profileData) fetchSecurityData();
-  }, [profileData, fetchSecurityData]);
-
-  // Re-auth handlers (Security Addendum)
-  const handleReAuthConfirm = async (password: string, twoFactorCode?: string) => {
-    const action = reAuthModal.action;
-    setReAuthModal({ isOpen: false, action: null });
-
-    // In production, these would call the appropriate API endpoints
-    switch (action) {
-      case 'enable_2fa':
-        console.log('Enable 2FA with password confirmation');
-        // POST /api/account/2fa/enable with { password }
-        break;
-      case 'disable_2fa':
-        console.log('Disable 2FA with password confirmation');
-        // POST /api/account/2fa/disable with { password }
-        break;
-      case 'export_data':
-        console.log('Export data with password/2FA confirmation');
-        // POST /api/account/export-data with { password?, two_factor_code? }
-        break;
-      case 'delete_account':
-        console.log('Delete account with password + 2FA confirmation');
-        // POST /api/account/delete with { password, two_factor_code }
-        break;
-    }
-  };
-
-  const openReAuthModal = (action: ReAuthAction) => {
-    setReAuthModal({ isOpen: true, action });
-  };`;
-content = content.replace(fetchEffectEnd, handlersAddition);
-// 4. Update Enable 2FA button
-const oldEnable2FA = `<button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
-                Enable 2FA
-              </button>`;
-const newEnable2FA = `<button
-                  onClick={() => openReAuthModal('enable_2fa')}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
-                >
-                  Enable 2FA
-                </button>`;
-content = content.replace(oldEnable2FA, newEnable2FA);
-// 5. Update Disable 2FA button
-const oldDisable2FA = `<button className="px-3 py-1.5 text-sm rounded border border-red-500 text-red-500 hover:bg-red-500/10">
-                  Disable 2FA
-                </button>`;
-const newDisable2FA = `<button
-                    onClick={() => openReAuthModal('disable_2fa')}
-                    className="px-3 py-1.5 text-sm rounded border border-red-500 text-red-500 hover:bg-red-500/10"
-                  >
-                    Disable 2FA
-                  </button>`;
-content = content.replace(oldDisable2FA, newDisable2FA);
-// 6. Update Export Data button
-const oldExport = `<button className="px-4 py-2 text-sm rounded border border-yellow-500 text-yellow-500 hover:bg-yellow-500/10">
-                Request Export
-              </button>`;
-const newExport = `<button
-                  onClick={() => openReAuthModal('export_data')}
-                  className="px-4 py-2 text-sm rounded border border-yellow-500 text-yellow-500 hover:bg-yellow-500/10"
-                >
-                  Request Export
-                </button>`;
-content = content.replace(oldExport, newExport);
-// 7. Update Delete Account button
-const oldDelete = `<button className="px-4 py-2 text-sm rounded border border-red-500 text-red-500 hover:bg-red-500/10">
-                Delete Account
-              </button>`;
-const newDelete = `<button
-                  onClick={() => openReAuthModal('delete_account')}
-                  className="px-4 py-2 text-sm rounded border border-red-500 text-red-500 hover:bg-red-500/10"
-                >
-                  Delete Account
-                </button>`;
-content = content.replace(oldDelete, newDelete);
-// 8. Add ReAuthModal component to JSX before closing div
-const closingDiv = `{/* Back to Profile link */}
-        <div className="text-center">
-          <a href="/account/profile" className={\`text-sm hover:underline \${textMuted}\`}>
-            Back to Profile
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}`;
-const withModal = `{/* Re-Authentication Modal */}
-        <ReAuthModal
-          isOpen={reAuthModal.isOpen}
-          action={reAuthModal.action}
-          require2FA={twoFactorEnabled}
-          onConfirm={handleReAuthConfirm}
-          onCancel={() => setReAuthModal({ isOpen: false, action: null })}
-          isDark={isDark}
-        />
-
-        {/* Back to Profile link */}
-        <div className="text-center">
-          <a href="/account/profile" className={\`text-sm hover:underline \${textMuted}\`}>
-            Back to Profile
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}`;
-content = content.replace(closingDiv, withModal);
-fs.writeFileSync(path, content);
-console.log('Security page patched with re-authentication modals');

package/dist/pages/settings/EnhancedSettingsPage.d.ts

@@ -1,46 +0,0 @@
-/**
- * Enhanced Settings Page for @payez/next-mvp
- *
- * Implements BAPert's Member Self-Service spec with:
- * - Appearance section (theme, compact mode)
- * - Localization section (language, timezone, date format)
- * - Notifications section (email and SMS preferences)
- * - Privacy section (profile visibility, activity status)
- *
- * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
- */
-interface PreferencesData {
-    appearance?: {
-        theme?: 'light' | 'dark' | 'system';
-        compact_mode?: boolean;
-    };
-    localization?: {
-        language?: string;
-        timezone?: string;
-        timezone_display?: string;
-        date_format?: string;
-    };
-    notifications?: {
-        email_enabled?: boolean;
-        email_security_alerts?: boolean;
-        email_account_updates?: boolean;
-        email_product_news?: boolean;
-        email_marketing?: boolean;
-        sms_enabled?: boolean;
-        sms_security_alerts?: boolean;
-    };
-    privacy?: {
-        profile_visibility?: 'private' | 'team' | 'public';
-        show_activity_status?: boolean;
-    };
-}
-interface EnhancedSettingsPageProps {
-    initialPreferences?: PreferencesData;
-    preferencesEndpoint?: string;
-    languagesEndpoint?: string;
-    timezonesEndpoint?: string;
-    onSave?: (preferences: PreferencesData) => Promise<void>;
-    onThemeChange?: (theme: 'light' | 'dark' | 'system') => void;
-}
-export default function EnhancedSettingsPage({ initialPreferences, preferencesEndpoint, languagesEndpoint, timezonesEndpoint, onSave, onThemeChange, }: EnhancedSettingsPageProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/pages/settings/EnhancedSettingsPage.js

@@ -1,231 +0,0 @@
-"use strict";
-/**
- * Enhanced Settings Page for @payez/next-mvp
- *
- * Implements BAPert's Member Self-Service spec with:
- * - Appearance section (theme, compact mode)
- * - Localization section (language, timezone, date format)
- * - Notifications section (email and SMS preferences)
- * - Privacy section (profile visibility, activity status)
- *
- * @see docs/specs/MEMBER_SELF_SERVICE_SPEC.md
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = EnhancedSettingsPage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useTheme_1 = require("../../theme/useTheme");
-// Common languages for fallback
-const DEFAULT_LANGUAGES = [
-    { code: 'en', name: 'English (US)' },
-    { code: 'en-GB', name: 'English (UK)' },
-    { code: 'es', name: 'Spanish' },
-    { code: 'fr', name: 'French' },
-    { code: 'de', name: 'German' },
-    { code: 'ja', name: 'Japanese' },
-    { code: 'zh', name: 'Chinese (Simplified)' },
-];
-// Common timezones for fallback
-const DEFAULT_TIMEZONES = [
-    { id: 'America/Los_Angeles', display: 'Pacific Time (US)', offset: '-08:00' },
-    { id: 'America/Denver', display: 'Mountain Time (US)', offset: '-07:00' },
-    { id: 'America/Chicago', display: 'Central Time (US)', offset: '-06:00' },
-    { id: 'America/New_York', display: 'Eastern Time (US)', offset: '-05:00' },
-    { id: 'Europe/London', display: 'London', offset: '+00:00' },
-    { id: 'Europe/Paris', display: 'Paris', offset: '+01:00' },
-    { id: 'Europe/Berlin', display: 'Berlin', offset: '+01:00' },
-    { id: 'Asia/Tokyo', display: 'Tokyo', offset: '+09:00' },
-    { id: 'Asia/Shanghai', display: 'Shanghai', offset: '+08:00' },
-    { id: 'Australia/Sydney', display: 'Sydney', offset: '+11:00' },
-];
-// Date format options
-const DATE_FORMATS = [
-    { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY', example: '01/09/2026' },
-    { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY', example: '09/01/2026' },
-    { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD', example: '2026-01-09' },
-];
-// Toggle component
-function Toggle({ enabled, onChange, disabled = false, isDark = true, }) {
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => !disabled && onChange(!enabled), disabled: disabled, className: `
-        relative inline-flex h-6 w-11 items-center rounded-full transition-colors
-        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
-        ${enabled ? 'bg-blue-600' : isDark ? 'bg-slate-600' : 'bg-gray-300'}
-      `, children: (0, jsx_runtime_1.jsx)("span", { className: `
-          inline-block h-4 w-4 transform rounded-full bg-white transition-transform
-          ${enabled ? 'translate-x-6' : 'translate-x-1'}
-        ` }) }));
-}
-// Section wrapper component
-function SettingsSection({ title, children, isDark, }) {
-    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-    const titleColor = isDark ? 'text-gray-400' : 'text-gray-500';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `border-b ${borderColor} pb-6 mb-6 last:border-b-0`, children: [(0, jsx_runtime_1.jsx)("h2", { className: `text-sm font-semibold uppercase tracking-wider ${titleColor} mb-4`, children: title }), children] }));
-}
-// Setting row component
-function SettingRow({ label, description, children, isDark, }) {
-    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between py-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${textPrimary}`, children: label }), description && (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: description })] }), (0, jsx_runtime_1.jsx)("div", { className: "ml-4", children: children })] }));
-}
-// Select dropdown component
-function Select({ value, onChange, options, isDark, }) {
-    const bgColor = isDark ? 'bg-slate-700' : 'bg-white';
-    const borderColor = isDark ? 'border-slate-600' : 'border-gray-300';
-    const textColor = isDark ? 'text-white' : 'text-gray-900';
-    return ((0, jsx_runtime_1.jsx)("select", { value: value, onChange: (e) => onChange(e.target.value), className: `
-        px-3 py-2 rounded-md border ${borderColor} ${bgColor} ${textColor}
-        focus:outline-none focus:ring-2 focus:ring-blue-500 min-w-[200px]
-      `, children: options.map((opt) => ((0, jsx_runtime_1.jsx)("option", { value: opt.value, children: opt.label }, opt.value))) }));
-}
-function EnhancedSettingsPage({ initialPreferences, preferencesEndpoint = '/api/v1/user/preferences', languagesEndpoint = '/api/v1/lookup/languages', timezonesEndpoint = '/api/v1/lookup/timezones', onSave, onThemeChange, }) {
-    const layout = (0, useTheme_1.useLayout)();
-    const colors = (0, useTheme_1.useColors)();
-    // Determine dark mode from theme colors
-    const isDark = colors?.background?.includes('slate-9') ||
-        colors?.background?.includes('gray-9') ||
-        colors?.card?.includes('slate-8');
-    // State
-    const [preferences, setPreferences] = (0, react_1.useState)(initialPreferences || {});
-    const [languages, setLanguages] = (0, react_1.useState)(DEFAULT_LANGUAGES);
-    const [timezones, setTimezones] = (0, react_1.useState)(DEFAULT_TIMEZONES);
-    const [loading, setLoading] = (0, react_1.useState)(!initialPreferences);
-    const [saving, setSaving] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [successMessage, setSuccessMessage] = (0, react_1.useState)(null);
-    // Theme colors
-    const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
-    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
-    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
-    // Fetch preferences and lookups
-    (0, react_1.useEffect)(() => {
-        async function fetchData() {
-            try {
-                setLoading(true);
-                setError(null);
-                // Fetch preferences
-                const prefResponse = await fetch(preferencesEndpoint, { credentials: 'include' });
-                if (prefResponse.ok) {
-                    const prefData = await prefResponse.json();
-                    setPreferences(prefData);
-                }
-                // Fetch languages (optional)
-                try {
-                    const langResponse = await fetch(languagesEndpoint, { credentials: 'include' });
-                    if (langResponse.ok) {
-                        const langData = await langResponse.json();
-                        if (langData.languages)
-                            setLanguages(langData.languages);
-                    }
-                }
-                catch {
-                    // Use defaults
-                }
-                // Fetch timezones (optional)
-                try {
-                    const tzResponse = await fetch(timezonesEndpoint, { credentials: 'include' });
-                    if (tzResponse.ok) {
-                        const tzData = await tzResponse.json();
-                        if (tzData.timezones)
-                            setTimezones(tzData.timezones);
-                    }
-                }
-                catch {
-                    // Use defaults
-                }
-            }
-            catch (err) {
-                setError('Failed to load settings');
-            }
-            finally {
-                setLoading(false);
-            }
-        }
-        if (!initialPreferences) {
-            fetchData();
-        }
-    }, [preferencesEndpoint, languagesEndpoint, timezonesEndpoint, initialPreferences]);
-    // Update preference value
-    const updatePreference = (0, react_1.useCallback)((section, key, value) => {
-        setPreferences((prev) => ({
-            ...prev,
-            [section]: {
-                ...prev[section],
-                [key]: value,
-            },
-        }));
-    }, []);
-    // Save preferences
-    const handleSave = (0, react_1.useCallback)(async () => {
-        try {
-            setSaving(true);
-            setError(null);
-            setSuccessMessage(null);
-            if (onSave) {
-                await onSave(preferences);
-            }
-            else {
-                const response = await fetch(preferencesEndpoint, {
-                    method: 'PUT',
-                    headers: { 'Content-Type': 'application/json' },
-                    credentials: 'include',
-                    body: JSON.stringify(preferences),
-                });
-                if (!response.ok) {
-                    const data = await response.json();
-                    throw new Error(data.message || 'Failed to save settings');
-                }
-            }
-            setSuccessMessage('Settings saved successfully');
-            setTimeout(() => setSuccessMessage(null), 3000);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : 'Failed to save settings');
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [preferences, preferencesEndpoint, onSave]);
-    // Handle theme change
-    const handleThemeChange = (0, react_1.useCallback)((theme) => {
-        updatePreference('appearance', 'theme', theme);
-        onThemeChange?.(theme);
-    }, [updatePreference, onThemeChange]);
-    // Loading state
-    if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor} flex items-center justify-center`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center space-y-4", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "animate-spin h-8 w-8 text-blue-500", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }), (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Loading settings..." })] }) }));
-    }
-    const currentTheme = preferences.appearance?.theme || 'system';
-    const compactMode = preferences.appearance?.compact_mode || false;
-    const currentLanguage = preferences.localization?.language || 'en';
-    const currentTimezone = preferences.localization?.timezone || 'America/Los_Angeles';
-    const currentDateFormat = preferences.localization?.date_format || 'MM/DD/YYYY';
-    const emailEnabled = preferences.notifications?.email_enabled ?? true;
-    const smsEnabled = preferences.notifications?.sms_enabled ?? false;
-    const profileVisibility = preferences.privacy?.profile_visibility || 'team';
-    const showActivityStatus = preferences.privacy?.show_activity_status ?? true;
-    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-2xl mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-6", children: [(0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimary}`, children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { onClick: handleSave, disabled: saving, className: `
-              px-4 py-2 rounded-md font-medium transition-colors
-              ${saving ? 'opacity-50 cursor-not-allowed' : ''}
-              bg-blue-600 text-white hover:bg-blue-700
-            `, children: saving ? 'Saving...' : 'Save Changes' })] }), error && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 p-3 rounded-md bg-red-500/10 border border-red-500/50 text-red-500", children: error })), successMessage && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 p-3 rounded-md bg-green-500/10 border border-green-500/50 text-green-500", children: successMessage })), (0, jsx_runtime_1.jsxs)("div", { className: `${cardBg} rounded-lg shadow-lg border ${borderColor} p-6`, children: [(0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Appearance", isDark: isDark, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Theme" }), (0, jsx_runtime_1.jsx)("div", { className: "flex gap-2", children: ['light', 'dark', 'system'].map((theme) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => handleThemeChange(theme), className: `
-                      px-4 py-2 rounded-md capitalize transition-colors
-                      ${currentTheme === theme
-                                                    ? 'bg-blue-600 text-white'
-                                                    : isDark
-                                                        ? 'bg-slate-700 text-gray-300 hover:bg-slate-600'
-                                                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}
-                    `, children: theme }, theme))) })] }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Compact Mode", description: "Reduce spacing and padding for denser layouts", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: compactMode, onChange: (value) => updatePreference('appearance', 'compact_mode', value), isDark: isDark }) })] }), (0, jsx_runtime_1.jsx)(SettingsSection, { title: "Localization", isDark: isDark, children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Language" }), (0, jsx_runtime_1.jsx)(Select, { value: currentLanguage, onChange: (value) => updatePreference('localization', 'language', value), options: languages.map((l) => ({ value: l.code, label: l.name })), isDark: isDark })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Timezone" }), (0, jsx_runtime_1.jsx)(Select, { value: currentTimezone, onChange: (value) => updatePreference('localization', 'timezone', value), options: timezones.map((tz) => ({ value: tz.id, label: `${tz.display} (${tz.offset})` })), isDark: isDark }), preferences.localization?.timezone_display && ((0, jsx_runtime_1.jsxs)("p", { className: `mt-1 text-sm ${textMuted}`, children: ["Currently: ", preferences.localization.timezone_display] }))] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Date Format" }), (0, jsx_runtime_1.jsx)(Select, { value: currentDateFormat, onChange: (value) => updatePreference('localization', 'date_format', value), options: DATE_FORMATS.map((df) => ({ value: df.value, label: df.label })), isDark: isDark }), (0, jsx_runtime_1.jsxs)("p", { className: `mt-1 text-sm ${textMuted}`, children: ["Example: ", DATE_FORMATS.find((df) => df.value === currentDateFormat)?.example] })] })] }) }), (0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Notifications", isDark: isDark, children: [(0, jsx_runtime_1.jsx)(SettingRow, { label: "Email Notifications", description: "Receive updates and alerts via email", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: emailEnabled, onChange: (value) => updatePreference('notifications', 'email_enabled', value), isDark: isDark }) }), emailEnabled && ((0, jsx_runtime_1.jsxs)("div", { className: `ml-6 border-l-2 ${borderColor} pl-4 space-y-2`, children: [(0, jsx_runtime_1.jsx)(SettingRow, { label: "Security alerts", description: "Login from new device, etc.", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_security_alerts ?? true, onChange: (value) => updatePreference('notifications', 'email_security_alerts', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Account updates", description: "Password expiry, etc.", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_account_updates ?? true, onChange: (value) => updatePreference('notifications', 'email_account_updates', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Product news and tips", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_product_news ?? false, onChange: (value) => updatePreference('notifications', 'email_product_news', value), isDark: isDark }) }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Marketing and promotions", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.email_marketing ?? false, onChange: (value) => updatePreference('notifications', 'email_marketing', value), isDark: isDark }) })] })), (0, jsx_runtime_1.jsx)(SettingRow, { label: "SMS Notifications", description: "Receive urgent alerts via text message", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: smsEnabled, onChange: (value) => updatePreference('notifications', 'sms_enabled', value), isDark: isDark }) }), smsEnabled && ((0, jsx_runtime_1.jsx)("div", { className: `ml-6 border-l-2 ${borderColor} pl-4`, children: (0, jsx_runtime_1.jsx)(SettingRow, { label: "Security alerts only", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: preferences.notifications?.sms_security_alerts ?? true, onChange: (value) => updatePreference('notifications', 'sms_security_alerts', value), isDark: isDark }) }) }))] }), (0, jsx_runtime_1.jsxs)(SettingsSection, { title: "Privacy", isDark: isDark, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-4", children: [(0, jsx_runtime_1.jsx)("label", { className: `block text-sm font-medium ${textMuted} mb-2`, children: "Profile Visibility" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: [
-                                                { value: 'private', label: 'Private', description: 'Only you can see your profile' },
-                                                { value: 'team', label: 'Team', description: 'Team members can see your profile' },
-                                                { value: 'public', label: 'Public', description: 'Anyone can see your profile' },
-                                            ].map((option) => ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-center p-3 rounded-md cursor-pointer transition-colors ${profileVisibility === option.value
-                                                    ? isDark
-                                                        ? 'bg-blue-600/20 border border-blue-500'
-                                                        : 'bg-blue-50 border border-blue-500'
-                                                    : isDark
-                                                        ? 'bg-slate-700 hover:bg-slate-600'
-                                                        : 'bg-gray-50 hover:bg-gray-100'}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "profileVisibility", value: option.value, checked: profileVisibility === option.value, onChange: (e) => updatePreference('privacy', 'profile_visibility', e.target.value), className: "mr-3" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: `font-medium ${textPrimary}`, children: option.label }), (0, jsx_runtime_1.jsx)("p", { className: `text-sm ${textMuted}`, children: option.description })] })] }, option.value))) })] }), (0, jsx_runtime_1.jsx)(SettingRow, { label: "Activity Status", description: "Show when you're active to team members", isDark: isDark, children: (0, jsx_runtime_1.jsx)(Toggle, { enabled: showActivityStatus, onChange: (value) => updatePreference('privacy', 'show_activity_status', value), isDark: isDark }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 flex justify-between", children: [(0, jsx_runtime_1.jsx)("a", { href: "/account/security", className: `text-sm hover:underline ${textMuted}`, children: "\u2190 Security Settings" }), (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMuted}`, children: "Back to Profile \u2192" })] })] }) }));
-}

package/dist/pages/settings/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * Settings Page exports
- *
- * - SettingsPage: Basic settings display (legacy)
- * - EnhancedSettingsPage: Full-featured settings with appearance, localization, notifications, privacy
- */
-export { default as SettingsPage } from './page';
-export { default as EnhancedSettingsPage } from './EnhancedSettingsPage';

package/dist/pages/settings/index.js

@@ -1,16 +0,0 @@
-"use strict";
-/**
- * Settings Page exports
- *
- * - SettingsPage: Basic settings display (legacy)
- * - EnhancedSettingsPage: Full-featured settings with appearance, localization, notifications, privacy
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EnhancedSettingsPage = exports.SettingsPage = void 0;
-var page_1 = require("./page");
-Object.defineProperty(exports, "SettingsPage", { enumerable: true, get: function () { return __importDefault(page_1).default; } });
-var EnhancedSettingsPage_1 = require("./EnhancedSettingsPage");
-Object.defineProperty(exports, "EnhancedSettingsPage", { enumerable: true, get: function () { return __importDefault(EnhancedSettingsPage_1).default; } });

package/dist/pages/settings/page.d.ts

@@ -1,7 +0,0 @@
-/**
- * Basic Settings Page
- *
- * A simpler settings page that can be customized.
- * For the full-featured version, use EnhancedSettingsPage.
- */
-export default function SettingsPage(): import("react/jsx-runtime").JSX.Element;

package/dist/pages/settings/page.js

@@ -1,26 +0,0 @@
-"use strict";
-/**
- * Basic Settings Page
- *
- * A simpler settings page that can be customized.
- * For the full-featured version, use EnhancedSettingsPage.
- */
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = SettingsPage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const useTheme_1 = require("../../theme/useTheme");
-function SettingsPage() {
-    const layout = (0, useTheme_1.useLayout)();
-    const colors = (0, useTheme_1.useColors)();
-    // Determine dark mode from theme colors
-    const isDark = colors?.background?.includes('slate-9') ||
-        colors?.background?.includes('gray-9') ||
-        colors?.card?.includes('slate-8');
-    const bgColor = isDark ? 'bg-slate-900' : 'bg-gray-50';
-    const cardBg = isDark ? 'bg-slate-800' : 'bg-white';
-    const borderColor = isDark ? 'border-slate-700' : 'border-gray-200';
-    const textPrimary = isDark ? 'text-white' : 'text-gray-900';
-    const textMuted = isDark ? 'text-gray-400' : 'text-gray-500';
-    return ((0, jsx_runtime_1.jsx)("div", { className: `min-h-screen ${bgColor}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `max-w-2xl mx-auto ${layout?.padding || 'p-6'}`, children: [(0, jsx_runtime_1.jsx)("h1", { className: `text-3xl font-bold ${textPrimary} mb-6`, children: "Settings" }), (0, jsx_runtime_1.jsx)("div", { className: `${cardBg} rounded-lg shadow-lg border ${borderColor} p-6`, children: (0, jsx_runtime_1.jsx)("p", { className: textMuted, children: "Settings page content goes here. Use EnhancedSettingsPage for a full-featured implementation." }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-6 text-center", children: (0, jsx_runtime_1.jsx)("a", { href: "/account/profile", className: `text-sm hover:underline ${textMuted}`, children: "Back to Profile" }) })] }) }));
-}