@payez/next-mvp 3.0.0

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

@@ -0,0 +1,302 @@
+"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

@@ -0,0 +1,46 @@
+/**
+ * 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

@@ -0,0 +1,231 @@
+"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

@@ -0,0 +1,8 @@
+/**
+ * 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

@@ -0,0 +1,16 @@
+"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

@@ -0,0 +1,7 @@
+/**
+ * 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

@@ -0,0 +1,26 @@
+"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" }) })] }) }));
+}