styling

src/App.js

@@ -47,6 +47,7 @@ import AdminGallery from './pages/admin/AdminGallery';
 import AdminNewsletters from './pages/admin/AdminNewsletters';
 import AdminFinancials from './pages/admin/AdminFinancials';
 import AdminBylaws from './pages/admin/AdminBylaws';
+import AdminRegistrationBuilder from './pages/admin/AdminRegistrationBuilder';
 import History from './pages/History';
 import MissionValues from './pages/MissionValues';
 import BoardOfDirectors from './pages/BoardOfDirectors';
@@ -61,19 +62,19 @@ import NotFound from './pages/NotFound';
 
 const PrivateRoute = ({ children, adminOnly = false }) => {
   const { user, loading } = useAuth();
-  
+
   if (loading) {
     return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
   }
-  
+
   if (!user) {
     return <Navigate to="/login" />;
   }
-  
+
   if (adminOnly && !['admin', 'superadmin'].includes(user.role)) {
     return <Navigate to="/dashboard" />;
   }
-  
+
   return children;
 };
 
@@ -238,6 +239,20 @@ function App() {
               </AdminLayout>
             </PrivateRoute>
           } />
+          <Route path="/admin/registration" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminRegistrationBuilder />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
+          <Route path="/admin/member-tiers" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminMemberTiers />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
           <Route path="/admin/plans" element={
             <PrivateRoute adminOnly>
               <AdminLayout>
@@ -292,6 +307,7 @@ function App() {
               <Navigate to="/admin/settings/permissions" replace />
             </PrivateRoute>
           } />
+
           <Route path="/admin/settings" element={
             <PrivateRoute adminOnly>
               <AdminLayout>
@@ -302,7 +318,6 @@ function App() {
             <Route index element={<Navigate to="stripe" replace />} />
             <Route path="stripe" element={<AdminSettings />} />
             <Route path="permissions" element={<AdminRoles />} />
-            <Route path="member-tiers" element={<AdminMemberTiers />} />
             <Route path="theme" element={<AdminTheme />} />
           </Route>
 

src/components/AddPaymentMethodDialog.js

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Checkbox } from './ui/checkbox';
+import { Label } from './ui/label';
+import { CreditCard, AlertCircle, Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+import api from '../utils/api';
+
+/**
+ * AddPaymentMethodDialog - Dialog for adding a new payment method using Stripe Elements
+ *
+ * This dialog should be wrapped in an Elements provider with a clientSecret
+ *
+ * @param {string} saveEndpoint - Optional custom API endpoint for saving (default: '/payment-methods')
+ */
+const AddPaymentMethodDialog = ({
+  open,
+  onOpenChange,
+  onSuccess,
+  clientSecret,
+  saveEndpoint = '/payment-methods',
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [loading, setLoading] = useState(false);
+  const [setAsDefault, setSetAsDefault] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!stripe || !elements) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // Get the CardElement
+      const cardElement = elements.getElement(CardElement);
+
+      if (!cardElement) {
+        setError('Card element not found');
+        toast.error('Card element not found');
+        setLoading(false);
+        return;
+      }
+
+      // Confirm the SetupIntent with the card element
+      const { error: stripeError, setupIntent } = await stripe.confirmCardSetup(
+        clientSecret,
+        {
+          payment_method: {
+            card: cardElement,
+          },
+        }
+      );
+
+      if (stripeError) {
+        setError(stripeError.message);
+        toast.error(stripeError.message);
+        setLoading(false);
+        return;
+      }
+
+      if (setupIntent.status === 'succeeded') {
+        // Save the payment method to our backend using the specified endpoint
+        await api.post(saveEndpoint, {
+          stripe_payment_method_id: setupIntent.payment_method,
+          set_as_default: setAsDefault,
+        });
+
+        toast.success('Payment method added successfully');
+        onSuccess?.();
+        onOpenChange(false);
+      } else {
+        setError(`Setup failed with status: ${setupIntent.status}`);
+        toast.error('Failed to set up payment method');
+      }
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || err.message || 'Failed to save payment method';
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-background rounded-2xl border border-[var(--neutral-800)] p-0 overflow-hidden max-w-md">
+        <DialogHeader className="bg-brand-purple text-white px-6 py-4">
+          <div className="flex items-center gap-3">
+            <CreditCard className="h-6 w-6" />
+            <div>
+              <DialogTitle
+                className="text-lg font-semibold text-white"
+                style={{ fontFamily: "'Inter', sans-serif" }}
+              >
+                Add Payment Method
+              </DialogTitle>
+              <DialogDescription
+                className="text-white/80 text-sm"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                Enter your card details securely
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          {/* Stripe Card Element */}
+          <div className="space-y-2">
+            <Label
+              className="text-[var(--purple-ink)]"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Card Information
+            </Label>
+            <div className="border border-[var(--neutral-800)] rounded-xl p-4 bg-white">
+              <CardElement
+                options={{
+                  style: {
+                    base: {
+                      fontSize: '16px',
+                      color: '#2d2a4a',
+                      fontFamily: "'Nunito Sans', sans-serif",
+                      '::placeholder': {
+                        color: '#9ca3af',
+                      },
+                    },
+                    invalid: {
+                      color: '#ef4444',
+                    },
+                  },
+                  hidePostalCode: false,
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Set as Default Checkbox */}
+          <div className="flex items-center space-x-3">
+            <Checkbox
+              id="setAsDefault"
+              checked={setAsDefault}
+              onCheckedChange={setSetAsDefault}
+              className="border-brand-purple data-[state=checked]:bg-brand-purple"
+            />
+            <Label
+              htmlFor="setAsDefault"
+              className="text-sm text-brand-purple cursor-pointer"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Set as default payment method for future payments
+            </Label>
+          </div>
+
+          {/* Error Message */}
+          {error && (
+            <div className="flex items-start gap-2 p-3 bg-red-50 border border-red-200 rounded-xl">
+              <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0 mt-0.5" />
+              <p
+                className="text-sm text-red-600"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                {error}
+              </p>
+            </div>
+          )}
+
+          {/* Security Note */}
+          <p
+            className="text-xs text-brand-purple"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+          >
+            Your card information is securely processed by Stripe. We never store your full card number.
+          </p>
+
+          <DialogFooter className="flex-row gap-3 justify-end pt-4 border-t border-[var(--neutral-800)]">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+              className="border-2 border-[var(--neutral-800)] text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-6"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={!stripe || loading}
+              className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-6"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                'Add Card'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default AddPaymentMethodDialog;

src/components/AdminSidebar.js

@@ -27,6 +27,8 @@ import {
   Heart,
   Sun,
   Moon,
+  Star,
+  FileEdit
 } from 'lucide-react';
 
 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
@@ -104,18 +106,31 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin',
       disabled: false
     },
+
     {
-      name: 'Staff',
+      name: 'Staff & Admins',
       icon: UserCog,
       path: '/admin/staff',
       disabled: false
     },
     {
-      name: 'Members',
+      name: 'Member Roster',
       icon: Users,
       path: '/admin/members',
       disabled: false
     },
+    {
+      name: 'Member Tiers',
+      icon: Star,
+      path: '/admin/member-tiers',
+      disabled: false
+    },
+    {
+      name: 'Registration',
+      icon: FileEdit,
+      path: '/admin/registration',
+      disabled: false
+    },
     {
       name: 'Validations',
       icon: CheckCircle,
@@ -316,6 +331,18 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Dashboard - Standalone */}
           {renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
 
+          {/* Onboarding Section */}
+          {isOpen && (
+            <div className="px-4 py-2 mt-6">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                Onboarding
+              </h3>
+            </div>
+          )}
+          <div className="space-y-1">
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Registration'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+          </div>
           {/* MEMBERSHIP Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
@@ -325,9 +352,9 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             </div>
           )}
           <div className="space-y-1">
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Roster'))}
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Members'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Tiers'))}
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff & Admins'))}
           </div>
 
           {/* FINANCIALS Section */}

src/components/ChangePasswordDialog.js

@@ -128,7 +128,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
             <Button
               type="button"
               onClick={() => onOpenChange(false)}
-              className="btn-outline mr-33"
+              className="btn-outline mr-33 text-white"
             >
               Cancel
             </Button>

src/components/PasswordConfirmDialog.js

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Shield, Eye, EyeOff, Loader2 } from 'lucide-react';
+
+/**
+ * PasswordConfirmDialog - Dialog requiring admin password re-entry for sensitive actions
+ */
+const PasswordConfirmDialog = ({
+  open,
+  onOpenChange,
+  onConfirm,
+  title = 'Confirm Your Identity',
+  description = 'Please enter your password to proceed with this action.',
+  loading = false,
+}) => {
+  const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!password.trim()) {
+      setError('Password is required');
+      return;
+    }
+
+    try {
+      await onConfirm(password);
+      setPassword('');
+    } catch (err) {
+      setError(err.message || 'Invalid password');
+    }
+  };
+
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      setPassword('');
+      setError(null);
+    }
+    onOpenChange(isOpen);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="bg-background rounded-2xl border border-[var(--neutral-800)] p-0 overflow-hidden max-w-md">
+        <DialogHeader className="bg-brand-purple text-white px-6 py-4">
+          <div className="flex items-center gap-3">
+            <Shield className="h-6 w-6" />
+            <div>
+              <DialogTitle
+                className="text-lg font-semibold text-white"
+                style={{ fontFamily: "'Inter', sans-serif" }}
+              >
+                {title}
+              </DialogTitle>
+              <DialogDescription
+                className="text-white/80 text-sm"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                {description}
+              </DialogDescription>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div className="space-y-2">
+            <Label
+              htmlFor="password"
+              className="text-[var(--purple-ink)]"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Your Password
+            </Label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+                className="border-[var(--neutral-800)] pr-10"
+                autoComplete="current-password"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-brand-purple hover:text-[var(--purple-ink)]"
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          {error && (
+            <p
+              className="text-sm text-red-500"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {error}
+            </p>
+          )}
+
+          <DialogFooter className="flex-row gap-3 justify-end pt-4 border-t border-[var(--neutral-800)]">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => handleOpenChange(false)}
+              disabled={loading}
+              className="border-2 border-[var(--neutral-800)] text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-6"
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading || !password.trim()}
+              className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-6"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                'Confirm'
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PasswordConfirmDialog;

src/components/PaymentMethodCard.js

@@ -0,0 +1,186 @@
+import React from 'react';
+import { CreditCard, Trash2, Star, Banknote, Building2, FileCheck } from 'lucide-react';
+import { Button } from './ui/button';
+
+/**
+ * Card brand icon mapping
+ */
+const getBrandIcon = (brand) => {
+  const brandLower = brand?.toLowerCase();
+  // Return text abbreviation for known brands
+  switch (brandLower) {
+    case 'visa':
+      return 'VISA';
+    case 'mastercard':
+      return 'MC';
+    case 'amex':
+    case 'american_express':
+      return 'AMEX';
+    case 'discover':
+      return 'DISC';
+    default:
+      return null;
+  }
+};
+
+/**
+ * Get icon for payment method type
+ */
+const getPaymentTypeIcon = (paymentType) => {
+  switch (paymentType) {
+    case 'cash':
+      return Banknote;
+    case 'bank_transfer':
+      return Building2;
+    case 'check':
+      return FileCheck;
+    default:
+      return CreditCard;
+  }
+};
+
+/**
+ * Format payment type for display
+ */
+const formatPaymentType = (paymentType) => {
+  switch (paymentType) {
+    case 'cash':
+      return 'Cash';
+    case 'bank_transfer':
+      return 'Bank Transfer';
+    case 'check':
+      return 'Check';
+    case 'card':
+      return 'Card';
+    default:
+      return paymentType;
+  }
+};
+
+/**
+ * PaymentMethodCard - Displays a single payment method
+ */
+const PaymentMethodCard = ({
+  method,
+  onSetDefault,
+  onDelete,
+  loading = false,
+  showActions = true,
+}) => {
+  const PaymentIcon = getPaymentTypeIcon(method.payment_type);
+  const brandAbbr = method.card_brand ? getBrandIcon(method.card_brand) : null;
+  const isExpired = method.card_exp_year && method.card_exp_month &&
+    new Date(method.card_exp_year, method.card_exp_month) < new Date();
+
+  return (
+    <div
+      className={`flex items-center justify-between p-4 border rounded-xl ${
+        method.is_default
+          ? 'border-brand-purple bg-[var(--lavender-500)]'
+          : 'border-[var(--neutral-800)] bg-white'
+      } ${isExpired ? 'opacity-70' : ''}`}
+    >
+      <div className="flex items-center gap-4">
+        {/* Payment Method Icon */}
+        <div className={`p-3 rounded-full ${
+          method.is_default
+            ? 'bg-brand-purple text-white'
+            : 'bg-[var(--lavender-300)] text-brand-purple'
+        }`}>
+          <PaymentIcon className="h-5 w-5" />
+        </div>
+
+        {/* Payment Method Details */}
+        <div>
+          {method.payment_type === 'card' ? (
+            <>
+              <div className="flex items-center gap-2">
+                {brandAbbr && (
+                  <span className="text-xs font-bold text-[var(--purple-ink)] bg-[var(--lavender-300)] px-2 py-0.5 rounded">
+                    {brandAbbr}
+                  </span>
+                )}
+                <span
+                  className="font-medium text-[var(--purple-ink)]"
+                  style={{ fontFamily: "'Inter', sans-serif" }}
+                >
+                  {method.card_brand ? method.card_brand.charAt(0).toUpperCase() + method.card_brand.slice(1) : 'Card'} •••• {method.card_last4 || '****'}
+                </span>
+                {method.is_default && (
+                  <span className="flex items-center gap-1 text-xs text-brand-purple font-medium">
+                    <Star className="h-3 w-3 fill-current" />
+                    Default
+                  </span>
+                )}
+              </div>
+              <p
+                className={`text-sm ${isExpired ? 'text-red-500' : 'text-brand-purple'}`}
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                {isExpired ? 'Expired' : 'Expires'} {method.card_exp_month?.toString().padStart(2, '0')}/{method.card_exp_year?.toString().slice(-2)}
+                {method.card_funding && (
+                  <span className="ml-2 text-xs capitalize">({method.card_funding})</span>
+                )}
+              </p>
+            </>
+          ) : (
+            <>
+              <div className="flex items-center gap-2">
+                <span
+                  className="font-medium text-[var(--purple-ink)]"
+                  style={{ fontFamily: "'Inter', sans-serif" }}
+                >
+                  {formatPaymentType(method.payment_type)}
+                </span>
+                {method.is_default && (
+                  <span className="flex items-center gap-1 text-xs text-brand-purple font-medium">
+                    <Star className="h-3 w-3 fill-current" />
+                    Default
+                  </span>
+                )}
+              </div>
+              {method.manual_notes && (
+                <p
+                  className="text-sm text-brand-purple"
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  {method.manual_notes}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      {showActions && (
+        <div className="flex items-center gap-2">
+          {!method.is_default && (
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onSetDefault?.(method.id)}
+              disabled={loading}
+              className="border border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-lg text-xs px-3"
+            >
+              Set Default
+            </Button>
+          )}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onDelete?.(method.id)}
+            disabled={loading}
+            className="border border-red-500 text-red-500 hover:bg-red-50 rounded-lg p-2"
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PaymentMethodCard;

src/components/PaymentMethodsSection.js

@@ -0,0 +1,309 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements } from '@stripe/react-stripe-js';
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { CreditCard, Plus, Loader2, AlertCircle } from 'lucide-react';
+import { toast } from 'sonner';
+import api from '../utils/api';
+import PaymentMethodCard from './PaymentMethodCard';
+import AddPaymentMethodDialog from './AddPaymentMethodDialog';
+import ConfirmationDialog from './ConfirmationDialog';
+
+// Initialize Stripe with publishable key from environment
+const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
+
+/**
+ * PaymentMethodsSection - Manages user payment methods
+ *
+ * Features:
+ * - List saved payment methods
+ * - Add new payment method via Stripe SetupIntent
+ * - Set default payment method
+ * - Delete payment methods
+ */
+const PaymentMethodsSection = () => {
+  const [paymentMethods, setPaymentMethods] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Dialog states
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [clientSecret, setClientSecret] = useState(null);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [methodToDelete, setMethodToDelete] = useState(null);
+
+  /**
+   * Fetch payment methods from API
+   */
+  const fetchPaymentMethods = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await api.get('/payment-methods');
+      setPaymentMethods(response.data);
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to load payment methods';
+      setError(errorMessage);
+      console.error('Failed to fetch payment methods:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchPaymentMethods();
+  }, [fetchPaymentMethods]);
+
+  /**
+   * Create SetupIntent and open add dialog
+   */
+  const handleAddNew = async () => {
+    try {
+      setActionLoading(true);
+      const response = await api.post('/payment-methods/setup-intent');
+      setClientSecret(response.data.client_secret);
+      setAddDialogOpen(true);
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to initialize payment setup';
+      toast.error(errorMessage);
+      console.error('Failed to create setup intent:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Handle successful payment method addition
+   */
+  const handleAddSuccess = () => {
+    setAddDialogOpen(false);
+    setClientSecret(null);
+    fetchPaymentMethods();
+  };
+
+  /**
+   * Set a payment method as default
+   */
+  const handleSetDefault = async (methodId) => {
+    try {
+      setActionLoading(true);
+      await api.put(`/payment-methods/${methodId}/default`);
+      toast.success('Default payment method updated');
+      fetchPaymentMethods();
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to update default payment method';
+      toast.error(errorMessage);
+      console.error('Failed to set default:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Open delete confirmation dialog
+   */
+  const handleDeleteClick = (methodId) => {
+    setMethodToDelete(methodId);
+    setDeleteConfirmOpen(true);
+  };
+
+  /**
+   * Confirm and delete payment method
+   */
+  const handleDeleteConfirm = async () => {
+    if (!methodToDelete) return;
+
+    try {
+      setActionLoading(true);
+      await api.delete(`/payment-methods/${methodToDelete}`);
+      toast.success('Payment method removed');
+      setDeleteConfirmOpen(false);
+      setMethodToDelete(null);
+      fetchPaymentMethods();
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to remove payment method';
+      toast.error(errorMessage);
+      console.error('Failed to delete payment method:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  // Stripe Elements options - simplified for CardElement
+  const elementsOptions = {
+    appearance: {
+      theme: 'stripe',
+      variables: {
+        colorPrimary: '#6b5b95',
+        colorBackground: '#ffffff',
+        colorText: '#2d2a4a',
+        colorDanger: '#ef4444',
+        fontFamily: "'Nunito Sans', sans-serif",
+        borderRadius: '12px',
+      },
+    },
+  };
+
+  return (
+    <>
+      <Card className="space-y-4 px-6 pb-6">
+        {/* Header */}
+        <div className="bg-brand-purple text-white px-4 py-3 rounded-t-lg -mx-6 -mt-0 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <CreditCard className="h-5 w-5" />
+            <h3
+              className="font-semibold"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Payment Methods
+            </h3>
+          </div>
+          <Button
+            type="button"
+            onClick={handleAddNew}
+            disabled={actionLoading}
+            size="sm"
+            className="bg-white text-brand-purple hover:bg-[var(--lavender-300)] rounded-lg px-3 py-1"
+          >
+            {actionLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <>
+                <Plus className="h-4 w-4 mr-1" />
+                Add
+              </>
+            )}
+          </Button>
+        </div>
+
+        {/* Loading State */}
+        {loading && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-6 w-6 animate-spin text-brand-purple" />
+            <span
+              className="ml-2 text-brand-purple"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Loading payment methods...
+            </span>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !loading && (
+          <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-xl">
+            <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0" />
+            <p
+              className="text-sm text-red-600"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              {error}
+            </p>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={fetchPaymentMethods}
+              className="ml-auto border-red-500 text-red-500 hover:bg-red-50 rounded-lg"
+            >
+              Retry
+            </Button>
+          </div>
+        )}
+
+        {/* Payment Methods List */}
+        {!loading && !error && (
+          <div className="space-y-3">
+            {paymentMethods.length === 0 ? (
+              <div className="text-center py-8">
+                <CreditCard className="h-12 w-12 text-[var(--lavender-500)] mx-auto mb-3" />
+                <p
+                  className="text-brand-purple mb-2"
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  No payment methods saved
+                </p>
+                <p
+                  className="text-sm text-brand-purple/70 mb-4"
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  Add a card to make payments easier
+                </p>
+                <Button
+                  type="button"
+                  onClick={handleAddNew}
+                  disabled={actionLoading}
+                  className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-full px-6"
+                >
+                  {actionLoading ? (
+                    <>
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                      Setting up...
+                    </>
+                  ) : (
+                    <>
+                      <Plus className="h-4 w-4 mr-2" />
+                      Add Payment Method
+                    </>
+                  )}
+                </Button>
+              </div>
+            ) : (
+              paymentMethods.map((method) => (
+                <PaymentMethodCard
+                  key={method.id}
+                  method={method}
+                  onSetDefault={handleSetDefault}
+                  onDelete={handleDeleteClick}
+                  loading={actionLoading}
+                />
+              ))
+            )}
+          </div>
+        )}
+
+        {/* Info Text */}
+        {!loading && paymentMethods.length > 0 && (
+          <p
+            className="text-xs text-brand-purple/70 pt-2 border-t border-[var(--neutral-800)]"
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+          >
+            Your default payment method will be used for subscription renewals and donations.
+          </p>
+        )}
+      </Card>
+
+      {/* Add Payment Method Dialog */}
+      {clientSecret && stripePromise && (
+        <Elements stripe={stripePromise} options={elementsOptions}>
+          <AddPaymentMethodDialog
+            open={addDialogOpen}
+            onOpenChange={(open) => {
+              setAddDialogOpen(open);
+              if (!open) setClientSecret(null);
+            }}
+            onSuccess={handleAddSuccess}
+            clientSecret={clientSecret}
+          />
+        </Elements>
+      )}
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmationDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        onConfirm={handleDeleteConfirm}
+        title="Remove Payment Method"
+        description="Are you sure you want to remove this payment method? This action cannot be undone."
+        confirmText="Remove"
+        cancelText="Cancel"
+        variant="danger"
+        loading={actionLoading}
+      />
+    </>
+  );
+};
+
+export default PaymentMethodsSection;

src/components/SettingsSidebar.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
-import { CreditCard, Shield, Star, Palette } from 'lucide-react';
+import { CreditCard, Shield, Star, Palette, FileEdit } from 'lucide-react';
 
 const settingsItems = [
   { label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
   { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
-  { label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
   { label: 'Theme', path: '/admin/settings/theme', icon: Palette },
+
 ];
 
 const SettingsTabs = () => {

src/components/admin/AdminPaymentMethodsPanel.js

@@ -0,0 +1,531 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import { Elements } from '@stripe/react-stripe-js';
+import { Card } from '../ui/card';
+import { Button } from '../ui/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { Textarea } from '../ui/textarea';
+import { Label } from '../ui/label';
+import {
+  CreditCard,
+  Plus,
+  Loader2,
+  AlertCircle,
+  Eye,
+  Banknote,
+  Building2,
+  FileCheck,
+  Trash2,
+  Star,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import api from '../../utils/api';
+import ConfirmationDialog from '../ConfirmationDialog';
+import PasswordConfirmDialog from '../PasswordConfirmDialog';
+import AddPaymentMethodDialog from '../AddPaymentMethodDialog';
+
+// Initialize Stripe with publishable key from environment
+const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
+
+/**
+ * Get icon for payment method type
+ */
+const getPaymentTypeIcon = (paymentType) => {
+  switch (paymentType) {
+    case 'cash':
+      return Banknote;
+    case 'bank_transfer':
+      return Building2;
+    case 'check':
+      return FileCheck;
+    default:
+      return CreditCard;
+  }
+};
+
+/**
+ * Format payment type for display
+ */
+const formatPaymentType = (paymentType) => {
+  switch (paymentType) {
+    case 'cash':
+      return 'Cash';
+    case 'bank_transfer':
+      return 'Bank Transfer';
+    case 'check':
+      return 'Check';
+    case 'card':
+      return 'Card';
+    default:
+      return paymentType;
+  }
+};
+
+/**
+ * AdminPaymentMethodsPanel - Admin panel for managing user payment methods
+ */
+const AdminPaymentMethodsPanel = ({ userId, userName }) => {
+  const [paymentMethods, setPaymentMethods] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [actionLoading, setActionLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  // Dialog states
+  const [addCardDialogOpen, setAddCardDialogOpen] = useState(false);
+  const [addManualDialogOpen, setAddManualDialogOpen] = useState(false);
+  const [clientSecret, setClientSecret] = useState(null);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
+  const [methodToDelete, setMethodToDelete] = useState(null);
+  const [revealDialogOpen, setRevealDialogOpen] = useState(false);
+  const [revealedData, setRevealedData] = useState(null);
+
+  // Manual payment form state
+  const [manualPaymentType, setManualPaymentType] = useState('cash');
+  const [manualNotes, setManualNotes] = useState('');
+  const [manualSetDefault, setManualSetDefault] = useState(false);
+
+  /**
+   * Fetch payment methods from API
+   */
+  const fetchPaymentMethods = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await api.get(`/admin/users/${userId}/payment-methods`);
+      setPaymentMethods(response.data);
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to load payment methods';
+      setError(errorMessage);
+      console.error('Failed to fetch payment methods:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    if (userId) {
+      fetchPaymentMethods();
+    }
+  }, [userId, fetchPaymentMethods]);
+
+  /**
+   * Create SetupIntent for adding a card
+   */
+  const handleAddCard = async () => {
+    try {
+      setActionLoading(true);
+      const response = await api.post(`/admin/users/${userId}/payment-methods/setup-intent`);
+      setClientSecret(response.data.client_secret);
+      setAddCardDialogOpen(true);
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to initialize payment setup';
+      toast.error(errorMessage);
+      console.error('Failed to create setup intent:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Handle successful card addition
+   */
+  const handleCardAddSuccess = () => {
+    setAddCardDialogOpen(false);
+    setClientSecret(null);
+    fetchPaymentMethods();
+  };
+
+  /**
+   * Save manual payment method
+   */
+  const handleSaveManualPayment = async () => {
+    try {
+      setActionLoading(true);
+      await api.post(`/admin/users/${userId}/payment-methods/manual`, {
+        payment_type: manualPaymentType,
+        manual_notes: manualNotes || null,
+        set_as_default: manualSetDefault,
+      });
+      toast.success('Manual payment method recorded');
+      setAddManualDialogOpen(false);
+      setManualPaymentType('cash');
+      setManualNotes('');
+      setManualSetDefault(false);
+      fetchPaymentMethods();
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to record payment method';
+      toast.error(errorMessage);
+      console.error('Failed to save manual payment:', err);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Set a payment method as default
+   */
+  const handleSetDefault = async (methodId) => {
+    try {
+      setActionLoading(true);
+      await api.put(`/admin/users/${userId}/payment-methods/${methodId}/default`);
+      toast.success('Default payment method updated');
+      fetchPaymentMethods();
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to update default';
+      toast.error(errorMessage);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Confirm and delete payment method
+   */
+  const handleDeleteConfirm = async () => {
+    if (!methodToDelete) return;
+
+    try {
+      setActionLoading(true);
+      await api.delete(`/admin/users/${userId}/payment-methods/${methodToDelete}`);
+      toast.success('Payment method removed');
+      setDeleteConfirmOpen(false);
+      setMethodToDelete(null);
+      fetchPaymentMethods();
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to remove payment method';
+      toast.error(errorMessage);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  /**
+   * Reveal sensitive payment details with password confirmation
+   */
+  const handleRevealDetails = async (password) => {
+    try {
+      setActionLoading(true);
+      const response = await api.post(`/admin/users/${userId}/payment-methods/reveal`, {
+        password,
+      });
+      setRevealedData(response.data);
+      setRevealDialogOpen(false);
+      toast.success('Sensitive details revealed');
+    } catch (err) {
+      const errorMessage = err.response?.data?.detail || 'Failed to reveal details';
+      throw new Error(errorMessage);
+    } finally {
+      setActionLoading(false);
+    }
+  };
+
+  // Stripe Elements options - simplified for CardElement
+  const elementsOptions = {
+    appearance: {
+      theme: 'stripe',
+      variables: {
+        colorPrimary: '#6b5b95',
+        colorBackground: '#ffffff',
+        colorText: '#2d2a4a',
+        fontFamily: "'Nunito Sans', sans-serif",
+        borderRadius: '12px',
+      },
+    },
+  };
+
+  return (
+    <>
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2">
+            <CreditCard className="h-5 w-5 text-brand-purple" />
+            <h2
+              className="text-lg font-semibold text-[var(--purple-ink)]"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Payment Methods
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              onClick={() => setRevealDialogOpen(true)}
+              disabled={actionLoading || paymentMethods.length === 0}
+              variant="outline"
+              size="sm"
+              className="border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-lg"
+            >
+              <Eye className="h-4 w-4 mr-1" />
+              Reveal Details
+            </Button>
+            <Button
+              type="button"
+              onClick={() => setAddManualDialogOpen(true)}
+              disabled={actionLoading}
+              variant="outline"
+              size="sm"
+              className="border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-lg"
+            >
+              <Banknote className="h-4 w-4 mr-1" />
+              Add Manual
+            </Button>
+            <Button
+              type="button"
+              onClick={handleAddCard}
+              disabled={actionLoading}
+              size="sm"
+              className="bg-brand-purple text-white hover:bg-[var(--purple-ink)] rounded-lg"
+            >
+              {actionLoading ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <>
+                  <Plus className="h-4 w-4 mr-1" />
+                  Add Card
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {loading && (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-6 w-6 animate-spin text-brand-purple" />
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !loading && (
+          <div className="flex items-center gap-2 p-4 bg-red-50 border border-red-200 rounded-xl">
+            <AlertCircle className="h-5 w-5 text-red-500 flex-shrink-0" />
+            <p className="text-sm text-red-600">{error}</p>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={fetchPaymentMethods}
+              className="ml-auto"
+            >
+              Retry
+            </Button>
+          </div>
+        )}
+
+        {/* Payment Methods List */}
+        {!loading && !error && (
+          <div className="space-y-3">
+            {paymentMethods.length === 0 ? (
+              <p
+                className="text-center py-6 text-brand-purple"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                No payment methods on file for this user.
+              </p>
+            ) : (
+              (revealedData || paymentMethods).map((method) => {
+                const PaymentIcon = getPaymentTypeIcon(method.payment_type);
+                return (
+                  <div
+                    key={method.id}
+                    className={`flex items-center justify-between p-4 border rounded-xl ${
+                      method.is_default
+                        ? 'border-brand-purple bg-[var(--lavender-500)]'
+                        : 'border-[var(--neutral-800)] bg-white'
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={`p-2 rounded-full ${
+                          method.is_default
+                            ? 'bg-brand-purple text-white'
+                            : 'bg-[var(--lavender-300)] text-brand-purple'
+                        }`}
+                      >
+                        <PaymentIcon className="h-4 w-4" />
+                      </div>
+                      <div>
+                        {method.payment_type === 'card' ? (
+                          <>
+                            <div className="flex items-center gap-2">
+                              <span
+                                className="font-medium text-[var(--purple-ink)]"
+                                style={{ fontFamily: "'Inter', sans-serif" }}
+                              >
+                                {method.card_brand
+                                  ? method.card_brand.charAt(0).toUpperCase() +
+                                    method.card_brand.slice(1)
+                                  : 'Card'}{' '}
+                                •••• {method.card_last4 || '****'}
+                              </span>
+                              {method.is_default && (
+                                <span className="flex items-center gap-1 text-xs text-brand-purple font-medium">
+                                  <Star className="h-3 w-3 fill-current" />
+                                  Default
+                                </span>
+                              )}
+                            </div>
+                            <p
+                              className="text-sm text-brand-purple"
+                              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                            >
+                              Expires {method.card_exp_month?.toString().padStart(2, '0')}/
+                              {method.card_exp_year?.toString().slice(-2)}
+                              {revealedData && method.stripe_payment_method_id && (
+                                <span className="ml-2 text-xs font-mono bg-[var(--lavender-300)] px-2 py-0.5 rounded">
+                                  {method.stripe_payment_method_id}
+                                </span>
+                              )}
+                            </p>
+                          </>
+                        ) : (
+                          <>
+                            <div className="flex items-center gap-2">
+                              <span
+                                className="font-medium text-[var(--purple-ink)]"
+                                style={{ fontFamily: "'Inter', sans-serif" }}
+                              >
+                                {formatPaymentType(method.payment_type)}
+                              </span>
+                              {method.is_default && (
+                                <span className="flex items-center gap-1 text-xs text-brand-purple font-medium">
+                                  <Star className="h-3 w-3 fill-current" />
+                                  Default
+                                </span>
+                              )}
+                            </div>
+                            {method.manual_notes && (
+                              <p
+                                className="text-sm text-brand-purple"
+                                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                              >
+                                {method.manual_notes}
+                              </p>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center gap-2">
+                      {!method.is_default && (
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleSetDefault(method.id)}
+                          disabled={actionLoading}
+                          className="text-xs"
+                        >
+                          Set Default
+                        </Button>
+                      )}
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => {
+                          setMethodToDelete(method.id);
+                          setDeleteConfirmOpen(true);
+                        }}
+                        disabled={actionLoading}
+                        className="border-red-500 text-red-500 hover:bg-red-50 p-2"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </div>
+                );
+              })
+            )}
+          </div>
+        )}
+      </Card>
+
+      {/* Add Card Dialog */}
+      {clientSecret && stripePromise && (
+        <Elements stripe={stripePromise} options={elementsOptions}>
+          <AddPaymentMethodDialog
+            open={addCardDialogOpen}
+            onOpenChange={(open) => {
+              setAddCardDialogOpen(open);
+              if (!open) setClientSecret(null);
+            }}
+            onSuccess={handleCardAddSuccess}
+            clientSecret={clientSecret}
+            saveEndpoint={`/admin/users/${userId}/payment-methods`}
+          />
+        </Elements>
+      )}
+
+      {/* Add Manual Payment Method Dialog */}
+      <ConfirmationDialog
+        open={addManualDialogOpen}
+        onOpenChange={setAddManualDialogOpen}
+        onConfirm={handleSaveManualPayment}
+        title="Record Manual Payment Method"
+        description={
+          <div className="space-y-4 mt-4">
+            <div className="space-y-2">
+              <Label>Payment Type</Label>
+              <Select value={manualPaymentType} onValueChange={setManualPaymentType}>
+                <SelectTrigger className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="cash">Cash</SelectItem>
+                  <SelectItem value="check">Check</SelectItem>
+                  <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>Notes (optional)</Label>
+              <Textarea
+                value={manualNotes}
+                onChange={(e) => setManualNotes(e.target.value)}
+                placeholder="e.g., Check #1234, received 01/15/2026"
+                className="min-h-[80px]"
+              />
+            </div>
+          </div>
+        }
+        confirmText="Save"
+        variant="info"
+        loading={actionLoading}
+      />
+
+      {/* Delete Confirmation Dialog */}
+      <ConfirmationDialog
+        open={deleteConfirmOpen}
+        onOpenChange={setDeleteConfirmOpen}
+        onConfirm={handleDeleteConfirm}
+        title="Remove Payment Method"
+        description="Are you sure you want to remove this payment method? This action cannot be undone."
+        confirmText="Remove"
+        variant="danger"
+        loading={actionLoading}
+      />
+
+      {/* Password Confirm Dialog for Reveal */}
+      <PasswordConfirmDialog
+        open={revealDialogOpen}
+        onOpenChange={setRevealDialogOpen}
+        onConfirm={handleRevealDetails}
+        title="Reveal Sensitive Details"
+        description="Enter your password to view Stripe payment method IDs. This action will be logged."
+        loading={actionLoading}
+      />
+    </>
+  );
+};
+
+export default AdminPaymentMethodsPanel;

src/components/registration/DynamicFormField.js

@@ -0,0 +1,427 @@
+import React from 'react';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { Checkbox } from '../ui/checkbox';
+import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+
+/**
+ * DynamicFormField - Renders form fields based on schema configuration
+ *
+ * Supports field types:
+ * - text, email, phone, password: Input fields
+ * - date: Date picker input
+ * - textarea: Multi-line text input
+ * - checkbox: Single checkbox
+ * - radio: Radio button group
+ * - dropdown: Select dropdown
+ * - multiselect: Checkbox group for multiple selections
+ * - address_group: Group of address-related fields
+ * - file_upload: File upload input
+ */
+const DynamicFormField = ({
+  field,
+  value,
+  onChange,
+  errors = [],
+  formData = {},
+}) => {
+  const {
+    id,
+    type,
+    label,
+    required,
+    placeholder,
+    options = [],
+    rows = 4,
+    validation = {},
+  } = field;
+
+  const hasError = errors.length > 0;
+  const errorMessage = errors[0];
+
+  const formatPhoneNumber = (rawValue) => {
+    const digits = String(rawValue || '').replace(/\D/g, '').slice(0, 10);
+    if (digits.length <= 3) return digits;
+    if (digits.length <= 6) {
+      return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+    }
+    return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
+  };
+
+  // Common input className
+  const inputClassName = `h-14 rounded-xl border-2 ${
+    hasError
+      ? 'border-red-500 focus:border-red-500'
+      : 'border-[var(--neutral-800)] focus:border-brand-purple'
+  }`;
+
+  // Handle change for different field types
+  const handleInputChange = (e) => {
+    const { value: newValue, type: inputType, checked } = e.target;
+    if (inputType === 'checkbox') {
+      onChange(id, checked);
+      return;
+    }
+    if (type === 'phone') {
+      onChange(id, formatPhoneNumber(newValue));
+      return;
+    } else {
+      onChange(id, newValue);
+    }
+  };
+
+  const handleSelectChange = (newValue) => {
+    onChange(id, newValue);
+  };
+
+  const handleCheckboxChange = (checked) => {
+    onChange(id, checked);
+  };
+
+  const handleMultiselectChange = (optionValue) => {
+    const currentValues = Array.isArray(value) ? value : [];
+    const newValues = currentValues.includes(optionValue)
+      ? currentValues.filter((v) => v !== optionValue)
+      : [...currentValues, optionValue];
+    onChange(id, newValues);
+  };
+
+  // Render error message
+  const renderError = () => {
+    if (!hasError) return null;
+    return (
+      <p className="text-sm text-red-500 mt-1">{errorMessage}</p>
+    );
+  };
+
+  // Render label
+  const renderLabel = () => (
+    <Label htmlFor={id} className={hasError ? 'text-red-500' : ''}>
+      {label} {required && '*'}
+    </Label>
+  );
+
+  // Render based on field type
+  switch (type) {
+    case 'text':
+    case 'email':
+    case 'phone':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type={type === 'phone' ? 'tel' : type}
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            inputMode={type === 'phone' ? 'numeric' : undefined}
+            maxLength={type === 'phone' ? 14 : undefined}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'password':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="password"
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            minLength={validation.minLength}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'date':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="date"
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'textarea':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Textarea
+            id={id}
+            name={id}
+            required={required}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            rows={rows}
+            className={`rounded-xl border-2 ${
+              hasError
+                ? 'border-red-500 focus:border-red-500'
+                : 'border-[var(--neutral-800)] focus:border-brand-purple'
+            }`}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+
+    case 'checkbox':
+      return (
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id={id}
+            name={id}
+            checked={value || false}
+            onCheckedChange={handleCheckboxChange}
+            data-testid={`field-${id}`}
+          />
+          <Label
+            htmlFor={id}
+            className={`text-base cursor-pointer ${hasError ? 'text-red-500' : ''}`}
+          >
+            {label} {required && '*'}
+          </Label>
+          {renderError()}
+        </div>
+      );
+
+    case 'radio':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <RadioGroup
+            value={value || ''}
+            onValueChange={handleSelectChange}
+            className="space-y-2"
+          >
+            {options.map((option) => (
+              <div key={option.value} className="flex items-center space-x-2">
+                <RadioGroupItem
+                  value={option.value}
+                  id={`${id}-${option.value}`}
+                  data-testid={`field-${id}-${option.value}`}
+                />
+                <Label
+                  htmlFor={`${id}-${option.value}`}
+                  className="text-base cursor-pointer"
+                >
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+          {renderError()}
+        </div>
+      );
+
+    case 'dropdown':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Select value={value || ''} onValueChange={handleSelectChange}>
+            <SelectTrigger
+              className={`h-14 rounded-xl border-2 ${
+                hasError
+                  ? 'border-red-500'
+                  : 'border-[var(--neutral-800)] focus:border-brand-purple'
+              }`}
+              data-testid={`field-${id}`}
+            >
+              <SelectValue placeholder={placeholder || 'Select an option'} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {renderError()}
+        </div>
+      );
+
+    case 'multiselect':
+      const selectedValues = Array.isArray(value) ? value : [];
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <div className="space-y-3">
+            {options.map((option) => (
+              <div key={option.value} className="flex items-center space-x-2">
+                <Checkbox
+                  id={`${id}-${option.value}`}
+                  checked={selectedValues.includes(option.value)}
+                  onCheckedChange={() => handleMultiselectChange(option.value)}
+                  data-testid={`field-${id}-${option.value}`}
+                />
+                <Label
+                  htmlFor={`${id}-${option.value}`}
+                  className="text-base cursor-pointer"
+                >
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </div>
+          {renderError()}
+        </div>
+      );
+
+    case 'address_group':
+      // Address group renders multiple related fields
+      return (
+        <div className="space-y-4">
+          {renderLabel()}
+          <div className="space-y-4">
+            <Input
+              id={`${id}_address`}
+              name={`${id}_address`}
+              placeholder="Street Address"
+              value={formData[`${id}_address`] || ''}
+              onChange={(e) => onChange(`${id}_address`, e.target.value)}
+              className={inputClassName}
+              required={required}
+            />
+            <div className="grid md:grid-cols-3 gap-4">
+              <Input
+                id={`${id}_city`}
+                name={`${id}_city`}
+                placeholder="City"
+                value={formData[`${id}_city`] || ''}
+                onChange={(e) => onChange(`${id}_city`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+              <Input
+                id={`${id}_state`}
+                name={`${id}_state`}
+                placeholder="State"
+                value={formData[`${id}_state`] || ''}
+                onChange={(e) => onChange(`${id}_state`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+              <Input
+                id={`${id}_zipcode`}
+                name={`${id}_zipcode`}
+                placeholder="Zipcode"
+                value={formData[`${id}_zipcode`] || ''}
+                onChange={(e) => onChange(`${id}_zipcode`, e.target.value)}
+                className={inputClassName}
+                required={required}
+              />
+            </div>
+          </div>
+          {renderError()}
+        </div>
+      );
+
+    case 'file_upload':
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            type="file"
+            accept={field.allowed_types?.join(',')}
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              onChange(id, file);
+            }}
+            className={`h-14 rounded-xl border-2 pt-3 ${
+              hasError
+                ? 'border-red-500'
+                : 'border-[var(--neutral-800)] focus:border-brand-purple'
+            }`}
+            data-testid={`field-${id}`}
+          />
+          {field.max_size_mb && (
+            <p className="text-sm text-muted-foreground">
+              Max file size: {field.max_size_mb}MB
+            </p>
+          )}
+          {renderError()}
+        </div>
+      );
+
+    default:
+      console.warn(`Unknown field type: ${type}`);
+      return (
+        <div className="space-y-2">
+          {renderLabel()}
+          <Input
+            id={id}
+            name={id}
+            value={value || ''}
+            onChange={handleInputChange}
+            placeholder={placeholder}
+            className={inputClassName}
+            data-testid={`field-${id}`}
+          />
+          {renderError()}
+        </div>
+      );
+  }
+};
+
+/**
+ * Get width class based on field width configuration
+ */
+export const getWidthClass = (width) => {
+  switch (width) {
+    case 'half':
+      return 'md:col-span-1';
+    case 'third':
+      return 'md:col-span-1';
+    case 'two-thirds':
+      return 'md:col-span-2';
+    case 'full':
+    default:
+      return 'md:col-span-2';
+  }
+};
+
+/**
+ * Get grid columns class based on field widths in a row
+ */
+export const getGridClass = (fields) => {
+  const hasThird = fields.some((f) => f.width === 'third');
+  if (hasThird) {
+    return 'grid md:grid-cols-3 gap-4';
+  }
+  return 'grid md:grid-cols-2 gap-4';
+};
+
+export default DynamicFormField;

src/components/registration/DynamicRegistrationForm.js

@@ -0,0 +1,482 @@
+import React, { useMemo, useCallback } from 'react';
+import DynamicFormField, { getWidthClass } from './DynamicFormField';
+
+/**
+ * DynamicRegistrationForm - Renders the entire registration form from schema
+ *
+ * Features:
+ * - Renders steps and sections based on schema
+ * - Handles conditional field visibility
+ * - Supports step navigation
+ * - Validates fields per step
+ */
+const DynamicRegistrationForm = ({
+  schema,
+  formData,
+  onFormDataChange,
+  currentStep,
+  errors = {},
+}) => {
+  // Get current step data
+  const stepData = useMemo(() => {
+    const steps = schema?.steps || [];
+    const sortedSteps = [...steps].sort((a, b) => a.order - b.order);
+    return sortedSteps[currentStep - 1] || null;
+  }, [schema, currentStep]);
+
+  // Evaluate conditional rules to determine which fields are visible
+  const hiddenFields = useMemo(() => {
+    const rules = schema?.conditional_rules || [];
+    const hidden = new Set();
+
+    // First pass: collect fields that have "show" rules (hidden by default)
+    for (const rule of rules) {
+      if (rule.action === 'show') {
+        rule.target_fields?.forEach((fieldId) => hidden.add(fieldId));
+      }
+    }
+
+    // Second pass: evaluate rules and show/hide fields
+    for (const rule of rules) {
+      const {
+        trigger_field,
+        trigger_operator = 'equals',
+        trigger_value,
+        action,
+        target_fields = [],
+      } = rule;
+
+      const fieldValue = formData[trigger_field];
+      let conditionMet = false;
+
+      switch (trigger_operator) {
+        case 'equals':
+          conditionMet = fieldValue === trigger_value;
+          break;
+        case 'not_equals':
+          conditionMet = fieldValue !== trigger_value;
+          break;
+        case 'contains':
+          conditionMet = Array.isArray(fieldValue)
+            ? fieldValue.includes(trigger_value)
+            : String(fieldValue || '').includes(trigger_value);
+          break;
+        case 'not_empty':
+          conditionMet = Boolean(fieldValue);
+          break;
+        case 'empty':
+          conditionMet = !Boolean(fieldValue);
+          break;
+        default:
+          conditionMet = false;
+      }
+
+      if (conditionMet) {
+        if (action === 'show') {
+          target_fields.forEach((fieldId) => hidden.delete(fieldId));
+        } else if (action === 'hide') {
+          target_fields.forEach((fieldId) => hidden.add(fieldId));
+        }
+      }
+    }
+
+    return hidden;
+  }, [schema, formData]);
+
+  // Handle field change
+  const handleFieldChange = useCallback(
+    (fieldId, value) => {
+      onFormDataChange((prev) => ({
+        ...prev,
+        [fieldId]: value,
+      }));
+    },
+    [onFormDataChange]
+  );
+
+  // Check if a field is visible
+  const isFieldVisible = useCallback(
+    (fieldId) => {
+      return !hiddenFields.has(fieldId);
+    },
+    [hiddenFields]
+  );
+
+  // Get errors for a specific field
+  const getFieldErrors = useCallback(
+    (fieldId) => {
+      return errors[fieldId] || [];
+    },
+    [errors]
+  );
+
+  // Group fields by their width for rendering
+  const groupFieldsByRow = (fields) => {
+    const rows = [];
+    let currentRow = [];
+    let currentRowWidth = 0;
+
+    const visibleFields = fields.filter((f) => isFieldVisible(f.id));
+
+    for (const field of visibleFields) {
+      const width = field.width || 'full';
+      let widthValue = 1;
+
+      if (width === 'half') widthValue = 0.5;
+      else if (width === 'third') widthValue = 0.33;
+      else if (width === 'two-thirds') widthValue = 0.67;
+
+      if (currentRowWidth + widthValue > 1) {
+        if (currentRow.length > 0) {
+          rows.push(currentRow);
+        }
+        currentRow = [field];
+        currentRowWidth = widthValue;
+      } else {
+        currentRow.push(field);
+        currentRowWidth += widthValue;
+      }
+    }
+
+    if (currentRow.length > 0) {
+      rows.push(currentRow);
+    }
+
+    return rows;
+  };
+
+  if (!stepData) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        No step data available
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Step Header */}
+      {stepData.description && (
+        <p
+          className="text-brand-purple"
+          style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+        >
+          {stepData.description}
+        </p>
+      )}
+
+      {/* Sections */}
+      {stepData.sections
+        ?.sort((a, b) => a.order - b.order)
+        .map((section) => {
+          const visibleFields = section.fields?.filter((f) =>
+            isFieldVisible(f.id)
+          );
+
+          // Skip empty sections
+          if (!visibleFields || visibleFields.length === 0) {
+            return null;
+          }
+
+          const fieldRows = groupFieldsByRow(
+            section.fields?.sort((a, b) => a.order - b.order) || []
+          );
+
+          return (
+            <div key={section.id} className="space-y-4">
+              {/* Section Title */}
+              {section.title && (
+                <h2
+                  className="text-2xl font-semibold text-[var(--purple-ink)]"
+                  style={{ fontFamily: "'Inter', sans-serif" }}
+                >
+                  {section.title}
+                </h2>
+              )}
+
+              {/* Section Description */}
+              {section.description && (
+                <p className="text-muted-foreground">{section.description}</p>
+              )}
+
+              {/* Fields */}
+              <div className="space-y-4">
+                {fieldRows.map((row, rowIndex) => {
+                  // Determine grid class based on field widths
+                  const hasThird = row.some((f) => f.width === 'third');
+                  const hasHalf = row.some((f) => f.width === 'half');
+                  const gridCols = hasThird
+                    ? 'grid md:grid-cols-3 gap-4'
+                    : hasHalf
+                    ? 'grid md:grid-cols-2 gap-4'
+                    : '';
+
+                  if (row.length === 1 && !hasHalf && !hasThird) {
+                    // Single full-width field
+                    const field = row[0];
+                    return (
+                      <DynamicFormField
+                        key={field.id}
+                        field={field}
+                        value={formData[field.id]}
+                        onChange={handleFieldChange}
+                        errors={getFieldErrors(field.id)}
+                        formData={formData}
+                      />
+                    );
+                  }
+
+                  return (
+                    <div key={`row-${rowIndex}`} className={gridCols}>
+                      {row.map((field) => (
+                        <div
+                          key={field.id}
+                          className={getWidthClass(field.width)}
+                        >
+                          <DynamicFormField
+                            field={field}
+                            value={formData[field.id]}
+                            onChange={handleFieldChange}
+                            errors={getFieldErrors(field.id)}
+                            formData={formData}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+/**
+ * DynamicStepIndicator - Renders step progress indicator
+ */
+export const DynamicStepIndicator = ({ steps, currentStep }) => {
+  const sortedSteps = [...steps].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between">
+        {sortedSteps.map((step, index) => {
+          const stepNumber = index + 1;
+          const isActive = stepNumber === currentStep;
+          const isCompleted = stepNumber < currentStep;
+
+          return (
+            <div key={step.id} className="flex items-center flex-1">
+              {/* Step Circle */}
+              <div className="flex flex-col items-center">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center text-lg font-medium transition-colors ${
+                    isActive
+                      ? 'bg-brand-purple text-white'
+                      : isCompleted
+                      ? 'bg-green-500 text-white'
+                      : 'bg-[var(--neutral-800)] text-[var(--purple-ink)]'
+                  }`}
+                >
+                  {isCompleted ? '✓' : stepNumber}
+                </div>
+                <span
+                  className={`mt-2 text-sm text-center hidden md:block ${
+                    isActive ? 'text-brand-purple font-medium' : 'text-muted-foreground'
+                  }`}
+                >
+                  {step.title}
+                </span>
+              </div>
+
+              {/* Connector Line */}
+              {index < sortedSteps.length - 1 && (
+                <div
+                  className={`flex-1 h-1 mx-4 rounded ${
+                    isCompleted
+                      ? 'bg-green-500'
+                      : 'bg-[var(--neutral-800)]'
+                  }`}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Validate a single step based on schema
+ */
+export const validateStep = (stepData, formData, hiddenFields) => {
+  const errors = {};
+
+  if (!stepData?.sections) return { isValid: true, errors };
+
+  for (const section of stepData.sections) {
+    // Check section-level validation (e.g., atLeastOne)
+    const sectionValidation = section.validation || {};
+    if (sectionValidation.atLeastOne) {
+      const fieldIds = (section.fields || []).map((f) => f.id);
+      const hasValue = fieldIds.some((id) => {
+        if (hiddenFields.has(id)) return true; // Skip hidden fields
+        const value = formData[id];
+        return Boolean(value);
+      });
+      if (!hasValue) {
+        // Add error to first field in section
+        const firstFieldId = fieldIds[0];
+        if (firstFieldId) {
+          errors[firstFieldId] = [
+            sectionValidation.message ||
+              `At least one field in ${section.title || 'this section'} is required`,
+          ];
+        }
+      }
+    }
+
+    // Check field-level validation
+    for (const field of section.fields || []) {
+      const { id, required, validation = {}, type, label } = field;
+
+      // Skip hidden fields
+      if (hiddenFields.has(id)) continue;
+
+      // Skip client-only fields for server validation
+      if (field.client_only && field.id !== 'confirmPassword') continue;
+
+      const value = formData[id];
+
+      // Required check
+      if (required) {
+        const isEmpty =
+          value === undefined ||
+          value === null ||
+          value === '' ||
+          (Array.isArray(value) && value.length === 0);
+
+        if (isEmpty) {
+          errors[id] = [`${label || id} is required`];
+          continue;
+        }
+      }
+
+      // Skip further validation if value is empty
+      if (!value && value !== false) continue;
+
+      // Type-specific validation
+      const fieldErrors = [];
+
+      if (type === 'email') {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (!emailRegex.test(value)) {
+          fieldErrors.push('Please enter a valid email address');
+        }
+      }
+
+      if (type === 'password') {
+        if (validation.minLength && value.length < validation.minLength) {
+          fieldErrors.push(
+            `Password must be at least ${validation.minLength} characters`
+          );
+        }
+      }
+
+      if (type === 'text' || type === 'textarea') {
+        if (validation.minLength && value.length < validation.minLength) {
+          fieldErrors.push(
+            `${label || id} must be at least ${validation.minLength} characters`
+          );
+        }
+        if (validation.maxLength && value.length > validation.maxLength) {
+          fieldErrors.push(
+            `${label || id} must be at most ${validation.maxLength} characters`
+          );
+        }
+      }
+
+      // Match field validation (for confirmPassword)
+      if (validation.matchField) {
+        if (value !== formData[validation.matchField]) {
+          fieldErrors.push('Passwords do not match');
+        }
+      }
+
+      if (fieldErrors.length > 0) {
+        errors[id] = fieldErrors;
+      }
+    }
+  }
+
+  return {
+    isValid: Object.keys(errors).length === 0,
+    errors,
+  };
+};
+
+/**
+ * Evaluate conditional rules to get hidden fields set
+ */
+export const evaluateConditionalRules = (schema, formData) => {
+  const rules = schema?.conditional_rules || [];
+  const hidden = new Set();
+
+  // First pass: collect fields that have "show" rules (hidden by default)
+  for (const rule of rules) {
+    if (rule.action === 'show') {
+      rule.target_fields?.forEach((fieldId) => hidden.add(fieldId));
+    }
+  }
+
+  // Second pass: evaluate rules and show/hide fields
+  for (const rule of rules) {
+    const {
+      trigger_field,
+      trigger_operator = 'equals',
+      trigger_value,
+      action,
+      target_fields = [],
+    } = rule;
+
+    const fieldValue = formData[trigger_field];
+    let conditionMet = false;
+
+    switch (trigger_operator) {
+      case 'equals':
+        conditionMet = fieldValue === trigger_value;
+        break;
+      case 'not_equals':
+        conditionMet = fieldValue !== trigger_value;
+        break;
+      case 'contains':
+        conditionMet = Array.isArray(fieldValue)
+          ? fieldValue.includes(trigger_value)
+          : String(fieldValue || '').includes(trigger_value);
+        break;
+      case 'not_empty':
+        conditionMet = Boolean(fieldValue);
+        break;
+      case 'empty':
+        conditionMet = !Boolean(fieldValue);
+        break;
+      default:
+        conditionMet = false;
+    }
+
+    if (conditionMet) {
+      if (action === 'show') {
+        target_fields.forEach((fieldId) => hidden.delete(fieldId));
+      } else if (action === 'hide') {
+        target_fields.forEach((fieldId) => hidden.add(fieldId));
+      }
+    }
+  }
+
+  return hidden;
+};
+
+export default DynamicRegistrationForm;

src/pages/Profile.js

@@ -11,6 +11,7 @@ import Navbar from '../components/Navbar';
 import { User, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2, Eye, CreditCard, Handshake, ArrowLeft } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
+import PaymentMethodsSection from '../components/PaymentMethodsSection';
 import { useNavigate } from 'react-router-dom';
 
 const Profile = () => {
@@ -265,22 +266,10 @@ const Profile = () => {
           </p>
         </div>
 
-        <div className="flex items-center justify-between">
-          <div>
-            <p className="text-sm text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</p>
-            <div className="flex items-center gap-2">
-              <CreditCard className="h-6 w-6 text-brand-purple" />
-            </div>
-          </div>
-          <Button
-            type="button"
-            variant="outline"
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg px-4 py-2"
-          >
-            Manage
-          </Button>
-        </div>
       </Card>
+
+      {/* Payment Methods Section */}
+      <PaymentMethodsSection />
     </div>
   );
 

src/pages/Register.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Button } from '../components/ui/button';
@@ -6,189 +6,221 @@ import { Card } from '../components/ui/card';
 import { toast } from 'sonner';
 import PublicNavbar from '../components/PublicNavbar';
 import PublicFooter from '../components/PublicFooter';
-import { ArrowRight, ArrowLeft } from 'lucide-react';
+import { ArrowRight, ArrowLeft, Loader2 } from 'lucide-react';
-import RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator';
+import DynamicRegistrationForm, {
-import RegistrationStep1 from '../components/registration/RegistrationStep1';
+  DynamicStepIndicator,
-import RegistrationStep2 from '../components/registration/RegistrationStep2';
+  validateStep,
-import RegistrationStep3 from '../components/registration/RegistrationStep3';
+  evaluateConditionalRules,
-import RegistrationStep4 from '../components/registration/RegistrationStep4';
+} from '../components/registration/DynamicRegistrationForm';
+import api from '../utils/api';
+
+// Fallback schema for when API is unavailable
+const FALLBACK_SCHEMA = {
+  version: '1.0',
+  steps: [
+    {
+      id: 'step_account',
+      title: 'Account Setup',
+      description: 'Create your account credentials.',
+      order: 1,
+      sections: [
+        {
+          id: 'section_credentials',
+          title: 'Account Credentials',
+          order: 1,
+          fields: [
+            { id: 'first_name', type: 'text', label: 'First Name', required: true, is_fixed: true, mapping: 'first_name', width: 'half', order: 1 },
+            { id: 'last_name', type: 'text', label: 'Last Name', required: true, is_fixed: true, mapping: 'last_name', width: 'half', order: 2 },
+            { id: 'email', type: 'email', label: 'Email Address', required: true, is_fixed: true, mapping: 'email', width: 'full', order: 3 },
+            { id: 'password', type: 'password', label: 'Password', required: true, is_fixed: true, mapping: 'password', validation: { minLength: 6 }, width: 'half', order: 4 },
+            { id: 'confirmPassword', type: 'password', label: 'Confirm Password', required: true, is_fixed: true, client_only: true, width: 'half', order: 5, validation: { matchField: 'password' } },
+            { id: 'accepts_tos', type: 'checkbox', label: 'I accept the Terms of Service and Privacy Policy', required: true, is_fixed: true, mapping: 'accepts_tos', width: 'full', order: 6 },
+          ],
+        },
+      ],
+    },
+  ],
+  conditional_rules: [],
+  fixed_fields: ['email', 'password', 'first_name', 'last_name', 'accepts_tos'],
+};
 
 const Register = () => {
   const navigate = useNavigate();
   const { register } = useAuth();
   const [loading, setLoading] = useState(false);
+  const [schemaLoading, setSchemaLoading] = useState(true);
+  const [schema, setSchema] = useState(null);
   const [currentStep, setCurrentStep] = useState(1);
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({});
-    // Step 1: Personal & Partner Information
+  const [errors, setErrors] = useState({});
-    first_name: '',
-    last_name: '',
-    phone: '',
-    date_of_birth: '',
-    address: '',
-    city: '',
-    state: '',
-    zipcode: '',
-    lead_sources: [],
-    partner_first_name: '',
-    partner_last_name: '',
-    partner_is_member: false,
-    partner_plan_to_become_member: false,
 
-    // Step 2: Newsletter, Volunteer & Scholarship
+  // Fetch registration schema on mount
-    referred_by_member_name: '',
+  useEffect(() => {
-    newsletter_publish_name: false,
+    const fetchSchema = async () => {
-    newsletter_publish_photo: false,
+      try {
-    newsletter_publish_birthday: false,
+        const response = await api.get('/registration/schema');
-    newsletter_publish_none: false,
+        setSchema(response.data);
-    volunteer_interests: [],
+      } catch (error) {
-    scholarship_requested: false,
+        console.error('Failed to load registration schema:', error);
-    scholarship_reason: '',
+        toast.error('Failed to load registration form. Using default form.');
-
+        setSchema(FALLBACK_SCHEMA);
-    // Step 3: Directory Settings
+      } finally {
-    show_in_directory: false,
+        setSchemaLoading(false);
-    directory_email: '',
-    directory_bio: '',
-    directory_address: '',
-    directory_phone: '',
-    directory_dob: '',
-    directory_partner_name: '',
-
-    // Step 4: Account Credentials
-    email: '',
-    password: '',
-    confirmPassword: ''
-  });
-
-  const handleInputChange = (e) => {
-    const { name, value, type, checked } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: type === 'checkbox' ? checked : value
-    }));
-  };
-
-  const validateStep1 = () => {
-    const required = ['first_name', 'last_name', 'phone', 'date_of_birth',
-      'address', 'city', 'state', 'zipcode'];
-    for (const field of required) {
-      if (!formData[field]?.trim()) {
-        toast.error('Please fill in all required fields');
-        return false;
       }
-    }
+    };
-    if (formData.lead_sources.length === 0) {
-      toast.error('Please select at least one option for how you heard about us');
-      return false;
-    }
-    return true;
-  };
 
-  const validateStep2 = () => {
+    fetchSchema();
-    const { newsletter_publish_name, newsletter_publish_photo,
+  }, []);
-      newsletter_publish_birthday, newsletter_publish_none } = formData;
 
-    if (!newsletter_publish_name && !newsletter_publish_photo &&
+  // Get sorted steps
-      !newsletter_publish_birthday && !newsletter_publish_none) {
+  const sortedSteps = useMemo(() => {
-      toast.error('Please select at least one newsletter publication preference');
+    if (!schema?.steps) return [];
-      return false;
+    return [...schema.steps].sort((a, b) => a.order - b.order);
-    }
+  }, [schema]);
 
-    if (formData.scholarship_requested && !formData.scholarship_reason?.trim()) {
+  // Get current step data
-      toast.error('Please explain your scholarship request');
+  const currentStepData = useMemo(() => {
-      return false;
+    return sortedSteps[currentStep - 1] || null;
-    }
+  }, [sortedSteps, currentStep]);
 
-    return true;
+  // Get hidden fields based on conditional rules
-  };
+  const hiddenFields = useMemo(() => {
+    return evaluateConditionalRules(schema, formData);
+  }, [schema, formData]);
 
-  const validateStep3 = () => {
+  // Validate current step
-    return true; // No required fields
+  const validateCurrentStep = useCallback(() => {
-  };
+    if (!currentStepData) return { isValid: true, errors: {} };
-
+    return validateStep(currentStepData, formData, hiddenFields);
-  const validateStep4 = () => {
+  }, [currentStepData, formData, hiddenFields]);
-    if (!formData.email || !formData.password || !formData.confirmPassword) {
-      toast.error('Please fill in all account fields');
-      return false;
-    }
-
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(formData.email)) {
-      toast.error('Please enter a valid email address');
-      return false;
-    }
-
-    if (formData.password.length < 6) {
-      toast.error('Password must be at least 6 characters');
-      return false;
-    }
-
-    if (formData.password !== formData.confirmPassword) {
-      toast.error('Passwords do not match');
-      return false;
-    }
-
-    return true;
-  };
 
+  // Handle next step
   const handleNext = () => {
-    let isValid = false;
+    const { isValid, errors: stepErrors } = validateCurrentStep();
 
-    switch (currentStep) {
+    if (!isValid) {
-      case 1: isValid = validateStep1(); break;
+      setErrors(stepErrors);
-      case 2: isValid = validateStep2(); break;
+      const firstErrorField = Object.keys(stepErrors)[0];
-      case 3: isValid = validateStep3(); break;
+      if (firstErrorField) {
-      default: isValid = false;
+        toast.error(stepErrors[firstErrorField][0]);
+      }
+      return;
     }
 
-    if (isValid) {
+    setErrors({});
-      setCurrentStep(prev => Math.min(prev + 1, 4));
+    setCurrentStep((prev) => Math.min(prev + 1, sortedSteps.length));
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  };
-
-  const handleBack = () => {
-    setCurrentStep(prev => Math.max(prev - 1, 1));
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
 
+  // Handle previous step
+  const handleBack = () => {
+    setErrors({});
+    setCurrentStep((prev) => Math.max(prev - 1, 1));
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  // Handle form submission
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    // Final validation
+    // Validate final step
-    if (!validateStep4()) return;
+    const { isValid, errors: stepErrors } = validateCurrentStep();
+    if (!isValid) {
+      setErrors(stepErrors);
+      const firstErrorField = Object.keys(stepErrors)[0];
+      if (firstErrorField) {
+        toast.error(stepErrors[firstErrorField][0]);
+      }
+      return;
+    }
 
     setLoading(true);
 
     try {
-      // Remove confirmPassword (client-side only)
+      // Prepare submission data
-      const { confirmPassword, ...dataToSubmit } = formData;
+      const submitData = { ...formData };
+
+      // Remove client-only fields
+      delete submitData.confirmPassword;
 
       // Convert date fields to ISO format
-      const submitData = {
+      if (submitData.date_of_birth) {
-        ...dataToSubmit,
+        submitData.date_of_birth = new Date(submitData.date_of_birth).toISOString();
-        date_of_birth: new Date(dataToSubmit.date_of_birth).toISOString(),
+      }
-        directory_dob: dataToSubmit.directory_dob
+      if (submitData.directory_dob) {
-          ? new Date(dataToSubmit.directory_dob).toISOString()
+        submitData.directory_dob = new Date(submitData.directory_dob).toISOString();
-          : null
+      }
-      };
+
+      // Ensure boolean fields are actually booleans
+      const booleanFields = [
+        'partner_is_member',
+        'partner_plan_to_become_member',
+        'newsletter_publish_name',
+        'newsletter_publish_photo',
+        'newsletter_publish_birthday',
+        'newsletter_publish_none',
+        'scholarship_requested',
+        'show_in_directory',
+        'accepts_tos',
+      ];
+
+      for (const field of booleanFields) {
+        if (field in submitData) {
+          submitData[field] = Boolean(submitData[field]);
+        }
+      }
+
+      // Ensure array fields are arrays
+      const arrayFields = ['lead_sources', 'volunteer_interests'];
+      for (const field of arrayFields) {
+        if (field in submitData && !Array.isArray(submitData[field])) {
+          submitData[field] = submitData[field] ? [submitData[field]] : [];
+        }
+      }
 
       await register(submitData);
       toast.success('Please check your email for a confirmation email.');
       navigate('/login');
     } catch (error) {
-      toast.error(error.response?.data?.detail || 'Registration failed. Please try again.');
+      const errorMessage = error.response?.data?.detail;
+      if (typeof errorMessage === 'object' && errorMessage.errors) {
+        // Handle structured validation errors
+        const errorList = errorMessage.errors;
+        toast.error(errorList[0] || 'Registration failed');
+      } else {
+        toast.error(errorMessage || 'Registration failed. Please try again.');
+      }
     } finally {
       setLoading(false);
     }
   };
 
+  // Show loading state while fetching schema
+  if (schemaLoading) {
+    return (
+      <div className="min-h-screen bg-background">
+        <PublicNavbar />
+        <div className="max-w-4xl mx-auto px-6 py-12 flex items-center justify-center min-h-[60vh]">
+          <div className="text-center">
+            <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4 text-brand-purple" />
+            <p className="text-muted-foreground">Loading registration form...</p>
+          </div>
+        </div>
+        <PublicFooter />
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
+          <Link
+            to="/"
+            className="inline-flex items-center text-brand-purple hover:text-[var(--orange-light)] transition-colors"
+          >
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
@@ -196,47 +228,34 @@ const Register = () => {
 
         <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1
+              className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
               Join Our Community
             </h1>
-            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p
+              className="text-lg text-brand-purple"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
               Fill out the form below to start your membership journey.
             </p>
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-8" data-testid="register-form">
-            <RegistrationStepIndicator currentStep={currentStep} />
+            {/* Step Indicator */}
-
+            {sortedSteps.length > 1 && (
-            {currentStep === 1 && (
+              <DynamicStepIndicator steps={sortedSteps} currentStep={currentStep} />
-              <RegistrationStep1
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
             )}
 
-            {currentStep === 2 && (
+            {/* Dynamic Form Content */}
-              <RegistrationStep2
+            <DynamicRegistrationForm
-                formData={formData}
+              schema={schema}
-                setFormData={setFormData}
+              formData={formData}
-                handleInputChange={handleInputChange}
+              onFormDataChange={setFormData}
-              />
+              currentStep={currentStep}
-            )}
+              errors={errors}
-
+            />
-            {currentStep === 3 && (
-              <RegistrationStep3
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
-            )}
-
-            {currentStep === 4 && (
-              <RegistrationStep4
-                formData={formData}
-                handleInputChange={handleInputChange}
-              />
-            )}
 
             {/* Navigation Buttons */}
             <div className="flex justify-between items-center pt-6">
@@ -245,7 +264,7 @@ const Register = () => {
                   type="button"
                   onClick={handleBack}
                   variant="outline"
-                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-brand-purple  text-[var(--purple-ink)]"
+                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-brand-purple text-[var(--purple-ink)]"
                 >
                   <ArrowLeft className="mr-2 h-5 w-5" />
                   Back
@@ -254,7 +273,7 @@ const Register = () => {
                 <div></div>
               )}
 
-              {currentStep < 4 ? (
+              {currentStep < sortedSteps.length ? (
                 <Button
                   type="button"
                   onClick={handleNext}
@@ -267,16 +286,28 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-backgroundrounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
-                  {loading ? 'Creating Account...' : 'Create Account'}
+                  {loading ? (
-                  <ArrowRight className="ml-2 h-5 w-5" />
+                    <>
+                      <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                      Creating Account...
+                    </>
+                  ) : (
+                    <>
+                      Create Account
+                      <ArrowRight className="ml-2 h-5 w-5" />
+                    </>
+                  )}
                 </Button>
               )}
             </div>
 
-            <p className="text-center text-brand-purple  mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p
+              className="text-center text-brand-purple mt-4"
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
               Already have an account?{' '}
               <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here

src/pages/admin/AdminDashboard.js

@@ -71,7 +71,7 @@ const AdminDashboard = () => {
         </div>
         <Link to={'/'} className=''>
           <Button
-            className="btn-lavender mb-8 md:mb-0  "
+            className="btn-lavender mb-8 md:mb-0 mr-4 "
           >
             <Globe />
             View Public Site

src/pages/admin/AdminMemberTiers.js

@@ -150,9 +150,15 @@ const AdminMemberTiers = () => {
     <div className="space-y-6">
       {/* Header and Actions */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <p className="text-muted-foreground">
+        <div>
-          Configure tier names, time ranges, and badges displayed in the members directory.
+
-        </p>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            Members Tiers
+          </h1>
+          <p className="text-muted-foreground">
+            Configure tier names, time ranges, and badges displayed in the members directory.
+          </p>
+        </div>
         <div className="flex items-center gap-2">
           {hasChanges && (
             <Button variant="outline" onClick={handleDiscardChanges}>

src/pages/admin/AdminUserView.js

@@ -12,6 +12,7 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
 import StatusBadge from '../../components/StatusBadge';
 import TransactionHistory from '../../components/TransactionHistory';
+import AdminPaymentMethodsPanel from '../../components/admin/AdminPaymentMethodsPanel';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -417,6 +418,14 @@ const AdminUserView = () => {
         </div>
       </Card>
 
+      {/* Payment Methods Panel */}
+      <div className="mb-8">
+        <AdminPaymentMethodsPanel
+          userId={userId}
+          userName={`${user.first_name} ${user.last_name}`}
+        />
+      </div>
+
       {/* Additional Details */}
       <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>

src/pages/admin/AdminValidations.js

@@ -34,7 +34,20 @@ import {
   PaginationEllipsis,
 } from '../../components/ui/pagination';
 import { toast } from 'sonner';
-import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X, FileText, XCircle } from 'lucide-react';
+import {
+  CheckCircle,
+  Clock,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  X,
+  FileText,
+  XCircle,
+  Users,
+  Mail,
+  ShieldCheck,
+  CreditCard
+} from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
@@ -341,35 +354,29 @@ const AdminValidations = () => {
           Quick Overview
         </div>
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
-          <StatCard
+
-            title="Total Pending"
-            value={loading ? '-' : pendingUsers.length}
-            icon={CheckCircle}
-            iconBgClass="text-brand-purple"
-            dataTestId="stat-total-users"
-          />
 
           <StatCard
             title="Awaiting Email"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_email').length}
-            icon={CheckCircle}
+            icon={Mail}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-brand-pink"
             dataTestId="stat-total-users"
           />
 
           <StatCard
             title="Pending Validation"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'pending_validation').length}
-            icon={CheckCircle}
+            icon={ShieldCheck}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-success"
             dataTestId="stat-pending-validation"
           />
 
           <StatCard
             title="Payment Pending"
             value={loading ? '-' : pendingUsers.filter(u => u.status === 'payment_pending').length}
-            icon={CheckCircle}
+            icon={CreditCard}
-            iconBgClass="text-brand-purple"
+            iconBgClass="text-accent"
             dataTestId="stat-payment-pending"
           />
 
@@ -381,7 +388,13 @@ const AdminValidations = () => {
             dataTestId="stat-rejected"
           />
 
-
+          <StatCard
+            title="Total Pending"
+            value={loading ? '-' : pendingUsers.filter(user => ['pending_email', 'pending_validation', 'pre_validated', 'payment_pending',].includes(user.status)).length}
+            icon={Users}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-total-users"
+          />
         </div>
       </Card>
 
@@ -463,7 +476,7 @@ const AdminValidations = () => {
                         {user.first_name} {user.last_name}
                       </div>
                       <div className='text-brand-purple'>
-                      {user.email}
+                        {user.email}
                       </div>
 
                     </TableCell>

src/pages/members/MembersDirectory.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
+import { Link } from 'react-router-dom';
 import { Card } from '../../components/ui/card';
 import { Input } from '../../components/ui/input';
 import { Badge } from '../../components/ui/badge';
@@ -135,7 +136,7 @@ const MembersDirectory = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
+    <div className="min-h-screen bg-gradient-to-bl from-white to-muted">
       <Navbar />
 
       <div className="max-w-7xl mx-auto py-12">
@@ -154,7 +155,7 @@ const MembersDirectory = () => {
           </div>
 
           {/* Search Bar */}
-          <div className="mb-24 mx-10">
+          <div className="mb-24 w-full">
             <div className="relative w-full  ">
               <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
@@ -221,9 +222,10 @@ const MembersDirectory = () => {
                 </h3>
                 <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
-                  <a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
+
+                  <Link to="/profile" className="text-[var(--orange-light)] hover:underline font-medium">
                     Edit your profile →
-                  </a>
+                  </Link>
                 </p>
               </div>
             </div>