Merge pull request 'Merge from dev to loaf-prod for DEMO' (#25) from dev into loaf-prod

Reviewed-on: #25

.dockerignore

@@ -0,0 +1,75 @@
+# Git
+.git
+.gitignore
+
+# Dependencies
+node_modules/
+
+# Build output (we build inside Docker)
+build/
+dist/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+*~
+
+# Testing
+coverage/
+.nyc_output/
+
+# Environment files (will be passed as build args)
+.env
+.env.local
+.env.development
+.env.development.local
+.env.test
+.env.test.local
+.env.production
+.env.production.local
+*.env
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Docker
+Dockerfile
+docker-compose*.yml
+.docker/
+
+# Documentation
+*.md
+docs/
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Temporary files
+tmp/
+temp/
+*.tmp
+
+# ESLint cache
+.eslintcache
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Yarn
+.yarn-integrity
+.pnp.*
+
+# Storybook
+storybook-static/
+
+# Design files (if any)
+.superdesign/

Dockerfile

@@ -0,0 +1,49 @@
+# Frontend Dockerfile - React with multi-stage build
+
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json yarn.lock ./
+
+# Install dependencies
+RUN yarn install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build arguments for environment variables
+ARG REACT_APP_BACKEND_URL
+ENV REACT_APP_BACKEND_URL=$REACT_APP_BACKEND_URL
+
+# Build the application
+RUN yarn build
+
+# Stage 2: Production with Nginx
+FROM nginx:alpine AS production
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built assets from builder stage
+COPY --from=builder /app/build /usr/share/nginx/html
+
+# Create non-root user for security
+RUN adduser -D -g '' appuser && \
+    chown -R appuser:appuser /usr/share/nginx/html && \
+    chown -R appuser:appuser /var/cache/nginx && \
+    chown -R appuser:appuser /var/log/nginx && \
+    touch /var/run/nginx.pid && \
+    chown -R appuser:appuser /var/run/nginx.pid
+
+# Expose port
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -999,3 +999,182 @@ api.interceptors.response.use(
 **Last Updated**: December 18, 2024
 **Version**: 1.0.0
 **Maintainer**: LOAF Development Team
+
+**Backend API**
+
+**Auth**
+- POST `/api/auth/register`
+- GET `/api/auth/verify-email`
+- POST `/api/auth/resend-verification-email`
+- POST `/api/auth/login`
+- POST `/api/auth/forgot-password`
+- POST `/api/auth/reset-password`
+- GET `/api/auth/me`
+- GET `/api/auth/permissions`
+
+**Users**
+- PUT `/api/users/change-password`
+- GET `/api/users/profile`
+- PUT `/api/users/profile`
+
+**Members**
+- GET `/api/members/directory` (defined twice in code)
+- GET `/api/members/directory/{user_id}`
+- GET `/api/members/profile`
+- PUT `/api/members/profile`
+- POST `/api/members/profile/upload-photo`
+- DELETE `/api/members/profile/delete-photo`
+- GET `/api/members/calendar/events`
+- GET `/api/members/gallery`
+- GET `/api/members/event-activity`
+
+**Events (public/member)**
+- GET `/api/events`
+- GET `/api/events/{event_id}`
+- GET `/api/events/{event_id}/gallery`
+- POST `/api/events/{event_id}/rsvp`
+- GET `/api/events/{event_id}/download.ics`
+
+**Calendars**
+- GET `/api/calendars/subscribe.ics`
+- GET `/api/calendars/all-events.ics`
+
+**Newsletters (public)**
+- GET `/api/newsletters`
+- GET `/api/newsletters/years`
+
+**Financials (public)**
+- GET `/api/financials`
+
+**Bylaws (public)**
+- GET `/api/bylaws/current`
+- GET `/api/bylaws/history`
+
+**Config/Diagnostics**
+- GET `/api/config`
+- GET `/api/config/limits`
+- GET `/api/diagnostics/cors`
+
+**Invitations**
+- GET `/api/invitations/verify/{token}`
+- POST `/api/invitations/accept`
+
+**Subscriptions**
+- GET `/api/subscriptions/plans`
+- POST `/api/subscriptions/checkout`
+
+**Donations**
+- POST `/api/donations/checkout`
+
+**Contact**
+- POST `/api/contact`
+
+**Admin – Calendar**
+- POST `/api/admin/calendar/sync/{event_id}`
+- DELETE `/api/admin/calendar/unsync/{event_id}`
+
+**Admin – Event Gallery**
+- POST `/api/admin/events/{event_id}/gallery`
+- DELETE `/api/admin/event-gallery/{image_id}`
+- PUT `/api/admin/event-gallery/{image_id}`
+
+**Admin – Events**
+- POST `/api/admin/events`
+- PUT `/api/admin/events/{event_id}`
+- GET `/api/admin/events/{event_id}`
+- GET `/api/admin/events/{event_id}/rsvps`
+- PUT `/api/admin/events/{event_id}/attendance`
+- GET `/api/admin/events`
+- DELETE `/api/admin/events/{event_id}`
+
+**Admin – Storage**
+- GET `/api/admin/storage/usage`
+- GET `/api/admin/storage/breakdown`
+
+**Admin – Users & Invitations**
+- GET `/api/admin/users`
+- GET `/api/admin/users/invitations`
+- GET `/api/admin/users/export`
+- GET `/api/admin/users/{user_id}`
+- PUT `/api/admin/users/{user_id}`
+- PUT `/api/admin/users/{user_id}/validate`
+- PUT `/api/admin/users/{user_id}/status`
+- POST `/api/admin/users/{user_id}/reject`
+- POST `/api/admin/users/{user_id}/activate-payment`
+- PUT `/api/admin/users/{user_id}/reset-password`
+- PUT `/api/admin/users/{user_id}/role`
+- POST `/api/admin/users/{user_id}/resend-verification`
+- POST `/api/admin/users/{user_id}/upload-photo`
+- DELETE `/api/admin/users/{user_id}/delete-photo`
+- POST `/api/admin/users/create`
+- POST `/api/admin/users/invite`
+- POST `/api/admin/users/invitations/{invitation_id}/resend`
+- DELETE `/api/admin/users/invitations/{invitation_id}`
+- POST `/api/admin/users/import`
+- GET `/api/admin/users/import-jobs`
+- GET `/api/admin/users/import-jobs/{job_id}`
+
+**Admin – Imports**
+- POST `/api/admin/import/upload-csv`
+- GET `/api/admin/import/{job_id}/preview`
+- POST `/api/admin/import/{job_id}/execute`
+- POST `/api/admin/import/{job_id}/rollback`
+- GET `/api/admin/import/{job_id}/status`
+- GET `/api/admin/import/{job_id}/errors/download`
+
+**Admin – Subscriptions**
+- GET `/api/admin/subscriptions/plans`
+- GET `/api/admin/subscriptions/plans/{plan_id}`
+- POST `/api/admin/subscriptions/plans`
+- PUT `/api/admin/subscriptions/plans/{plan_id}`
+- DELETE `/api/admin/subscriptions/plans/{plan_id}`
+- GET `/api/admin/subscriptions`
+- GET `/api/admin/subscriptions/stats`
+- PUT `/api/admin/subscriptions/{subscription_id}`
+- POST `/api/admin/subscriptions/{subscription_id}/cancel`
+- GET `/api/admin/subscriptions/export`
+
+**Admin – Donations**
+- GET `/api/admin/donations`
+- GET `/api/admin/donations/stats`
+- GET `/api/admin/donations/export`
+
+**Admin – Newsletters**
+- POST `/api/admin/newsletters`
+- PUT `/api/admin/newsletters/{newsletter_id}`
+- DELETE `/api/admin/newsletters/{newsletter_id}`
+
+**Admin – Financials**
+- POST `/api/admin/financials`
+- PUT `/api/admin/financials/{report_id}`
+- DELETE `/api/admin/financials/{report_id}`
+
+**Admin – Bylaws**
+- POST `/api/admin/bylaws`
+- PUT `/api/admin/bylaws/{bylaws_id}`
+- DELETE `/api/admin/bylaws/{bylaws_id}`
+
+**Admin – Roles**
+- GET `/api/admin/roles`
+- GET `/api/admin/roles/assignable`
+- POST `/api/admin/roles`
+- GET `/api/admin/roles/{role_id}`
+- PUT `/api/admin/roles/{role_id}`
+- DELETE `/api/admin/roles/{role_id}`
+- GET `/api/admin/roles/{role_id}/permissions`
+- PUT `/api/admin/roles/{role_id}/permissions`
+
+**Admin – Permissions**
+- GET `/api/admin/permissions`
+- GET `/api/admin/permissions/modules`
+- GET `/api/admin/permissions/roles/{role}`
+- PUT `/api/admin/permissions/roles/{role}`
+- POST `/api/admin/permissions/seed`
+
+**Admin – Stripe Settings**
+- GET `/api/admin/settings/stripe/status`
+- POST `/api/admin/settings/stripe/test-connection`
+- PUT `/api/admin/settings/stripe`
+
+**Webhooks**
+- POST `/api/webhooks/stripe`

nginx.conf

@@ -0,0 +1,44 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+        try_files $uri =404;
+    }
+
+    # Handle React Router - serve index.html for all routes
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Health check endpoint
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+        add_header Content-Type text/plain;
+    }
+
+    # Disable access to hidden files
+    location ~ /\. {
+        deny all;
+        access_log off;
+        log_not_found off;
+    }
+}

package.json

@@ -36,6 +36,7 @@
     "@radix-ui/react-tooltip": "^1.2.4",
     "@stripe/react-stripe-js": "^2.0.0",
     "@stripe/stripe-js": "^2.0.0",
+    "@tailwindcss/line-clamp": "^0.4.4",
     "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

public/health.json

@@ -0,0 +1,5 @@
+{
+  "status": "healthy",
+  "mode": "production",
+  "build": "optimized"
+}

src/App.css

@@ -1,32 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
-  background-color: #FFFFFF;
-  color: #422268;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-}
-
-.inter {
-  font-family: 'Inter', sans-serif;
-}
-
-.nunito-sans {
-  font-family: 'Nunito Sans', sans-serif;
-}
-
-.bg-purple-gradient {
-  background: linear-gradient(135deg, rgba(100, 76, 159, 0.2) 0%, rgba(72, 40, 110, 0.2) 100%);
-}
-
-.bg-soft-mesh {
-  background: radial-gradient(ellipse at top right, rgba(221, 216, 235, 0.4) 0%, #FFFFFF 50%, #FFFFFF 100%);
-}

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Toaster } from './components/ui/sonner';
+import IdleSessionWarning from './components/IdleSessionWarning';
 import Landing from './pages/Landing';
 import Register from './pages/Register';
 import Login from './pages/Login';
@@ -21,7 +22,10 @@ import AdminUserView from './pages/admin/AdminUserView';
 import AdminStaff from './pages/admin/AdminStaff';
 import AdminMembers from './pages/admin/AdminMembers';
 import AdminPermissions from './pages/admin/AdminPermissions';
+import AdminSettings from './pages/admin/AdminSettings';
+import AdminMemberTiers from './pages/admin/AdminMemberTiers';
 import AdminRoles from './pages/admin/AdminRoles';
+import AdminTheme from './pages/admin/AdminTheme';
 import AdminEvents from './pages/admin/AdminEvents';
 import AdminEventAttendance from './pages/admin/AdminEventAttendance';
 import AdminValidations from './pages/admin/AdminValidations';
@@ -29,6 +33,7 @@ import AdminPlans from './pages/admin/AdminPlans';
 import AdminSubscriptions from './pages/admin/AdminSubscriptions';
 import AdminDonations from './pages/admin/AdminDonations';
 import AdminLayout from './layouts/AdminLayout';
+import SettingsLayout from './layouts/SettingsLayout';
 import { AuthProvider, useAuth } from './context/AuthContext';
 import MemberRoute from './components/MemberRoute';
 import MemberCalendar from './pages/members/MemberCalendar';
@@ -42,6 +47,8 @@ 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 AdminDirectorySettings from './pages/admin/AdminDirectorySettings';
 import History from './pages/History';
 import MissionValues from './pages/MissionValues';
 import BoardOfDirectors from './pages/BoardOfDirectors';
@@ -56,19 +63,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;
 };
 
@@ -233,6 +240,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>
@@ -284,16 +305,30 @@ function App() {
           } />
           <Route path="/admin/permissions" element={
             <PrivateRoute adminOnly>
-              <AdminLayout>
-                <AdminRoles />
-              </AdminLayout>
+              <Navigate to="/admin/settings/permissions" replace />
             </PrivateRoute>
           } />
 
+          <Route path="/admin/settings" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <SettingsLayout />
+              </AdminLayout>
+            </PrivateRoute>
+          }>
+            <Route index element={<Navigate to="stripe" replace />} />
+            <Route path="stripe" element={<AdminSettings />} />
+            <Route path="permissions" element={<AdminRoles />} />
+            <Route path="theme" element={<AdminTheme />} />
+            <Route path="directory" element={<AdminDirectorySettings />} />
+            <Route path="registration" element={<AdminRegistrationBuilder />} />
+          </Route>
+
           {/* 404 - Catch all undefined routes */}
           <Route path="*" element={<NotFound />} />
         </Routes>
         <Toaster position="top-right" />
+        <IdleSessionWarning />
       </BrowserRouter>
     </AuthProvider>
   );

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/AddToCalendarButton.js

@@ -117,7 +117,7 @@ export default function AddToCalendarButton({
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
-        <Button variant={variant} size={size} className="gap-2">
+        <Button variant={variant} size={size} className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender">
           <Calendar className="h-4 w-4" />
           Add to Calendar
           <ChevronDown className="h-4 w-4" />
@@ -187,7 +187,7 @@ export default function AddToCalendarButton({
             >
               <RefreshCw className="h-4 w-4 mr-2" />
               Subscribe to My Events
-              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
+              <div className="text-xs text-brand-purple  mt-0.5">
                 Auto-syncs your RSVP'd events
               </div>
             </DropdownMenuItem>
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({
             >
               <Download className="h-4 w-4 mr-2" />
               Download All Events
-              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
+              <div className="text-xs text-brand-purple  mt-0.5">
                 One-time import of all upcoming events
               </div>
             </DropdownMenuItem>
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({
         )}
 
         {!event && !showSubscribe && (
-          <div className="px-2 py-6 text-center text-sm text-[var(--purple-lavender)]">
+          <div className="px-2 py-6 text-center text-sm text-brand-purple ">
             No event selected
           </div>
         )}

src/components/AdminSidebar.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useTheme } from 'next-themes';
 import { useAuth } from '../context/AuthContext';
+import { useThemeConfig } from '../context/ThemeConfigContext';
 import api from '../utils/api';
 import { Badge } from './ui/badge';
 import {
@@ -26,12 +27,15 @@ import {
   Heart,
   Sun,
   Moon,
+  Star,
+  FileEdit
 } from 'lucide-react';
 
 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { user, logout } = useAuth();
+  const { getLogoUrl } = useThemeConfig();
   const { theme, setTheme } = useTheme();
   const [pendingCount, setPendingCount] = useState(0);
   const [storageUsed, setStorageUsed] = useState(0);
@@ -102,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,
@@ -169,10 +186,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/bylaws',
       disabled: false
     },
+
     {
-      name: 'Permissions',
-      icon: Shield,
-      path: '/admin/permissions',
+      name: 'Settings',
+      icon: Settings,
+      path: '/admin/settings',
       disabled: false,
       superadminOnly: true
     }
@@ -181,11 +199,15 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
   // Filter nav items based on user role
   const filteredNavItems = navItems.filter(item => {
     if (item.superadminOnly && user?.role !== 'superadmin') {
+      console.log('Filtering out superadmin-only item:', item.name, 'User role:', user?.role);
       return false;
     }
     return true;
   });
 
+  // Debug: Log filtered items count
+  console.log('Total nav items:', navItems.length, 'Filtered items:', filteredNavItems.length, 'User role:', user?.role);
+
   const isActive = (path) => {
     if (path === '/admin') {
       return location.pathname === '/admin';
@@ -211,9 +233,9 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           className={`
             flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
             ${item.disabled
-              ? 'opacity-50 cursor-not-allowed text-[var(--purple-lavender)]'
+              ? 'opacity-50 cursor-not-allowed text-brand-purple '
               : active
-                ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]'
+                ? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
                 : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20'
             }
           `}
@@ -243,7 +265,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
 
           {/* Badge when collapsed */}
           {!isOpen && item.badge > 0 && !item.disabled && (
-            <div className="absolute -top-1 -right-1 bg-accent foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+            <div className="absolute -top-1 -right-1 bg-accent text-white foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
               {item.badge}
             </div>
           )}
@@ -276,19 +298,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         <div className="flex items-center justify-between p-4 border-b border-[var(--neutral-800)]">
           <Link to="/" className="flex items-center gap-3 group flex-1 min-w-0">
             <img
-              src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
+              src={getLogoUrl()}
               alt="LOAF Logo"
               className={`object-contain transition-all duration-200 ${isOpen ? 'h-10 w-10' : 'h-8 w-8'
                 }`}
             />
             {isOpen && (
               <div className="flex-1 min-w-0">
-                <h2 className="text-xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h2 className="text-xl font-semibold text-primary dark:text-brand-light-lavender " style={{ fontFamily: "'Inter', sans-serif" }}>
                   Admin
                 </h2>
-                <p className="text-xs text-muted-foreground group-hover:text-accent transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  View Public Site
-                </p>
               </div>
             )}
           </Link>
@@ -312,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">
@@ -321,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 === 'Members'))}
-            {renderNavItem(filteredNavItems.find(item => item.name === 'Validations'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Roster'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Member Tiers'))}
+            {renderNavItem(filteredNavItems.find(item => item.name === 'Staff & Admins'))}
           </div>
 
           {/* FINANCIALS Section */}
@@ -367,11 +398,21 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
           </div>
 
-          {/* Permissions - Superadmin only (no header) */}
+          {/* SYSTEM Section - Superadmin only */}
           {user?.role === 'superadmin' && (
-            <div className="mt-6">
-              {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
-            </div>
+            <>
+              {isOpen && (
+                <div className="px-4 py-2 mt-6">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    System
+                  </h3>
+                </div>
+              )}
+              <div className="space-y-1">
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Settings'))}
+              </div>
+            </>
           )}
         </nav>
 
@@ -384,7 +425,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-primary truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <p className="text-sm font-medium text-primary dark:text-brand-light-lavender  truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {user.first_name} {user.last_name}
                   </p>
                   <p className="text-xs text-muted-foreground capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -392,7 +433,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   </p>
                 </div>
               </div>
-              <Link to='/profile'><Settings size={16} />
+              <Link className='dark:text-brand-lavender ' to='/profile'><Settings size={16} />
               </Link>
             </div>
           )}
@@ -406,16 +447,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-lg w-full
-                text-primary hover:bg-muted/20 transition-colors
+                text-primary dark:text-brand-lavender  hover:bg-muted/20 transition-colors
                 ${!isOpen && 'justify-center'}
               `}
             >
               {isDark ? (
-                <Sun className="h-5 w-5 flex-shrink-0" />
+                <Sun className="h-5 w-5 flex-shrink-0 " />
               ) : (
                 <Moon className="h-5 w-5 flex-shrink-0" />
               )}
-              {isOpen && <span>{isDark ? 'Light mode' : 'Dark mode'}</span>}
+              {isOpen && <span >{isDark ? 'Light mode' : 'Dark mode'}</span>}
             </button>
             {!isOpen && (
               <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
@@ -429,7 +470,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {isOpen ? (
               <div className="px-4 py-3 bg-[var(--lavender-500)] rounded-lg">
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium text-primary">Storage Usage</span>
+                  <span className="text-sm font-medium text-primary dark:text-brand-light-lavender ">Storage Usage</span>
                   <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
                 <div className="w-full bg-[var(--neutral-800)] rounded-full h-2">

src/components/AttendanceDialog.js

@@ -55,7 +55,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}
@@ -64,12 +64,12 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
         <div className="space-y-4 mt-4">
           {rsvps.length === 0 ? (
-            <p className="text-center text-[var(--purple-lavender)] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
+            <p className="text-center text-brand-purple  py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
           ) : (
             rsvps.map((rsvp) => (
               <div
                 key={rsvp.user_id}
-                className="flex items-center gap-3 p-4 border-2 border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] transition-colors"
+                className="flex items-center gap-3 p-4 border-2 border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  transition-colors"
               >
                 <Checkbox
                   checked={attendance[rsvp.user_id] || false}
@@ -80,7 +80,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
                 />
                 <div className="flex-1">
                   <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
-                  <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
                 </div>
                 {rsvp.attended && (
                   <span className="text-sm text-[var(--green-light)] font-medium">
@@ -103,7 +103,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
           <Button
             onClick={() => onOpenChange(false)}
             variant="outline"
-            className="flex-1 border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background hover:text-[var(--purple-ink)] rounded-full"
+            className="flex-1 border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-background hover:text-[var(--purple-ink)] rounded-full"
           >
             Cancel
           </Button>

src/components/ChangePasswordDialog.js

@@ -66,7 +66,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md bg-background">
+      <DialogContent className="sm:max-w-md bg-background overflow-y-auto max-h-[90vh]">
         <DialogHeader>
           <div className="flex items-center gap-2 mb-2">
             <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[var(--lavender-300)]">
@@ -76,7 +76,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               Change Password
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your password to keep your account secure.
           </DialogDescription>
         </DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.currentPassword}
               onChange={handleInputChange}
               placeholder="Enter current password"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.newPassword}
               onChange={handleInputChange}
               placeholder="Enter new password (min. 6 characters)"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -120,23 +120,22 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.confirmPassword}
               onChange={handleInputChange}
               placeholder="Re-enter new password"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
           <DialogFooter className="mt-6">
             <Button
               type="button"
-              variant="outline"
               onClick={() => onOpenChange(false)}
-              className="rounded-full px-6"
+              className="btn-outline mr-33 text-white"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 disabled:opacity-50"
+              className=" btn-primary"
             >
               {loading ? 'Changing...' : 'Change Password'}
             </Button>

src/components/ChangeRoleDialog.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
+import { Button } from './ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Label } from './ui/label';
+import { AlertCircle, Shield } from 'lucide-react';
+import api from '../utils/api';
+import { toast } from 'sonner';
+
+export default function ChangeRoleDialog({ open, onClose, user, onSuccess }) {
+  const [roles, setRoles] = useState([]);
+  const [selectedRole, setSelectedRole] = useState('');
+  const [selectedRoleId, setSelectedRoleId] = useState(null);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchRoles();
+      // Pre-select current role
+      setSelectedRole(user.role);
+      setSelectedRoleId(user.role_id);
+    }
+  }, [open, user]);
+
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      // Reuse existing endpoint that returns assignable roles based on privilege
+      const response = await api.get('/admin/roles/assignable');
+      // Map API response to format expected by Select component
+      const mappedRoles = response.data.map(role => ({
+        value: role.code,
+        label: role.name,
+        id: role.id,
+        description: role.description
+      }));
+      setRoles(mappedRoles);
+    } catch (error) {
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedRole) {
+      toast.error('Please select a role');
+      return;
+    }
+
+    // Don't submit if role hasn't changed
+    if (selectedRole === user.role && selectedRoleId === user.role_id) {
+      toast.info('The selected role is the same as current role');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await api.put(`/admin/users/${user.id}/role`, {
+        role: selectedRole,
+        role_id: selectedRoleId
+      });
+
+      toast.success(`Role changed to ${selectedRole}`);
+
+      onSuccess();
+      onClose();
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Failed to change role';
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px] overflow-y-auto max-h-[90vh]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-[#664fa3]" />
+            Change User Role
+          </DialogTitle>
+          <DialogDescription>
+            Change role for {user.first_name} {user.last_name} ({user.email})
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Current Role Display */}
+          <div className="p-3 bg-[#f1eef9] rounded-lg border border-[#DDD8EB]">
+            <p className="text-sm text-gray-600">Current Role</p>
+            <p className="font-semibold text-[#664fa3] capitalize">{user.role}</p>
+          </div>
+
+          {/* Role Selection */}
+          <div className="space-y-2">
+            <Label htmlFor="role">New Role</Label>
+            <Select value={selectedRole} onValueChange={setSelectedRole} disabled={loadingRoles}>
+              <SelectTrigger>
+                <SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select role"} />
+              </SelectTrigger>
+              <SelectContent>
+                {roles.map((role) => (
+                  <SelectItem key={role.value} value={role.value}>
+                    <span className="capitalize">{role.label}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Warning for privileged roles */}
+          {(selectedRole === 'admin' || selectedRole === 'superadmin') && (
+            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+              <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-semibold text-amber-900">Admin Access Warning</p>
+                <p className="text-amber-700">
+                  This user will gain full administrative access to the system.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={submitting}
+            className="border-2 border-gray-300 rounded-full"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={submitting || loadingRoles}
+            className="bg-[#664fa3] hover:bg-[#7d5ec2] text-white rounded-full"
+          >
+            {submitting ? 'Changing Role...' : 'Change Role'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/ConfirmationDialog.js

@@ -48,8 +48,8 @@ const ConfirmationDialog = ({
     },
     info: {
       icon: Info,
-      iconColor: 'text-[var(--purple-lavender)]',
-      confirmButtonClass: 'bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-plum)] rounded-full px-6',
+      iconColor: 'text-brand-purple ',
+      confirmButtonClass: 'bg-brand-purple  text-white hover:bg-[var(--purple-plum)] rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
@@ -77,7 +77,7 @@ const ConfirmationDialog = ({
                 {title}
               </AlertDialogTitle>
               <AlertDialogDescription
-                className="text-[var(--purple-lavender)] text-sm leading-relaxed"
+                className="text-brand-purple  text-sm leading-relaxed"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {description}
@@ -87,7 +87,7 @@ const ConfirmationDialog = ({
         </AlertDialogHeader>
         <AlertDialogFooter className="p-6 pt-4 bg-[var(--lavender-500)] flex-row gap-3 justify-end">
           <AlertDialogCancel
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-background rounded-full px-6"
             disabled={loading}
           >
             {cancelText}

src/components/CreateMemberDialog.js

@@ -31,6 +31,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -84,8 +85,8 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
       if (payload.date_of_birth === '') {
         delete payload.date_of_birth;
       }
-      if (payload.member_since === '') {
-        delete payload.member_since;
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
       }
 
       await api.post('/admin/users/create', payload);
@@ -119,13 +120,13 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Member
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new member account with direct login access. Member will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -143,7 +144,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="member@example.com"
                 />
                 {errors.email && (
@@ -160,7 +161,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Minimum 8 characters"
                 />
                 {errors.password && (
@@ -179,8 +180,8 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
-                  placeholder="John"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Jane"
                 />
                 {errors.first_name && (
                   <p className="text-sm text-red-500">{errors.first_name}</p>
@@ -195,7 +196,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
                 {errors.last_name && (
@@ -214,7 +215,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -231,7 +232,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="address"
                 value={formData.address}
                 onChange={(e) => handleChange('address', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="123 Main St"
               />
             </div>
@@ -244,7 +245,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="city"
                   value={formData.city}
                   onChange={(e) => handleChange('city', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="San Francisco"
                 />
               </div>
@@ -255,7 +256,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="state"
                   value={formData.state}
                   onChange={(e) => handleChange('state', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="CA"
                   maxLength={2}
                 />
@@ -267,7 +268,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="zipcode"
                   value={formData.zipcode}
                   onChange={(e) => handleChange('zipcode', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="94102"
                 />
               </div>
@@ -282,7 +283,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="date"
                   value={formData.date_of_birth}
                   onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 />
               </div>
 
@@ -293,7 +294,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="date"
                   value={formData.member_since}
                   onChange={(e) => handleChange('member_since', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 />
               </div>
             </div>

src/components/CreateStaffDialog.js

@@ -22,10 +22,12 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     first_name: '',
     last_name: '',
     phone: '',
+    member_since: '',
     role: 'admin'
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -74,7 +76,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     setLoading(true);
 
     try {
-      await api.post('/admin/users/create', formData);
+      const payload = { ...formData };
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
+      }
+      await api.post('/admin/users/create', payload);
       toast.success('Staff member created successfully');
 
       // Reset form
@@ -84,6 +90,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
         first_name: '',
         last_name: '',
         phone: '',
+        member_since: '',
         role: 'admin'
       });
 
@@ -99,13 +106,13 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px] rounded-2xl">
+      <DialogContent className="sm:max-w-[600px] rounded-2xl overflow-y-auto max-h-[90vh]">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Staff Member
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new staff account with direct login access. User will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -122,7 +129,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="email"
                 value={formData.email}
                 onChange={(e) => handleChange('email', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="staff@example.com"
               />
               {errors.email && (
@@ -140,7 +147,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleChange('password', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="Minimum 8 characters"
               />
               {errors.password && (
@@ -157,8 +164,8 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="first_name"
                 value={formData.first_name}
                 onChange={(e) => handleChange('first_name', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
-                placeholder="John"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                placeholder="Jane"
               />
               {errors.first_name && (
                 <p className="text-sm text-red-500">{errors.first_name}</p>
@@ -174,7 +181,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="last_name"
                 value={formData.last_name}
                 onChange={(e) => handleChange('last_name', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="Doe"
               />
               {errors.last_name && (
@@ -192,7 +199,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -200,6 +207,20 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               )}
             </div>
 
+            {/* Member Since */}
+            <div className="grid gap-2">
+              <Label htmlFor="member_since" className="text-[var(--purple-ink)]">
+                Member Since
+              </Label>
+              <Input
+                id="member_since"
+                type="date"
+                value={formData.member_since}
+                onChange={(e) => handleChange('member_since', e.target.value)}
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              />
+            </div>
+
             {/* Role */}
             <div className="grid gap-2">
               <Label htmlFor="role" className="text-[var(--purple-ink)]">

src/components/CreateSubscriptionDialog.js

@@ -0,0 +1,576 @@
+import React, { useState, useEffect } from 'react';
+import api from '../utils/api';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './ui/select';
+import { Card } from './ui/card';
+import { toast } from 'sonner';
+import { Loader2, Repeat, Search, Calendar, Heart, X, User } from 'lucide-react';
+
+const CreateSubscriptionDialog = ({ open, onOpenChange, onSuccess }) => {
+  // Search state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [selectedUser, setSelectedUser] = useState(null);
+  const [searchLoading, setSearchLoading] = useState(false);
+  const [allUsers, setAllUsers] = useState([]);
+
+  // Plan state
+  const [plans, setPlans] = useState([]);
+  const [selectedPlan, setSelectedPlan] = useState(null);
+  const [useCustomPeriod, setUseCustomPeriod] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    plan_id: '',
+    amount: '',
+    payment_date: new Date().toISOString().split('T')[0],
+    payment_method: 'cash',
+    custom_period_start: new Date().toISOString().split('T')[0],
+    custom_period_end: '',
+    notes: ''
+  });
+  const [loading, setLoading] = useState(false);
+
+  // Fetch users and plans when dialog opens
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!open) return;
+
+      try {
+        const [usersResponse, plansResponse] = await Promise.all([
+          api.get('/admin/users'),
+          api.get('/admin/subscriptions/plans')
+        ]);
+        setAllUsers(usersResponse.data);
+        setPlans(plansResponse.data.filter(p => p.active));
+      } catch (error) {
+        toast.error('Failed to load data');
+      }
+    };
+
+    fetchData();
+  }, [open]);
+
+  // Filter users based on search query
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setSearchLoading(true);
+    const query = searchQuery.toLowerCase();
+    const filtered = allUsers.filter(user =>
+      user.first_name?.toLowerCase().includes(query) ||
+      user.last_name?.toLowerCase().includes(query) ||
+      user.email?.toLowerCase().includes(query)
+    ).slice(0, 10); // Limit to 10 results
+
+    setSearchResults(filtered);
+    setSearchLoading(false);
+  }, [searchQuery, allUsers]);
+
+  // Update amount when plan changes
+  useEffect(() => {
+    if (selectedPlan && !formData.amount) {
+      const suggestedAmount = (selectedPlan.suggested_price_cents || selectedPlan.minimum_price_cents || selectedPlan.price_cents) / 100;
+      setFormData(prev => ({
+        ...prev,
+        amount: suggestedAmount.toFixed(2)
+      }));
+    }
+  }, [selectedPlan]);
+
+  // Calculate donation breakdown
+  const getAmountBreakdown = () => {
+    if (!selectedPlan || !formData.amount) return null;
+
+    const totalCents = Math.round(parseFloat(formData.amount) * 100);
+    const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
+    const donationCents = Math.max(0, totalCents - minimumCents);
+
+    return {
+      total: totalCents,
+      base: minimumCents,
+      donation: donationCents
+    };
+  };
+
+  const formatPrice = (cents) => {
+    return `$${(cents / 100).toFixed(2)}`;
+  };
+
+  const breakdown = getAmountBreakdown();
+
+  const handleSelectUser = (user) => {
+    setSelectedUser(user);
+    setSearchQuery('');
+    setSearchResults([]);
+  };
+
+  const handleClearUser = () => {
+    setSelectedUser(null);
+    setFormData({
+      plan_id: '',
+      amount: '',
+      payment_date: new Date().toISOString().split('T')[0],
+      payment_method: 'cash',
+      custom_period_start: new Date().toISOString().split('T')[0],
+      custom_period_end: '',
+      notes: ''
+    });
+    setSelectedPlan(null);
+    setUseCustomPeriod(false);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!selectedUser) {
+      toast.error('Please select a user');
+      return;
+    }
+
+    if (!formData.plan_id) {
+      toast.error('Please select a subscription plan');
+      return;
+    }
+
+    if (!formData.amount || parseFloat(formData.amount) <= 0) {
+      toast.error('Please enter a valid payment amount');
+      return;
+    }
+
+    // Validate minimum amount
+    const amountCents = Math.round(parseFloat(formData.amount) * 100);
+    const minimumCents = selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000;
+    if (amountCents < minimumCents) {
+      toast.error(`Amount must be at least ${formatPrice(minimumCents)}`);
+      return;
+    }
+
+    if (useCustomPeriod && (!formData.custom_period_start || !formData.custom_period_end)) {
+      toast.error('Please specify both start and end dates for custom period');
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const payload = {
+        plan_id: formData.plan_id,
+        amount_cents: amountCents,
+        payment_date: new Date(formData.payment_date).toISOString(),
+        payment_method: formData.payment_method,
+        override_plan_dates: useCustomPeriod,
+        notes: formData.notes || null
+      };
+
+      if (useCustomPeriod) {
+        payload.custom_period_start = new Date(formData.custom_period_start).toISOString();
+        payload.custom_period_end = new Date(formData.custom_period_end).toISOString();
+      }
+
+      await api.post(`/admin/users/${selectedUser.id}/activate-payment`, payload);
+      toast.success(`Subscription created for ${selectedUser.first_name} ${selectedUser.last_name}!`);
+
+      // Reset form
+      handleClearUser();
+      onOpenChange(false);
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to create subscription';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    handleClearUser();
+    setSearchQuery('');
+    setSearchResults([]);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
+        <DialogHeader>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Repeat className="h-6 w-6" />
+            Create Subscription
+          </DialogTitle>
+          <DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Search for an existing member and create a subscription with manual payment processing.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit}>
+          <div className="grid gap-6 py-4">
+            {/* User Search Section */}
+            {!selectedUser ? (
+              <div className="space-y-3">
+                <Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Search Member
+                </Label>
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
+                  <Input
+                    placeholder="Search by name or email..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                  />
+                  {searchLoading && (
+                    <Loader2 className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 animate-spin text-brand-purple" />
+                  )}
+                </div>
+
+                {/* Search Results */}
+                {searchResults.length > 0 && (
+                  <Card className="border-2 border-[var(--neutral-800)] rounded-xl overflow-hidden">
+                    <div className="max-h-60 overflow-y-auto">
+                      {searchResults.map((user) => (
+                        <button
+                          key={user.id}
+                          type="button"
+                          onClick={() => handleSelectUser(user)}
+                          className="w-full p-3 text-left hover:bg-[var(--lavender-400)] transition-colors border-b border-[var(--neutral-800)] last:border-b-0"
+                        >
+                          <div className="flex items-center gap-3">
+                            <div className="h-10 w-10 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                              <User className="h-5 w-5 text-brand-purple" />
+                            </div>
+                            <div>
+                              <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                {user.first_name} {user.last_name}
+                              </p>
+                              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.email}
+                              </p>
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </Card>
+                )}
+
+                {searchQuery && !searchLoading && searchResults.length === 0 && (
+                  <p className="text-sm text-brand-purple text-center py-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    No members found matching "{searchQuery}"
+                  </p>
+                )}
+              </div>
+            ) : (
+              /* Selected User Card */
+              <Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="h-12 w-12 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                      <User className="h-6 w-6 text-brand-purple" />
+                    </div>
+                    <div>
+                      <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {selectedUser.first_name} {selectedUser.last_name}
+                      </p>
+                      <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {selectedUser.email}
+                      </p>
+                    </div>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleClearUser}
+                    className="text-brand-purple hover:bg-[var(--neutral-800)]/20"
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                </div>
+              </Card>
+            )}
+
+            {/* Payment Form - Only show when user is selected */}
+            {selectedUser && (
+              <>
+                {/* Plan Selection */}
+                <div className="space-y-2">
+                  <Label htmlFor="plan_id" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Subscription Plan
+                  </Label>
+                  <Select
+                    value={formData.plan_id}
+                    onValueChange={(value) => {
+                      const plan = plans.find(p => p.id === value);
+                      setSelectedPlan(plan);
+                      const suggestedAmount = plan ? (plan.suggested_price_cents || plan.minimum_price_cents || plan.price_cents) / 100 : '';
+                      setFormData({
+                        ...formData,
+                        plan_id: value,
+                        amount: suggestedAmount ? suggestedAmount.toFixed(2) : ''
+                      });
+                    }}
+                  >
+                    <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
+                      <SelectValue placeholder="Select subscription plan" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {plans.map(plan => {
+                        const minPrice = (plan.minimum_price_cents || plan.price_cents) / 100;
+                        const sugPrice = plan.suggested_price_cents ? (plan.suggested_price_cents / 100) : null;
+                        return (
+                          <SelectItem key={plan.id} value={plan.id}>
+                            {plan.name} - ${minPrice.toFixed(2)}{sugPrice && sugPrice > minPrice ? ` (Suggested: $${sugPrice.toFixed(2)})` : ''}/{plan.billing_cycle}
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectContent>
+                  </Select>
+                  {selectedPlan && (
+                    <p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
+                    </p>
+                  )}
+                </div>
+
+                {/* Payment Amount */}
+                <div className="space-y-2">
+                  <Label htmlFor="amount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Amount ($)
+                  </Label>
+                  <Input
+                    id="amount"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    placeholder="Enter amount"
+                    value={formData.amount}
+                    onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                    required
+                  />
+                  {selectedPlan && (
+                    <p className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
+                    </p>
+                  )}
+                </div>
+
+                {/* Amount Breakdown */}
+                {breakdown && breakdown.total >= breakdown.base && (
+                  <Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
+                    <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="flex justify-between text-[var(--purple-ink)]">
+                        <span>Membership Fee:</span>
+                        <span className="font-semibold">{formatPrice(breakdown.base)}</span>
+                      </div>
+                      {breakdown.donation > 0 && (
+                        <div className="flex justify-between text-[var(--orange-light)]">
+                          <span className="flex items-center gap-1">
+                            <Heart className="h-4 w-4" />
+                            Additional Donation:
+                          </span>
+                          <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
+                        </div>
+                      )}
+                      <div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
+                        <span>Total:</span>
+                        <span>{formatPrice(breakdown.total)}</span>
+                      </div>
+                    </div>
+                  </Card>
+                )}
+
+                {/* Payment Date */}
+                <div className="space-y-2">
+                  <Label htmlFor="payment_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Date
+                  </Label>
+                  <div className="relative">
+                    <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple" />
+                    <Input
+                      id="payment_date"
+                      type="date"
+                      value={formData.payment_date}
+                      onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
+                      className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                      required
+                    />
+                  </div>
+                </div>
+
+                {/* Payment Method */}
+                <div className="space-y-2">
+                  <Label htmlFor="payment_method" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Payment Method
+                  </Label>
+                  <Select
+                    value={formData.payment_method}
+                    onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
+                  >
+                    <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
+                      <SelectValue placeholder="Select payment method" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="cash">Cash</SelectItem>
+                      <SelectItem value="bank_transfer">Bank Transfer</SelectItem>
+                      <SelectItem value="check">Check</SelectItem>
+                      <SelectItem value="other">Other</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {/* Subscription Period */}
+                <div className="space-y-3">
+                  <Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Subscription Period
+                  </Label>
+
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="checkbox"
+                      id="use_custom_period"
+                      checked={useCustomPeriod}
+                      onChange={(e) => setUseCustomPeriod(e.target.checked)}
+                      className="rounded border-[var(--neutral-800)]"
+                    />
+                    <Label htmlFor="use_custom_period" className="text-sm text-brand-purple font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Use custom dates instead of plan's billing cycle
+                    </Label>
+                  </div>
+
+                  {useCustomPeriod ? (
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="custom_period_start" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          Start Date
+                        </Label>
+                        <Input
+                          id="custom_period_start"
+                          type="date"
+                          value={formData.custom_period_start}
+                          onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
+                          className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                          required={useCustomPeriod}
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="custom_period_end" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          End Date
+                        </Label>
+                        <Input
+                          id="custom_period_end"
+                          type="date"
+                          value={formData.custom_period_end}
+                          onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
+                          className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                          required={useCustomPeriod}
+                        />
+                      </div>
+                    </div>
+                  ) : (
+                    selectedPlan && (
+                      <div className="text-sm text-brand-purple bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {selectedPlan.custom_cycle_enabled ? (
+                          <>
+                            <p>
+                              <span className="font-medium text-[var(--purple-ink)]">Plan uses custom billing cycle:</span>
+                              <br />
+                              {(() => {
+                                const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                                const startMonth = months[(selectedPlan.custom_cycle_start_month || 1) - 1];
+                                const endMonth = months[(selectedPlan.custom_cycle_end_month || 12) - 1];
+                                return `${startMonth} ${selectedPlan.custom_cycle_start_day} - ${endMonth} ${selectedPlan.custom_cycle_end_day} (recurring annually)`;
+                              })()}
+                            </p>
+                            <p className="text-xs">
+                              Subscription will end on the upcoming cycle end date based on today's date.
+                            </p>
+                          </>
+                        ) : (
+                          <p>
+                            Will use plan's billing cycle: <span className="font-medium">{selectedPlan.billing_cycle}</span>
+                            <br />
+                            Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
+                              selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
+                                selectedPlan.billing_cycle === 'yearly' ? '1 year' :
+                                  selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
+                          </p>
+                        )}
+                      </div>
+                    )
+                  )}
+                </div>
+
+                {/* Notes */}
+                <div className="space-y-2">
+                  <Label htmlFor="notes" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    Notes (Optional)
+                  </Label>
+                  <Textarea
+                    id="notes"
+                    placeholder="Additional notes about the payment..."
+                    value={formData.notes}
+                    onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple min-h-[100px]"
+                  />
+                </div>
+              </>
+            )}
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              className="rounded-xl"
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+              disabled={loading || !selectedUser}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Repeat className="h-4 w-4 mr-2" />
+                  Create Subscription
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CreateSubscriptionDialog;

src/components/IdleSessionWarning.js

@@ -0,0 +1,313 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import api from '../utils/api';
+import logger from '../utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+/**
+ * IdleSessionWarning Component
+ *
+ * Monitors user activity and warns before session expiration
+ * - Warns 1 minute before JWT expiry (at 29 minutes if JWT is 30 min)
+ * - Auto-logout on expiration
+ * - "Stay Logged In" extends session
+ * - Checks session validity when tab becomes visible after being hidden
+ */
+const IdleSessionWarning = () => {
+  const { user, logout, refreshUser } = useAuth();
+  const navigate = useNavigate();
+
+  // Configuration
+  const SESSION_DURATION = 30 * 60 * 1000; // 30 minutes in milliseconds
+  const WARNING_BEFORE_EXPIRY = 1 * 60 * 1000; // Warn 1 minute before expiry
+  const WARNING_TIME = SESSION_DURATION - WARNING_BEFORE_EXPIRY; // 29 minutes
+
+  const [showWarning, setShowWarning] = useState(false);
+  const [timeRemaining, setTimeRemaining] = useState(60); // seconds
+  const [isExtending, setIsExtending] = useState(false);
+  const [isCheckingSession, setIsCheckingSession] = useState(false);
+
+  const activityTimeoutRef = useRef(null);
+  const warningTimeoutRef = useRef(null);
+  const countdownIntervalRef = useRef(null);
+  const lastActivityRef = useRef(Date.now());
+  const lastVisibilityCheckRef = useRef(Date.now());
+
+  // Reset activity timer
+  const resetActivityTimer = useCallback(() => {
+    lastActivityRef.current = Date.now();
+
+    // Clear existing timers
+    if (activityTimeoutRef.current) {
+      clearTimeout(activityTimeoutRef.current);
+    }
+    if (warningTimeoutRef.current) {
+      clearTimeout(warningTimeoutRef.current);
+    }
+    if (countdownIntervalRef.current) {
+      clearInterval(countdownIntervalRef.current);
+    }
+
+    // Hide warning if showing
+    if (showWarning) {
+      setShowWarning(false);
+    }
+
+    // Set new warning timer
+    warningTimeoutRef.current = setTimeout(() => {
+      // Show warning
+      setShowWarning(true);
+      setTimeRemaining(60); // 60 seconds until logout
+
+      // Start countdown
+      countdownIntervalRef.current = setInterval(() => {
+        setTimeRemaining((prev) => {
+          if (prev <= 1) {
+            // Time's up - logout
+            handleSessionExpired();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      // Set auto-logout timer
+      activityTimeoutRef.current = setTimeout(() => {
+        handleSessionExpired();
+      }, WARNING_BEFORE_EXPIRY);
+
+    }, WARNING_TIME);
+  }, [showWarning]);
+
+  // Handle session expiration
+  const handleSessionExpired = useCallback(() => {
+    // Clear all timers
+    if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
+    if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
+    if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+
+    setShowWarning(false);
+    logout();
+    navigate('/login', {
+      state: { message: 'Your session has expired due to inactivity. Please log in again.' }
+    });
+  }, [logout, navigate]);
+
+  // Handle "Stay Logged In" button
+  const handleExtendSession = async () => {
+    setIsExtending(true);
+    try {
+      // Refresh user data to get new token
+      await refreshUser();
+
+      // Reset activity timer
+      resetActivityTimer();
+
+      logger.log('[IdleSessionWarning] Session extended successfully');
+    } catch (error) {
+      logger.error('[IdleSessionWarning] Failed to extend session:', error);
+
+      // If refresh fails, logout
+      handleSessionExpired();
+    } finally {
+      setIsExtending(false);
+    }
+  };
+
+  // Check if session is still valid (called when tab becomes visible)
+  const checkSessionValidity = useCallback(async () => {
+    if (!user || isCheckingSession) return;
+
+    const token = localStorage.getItem('token');
+    if (!token) {
+      logger.log('[IdleSessionWarning] No token found on visibility change');
+      handleSessionExpired();
+      return;
+    }
+
+    setIsCheckingSession(true);
+    try {
+      // Make a lightweight API call to verify token is still valid
+      await api.get('/auth/me');
+      logger.log('[IdleSessionWarning] Session still valid after visibility change');
+
+      // Reset the activity timer since user is back
+      resetActivityTimer();
+    } catch (error) {
+      logger.error('[IdleSessionWarning] Session invalid on visibility change:', error);
+
+      // If 401, the interceptor will handle redirect
+      // For other errors, still redirect to be safe
+      if (error.response?.status !== 401) {
+        handleSessionExpired();
+      }
+    } finally {
+      setIsCheckingSession(false);
+    }
+  }, [user, isCheckingSession, handleSessionExpired, resetActivityTimer]);
+
+  // Handle visibility change (when user returns to tab after being away)
+  useEffect(() => {
+    if (!user) return;
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        const now = Date.now();
+        const timeSinceLastCheck = now - lastVisibilityCheckRef.current;
+
+        // Only check if tab was hidden for more than 1 minute
+        // This prevents unnecessary API calls for quick tab switches
+        if (timeSinceLastCheck > 60 * 1000) {
+          logger.log('[IdleSessionWarning] Tab became visible after', Math.round(timeSinceLastCheck / 1000), 'seconds');
+          checkSessionValidity();
+        }
+
+        lastVisibilityCheckRef.current = now;
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [user, checkSessionValidity]);
+
+  // Listen for session expired event from API interceptor
+  useEffect(() => {
+    const handleAuthSessionExpired = () => {
+      logger.log('[IdleSessionWarning] Received auth:session-expired event');
+      // Clear all timers
+      if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
+      if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
+      if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+      setShowWarning(false);
+    };
+
+    window.addEventListener('auth:session-expired', handleAuthSessionExpired);
+
+    return () => {
+      window.removeEventListener('auth:session-expired', handleAuthSessionExpired);
+    };
+  }, []);
+
+  // Track user activity
+  useEffect(() => {
+    if (!user) return;
+
+    const activityEvents = [
+      'mousedown',
+      'mousemove',
+      'keypress',
+      'scroll',
+      'touchstart',
+      'click'
+    ];
+
+    // Throttle activity detection to avoid too many resets
+    let throttleTimeout = null;
+    const handleActivity = () => {
+      if (throttleTimeout) return;
+
+      throttleTimeout = setTimeout(() => {
+        resetActivityTimer();
+        throttleTimeout = null;
+      }, 1000); // Throttle to once per second
+    };
+
+    // Add event listeners
+    activityEvents.forEach(event => {
+      document.addEventListener(event, handleActivity, { passive: true });
+    });
+
+    // Initialize timer
+    resetActivityTimer();
+
+    // Cleanup
+    return () => {
+      activityEvents.forEach(event => {
+        document.removeEventListener(event, handleActivity);
+      });
+
+      if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
+      if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
+      if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+      if (throttleTimeout) clearTimeout(throttleTimeout);
+    };
+  }, [user, resetActivityTimer]);
+
+  // Don't render if user is not logged in
+  if (!user) return null;
+
+  return (
+    <Dialog open={showWarning} onOpenChange={(open) => {
+      if (!open) {
+        // Prevent closing dialog by clicking outside
+        // User must click a button
+        return;
+      }
+    }}>
+      <DialogContent
+        className="max-w-md"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="bg-[#ff9e77]/10 p-3 rounded-full">
+              <AlertTriangle className="h-6 w-6 text-[#ff9e77]" />
+            </div>
+            <DialogTitle className="text-[#422268]">
+              Session About to Expire
+            </DialogTitle>
+          </div>
+          <DialogDescription className="text-[#664fa3]">
+            Your session will expire in <strong className="text-[#422268] text-lg">{timeRemaining}</strong> seconds due to inactivity.
+
+            <div className="mt-4 p-4 bg-[#f1eef9] rounded-lg border border-[#ddd8eb]">
+              <p className="text-sm text-[#422268]">
+                Click <strong>"Stay Logged In"</strong> to continue your session, or you will be automatically logged out.
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="flex-col sm:flex-row gap-3 mt-4">
+          <Button
+            variant="outline"
+            onClick={handleSessionExpired}
+            className="border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9]"
+          >
+            Log Out Now
+          </Button>
+          <Button
+            onClick={handleExtendSession}
+            disabled={isExtending}
+            className="bg-[#664fa3] hover:bg-[#422268] text-white"
+          >
+            {isExtending ? (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                Extending...
+              </>
+            ) : (
+              'Stay Logged In'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default IdleSessionWarning;

src/components/ImportMembersDialog.js

@@ -138,13 +138,13 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />
             {importResult ? 'Import Results' : 'Import Members from CSV'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {importResult
               ? 'Review the import results below'
               : 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'}
@@ -155,7 +155,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           // Upload Form
           <div className="grid gap-6 py-4">
             {/* CSV Format Instructions */}
-            <Alert className="border-[var(--purple-lavender)] bg-[var(--lavender-700)]">
+            <Alert className="border-brand-purple  bg-[var(--lavender-700)]">
               <AlertDescription className="text-sm text-[var(--purple-ink)]">
                 <strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
                 <br />
@@ -168,8 +168,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* File Upload Area */}
             <div
               className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
-                ? 'border-[var(--purple-lavender)] bg-[var(--lavender-700)]'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:bg-[var(--lavender-700)]'
+                ? 'border-brand-purple  bg-[var(--lavender-700)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple  hover:bg-[var(--lavender-700)]'
                 }`}
               onDragEnter={handleDrag}
               onDragLeave={handleDrag}
@@ -183,7 +183,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                     <p className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {file.name}
                     </p>
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                       {(file.size / 1024).toFixed(2)} KB
                     </p>
                   </div>
@@ -203,7 +203,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                     <p className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Drag and drop your CSV file here
                     </p>
-                    <p className="text-sm text-[var(--purple-lavender)] mb-4">or</p>
+                    <p className="text-sm text-brand-purple  mb-4">or</p>
                     <Label htmlFor="file-upload">
                       <Button variant="outline" className="rounded-xl cursor-pointer" asChild>
                         <span>Browse Files</span>
@@ -227,7 +227,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 checked={updateExisting}
                 onCheckedChange={setUpdateExisting}
                 id="update-existing"
-                className="h-5 w-5 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
+                className="h-5 w-5 border-2 border-brand-purple  data-[state=checked]:bg-brand-purple "
               />
               <Label htmlFor="update-existing" className="text-[var(--purple-ink)] cursor-pointer">
                 Update existing members (if email already exists)
@@ -240,7 +240,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Summary Cards */}
             <div className="grid md:grid-cols-4 gap-4">
               <div className="p-4 bg-background rounded-xl border border-[var(--neutral-800)] text-center">
-                <p className="text-sm text-[var(--purple-lavender)] mb-1">Total Rows</p>
+                <p className="text-sm text-brand-purple  mb-1">Total Rows</p>
                 <p className="text-2xl font-semibold text-[var(--purple-ink)]">{importResult.total_rows}</p>
               </div>
               <div className="p-4 bg-green-50 rounded-xl border border-green-200 text-center">
@@ -276,7 +276,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                       {importResult.errors.map((error, idx) => (
                         <TableRow key={idx} className="hover:bg-[var(--lavender-700)]">
                           <TableCell className="font-medium text-[var(--purple-ink)]">{error.row}</TableCell>
-                          <TableCell className="text-[var(--purple-lavender)]">{error.email}</TableCell>
+                          <TableCell className="text-brand-purple ">{error.email}</TableCell>
                           <TableCell className="text-red-600 text-sm">{error.error}</TableCell>
                         </TableRow>
                       ))}

src/components/InviteMemberDialog.js

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import api from '../utils/api';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { toast } from 'sonner';
+import { Loader2, Mail, Copy, Check } from 'lucide-react';
+
+const InviteMemberDialog = ({ open, onOpenChange, onSuccess }) => {
+  const [formData, setFormData] = useState({
+    email: '',
+    first_name: '',
+    last_name: '',
+    phone: '',
+    role: 'admin'
+  });
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [invitationUrl, setInvitationUrl] = useState(null);
+  const [copied, setCopied] = useState(false);
+  const [roles, setRoles] = useState([]);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+
+  // Fetch roles when dialog opens
+  useEffect(() => {
+    if (open) {
+      fetchRoles();
+    }
+  }, [open]);
+
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      // New endpoint returns roles based on user's permission level
+      // Superadmin: all roles
+      // Admin: admin, finance, and non-elevated custom roles
+      const response = await api.get('/admin/roles/assignable');
+      setRoles(response.data);
+    } catch (error) {
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  const handleChange = (field, value) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: null }));
+    }
+  };
+
+  const validate = () => {
+    const newErrors = {};
+
+    if (!formData.email) {
+      newErrors.email = 'Email is required';
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+      newErrors.email = 'Invalid email format';
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validate()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const response = await api.post('/admin/users/invite', formData);
+      toast.success('Invitation sent successfully');
+
+      // Show invitation URL
+      setInvitationUrl(response.data.invitation_url);
+
+      // Don't close dialog yet - show invitation URL first
+      if (onSuccess) onSuccess();
+    } catch (error) {
+      const errorMessage = error.response?.data?.detail || 'Failed to send invitation';
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(invitationUrl);
+    setCopied(true);
+    toast.success('Invitation link copied to clipboard');
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const handleClose = () => {
+    // Reset form
+    setFormData({
+      email: '',
+      first_name: '',
+      last_name: '',
+      phone: '',
+      role: 'admin'
+    });
+    setInvitationUrl(null);
+    setCopied(false);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[600px] rounded-2xl overflow-y-auto max-h-[90vh]">
+        <DialogHeader>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Mail className="h-6 w-6" />
+            {invitationUrl ? 'Invitation Sent' : 'Invite Member'}
+          </DialogTitle>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            {invitationUrl
+              ? 'The invitation has been sent via email. You can also copy the link below.'
+              : 'Send an email invitation to join as member. They will set their own password.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        {invitationUrl ? (
+          // Show invitation URL after successful send
+          <div className="py-4">
+            <Label className="text-[var(--purple-ink)] mb-2 block">Invitation Link (expires in 7 days)</Label>
+            <div className="flex gap-2">
+              <Input
+                value={invitationUrl}
+                readOnly
+                className="rounded-xl border-2 border-[var(--neutral-800)] bg-gray-50"
+              />
+              <Button
+                onClick={copyToClipboard}
+                className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2" />
+                    Copied
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        ) : (
+          // Show invitation form
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-6 py-4">
+              {/* Email */}
+              <div className="grid gap-2">
+                <Label htmlFor="email" className="text-[var(--purple-ink)]">
+                  Email <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={formData.email}
+                  onChange={(e) => handleChange('email', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="member@example.com"
+                />
+                {errors.email && (
+                  <p className="text-sm text-red-500">{errors.email}</p>
+                )}
+              </div>
+
+              {/* First Name (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
+                  First Name <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="first_name"
+                  value={formData.first_name}
+                  onChange={(e) => handleChange('first_name', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Jane"
+                />
+              </div>
+
+              {/* Last Name (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
+                  Last Name <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="last_name"
+                  value={formData.last_name}
+                  onChange={(e) => handleChange('last_name', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Doe"
+                />
+              </div>
+
+              {/* Phone (Optional) */}
+              <div className="grid gap-2">
+                <Label htmlFor="phone" className="text-[var(--purple-ink)]">
+                  Phone <span className="text-gray-400">(Optional)</span>
+                </Label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  value={formData.phone}
+                  onChange={(e) => handleChange('phone', e.target.value)}
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="(555) 123-4567"
+                />
+              </div>
+
+
+            </div>
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={handleClose}
+                className="rounded-xl"
+                disabled={loading}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+                disabled={loading}
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <Mail className="h-4 w-4 mr-2" />
+                    Send Invitation
+                  </>
+                )}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+
+        {invitationUrl && (
+          <DialogFooter>
+            <Button
+              onClick={handleClose}
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
+            >
+              Done
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default InviteMemberDialog;

src/components/InviteStaffDialog.js

@@ -123,13 +123,13 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[600px] rounded-2xl">
+      <DialogContent className="sm:max-w-[600px] rounded-2xl overflow-y-auto max-h-[90vh]">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Mail className="h-6 w-6" />
             {invitationUrl ? 'Invitation Sent' : 'Invite Staff Member'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {invitationUrl
               ? 'The invitation has been sent via email. You can also copy the link below.'
               : 'Send an email invitation to join as staff. They will set their own password.'}
@@ -148,7 +148,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               />
               <Button
                 onClick={copyToClipboard}
-                className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
+                className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
               >
                 {copied ? (
                   <>
@@ -178,7 +178,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="staff@example.com"
                 />
                 {errors.email && (
@@ -195,8 +195,8 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
-                  placeholder="John"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Jane"
                 />
               </div>
 
@@ -209,7 +209,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
               </div>
@@ -224,7 +224,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="tel"
                   value={formData.phone}
                   onChange={(e) => handleChange('phone', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="(555) 123-4567"
                 />
               </div>

src/components/MemberBadge.js

@@ -0,0 +1,19 @@
+// src/components/MemberBadge.js
+import React from 'react';
+import { Badge } from './ui/badge';
+import { getTierForMember } from '../utils/member-tiers';
+import { getTierIcon } from '../config/memberTierIcons';
+
+const MemberBadge = ({ memberSince, tiers }) => {
+  const tier = getTierForMember(memberSince, tiers);
+  const Icon = getTierIcon(tier.iconKey);
+
+  return (
+    <Badge className={`px-3 py-2 rounded-md text-sm flex items-center gap-2 border hover:text-white ${tier.badgeClass}`}>
+      <Icon className="size-6" />
+      {tier.label}
+    </Badge>
+  );
+};
+
+export default MemberBadge;

src/components/MemberCard.js

@@ -0,0 +1,189 @@
+import React from 'react'
+import { Card } from './ui/card';
+import { Button } from './ui/button';
+import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
+import MemberBadge from './MemberBadge';
+import useDirectoryConfig from '../hooks/use-directory-config';
+
+// Helper function to get initials
+const getInitials = (firstName, lastName) => {
+    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
+};
+
+// Helper function to ensure social media URLs have proper protocol
+const getSocialMediaLink = (url) => {
+    if (!url) return null;
+    if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        return `https://${url}`;
+    }
+    return url;
+};
+
+const MemberCard = ({ member, onViewProfile, tiers }) => {
+    const memberSince = member.member_since || member.created_at;
+    const { isFieldEnabled } = useDirectoryConfig();
+    return (
+        <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
+            {/* Member Tier Badge */}
+            <div className='flex justify-end items-center mb-2'>
+                <MemberBadge memberSince={memberSince} tiers={tiers} />
+            </div>
+            <div className="flex justify-center mb-4">
+                {member.profile_photo_url ? (
+                    <img
+                        src={member.profile_photo_url}
+                        alt={`${member.first_name} ${member.last_name}`}
+                        className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
+                    />
+                ) : (
+                    <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
+                        <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {getInitials(member.first_name, member.last_name)}
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Name */}
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                {member.first_name} {member.last_name}
+            </h3>
+
+            {/* Partner Name */}
+            {isFieldEnabled('directory_partner_name') && member.directory_partner_name && (
+                <div className="flex items-center justify-center gap-2 mb-4">
+                    <Heart className="h-4 w-4 text-[var(--orange-light)]" />
+                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Partner: {member.directory_partner_name}
+                    </span>
+                </div>
+            )}
+
+            {/* Bio */}
+            {isFieldEnabled('directory_bio') && member.directory_bio && (
+                <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {member.directory_bio}
+                </p>
+            )}
+
+            {/* Member Since */}
+            {memberSince && (
+                <div className="flex items-center justify-center gap-2 mb-4">
+                    <Calendar className="h-4 w-4 text-brand-purple " />
+                    <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Member since {new Date(memberSince).toLocaleDateString('en-US', {
+                            month: 'long',
+                            year: 'numeric'
+                        })}
+                    </span>
+                </div>
+            )}
+
+            {/* Contact Information */}
+            <div className="space-y-3 mb-4">
+                {isFieldEnabled('directory_email') && member.directory_email && (
+                    <div className="flex items-center gap-2 text-sm">
+                        <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+                        <a
+                            href={`mailto:${member.directory_email}`}
+                            className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
+                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                        >
+                            {member.directory_email}
+                        </a>
+                    </div>
+                )}
+
+                {isFieldEnabled('directory_phone') && member.directory_phone && (
+                    <div className="flex items-center gap-2 text-sm">
+                        <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
+                        <a
+                            href={`tel:${member.directory_phone}`}
+                            className="text-brand-purple  hover:text-[var(--purple-ink)]"
+                            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                        >
+                            {member.directory_phone}
+                        </a>
+                    </div>
+                )}
+
+                {isFieldEnabled('directory_address') && member.directory_address && (
+                    <div className="flex items-start gap-2 text-sm">
+                        <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
+                        <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            {member.directory_address}
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Social Media Links */}
+            {isFieldEnabled('social_media') && (member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
+                <div className="pt-4 border-t border-[var(--neutral-800)]">
+                    <div className="flex justify-center gap-3">
+                        {member.social_media_facebook && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_facebook)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Facebook"
+                            >
+                                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_instagram && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_instagram)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Instagram"
+                            >
+                                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_twitter && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_twitter)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="Twitter/X"
+                            >
+                                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
+                            </a>
+                        )}
+
+                        {member.social_media_linkedin && (
+                            <a
+                                href={getSocialMediaLink(member.social_media_linkedin)}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
+                                title="LinkedIn"
+                            >
+                                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
+                            </a>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* View Profile Button */}
+            <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
+                <Button
+                    onClick={() => onViewProfile?.(member.id)}
+                    className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
+                >
+                    <UserCircle className="h-4 w-4 mr-2" />
+                    View Full Profile
+                </Button>
+            </div>
+        </Card>
+    );
+};
+
+export default MemberCard

src/components/MemberFooter.js

@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
 
 const MemberFooter = () => {
   return (
-    <footer className="bg-[var(--purple-ink)] text-white mt-auto">
+    <footer className="bg-brand-dark-lavender text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="grid md:grid-cols-4 gap-8">
           {/* Logo & About */}
@@ -89,12 +89,12 @@ const MemberFooter = () => {
                 </Link>
               </li>
               <li>
-                <a href="/#contact" className="text-gray-300 hover:text-white transition-colors">
+                <a href="/membership/contact-us" className="text-gray-300 hover:text-white transition-colors">
                   Contact Us
                 </a>
               </li>
               <li>
-                <a href="/#donate" className="text-gray-300 hover:text-white transition-colors">
+                <a href="/membership/donate" className="text-gray-300 hover:text-white transition-colors">
                   Donate
                 </a>
               </li>
@@ -106,12 +106,12 @@ const MemberFooter = () => {
       {/* Bottom Bar */}
       <div className="border-t border-[var(--purple-lavender)]">
         <div className="max-w-7xl mx-auto px-6 py-4">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-300" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">
-              <a href="/#terms" className="hover:text-white transition-colors">Terms of Service</a>
-              <a href="/#privacy" className="hover:text-white transition-colors">Privacy Policy</a>
+              <a href="/membership/terms-of-service" className="hover:text-white transition-colors">Terms of Service</a>
+              <a href="/membership/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</a>
             </div>
-            <p>© 2025 LOAF. All rights reserved.</p>
+            <p>© {new Date().getFullYear()} LOAF. All rights reserved.</p>
           </div>
         </div>
       </div>

src/components/Navbar.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { useThemeConfig } from '../context/ThemeConfigContext';
 import { Button } from './ui/button';
 import { ChevronDown, Menu, X } from 'lucide-react';
 import {
@@ -12,11 +13,12 @@ import {
 
 const Navbar = () => {
   const { user, logout } = useAuth();
+  const { getLogoUrl } = useThemeConfig();
   const navigate = useNavigate();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-  // LOAF logo (local)
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  // Get logo URL from theme config (with fallback to default)
+  const loafLogo = getLogoUrl();
 
   const handleLogout = () => {
     logout();
@@ -39,7 +41,7 @@ const Navbar = () => {
               style={{ fontFamily: "'Poppins', sans-serif" }}
               data-testid="admin-nav-button"
             >
-              Admin Panel
+              Dashboard
             </button>
           </Link>
         )}
@@ -110,7 +112,7 @@ const Navbar = () => {
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
-            Dashboard
+            My Profile
           </Link>
           <Link
             to="/events"
@@ -170,14 +172,7 @@ const Navbar = () => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <Link
-            to="/profile"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
-            data-testid="profile-nav-button"
-          >
-            Profile
-          </Link>
+
         </nav>
 
         {/* Mobile Hamburger Button */}
@@ -231,7 +226,7 @@ const Navbar = () => {
             )}
 
             {/* Navigation Links */}
-            <nav className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
               <div className="space-y-2">
                 <Link
                   to="/"
@@ -373,7 +368,7 @@ const Navbar = () => {
                     className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
-                    Admin Panel
+                    Dashboard
                   </Button>
                 </Link>
               )}

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/PaymentActivationDialog.js

@@ -156,13 +156,13 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
   if (!user) return null;
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl">
+    <Dialog open={open} onOpenChange={onOpenChange} className="">
+      <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl overflow-y-auto max-h-[90vh] p-6">
         <DialogHeader>
           <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Activate Manual Payment
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Record offline payment for {user.first_name} {user.last_name} ({user.email})
           </DialogDescription>
         </DialogHeader>
@@ -203,7 +203,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               </SelectContent>
             </Select>
             {selectedPlan && (
-              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
               </p>
             )}
@@ -222,11 +222,11 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Enter amount"
               value={formData.amount}
               onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               required
             />
             {selectedPlan && (
-              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
               </p>
             )}
@@ -263,13 +263,13 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               Payment Date
             </Label>
             <div className="relative">
-              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 id="payment_date"
                 type="date"
                 value={formData.payment_date}
                 onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
-                className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 required
               />
             </div>
@@ -308,7 +308,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 onChange={(e) => setUseCustomPeriod(e.target.checked)}
                 className="rounded border-[var(--neutral-800)]"
               />
-              <Label htmlFor="use_custom_period" className="text-sm text-[var(--purple-lavender)] font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Label htmlFor="use_custom_period" className="text-sm text-brand-purple  font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Use custom dates instead of plan's billing cycle
               </Label>
             </div>
@@ -324,7 +324,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_start}
                     onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     required={useCustomPeriod}
                   />
                 </div>
@@ -337,14 +337,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_end}
                     onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     required={useCustomPeriod}
                   />
                 </div>
               </div>
             ) : (
               selectedPlan && (
-                <div className="text-sm text-[var(--purple-lavender)] bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="text-sm text-brand-purple  bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {selectedPlan.custom_cycle_enabled ? (
                     <>
                       <p>
@@ -386,7 +386,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Additional notes about the payment..."
               value={formData.notes}
               onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  min-h-[100px]"
             />
           </div>
 

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 { 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 useStripeConfig from '../hooks/use-stripe-config';
+import PaymentMethodCard from './PaymentMethodCard';
+import AddPaymentMethodDialog from './AddPaymentMethodDialog';
+import ConfirmationDialog from './ConfirmationDialog';
+
+/**
+ * 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);
+
+  // Get Stripe configuration from API
+  const { stripePromise, loading: stripeLoading, error: stripeError } = useStripeConfig();
+
+  // 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/PendingInvitationsTable.js

@@ -73,7 +73,7 @@ const PendingInvitationsTable = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
       admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
       member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
   if (loading) {
     return (
       <div className="text-center py-8">
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading invitations...
         </p>
       </div>
@@ -125,7 +125,7 @@ const PendingInvitationsTable = () => {
         <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
           No Pending Invitations
         </h3>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           All invitations have been accepted or expired
         </p>
       </Card>
@@ -152,19 +152,19 @@ const PendingInvitationsTable = () => {
                 <TableCell className="font-medium text-[var(--purple-ink)]">
                   {invitation.email}
                 </TableCell>
-                <TableCell className="text-[var(--purple-lavender)]">
+                <TableCell className="text-brand-purple ">
                   {invitation.first_name && invitation.last_name
                     ? `${invitation.first_name} ${invitation.last_name}`
                     : '-'}
                 </TableCell>
                 <TableCell>{getRoleBadge(invitation.role)}</TableCell>
-                <TableCell className="text-[var(--purple-lavender)]">
+                <TableCell className="text-brand-purple ">
                   {new Date(invitation.invited_at).toLocaleDateString()}
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
-                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[var(--purple-lavender)]'}`} />
-                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[var(--purple-lavender)]'}`}>
+                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-brand-purple '}`} />
+                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-brand-purple '}`}>
                       {formatDate(invitation.expires_at)}
                     </span>
                   </div>
@@ -211,7 +211,7 @@ const PendingInvitationsTable = () => {
             <AlertDialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Revoke Invitation
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to revoke the invitation for{' '}
               <span className="font-semibold">{revokeDialog.invitation?.email}</span>?
               This action cannot be undone.

src/components/PlanDialog.js

@@ -159,12 +159,12 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
           </DialogDescription>
         </DialogHeader>
@@ -216,7 +216,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[var(--purple-lavender)] mt-1">Minimum $30</p>
+                <p className="text-xs text-brand-purple  mt-1">Minimum $30</p>
               </div>
 
               <div>
@@ -232,7 +232,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[var(--purple-lavender)] mt-1">Pre-filled amount</p>
+                <p className="text-xs text-brand-purple  mt-1">Pre-filled amount</p>
               </div>
             </div>
 
@@ -240,7 +240,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <div className="flex items-center justify-between pt-2">
               <div>
                 <Label htmlFor="allow_donation">Allow Donations</Label>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Members can pay more than minimum
                 </p>
               </div>
@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
                   className="sr-only peer"
                 />
-                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-purple /20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
               </label>
             </div>
           </div>
@@ -283,7 +283,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
               <h3 className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Custom Billing Period
               </h3>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Set recurring date range (e.g., Jan 1 - Dec 31 for calendar year)
               </p>
 
@@ -361,7 +361,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           <div className="flex items-center justify-between">
             <div>
               <Label htmlFor="active">Active Status</Label>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Inactive plans won't appear for new subscriptions
               </p>
             </div>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-purple /20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
             </label>
           </div>
 

src/components/PublicFooter.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { Button } from './ui/button';
+import { useThemeConfig } from '../context/ThemeConfigContext';
 
 const PublicFooter = () => {
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  const { getLogoUrl } = useThemeConfig();
+  const loafLogo = getLogoUrl();
 
   return (
     <>
@@ -60,7 +62,7 @@ const PublicFooter = () => {
             </Link>
           </nav>
           <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            © 2025 LOAF. All Rights Reserved.
+            © {new Date().getFullYear()} LOAF. All Rights Reserved.
           </p>
           <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Designed and Managed by{' '}

src/components/PublicNavbar.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { Button } from './ui/button';
 import { useAuth } from '../context/AuthContext';
+import { useThemeConfig } from '../context/ThemeConfigContext';
 import { ChevronDown, Menu, X } from 'lucide-react';
 import {
   DropdownMenu,
@@ -12,6 +13,7 @@ import {
 
 const PublicNavbar = () => {
   const { user, logout } = useAuth();
+  const { getLogoUrl } = useThemeConfig();
   const navigate = useNavigate();
   const location = useLocation();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -30,8 +32,8 @@ const PublicNavbar = () => {
     return location.pathname.startsWith('/about');
   };
 
-  // LOAF logo (local)
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  // Get logo URL from theme config (with fallback to default)
+  const loafLogo = getLogoUrl();
 
   const handleAuthAction = () => {
     if (user) {
@@ -75,8 +77,24 @@ const PublicNavbar = () => {
       <div className='sticky top-0 inset-x-0 z-50'>
 
         <header className="bg-gradient-to-r flex-wrap from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
-          <div className='flex gap-4 sm:gap-6'>
-
+          <div className='flex gap-4 sm:gap-6 items-center'>
+            {user && (
+              <span
+                className="text-white text-base font-medium"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                Welcome, {user.first_name}
+              </span>
+            )}
+            {(user?.role === 'admin' || user?.role === 'superadmin') && (
+              <Link
+                to="/admin"
+                className="text-white text-base font-medium hover:opacity-80 transition-opacity"
+                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+              >
+                Dashboard
+              </Link>
+            )}
             <button
               onClick={handleAuthAction}
               className="text-white text-base font-medium hover:opacity-80 transition-opacity bg-transparent border-none cursor-pointer"
@@ -105,7 +123,7 @@ const PublicNavbar = () => {
         </header>
 
         {/* Main Header - Navigation */}
-        <header className=" bg-[var(--purple-lavender)] px-[20px] py-2 flex justify-between items-center">
+        <header className=" bg-brand-purple  px-[20px] py-2 flex justify-between items-center">
           <Link to="/">
             <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
           </Link>
@@ -165,7 +183,7 @@ const PublicNavbar = () => {
               className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
-              {user ? 'Dashboard' : 'Become a Member'}
+              {user ? 'My Profile' : 'Become a Member'}
             </Link>
             {!user && (
               <Link
@@ -176,7 +194,71 @@ const PublicNavbar = () => {
                 Members Only
               </Link>
             )}
-            <Link
+            {user && (
+              <>
+                <Link
+                  to="/events"
+                  className={getDesktopLinkClasses('/events')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  Events
+                </Link>
+                <Link
+                  to="/members/calendar"
+                  className={getDesktopLinkClasses('/members/calendar')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  Calendar
+                </Link>
+                <Link
+                  to="/members/directory"
+                  className={getDesktopLinkClasses('/members/directory')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  Directory
+                </Link>
+                <Link
+                  to="/members/gallery"
+                  className={getDesktopLinkClasses('/members/gallery')}
+                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                >
+                  Gallery
+                </Link>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      className={`${location.pathname.startsWith('/members/newsletters') || location.pathname.startsWith('/members/financials') || location.pathname.startsWith('/members/bylaws')
+                        ? "text-[var(--orange-light)] hover:text-[var(--orange-coral)]"
+                        : "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      Documents
+                      <ChevronDown className="h-4 w-4" />
+                    </button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
+                    <DropdownMenuItem asChild>
+                      <Link to="/members/newsletters" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
+                        style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Newsletters
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link to="/members/financials" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
+                        style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Financials
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link to="/members/bylaws" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
+                        style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Bylaws
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </>
+            )}
+            {/* <Link
               to="/resources"
               className={getDesktopLinkClasses('/resources')}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
@@ -189,7 +271,7 @@ const PublicNavbar = () => {
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               Contact Us
-            </Link>
+            </Link> */}
           </nav>
         </header>
 
@@ -204,7 +286,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-[var(--purple-lavender)] shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto scrollbar-dashboard">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -219,6 +301,18 @@ const PublicNavbar = () => {
               </button>
             </div>
 
+            {/* User Info */}
+            {user && (
+              <div className="px-6 py-4 border-b border-[var(--purple-deep)]">
+                <p className="text-white text-sm opacity-90" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Welcome,
+                </p>
+                <p className="text-white font-semibold text-base" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  {user.first_name} {user.last_name}
+                </p>
+              </div>
+            )}
+
             {/* Navigation Links */}
             <nav className="flex flex-col p-6 space-y-4">
               <Link
@@ -270,7 +364,7 @@ const PublicNavbar = () => {
                 className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
-                {user ? 'Dashboard' : 'Become a Member'}
+                {user ? 'My Profile' : 'Become a Member'}
               </Link>
 
               {!user && (
@@ -284,6 +378,80 @@ const PublicNavbar = () => {
                 </Link>
               )}
 
+              {user && (
+                <>
+                  <Link
+                    to="/events"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={getMobileLinkClasses('/events')}
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  >
+                    Events
+                  </Link>
+
+                  <Link
+                    to="/members/calendar"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={getMobileLinkClasses('/members/calendar')}
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  >
+                    Calendar
+                  </Link>
+
+                  <Link
+                    to="/members/directory"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={getMobileLinkClasses('/members/directory')}
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  >
+                    Directory
+                  </Link>
+
+                  <Link
+                    to="/members/gallery"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className={getMobileLinkClasses('/members/gallery')}
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  >
+                    Gallery
+                  </Link>
+
+                  {/* Documents Section */}
+                  <div className="space-y-2">
+                    <p
+                      className={`text-base font-semibold px-4 py-2 rounded-md ${location.pathname.startsWith('/members/newsletters') || location.pathname.startsWith('/members/financials') || location.pathname.startsWith('/members/bylaws') ? 'text-[var(--orange-light)]' : 'text-white'}`}
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                    >
+                      Documents
+                    </p>
+                    <Link
+                      to="/members/newsletters"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className={getMobileSubLinkClasses('/members/newsletters')}
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                    >
+                      Newsletters
+                    </Link>
+                    <Link
+                      to="/members/financials"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className={getMobileSubLinkClasses('/members/financials')}
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                    >
+                      Financials
+                    </Link>
+                    <Link
+                      to="/members/bylaws"
+                      onClick={() => setIsMobileMenuOpen(false)}
+                      className={getMobileSubLinkClasses('/members/bylaws')}
+                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                    >
+                      Bylaws
+                    </Link>
+                  </div>
+                </>
+              )}
+
               <Link
                 to="/resources"
                 onClick={() => setIsMobileMenuOpen(false)}
@@ -304,6 +472,16 @@ const PublicNavbar = () => {
 
               {/* Auth Actions */}
               <div className="pt-4 border-t border-[var(--purple-deep)] space-y-2">
+                {(user?.role === 'admin' || user?.role === 'superadmin') && (
+                  <Link
+                    to="/admin"
+                    onClick={() => setIsMobileMenuOpen(false)}
+                    className="block text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
+                    style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+                  >
+                    Dashboard
+                  </Link>
+                )}
                 <button
                   onClick={() => {
                     handleAuthAction();

src/components/RejectionDialog.js

@@ -41,17 +41,17 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
               Reject Application
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
           <div className="bg-[var(--lavender-400)] border border-[var(--neutral-800)] rounded-lg p-4">
-            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Applicant:</strong> {user?.email}
             </p>
-            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Status:</strong> {user?.status}
             </p>
           </div>
@@ -74,7 +74,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             {error && (
               <p className="text-sm text-red-500">{error}</p>
             )}
-            <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               The applicant will receive an email with this reason.
             </p>
           </div>
@@ -85,7 +85,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             type="button"
             onClick={handleClose}
             variant="outline"
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-6"
             disabled={loading}
           >
             <X className="h-4 w-4 mr-2" />

src/components/SettingsSidebar.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { CreditCard, Shield, Star, Palette, FileEdit, BookUser } from 'lucide-react';
+
+const settingsItems = [
+  { label: 'Stripe', path: '/admin/settings/stripe', icon: CreditCard },
+  { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
+  { label: 'Theme', path: '/admin/settings/theme', icon: Palette },
+  { label: 'Directory', path: '/admin/settings/directory', icon: BookUser },
+];
+
+const SettingsTabs = () => {
+  const location = useLocation();
+
+  return (
+    <div className="w-full border-b border-border">
+      <nav className="flex gap-1 overflow-x-auto pb-px -mb-px" aria-label="Settings tabs">
+        {settingsItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = location.pathname === item.path;
+
+          return (
+            <NavLink
+              key={item.label}
+              to={item.path}
+              className={`
+                flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap
+                border-b-2 transition-all duration-200
+                ${isActive
+                  ? 'border-primary text-primary bg-primary/5'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+                }
+              `}
+            >
+              <Icon className={`h-4 w-4 ${isActive ? 'text-primary' : ''}`} />
+              <span>{item.label}</span>
+            </NavLink>
+          );
+        })}
+      </nav>
+    </div>
+  );
+};
+
+export default SettingsTabs;

src/components/StatCard.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Card } from "./ui/card";
+
+export const StatCard = ({
+  title,
+  value,
+  icon: Icon,
+  iconBgClass,
+  dataTestId,
+}) => {
+  const valueString = value == null ? "" : String(value);
+
+  const digitCount =
+    valueString.replace(/\D/g, "").length || valueString.length;
+
+  const getValueFontSize = () => {
+    switch (true) {
+      case digitCount <= 2:
+        // 3.75rem for 3 or fewer digits
+        return "3.75rem";
+      case digitCount <= 6:
+        // Scale down for more digits
+        return "clamp(2rem, 5cqi, 3rem)";
+      case digitCount <= 9:
+        return "clamp(1.5rem, 4cqi, 2.5rem)";
+      default:
+        return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  const valueFontSize = getValueFontSize();
+
+  return (
+    <Card
+      className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
+      data-testid={dataTestId}
+    >
+      <div className="flex items-start gap-4 mb-4 justify-between">
+        <div
+          className="space-y-8 "
+          style={{
+            containerType: "inline-size",
+            maxWidth: "200px",
+            width: "100%",
+          }}
+        >
+          <p
+            className="font-semibold text-[var(--purple-ink)] mb-1"
+            style={{ fontSize: valueFontSize, lineHeight: 1 }}
+          >
+            {value}
+          </p>
+        </div>
+
+        <div className={`${iconBgClass} px-3 py-2 rounded-lg `}>
+          <Icon className="size-[valueFontSize]" />
+        </div>
+      </div>
+      <p
+        className="text-sm text-brand-purple "
+        style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+      >
+        {title}
+      </p>
+    </Card>
+  );
+};

src/components/StatusBadge.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Badge } from './ui/badge';
+
+const STATUS_BADGE_CONFIG = {
+
+  //status-based badges
+  pending_email: { label: 'Pending Email', variant: 'orange2' },
+  pending_validation: { label: 'Pending Validation', variant: 'gray' },
+  payment_pending: { label: 'Payment Pending', variant: 'orange' },
+  active: { label: 'Active', variant: 'green' },
+  inactive: { label: 'Inactive', variant: 'gray2' },
+  canceled: { label: 'Canceled', variant: 'red' },
+  expired: { label: 'Expired', variant: 'red2' },
+  abandoned: { label: 'Abandoned', variant: 'gray3' },
+  rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' },
+
+  //role-based badges
+  finance: { label: 'Finance Manager', variant: 'purple' },
+  guest: { label: 'Guest', variant: 'gray' },
+  member: { label: 'Member', variant: 'purple' },
+  superadmin: { label: 'Superadmin', variant: 'purple' },
+  admin: { label: 'Admin', variant: 'purple' },
+  moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
+  staff: { label: 'Staff', variant: 'gray' },
+  media: { label: 'Media', variant: 'gray2' },
+
+  //donation badges
+  pending: { label: 'Payment Pending', variant: 'orange' },
+  completed: { label: 'Completed', variant: 'green' },
+  failed: { label: 'Failed', className: 'bg-red-100 text-red-700' }
+};
+
+//todo: make shield icon dynamic based on status
+const StatusBadge = ({ status }) => {
+  const statusConfig = STATUS_BADGE_CONFIG[status] || STATUS_BADGE_CONFIG.inactive;
+
+  return (
+    <Badge variant={statusConfig.variant} className=" px-3 py-1  rounded-md text-sm">
+      {/* <Shield className="h-3 w-3 mr-1 inline" />  */}
+      {statusConfig.label}
+    </Badge>
+  );
+};
+
+
+export default StatusBadge;

src/components/TransactionHistory.js

@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import { Card } from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Receipt, CreditCard, Heart, Calendar, ExternalLink, DollarSign } from 'lucide-react';
+
+/**
+ * TransactionHistory Component
+ * Displays user transaction history including subscriptions and donations
+ * 
+ * @param {Object} props
+ * @param {Array} props.subscriptions - List of subscription transactions
+ * @param {Array} props.donations - List of donation transactions
+ * @param {number} props.totalSubscriptionCents - Total subscription amount in cents
+ * @param {number} props.totalDonationCents - Total donation amount in cents
+ * @param {boolean} props.loading - Loading state
+ * @param {boolean} props.isAdmin - Whether viewing as admin (shows extra fields)
+ */
+const TransactionHistory = ({
+    subscriptions = [],
+    donations = [],
+    totalSubscriptionCents = 0,
+    totalDonationCents = 0,
+    loading = false,
+    isAdmin = false
+}) => {
+    const [activeTab, setActiveTab] = useState('all');
+
+    const formatAmount = (cents) => {
+        if (!cents) return '$0.00';
+        return `$${(cents / 100).toFixed(2)}`;
+    };
+
+    const formatDate = (dateString) => {
+        if (!dateString) return 'N/A';
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+
+    const getStatusBadgeClass = (status) => {
+        switch (status?.toLowerCase()) {
+            case 'active':
+            case 'completed':
+                return 'bg-green-100 text-green-800 border-green-200';
+            case 'pending':
+                return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+            case 'cancelled':
+            case 'failed':
+            case 'expired':
+                return 'bg-red-100 text-red-800 border-red-200';
+            default:
+                return 'bg-gray-100 text-gray-800 border-gray-200';
+        }
+    };
+
+    const allTransactions = [
+        ...subscriptions.map(s => ({ ...s, sortDate: s.created_at })),
+        ...donations.map(d => ({ ...d, sortDate: d.created_at }))
+    ].sort((a, b) => new Date(b.sortDate) - new Date(a.sortDate));
+
+    const TransactionRow = ({ transaction }) => {
+        const isSubscription = transaction.type === 'subscription';
+
+        return (
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border-b border-[var(--neutral-800)] last:border-b-0 hover:bg-[var(--lavender-500)] transition-colors">
+                <div className="flex items-start gap-3 mb-2 sm:mb-0">
+                    <div className={`p-2 rounded-lg ${isSubscription ? 'bg-[var(--purple-lavender)] bg-opacity-20' : 'bg-[var(--orange-light)] bg-opacity-20'}`}>
+                        {isSubscription ? (
+                            <CreditCard className="h-5 w-5 text-white" />
+                        ) : (
+                            <Heart className="h-5 w-5 text-white" />
+                        )}
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {transaction.description}
+                            </span>
+                            <Badge className={`text-xs ${getStatusBadgeClass(transaction.status)}`}>
+                                {transaction.status}
+                            </Badge>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-brand-purple mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <Calendar className="h-3 w-3" />
+                            <span>{formatDate(transaction.payment_completed_at || transaction.created_at)}</span>
+                            {transaction.card_brand && transaction.card_last4 && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span>{transaction.card_brand} ****{transaction.card_last4}</span>
+                                </>
+                            )}
+                            {isSubscription && transaction.billing_cycle && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span className="capitalize">{transaction.billing_cycle}</span>
+                                </>
+                            )}
+                        </div>
+                        {isAdmin && transaction.manual_payment && (
+                            <div className="text-xs text-[var(--orange-light)] mt-1">
+                                Manual Payment {transaction.manual_payment_notes && `- ${transaction.manual_payment_notes}`}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 pl-10 sm:pl-0">
+                    <div className="text-right">
+                        <div className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {formatAmount(transaction.amount_cents)}
+                        </div>
+                        {isSubscription && transaction.donation_cents > 0 && (
+                            <div className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                (incl. {formatAmount(transaction.donation_cents)} donation)
+                            </div>
+                        )}
+                    </div>
+                    {transaction.stripe_receipt_url && (
+                        <a
+                            href={transaction.stripe_receipt_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 text-brand-purple hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg transition-colors"
+                            title="View Receipt"
+                        >
+                            <ExternalLink className="h-4 w-4" />
+                        </a>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    const EmptyState = ({ type }) => (
+        <div className="py-12 text-center">
+            <div className="mx-auto w-16 h-16 bg-[var(--lavender-300)] rounded-full flex items-center justify-center mb-4">
+                {type === 'subscription' ? (
+                    <CreditCard className="h-8 w-8 text-brand-purple" />
+                ) : type === 'donation' ? (
+                    <Heart className="h-8 w-8 text-brand-purple" />
+                ) : (
+                    <Receipt className="h-8 w-8 text-brand-purple" />
+                )}
+            </div>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                {type === 'subscription'
+                    ? 'No subscription payments yet'
+                    : type === 'donation'
+                        ? 'No donations yet'
+                        : 'No transactions yet'}
+            </p>
+        </div>
+    );
+
+    if (loading) {
+        return (
+            <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <div className="flex items-center justify-center py-12">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--purple-lavender)]"></div>
+                </div>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Receipt className="h-6 w-6 text-brand-purple" />
+                    Transaction History
+                </h2>
+            </div>
+
+            {/* Summary Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <CreditCard className="h-4 w-4" />
+                        <span className="text-sm">Total Subscriptions</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalSubscriptionCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{subscriptions.length} payment(s)</div>
+                </div>
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <Heart className="h-4 w-4" />
+                        <span className="text-sm">Total Donations</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalDonationCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{donations.length} donation(s)</div>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className="grid w-full grid-cols-3 mb-4">
+                    <TabsTrigger value="all" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        All ({allTransactions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="subscriptions" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Subscriptions ({subscriptions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="donations" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Donations ({donations.length})
+                    </TabsTrigger>
+                </TabsList>
+
+                <div className="border border-[var(--neutral-800)] rounded-xl overflow-hidden">
+                    <TabsContent value="all" className="m-0">
+                        {allTransactions.length > 0 ? (
+                            allTransactions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="all" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="subscriptions" className="m-0">
+                        {subscriptions.length > 0 ? (
+                            subscriptions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="subscription" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="donations" className="m-0">
+                        {donations.length > 0 ? (
+                            donations.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="donation" />
+                        )}
+                    </TabsContent>
+                </div>
+            </Tabs>
+        </Card>
+    );
+};
+
+export default TransactionHistory;

src/components/ViewRegistrationDialog.js

@@ -0,0 +1,539 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Checkbox } from './ui/checkbox';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import { User, Mail, Phone, Calendar, UserCheck, Clock, FileText } from 'lucide-react';
+import StatusBadge from './StatusBadge';
+import api from '../utils/api';
+import { toast } from 'sonner';
+
+const ViewRegistrationDialog = ({ open, onOpenChange, user }) => {
+    if (!user) return null;
+
+    const [formData, setFormData] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+    const autoSaveTimeoutRef = useRef(null);
+    const pendingSaveRef = useRef(false);
+
+    const leadSourceOptions = [
+        'Current member',
+        'Friend',
+        'OutSmart Magazine',
+        'Search engine (Google etc.)',
+        "I've known about LOAF for a long time",
+        'Other'
+    ];
+
+    const volunteerOptions = [
+        'Welcoming new members at events',
+        'Sending out birthday cards',
+        'Care Team Calls',
+        'Sharing ideas for events',
+        'Researching grants',
+        'Applying for grants',
+        'Assisting with TeatherLOAFers',
+        'Assisting with ActiveLOAFers',
+        'Assisting with weekday Lunch Bunch',
+        'Uploading Photos to the Website',
+        'Assisting with eNewsletter',
+        'Other administrative task'
+    ];
+
+    useEffect(() => {
+        if (!open || !user) return;
+        const nextFormData = {
+            lead_sources: Array.isArray(user.lead_sources) ? user.lead_sources : [],
+            partner_first_name: user.partner_first_name || '',
+            partner_last_name: user.partner_last_name || '',
+            partner_is_member: Boolean(user.partner_is_member),
+            partner_plan_to_become_member: Boolean(user.partner_plan_to_become_member),
+            newsletter_publish_name: Boolean(user.newsletter_publish_name),
+            newsletter_publish_photo: Boolean(user.newsletter_publish_photo),
+            newsletter_publish_birthday: Boolean(user.newsletter_publish_birthday),
+            newsletter_publish_none: Boolean(user.newsletter_publish_none),
+            referred_by_member_name: user.referred_by_member_name || '',
+            volunteer_interests: Array.isArray(user.volunteer_interests) ? user.volunteer_interests : [],
+            scholarship_requested: Boolean(user.scholarship_requested),
+            scholarship_reason: user.scholarship_reason || ''
+        };
+        setFormData(nextFormData);
+        setHasUnsavedChanges(false);
+    }, [open, user]);
+
+    useEffect(() => {
+        return () => {
+            if (autoSaveTimeoutRef.current) {
+                clearTimeout(autoSaveTimeoutRef.current);
+            }
+        };
+    }, []);
+
+    const formatDate = (dateString) => {
+        if (!dateString) return '—';
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        });
+    };
+
+    const formatDateTime = (dateString) => {
+        if (!dateString) return '—';
+        return new Date(dateString).toLocaleString('en-US', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+
+    const formatPhoneNumber = (phone) => {
+        if (!phone) return '—';
+        const cleaned = phone.replace(/\D/g, '');
+        if (cleaned.length === 10) {
+            return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+        }
+        return phone;
+    };
+
+    const saveProfile = async (showToast = true) => {
+        if (!formData) return;
+        if (isSaving) {
+            pendingSaveRef.current = true;
+            return;
+        }
+
+        setIsSaving(true);
+        try {
+            await api.put('/users/profile', {
+                lead_sources: formData.lead_sources,
+                partner_first_name: formData.partner_first_name,
+                partner_last_name: formData.partner_last_name,
+                partner_is_member: formData.partner_is_member,
+                partner_plan_to_become_member: formData.partner_plan_to_become_member,
+                newsletter_publish_name: formData.newsletter_publish_name,
+                newsletter_publish_photo: formData.newsletter_publish_photo,
+                newsletter_publish_birthday: formData.newsletter_publish_birthday,
+                newsletter_publish_none: formData.newsletter_publish_none,
+                referred_by_member_name: formData.referred_by_member_name,
+                volunteer_interests: formData.volunteer_interests,
+                scholarship_requested: formData.scholarship_requested,
+                scholarship_reason: formData.scholarship_reason
+            });
+            setHasUnsavedChanges(false);
+            if (showToast) {
+                toast.success('Registration details saved');
+            }
+        } catch (error) {
+            if (showToast) {
+                toast.error(error.response?.data?.detail || 'Failed to save registration details');
+            }
+        } finally {
+            setIsSaving(false);
+            if (pendingSaveRef.current) {
+                pendingSaveRef.current = false;
+                saveProfile(showToast);
+            }
+        }
+    };
+
+    const scheduleAutoSave = () => {
+        setHasUnsavedChanges(true);
+        if (autoSaveTimeoutRef.current) {
+            clearTimeout(autoSaveTimeoutRef.current);
+        }
+        autoSaveTimeoutRef.current = setTimeout(() => {
+            saveProfile(false);
+        }, 800);
+    };
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => {
+            const next = { ...prev, [name]: value };
+            return next;
+        });
+        scheduleAutoSave();
+    };
+
+    const handleCheckboxChange = (name, checked) => {
+        setFormData(prev => ({ ...prev, [name]: checked }));
+        scheduleAutoSave();
+    };
+
+    const handleLeadSourceChange = (source) => {
+        setFormData(prev => {
+            const sources = prev.lead_sources.includes(source)
+                ? prev.lead_sources.filter((item) => item !== source)
+                : [...prev.lead_sources, source];
+            return { ...prev, lead_sources: sources };
+        });
+        scheduleAutoSave();
+    };
+
+    const handleVolunteerChange = (option) => {
+        setFormData(prev => {
+            const interests = prev.volunteer_interests.includes(option)
+                ? prev.volunteer_interests.filter((item) => item !== option)
+                : [...prev.volunteer_interests, option];
+            return { ...prev, volunteer_interests: interests };
+        });
+        scheduleAutoSave();
+    };
+
+    const InfoRow = ({ icon: Icon, label, value }) => (
+        <div className="flex items-start gap-3 py-3 border-b border-[var(--neutral-800)] last:border-b-0">
+            <div className="h-10 w-10 rounded-lg bg-[var(--lavender-400)] flex items-center justify-center flex-shrink-0">
+                <Icon className="h-5 w-5 text-brand-purple" />
+            </div>
+            <div className="flex-1 min-w-0">
+                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {label}
+                </p>
+                <p className="font-medium text-[var(--purple-ink)] break-words" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    {value || '—'}
+                </p>
+            </div>
+        </div>
+    );
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[600px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
+                <DialogHeader>
+                    <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        <FileText className="h-6 w-6" />
+                        Registration Details
+                    </DialogTitle>
+                    <DialogDescription className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        View the registration information for this member application.
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="py-4 space-y-4">
+                    {/* User Header Card */}
+                    <Card className="p-4 bg-[var(--lavender-400)] border-2 border-[var(--neutral-800)] rounded-xl">
+                        <div className="flex items-center gap-4">
+                            <div className="h-16 w-16 rounded-full bg-[var(--neutral-800)]/20 flex items-center justify-center">
+                                <User className="h-8 w-8 text-brand-purple" />
+                            </div>
+                            <div className="flex-1">
+                                <p className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    {user.first_name} {user.last_name}
+                                </p>
+                                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    {user.email}
+                                </p>
+                                <div className="mt-2">
+                                    <StatusBadge status={user.status} />
+                                </div>
+                            </div>
+                        </div>
+                    </Card>
+
+                    {/* Contact Information */}
+                    <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                        <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            Contact Information
+                        </h3>
+                        <InfoRow icon={Mail} label="Email Address" value={user.email} />
+                        <InfoRow icon={Phone} label="Phone Number" value={formatPhoneNumber(user.phone)} />
+                    </Card>
+
+                    {/* Registration Details */}
+                    <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                        <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            Registration Details
+                        </h3>
+                        <InfoRow icon={Calendar} label="Registration Date" value={formatDate(user.created_at)} />
+                        <InfoRow icon={UserCheck} label="Referred By" value={formData?.referred_by_member_name} />
+                        <InfoRow icon={Clock} label="Email Verification Expires" value={formatDateTime(user.email_verification_expires_at)} />
+                    </Card>
+
+                    {formData && (
+                        <>
+                            {/* How Did You Hear About Us */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    How Did You Hear About Us? *
+                                </h3>
+                                <div className="space-y-3">
+                                    {leadSourceOptions.map((source) => (
+                                        <div key={source} className="flex items-center space-x-2">
+                                            <Checkbox
+                                                id={`lead_${source}`}
+                                                checked={formData.lead_sources.includes(source)}
+                                                onCheckedChange={() => handleLeadSourceChange(source)}
+                                            />
+                                            <Label htmlFor={`lead_${source}`} className="text-base cursor-pointer">
+                                                {source}
+                                            </Label>
+                                        </div>
+                                    ))}
+                                </div>
+                            </Card>
+
+                            {/* Partner Information */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Partner Information (Optional)
+                                </h3>
+                                <div className="grid md:grid-cols-2 gap-4 mb-4">
+                                    <div>
+                                        <Label htmlFor="partner_first_name">Partner First Name</Label>
+                                        <Input
+                                            id="partner_first_name"
+                                            name="partner_first_name"
+                                            value={formData.partner_first_name}
+                                            onChange={handleInputChange}
+                                            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                    <div>
+                                        <Label htmlFor="partner_last_name">Partner Last Name</Label>
+                                        <Input
+                                            id="partner_last_name"
+                                            name="partner_last_name"
+                                            value={formData.partner_last_name}
+                                            onChange={handleInputChange}
+                                            className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                </div>
+                                <div className="space-y-3">
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="partner_is_member"
+                                            checked={formData.partner_is_member}
+                                            onCheckedChange={(checked) => handleCheckboxChange('partner_is_member', checked)}
+                                        />
+                                        <Label htmlFor="partner_is_member" className="text-base cursor-pointer">
+                                            Is your partner already a member?
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="partner_plan_to_become_member"
+                                            checked={formData.partner_plan_to_become_member}
+                                            onCheckedChange={(checked) => handleCheckboxChange('partner_plan_to_become_member', checked)}
+                                        />
+                                        <Label htmlFor="partner_plan_to_become_member" className="text-base cursor-pointer">
+                                            Does your partner plan to become a member?
+                                        </Label>
+                                    </div>
+                                </div>
+                            </Card>
+
+                            {/* Newsletter Preferences */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Newsletter Publication Preferences *
+                                </h3>
+                                <p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    Please check what information may be published in LOAF Newsletter
+                                </p>
+                                <div className="space-y-3">
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_name"
+                                            checked={formData.newsletter_publish_name}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_name', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_name" className="text-base cursor-pointer">
+                                            Name
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_photo"
+                                            checked={formData.newsletter_publish_photo}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_photo', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_photo" className="text-base cursor-pointer">
+                                            Photo (added later in profile)
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_birthday"
+                                            checked={formData.newsletter_publish_birthday}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_birthday', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_birthday" className="text-base cursor-pointer">
+                                            Birthday
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center space-x-2">
+                                        <Checkbox
+                                            id="newsletter_publish_none"
+                                            checked={formData.newsletter_publish_none}
+                                            onCheckedChange={(checked) => handleCheckboxChange('newsletter_publish_none', checked)}
+                                        />
+                                        <Label htmlFor="newsletter_publish_none" className="text-base cursor-pointer">
+                                            Do not publish any of my information
+                                        </Label>
+                                    </div>
+                                </div>
+                            </Card>
+
+                            {/* Referral */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Referral
+                                </h3>
+                                <div>
+                                    <Label htmlFor="referred_by_member_name">Name of a LOAF Member who already knows you</Label>
+                                    <Input
+                                        id="referred_by_member_name"
+                                        name="referred_by_member_name"
+                                        value={formData.referred_by_member_name}
+                                        onChange={handleInputChange}
+                                        placeholder="Enter member name or email"
+                                        className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                    />
+                                    <p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                        If referred by a current member, you may skip the event attendance requirement.
+                                    </p>
+                                </div>
+                            </Card>
+
+                            {/* Volunteer Interests */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    Volunteer Interests (Optional)
+                                </h3>
+                                <p className="text-brand-purple mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
+                                </p>
+                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                    {volunteerOptions.map((option) => (
+                                        <div key={option} className="flex items-center space-x-2">
+                                            <Checkbox
+                                                id={`volunteer_${option}`}
+                                                checked={formData.volunteer_interests.includes(option)}
+                                                onCheckedChange={() => handleVolunteerChange(option)}
+                                            />
+                                            <Label htmlFor={`volunteer_${option}`} className="text-base cursor-pointer">
+                                                {option}
+                                            </Label>
+                                        </div>
+                                    ))}
+                                </div>
+                            </Card>
+
+                            {/* Scholarship Request */}
+                            <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                        id="scholarship_requested"
+                                        checked={formData.scholarship_requested}
+                                        onCheckedChange={(checked) => handleCheckboxChange('scholarship_requested', checked)}
+                                    />
+                                    <Label htmlFor="scholarship_requested" className="text-base cursor-pointer font-semibold">
+                                        I am requesting for scholarship
+                                    </Label>
+                                </div>
+                                <p className="text-sm text-brand-purple mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                    Scholarship information is kept confidential
+                                </p>
+                                {formData.scholarship_requested && (
+                                    <div className="mt-4">
+                                        <Label htmlFor="scholarship_reason">Please explain your situation *</Label>
+                                        <Textarea
+                                            id="scholarship_reason"
+                                            name="scholarship_reason"
+                                            value={formData.scholarship_reason}
+                                            onChange={handleInputChange}
+                                            placeholder="Tell us why you're requesting a scholarship..."
+                                            rows={4}
+                                            className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple"
+                                        />
+                                    </div>
+                                )}
+                            </Card>
+                        </>
+                    )}
+
+                    {/* Additional Information (if available) */}
+                    {(user.address || user.city || user.state || user.zip_code) && (
+                        <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                            <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Address
+                            </h3>
+                            <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.address && <p>{user.address}</p>}
+                                {(user.city || user.state || user.zip_code) && (
+                                    <p>
+                                        {[user.city, user.state, user.zip_code].filter(Boolean).join(', ')}
+                                    </p>
+                                )}
+                            </div>
+                        </Card>
+                    )}
+
+                    {/* Notes (if available) */}
+                    {user.notes && (
+                        <Card className="p-4 border border-[var(--neutral-800)] rounded-xl">
+                            <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Notes
+                            </h3>
+                            <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.notes}
+                            </p>
+                        </Card>
+                    )}
+
+                    {/* Rejection Reason (if rejected) */}
+                    {user.status === 'rejected' && user.rejection_reason && (
+                        <Card className="p-4 border border-red-300 bg-red-50 dark:bg-red-500/10 rounded-xl">
+                            <h3 className="text-lg font-semibold text-red-600 mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Rejection Reason
+                            </h3>
+                            <p className="text-red-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {user.rejection_reason}
+                            </p>
+                        </Card>
+                    )}
+                </div>
+
+                <DialogFooter>
+                    <div className="flex-1 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {isSaving && 'Saving changes...'}
+                        {!isSaving && hasUnsavedChanges && 'Unsaved changes'}
+                        {!isSaving && !hasUnsavedChanges && 'All changes saved'}
+                    </div>
+                    <Button
+                        type="button"
+                        onClick={() => saveProfile(true)}
+                        disabled={!hasUnsavedChanges || isSaving}
+                        className="rounded-xl border-2 border-[var(--neutral-800)] bg-white text-[var(--purple-ink)] hover:bg-[var(--lavender-300)]"
+                    >
+                        Save All
+                    </Button>
+                    <Button
+                        type="button"
+                        onClick={() => onOpenChange(false)}
+                        className="rounded-xl bg-[var(--purple-ink)] hover:bg-[var(--purple-ink)]/90 text-white"
+                    >
+                        Close
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default ViewRegistrationDialog;

src/components/WordPressImportWizard.js

@@ -371,14 +371,14 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Upload WordPress CSV Export</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
                 </p>
             </div>
 
             <Card className="p-6 border-2 border-dashed border-[var(--neutral-800)] bg-[var(--lavender-400)]">
                 <div className="flex flex-col items-center gap-4">
-                    <Upload className="h-12 w-12 text-[var(--purple-lavender)]" />
+                    <Upload className="h-12 w-12 text-brand-purple " />
                     <div className="text-center">
                         <Input
                             type="file"
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             className="max-w-xs"
                         />
                         {uploadedFile && (
-                            <p className="text-sm text-[var(--purple-lavender)] mt-2">
+                            <p className="text-sm text-brand-purple  mt-2">
                                 Selected: {uploadedFile.name}
                             </p>
                         )}
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <Button
                     onClick={handleUpload}
                     disabled={uploading}
-                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                    className="w-full bg-brand-purple  hover:bg-[var(--purple-ink)]"
                 >
                     {uploading ? (
                         <>
@@ -466,7 +466,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Field Mapping</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     WordPress fields have been automatically mapped to LOAF platform fields.
                 </p>
             </div>
@@ -538,7 +538,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Review & Adjust User Status</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Review suggested status mappings and override as needed before import.
                 </p>
             </div>
@@ -550,7 +550,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         checked={selectedRows.size === previewData.length && previewData.length > 0}
                         onCheckedChange={toggleSelectAll}
                     />
-                    <span className="text-sm text-[var(--purple-lavender)] font-medium">
+                    <span className="text-sm text-brand-purple  font-medium">
                         {selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
                     </span>
                     {selectedRows.size > 0 && (
@@ -572,7 +572,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Data table */}
             {loading ? (
                 <div className="flex items-center justify-center py-12">
-                    <Loader2 className="h-8 w-8 animate-spin text-[var(--purple-lavender)]" />
+                    <Loader2 className="h-8 w-8 animate-spin text-brand-purple " />
                 </div>
             ) : (
                 <div className="border rounded-lg overflow-hidden">
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Pagination */}
             {totalPages > 1 && (
                 <div className="flex items-center justify-between">
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                         Page {currentPage} of {totalPages}
                     </p>
                     <div className="flex gap-2">
@@ -690,22 +690,22 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             <div className="space-y-6">
                 <div>
                     <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Preview</h3>
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                         Review the final import settings before execution.
                     </p>
                 </div>
 
                 <div className="grid md:grid-cols-3 gap-4">
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Total Users</p>
+                        <p className="text-sm text-brand-purple ">Total Users</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.total_rows}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Status Overrides</p>
+                        <p className="text-sm text-brand-purple ">Status Overrides</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{overrideCount}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Expected Imports</p>
+                        <p className="text-sm text-brand-purple ">Expected Imports</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.valid_rows}</p>
                     </Card>
                 </div>
@@ -715,15 +715,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                     <div className="space-y-3">
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Send password reset emails to all imported users</span>
+                            <span className="text-sm text-brand-purple ">Send password reset emails to all imported users</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Skip rows with errors and continue import</span>
+                            <span className="text-sm text-brand-purple ">Skip rows with errors and continue import</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Full rollback capability available after import</span>
+                            <span className="text-sm text-brand-purple ">Full rollback capability available after import</span>
                         </div>
                     </div>
                 </Card>
@@ -751,7 +751,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                     {importing ? 'Import in Progress...' : 'Ready to Import'}
                 </h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     {importing
                         ? 'Please wait while users are imported. This may take a few minutes.'
                         : 'Click "Start Import" to begin importing users.'}
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {importing && (
                 <div className="space-y-4">
                     <Progress value={importProgress} className="w-full" />
-                    <p className="text-center text-sm text-[var(--purple-lavender)]">
+                    <p className="text-center text-sm text-brand-purple ">
                         {importProgress.toFixed(1)}% complete
                     </p>
                 </div>
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {!importing && !importResults && (
                 <Button
                     onClick={handleExecuteImport}
-                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] py-6 text-lg"
+                    className="w-full bg-brand-purple  hover:bg-[var(--purple-ink)] py-6 text-lg"
                 >
                     <Play className="mr-2 h-5 w-5" />
                     Start Import
@@ -787,7 +787,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Complete</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Review the import results and download error reports if needed.
                 </p>
             </div>
@@ -854,7 +854,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 Confirm Rollback
                             </DialogTitle>
                         </div>
-                        <DialogDescription className="text-[var(--purple-lavender)]">
+                        <DialogDescription className="text-brand-purple ">
                             This will permanently delete{' '}
                             <strong>{importResults?.successful_rows} users</strong> that were imported.
                             This action cannot be undone.
@@ -896,12 +896,12 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard
                     </DialogTitle>
-                    <DialogDescription className="text-[var(--purple-lavender)]">
+                    <DialogDescription className="text-brand-purple ">
                         Import WordPress users with interactive status review and full rollback capability
                     </DialogDescription>
                 </DialogHeader>
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                     <div
                                         className={`
                                             w-10 h-10 rounded-full flex items-center justify-center
-                                            ${isCurrent ? 'bg-[var(--purple-lavender)] text-white' : ''}
+                                            ${isCurrent ? 'bg-brand-purple  text-white' : ''}
                                             ${isCompleted ? 'bg-green-600 text-white' : ''}
                                             ${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
                                         `}
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         <Button
                             onClick={handleNext}
                             disabled={!canProceed()}
-                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                            className="bg-brand-purple  hover:bg-[var(--purple-ink)]"
                         >
                             Next
                             <ChevronRight className="h-4 w-4 ml-2" />
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 onOpenChange(false);
                                 if (onSuccess) onSuccess();
                             }}
-                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                            className="bg-brand-purple  hover:bg-[var(--purple-ink)]"
                         >
                             Close
                         </Button>

src/components/admin/AdminPaymentMethodsPanel.js

@@ -0,0 +1,531 @@
+import React, { useState, useEffect, useCallback } from 'react';
+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 useStripeConfig from '../../hooks/use-stripe-config';
+import ConfirmationDialog from '../ConfirmationDialog';
+import PasswordConfirmDialog from '../PasswordConfirmDialog';
+import AddPaymentMethodDialog from '../AddPaymentMethodDialog';
+
+/**
+ * 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);
+
+  // Get Stripe configuration from API
+  const { stripePromise, loading: stripeLoading, error: stripeError } = useStripeConfig();
+
+  // 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/admin/SubscriptionsTable.jsx

@@ -0,0 +1,347 @@
+import React from 'react';
+import { Button } from '../ui/button';
+import StatusBadge from '../StatusBadge';
+import {
+  ChevronDown,
+  ChevronUp,
+  Edit,
+  XCircle,
+  CreditCard,
+  Info,
+  ExternalLink,
+  Copy
+} from 'lucide-react';
+
+const HEADER_CELLS = [
+  { label: 'Member', align: 'text-left' },
+  { label: 'Plan', align: 'text-left' },
+  { label: 'Status', align: 'text-left' },
+  { label: 'Period', align: 'text-left' },
+  { label: 'Base Fee', align: 'text-right' },
+  { label: 'Donation', align: 'text-right' },
+  { label: 'Total', align: 'text-right' },
+  { label: 'Details', align: 'text-center' },
+  { label: 'Actions', align: 'text-center' }
+];
+
+const HeaderCell = ({ align, children }) => (
+  <th
+    className={`p-4 text-[var(--purple-ink)] font-semibold ${align}`}
+    style={{ fontFamily: "'Inter', sans-serif" }}
+  >
+    {children}
+  </th>
+);
+
+const TableCell = ({ align = 'text-left', className = '', style, children, ...props }) => (
+  <td
+    className={`p-4 ${align} ${className}`.trim()}
+    style={style}
+    {...props}
+  >
+    {children}
+  </td>
+);
+
+
+const SubscriptionRow = ({
+  sub,
+  isExpanded,
+  onToggle,
+  onEdit,
+  onCancel,
+  hasPermission,
+  formatDate,
+  formatDateTime,
+  formatPrice,
+  copyToClipboard
+}) => (
+  <>
+    <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
+      <TableCell>
+        <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          {sub.user.first_name} {sub.user.last_name}
+        </div>
+        <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {sub.user.email}
+        </div>
+      </TableCell>
+      <TableCell>
+        <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          {sub.plan.name}
+        </div>
+        <div className="text-xs text-brand-purple ">
+          {sub.plan.billing_cycle}
+        </div>
+      </TableCell>
+      <TableCell>
+        <StatusBadge status={sub.status} />
+      </TableCell>
+      <TableCell>
+        <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div>{formatDate(sub.start_date)}</div>
+          <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
+        </div>
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.base_subscription_cents || 0)}
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="text-[var(--orange-light)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.donation_cents || 0)}
+      </TableCell>
+      <TableCell
+        align="text-right"
+        className="font-semibold text-[var(--purple-ink)]"
+        style={{ fontFamily: "'Inter', sans-serif" }}
+      >
+        {formatPrice(sub.amount_paid_cents || 0)}
+      </TableCell>
+      <TableCell>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={onToggle}
+          className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+        >
+          {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+        </Button>
+      </TableCell>
+      <TableCell>
+        <div className="flex items-center justify-center gap-2">
+          {hasPermission('subscriptions.edit') && (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => onEdit(sub)}
+              className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+            >
+              <Edit className="h-4 w-4" />
+            </Button>
+          )}
+          {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
+            <Button
+              size="sm"
+              variant="outline-destructive"
+              onClick={() => onCancel(sub.id)}
+            >
+              <XCircle className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      </TableCell>
+    </tr>
+
+    {isExpanded && (
+      <tr className="bg-[var(--lavender-400)]/30">
+        <TableCell colSpan={9} className="p-6">
+          <div className="space-y-4">
+            <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Transaction Details
+            </h4>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
+                <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <CreditCard className="h-4 w-4" />
+                  Payment Information
+                </h5>
+                <div className="space-y-2 text-sm">
+                  {sub.payment_completed_at && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Payment Date:</span>
+                      <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
+                    </div>
+                  )}
+                  {sub.payment_method && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Payment Method:</span>
+                      <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
+                    </div>
+                  )}
+                  {sub.card_brand && sub.card_last4 && (
+                    <div className="flex justify-between">
+                      <span className="text-brand-purple ">Card:</span>
+                      <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Info className="h-4 w-4" />
+                  Stripe Transaction IDs
+                </h5>
+                <div className="space-y-2 text-sm">
+                  {sub.stripe_payment_intent_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Payment Intent:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_payment_intent_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_charge_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Charge ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_charge_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_subscription_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Subscription ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_subscription_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_invoice_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Invoice ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_invoice_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_customer_id && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Customer ID:</span>
+                      <div className="flex items-center gap-1">
+                        <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                          {sub.stripe_customer_id.substring(0, 20)}...
+                        </code>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
+                        >
+                          <Copy className="h-3 w-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {sub.stripe_receipt_url && (
+                    <div className="flex items-center justify-between gap-2">
+                      <span className="text-brand-purple ">Receipt:</span>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
+                        className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                      >
+                        <ExternalLink className="h-3 w-3 mr-1" />
+                        View Receipt
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </TableCell>
+      </tr>
+    )}
+  </>
+);
+
+const SubscriptionsTable = ({
+  subscriptions,
+  expandedRows,
+  onToggleRowExpansion,
+  onEdit,
+  onCancel,
+  hasPermission,
+  formatDate,
+  formatDateTime,
+  formatPrice,
+  copyToClipboard
+}) => (
+  <table className="w-full">
+    <thead>
+      <tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
+        {HEADER_CELLS.map((cell) => (
+          <HeaderCell key={cell.label} align={cell.align}>
+            {cell.label}
+          </HeaderCell>
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {subscriptions.length > 0 ? (
+        subscriptions.map((sub) => (
+          <SubscriptionRow
+            key={sub.id}
+            sub={sub}
+            isExpanded={expandedRows.has(sub.id)}
+            onToggle={() => onToggleRowExpansion(sub.id)}
+            onEdit={onEdit}
+            onCancel={onCancel}
+            hasPermission={hasPermission}
+            formatDate={formatDate}
+            formatDateTime={formatDateTime}
+            formatPrice={formatPrice}
+            copyToClipboard={copyToClipboard}
+          />
+        ))
+      ) : (
+        <tr>
+          <TableCell
+            align="text-center"
+            className="p-12 text-brand-purple "
+            style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            colSpan={9}
+          >
+            No subscriptions found
+          </TableCell>
+        </tr>
+      )}
+    </tbody>
+  </table>
+);
+
+export default SubscriptionsTable;

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/components/registration/RegistrationStep1.js

@@ -40,7 +40,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="first-name-input"
             />
           </div>
@@ -52,7 +52,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="last-name-input"
             />
           </div>
@@ -69,7 +69,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="phone-input"
             />
           </div>
@@ -82,7 +82,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.date_of_birth}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="dob-input"
             />
           </div>
@@ -112,7 +112,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.city}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="city-input"
             />
           </div>
@@ -124,7 +124,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.state}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="state-input"
             />
           </div>
@@ -136,7 +136,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.zipcode}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="zipcode-input"
             />
           </div>
@@ -179,7 +179,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_first_name"
               value={formData.partner_first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="partner-first-name-input"
             />
           </div>
@@ -190,7 +190,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_last_name"
               value={formData.partner_last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="partner-last-name-input"
             />
           </div>

src/components/registration/RegistrationStep2.js

@@ -36,7 +36,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Newsletter Publication Preferences *
         </h2>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Please check what information may be published in LOAF Newsletter
         </p>
 
@@ -110,10 +110,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             value={formData.referred_by_member_name}
             onChange={handleInputChange}
             placeholder="Enter member name or email"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="referral-input"
           />
-          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If referred by a current member, you may skip the event attendance requirement.
           </p>
         </div>
@@ -124,7 +124,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Volunteer Interests (Optional)
         </h2>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
         </p>
 
@@ -158,7 +158,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             I am requesting for scholarship
           </Label>
         </div>
-        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Scholarship information is kept confidential
         </p>
 
@@ -174,7 +174,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell us why you're requesting a scholarship..."
               rows={4}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
         )}

src/components/registration/RegistrationStep3.js

@@ -27,7 +27,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
           Members Directory
         </h2>
 
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Would you like to be displayed on our private members directory? (optional and you can change the answer later)
         </p>
 
@@ -38,7 +38,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${formData.show_in_directory
                 ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple '
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -63,7 +63,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${!formData.show_in_directory
                 ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple '
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -88,7 +88,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
       {/* Conditional Directory Fields */}
       {formData.show_in_directory && (
         <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-[var(--neutral-800)]">
-          <p className="text-[var(--purple-lavender)] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Below, choose what information you would like include in the Members Only Directory.
             (If you ever want to update this information, remember the Directory Section and Account Section are separate)
           </p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="email"
               value={formData.directory_email}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell other members about yourself..."
               rows={4}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_address"
               value={formData.directory_address}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="tel"
               value={formData.directory_phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="date"
               value={formData.directory_dob}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_partner_name"
               value={formData.directory_partner_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
         </div>

src/components/registration/RegistrationStep4.js

@@ -11,7 +11,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
           Account Credentials
         </h2>
 
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Your email is also your username that you can use to login.
           Please note you can only login after your application is validated.
         </p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.email}
             onChange={handleInputChange}
             placeholder="your.email@example.com"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="email-input"
           />
         </div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.password}
             onChange={handleInputChange}
             placeholder="At least 6 characters"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="password-input"
           />
-          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Must be at least 6 characters long
           </p>
         </div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.confirmPassword}
             onChange={handleInputChange}
             placeholder="Re-enter your password"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="confirm-password-input"
           />
           {formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
               name="accepts_tos"
               checked={formData.accepts_tos || false}
               onChange={handleInputChange}
-              className="mt-1 w-4 h-4 text-[var(--purple-lavender)] border-gray-300 rounded focus:ring-[var(--purple-lavender)]"
+              className="mt-1 w-4 h-4 text-brand-purple  border-gray-300 rounded focus:ring-brand-purple "
               required
               data-testid="tos-checkbox"
             />
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="/become-a-member/terms-of-service"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Terms of Service
               </a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="become-a-member/privacy-policy"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Privacy Policy
               </a>

src/components/registration/RegistrationStepIndicator.js

@@ -23,14 +23,14 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                   ? 'bg-[var(--orange-light)] text-white scale-110 shadow-lg'
                   : currentStep > step.number
                     ? 'bg-[var(--green-light)] text-white'
-                    : 'bg-[var(--neutral-800)] text-[var(--purple-lavender)]'
+                    : 'bg-[var(--neutral-800)] text-brand-purple '
                 }
               `}>
                 {currentStep > step.number ? '✓' : step.number}
               </div>
               <span className={`
                 text-sm mt-2 font-medium transition-colors
-                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-[var(--purple-lavender)]'}
+                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-brand-purple '}
               `} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {step.title}
               </span>
@@ -52,7 +52,7 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
       </div>
 
       {/* Step Counter */}
-      <p className="text-center text-[var(--purple-lavender)] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+      <p className="text-center text-brand-purple  mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
         Step <span className="font-semibold text-[var(--orange-light)]">{currentStep}</span> of {totalSteps}
       </p>
     </div>

src/components/ui/badge.jsx

@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -9,26 +9,38 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground shadow ",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
+        green:
+          "border-transparent bg-[var(--green-forest)] text-white hover:bg-[var(--green-fern)]",
+        orange:
+          "border-transparent bg-orange-500 text-white hover:bg-orange-500/80",
+        orange2:
+          "border-transparent bg-orange-100 text-orange-700 hover:bg-orange-100/80",
+        pink: "border-transparent bg-[var(--pink-500)] text-white hover:bg-[var(--pink-500)]/80",
+        red: "border-transparent bg-red-100 text-red-700 hover:bg-red-100/80",
+        red2: "border-transparent bg-red-500 text-white hover:bg-red-500/80",
+        gray: "border-transparent bg-gray-200 text-gray-700 hover:bg-gray-200/80",
+        gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
+        gray3:
+          "border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
+        purple: "bg-light-lavender",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+);
 
-function Badge({
-  className,
-  variant,
-  ...props
-}) {
-  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

src/components/ui/button.jsx

@@ -1,48 +1,46 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
+const buttonVariants = cva("btn", {
+  variants: {
+    variant: {
+      default: "btn-primary",
+      secondary: "btn-secondary",
+      ghost: "btn-ghost",
+      outline: "btn-outline",
+      "outline-destructive": "btn-outline-destructive",
+      accent: "btn-accent",
+      destructive: "btn-destructive",
+      link: "btn-link",
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
+    size: {
+      default: "btn-md",
+      sm: "btn-sm",
+      lg: "btn-lg",
+      icon: "btn-icon",
     },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
+
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
   }
-)
+);
+Button.displayName = "Button";
 
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
-      ref={ref}
-      {...props} />
-  );
-})
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/card.jsx

@@ -1,50 +1,65 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
-    {...props} />
-))
-Card.displayName = "Card"
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props} />
-))
-CardHeader.displayName = "CardHeader"
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props} />
-))
-CardTitle.displayName = "CardTitle"
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
-    {...props} />
-))
-CardDescription.displayName = "CardDescription"
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex items-center p-6 pt-0", className)}
-    {...props} />
-))
-CardFooter.displayName = "CardFooter"
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

src/components/ui/command.jsx

@@ -50,7 +50,7 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden", className)}
     {...props} />
 ))
 

src/components/ui/context-menu.jsx

@@ -47,7 +47,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props} />

src/components/ui/dropdown-menu.jsx

@@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-brand-light-lavender data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
@@ -63,7 +63,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-brand-light-lavender focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}

src/components/ui/input.jsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     <input
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}

src/components/ui/select.jsx

@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden scrollbar-dashboard scrollbar-x-dashboard rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -83,16 +83,16 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:text-white focus:text-white",
       className
     )}
     {...props}>
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center ">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName

src/components/ui/table.jsx

@@ -1,78 +1,91 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef(({ className, ...props }, ref) => (
   <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props} />
+    <table ref={ref} className={cn("w-full", className)} {...props} />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+  <thead
+    ref={ref}
+    className={cn(
+      "bg-[var(--lavender-300)] border-b border-[var(--neutral-800)]",
+      className,
+    )}
+    {...props}
+  />
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
     className={cn("[&_tr:last-child]:border-0", className)}
-    {...props} />
-))
-TableBody.displayName = "TableBody"
+    {...props}
+  />
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
-    {...props} />
-))
-TableFooter.displayName = "TableFooter"
+    className={cn(
+      "border-t border-[var(--neutral-800)] font-medium [&>tr]:last:border-b-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef(({ className, ...props }, ref) => (
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      "border-b border-[var(--neutral-800)] transition-colors hover:bg-[var(--lavender-400)]",
+      className,
     )}
-    {...props} />
-))
-TableRow.displayName = "TableRow"
+    {...props}
+  />
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef(({ className, ...props }, ref) => (
   <th
     ref={ref}
     className={cn(
-      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      "p-4 text-left align-middle font-semibold text-[var(--purple-ink)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className,
     )}
-    {...props} />
-))
-TableHead.displayName = "TableHead"
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef(({ className, ...props }, ref) => (
   <td
     ref={ref}
     className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ",
+      className,
     )}
-    {...props} />
-))
-TableCell.displayName = "TableCell"
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
   <caption
     ref={ref}
     className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props} />
-))
-TableCaption.displayName = "TableCaption"
+    {...props}
+  />
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -83,4 +96,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};

src/components/ui/tabs.jsx

@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] rounded-2xl px-3 py-1 text-[var(--purple-lavender)] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow dark:data-[state=active]:bg-brand-light-lavender dark:data-[state=active]:text-background dark:border-brand-light-lavender dark:text-brand-light-lavender",
       className
     )}
     {...props}

src/config/MemberTiers.js

@@ -0,0 +1,70 @@
+// src/config/memberTiers.js
+
+/**
+ * Default member tier configuration
+ * Used as fallback when API is unavailable
+ * Format matches backend MemberTier interface
+ */
+export const DEFAULT_MEMBER_TIERS = [
+  {
+    id: 'new_member',
+    label: 'New Member',
+    minYears: 0,
+    maxYears: 0.999,
+    iconKey: 'sparkle',
+    badgeClass: 'bg-blue-100 text-blue-800 border-blue-200',
+  },
+  {
+    id: 'member_1_year',
+    label: '1 Year Member',
+    minYears: 1,
+    maxYears: 2.999,
+    iconKey: 'star',
+    badgeClass: 'bg-green-100 text-green-800 border-green-200',
+  },
+  {
+    id: 'member_3_year',
+    label: '3+ Year Member',
+    minYears: 3,
+    maxYears: 4.999,
+    iconKey: 'award',
+    badgeClass: 'bg-purple-100 text-purple-800 border-purple-200',
+  },
+  {
+    id: 'veteran',
+    label: 'Veteran Member',
+    minYears: 5,
+    maxYears: 999,
+    iconKey: 'crown',
+    badgeClass: 'bg-amber-100 text-amber-800 border-amber-200',
+  },
+];
+
+/**
+ * Available icon options for tier configuration
+ */
+export const TIER_ICON_OPTIONS = [
+  { key: 'sparkle', label: 'Sparkle' },
+  { key: 'star', label: 'Star' },
+  { key: 'award', label: 'Award' },
+  { key: 'crown', label: 'Crown' },
+  { key: 'medal', label: 'Medal' },
+  { key: 'trophy', label: 'Trophy' },
+  { key: 'gem', label: 'Gem' },
+  { key: 'heart', label: 'Heart' },
+  { key: 'shield', label: 'Shield' },
+];
+
+/**
+ * Available badge color presets
+ */
+export const BADGE_COLOR_PRESETS = [
+  { label: 'Blue', badgeClass: 'bg-blue-100 text-blue-800 border-blue-200' },
+  { label: 'Green', badgeClass: 'bg-green-100 text-green-800 border-green-200' },
+  { label: 'Purple', badgeClass: 'bg-purple-100 text-purple-800 border-purple-200' },
+  { label: 'Amber', badgeClass: 'bg-amber-100 text-amber-800 border-amber-200' },
+  { label: 'Red', badgeClass: 'bg-red-100 text-red-800 border-red-200' },
+  { label: 'Teal', badgeClass: 'bg-teal-100 text-teal-800 border-teal-200' },
+  { label: 'Pink', badgeClass: 'bg-pink-100 text-pink-800 border-pink-200' },
+  { label: 'Indigo', badgeClass: 'bg-indigo-100 text-indigo-800 border-indigo-200' },
+];

src/config/memberTierIcons.js

@@ -0,0 +1,29 @@
+// src/config/memberTierIcons.js
+import { User, Star, Crown, Award, Sparkles, Medal, Trophy, Gem, Heart, Shield } from 'lucide-react';
+
+/**
+ * Member tier icon mapping
+ * Maps iconKey strings from backend to Lucide React components
+ */
+export const MEMBER_TIER_ICONS = {
+  // Primary tier icons
+  sparkle: Sparkles,
+  sparkles: Sparkles,
+  star: Star,
+  award: Award,
+  crown: Crown,
+  // Additional options
+  medal: Medal,
+  trophy: Trophy,
+  gem: Gem,
+  heart: Heart,
+  shield: Shield,
+  user: User,
+};
+
+/**
+ * Get icon component by key with fallback
+ */
+export const getTierIcon = (iconKey) => {
+  return MEMBER_TIER_ICONS[iconKey?.toLowerCase()] || MEMBER_TIER_ICONS.sparkle;
+};

src/context/AuthContext.js

@@ -1,12 +1,14 @@
 import React, { createContext, useState, useContext, useEffect } from 'react';
 import axios from 'axios';
+import api from '../utils/api';
+import logger from '../utils/logger';
 
 const AuthContext = createContext();
 
 const API_URL = process.env.REACT_APP_BACKEND_URL || window.location.origin;
 
 // Log environment on module load for debugging
-console.log('[AuthContext] Module initialized with:', {
+logger.log('[AuthContext] Module initialized with:', {
   REACT_APP_BACKEND_URL: process.env.REACT_APP_BACKEND_URL,
   REACT_APP_BASENAME: process.env.REACT_APP_BASENAME,
   API_URL: API_URL
@@ -55,31 +57,31 @@ export const AuthProvider = ({ children }) => {
       });
       setPermissions(response.data.permissions || []);
     } catch (error) {
-      console.error('Failed to fetch permissions:', error);
+      logger.error('Failed to fetch permissions:', error);
       setPermissions([]);
     }
   };
 
   const login = async (email, password) => {
     try {
-      console.log('[AuthContext] Starting login request...', {
+      logger.log('[AuthContext] Starting login request...', {
         API_URL: API_URL,
         envBackendUrl: process.env.REACT_APP_BACKEND_URL,
         fullUrl: `${API_URL}/api/auth/login`
       });
 
-      const response = await axios.post(
-        `${API_URL}/api/auth/login`,
+      // Use api instance for retry logic
+      const response = await api.post(
+        '/auth/login',
         { email, password },
         {
-          timeout: 30000, // 30 second timeout
           headers: {
             'Content-Type': 'application/json'
           }
         }
       );
 
-      console.log('[AuthContext] Login response received:', {
+      logger.log('[AuthContext] Login response received:', {
         status: response.status,
         hasToken: !!response.data?.access_token,
         hasUser: !!response.data?.user
@@ -87,39 +89,46 @@ export const AuthProvider = ({ children }) => {
 
       const { access_token, user: userData } = response.data;
 
-      // Store token first
-      localStorage.setItem('token', access_token);
-      console.log('[AuthContext] Token stored in localStorage');
+      if (!access_token || !userData) {
+        throw new Error('Invalid response from server - missing token or user data');
+      }
 
-      // Update state
+      // Store token FIRST and verify it was stored
+      localStorage.setItem('token', access_token);
+      const storedToken = localStorage.getItem('token');
+      if (storedToken !== access_token) {
+        throw new Error('Failed to store token in localStorage');
+      }
+      logger.log('[AuthContext] Token stored and verified in localStorage');
+
+      // Update state in correct order
       setToken(access_token);
       setUser(userData);
-      console.log('[AuthContext] User state updated:', {
+      logger.log('[AuthContext] User state updated:', {
         email: userData.email,
         role: userData.role
       });
 
-      // Fetch user permissions (don't let this fail the login)
-      // Use setTimeout to defer permission fetching slightly
-      setTimeout(async () => {
-        try {
-          console.log('[AuthContext] Fetching permissions...');
-          await fetchPermissions(access_token);
-          console.log('[AuthContext] Permissions fetched successfully');
-        } catch (error) {
-          console.error('[AuthContext] Failed to fetch permissions (non-critical):', {
-            message: error.message,
-            response: error.response?.data,
-            status: error.response?.status
-          });
-          // Don't throw - permissions can be fetched later if needed
-        }
-      }, 100); // Small delay to ensure state is settled
+      // Fetch permissions immediately and WAIT for it (but don't fail login if it fails)
+      try {
+        logger.log('[AuthContext] Fetching permissions...');
+        await fetchPermissions(access_token);
+        logger.log('[AuthContext] Permissions fetched successfully');
+      } catch (permError) {
+        logger.error('[AuthContext] Failed to fetch permissions (non-critical):', {
+          message: permError.message,
+          response: permError.response?.data,
+          status: permError.response?.status
+        });
+        // Set empty permissions array so hasPermission doesn't break
+        setPermissions([]);
+        // Don't throw - login succeeded even if permissions failed
+      }
 
       return userData;
     } catch (error) {
       // Enhanced error logging
-      console.error('[AuthContext] Login failed:', {
+      logger.error('[AuthContext] Login failed:', {
         message: error.message,
         response: error.response?.data,
         status: error.response?.status,
@@ -131,6 +140,12 @@ export const AuthProvider = ({ children }) => {
         }
       });
 
+      // Clear any partial state
+      localStorage.removeItem('token');
+      setToken(null);
+      setUser(null);
+      setPermissions([]);
+
       // Re-throw to let Login component handle the error
       throw error;
     }
@@ -160,7 +175,7 @@ export const AuthProvider = ({ children }) => {
       setUser(response.data);
       return response.data;
     } catch (error) {
-      console.error('Failed to refresh user:', error);
+      logger.error('Failed to refresh user:', error);
       // If token expired, logout
       if (error.response?.status === 401) {
         logout();

src/context/ThemeConfigContext.js

@@ -0,0 +1,161 @@
+import React, { createContext, useState, useContext, useEffect, useCallback } from 'react';
+import axios from 'axios';
+
+const ThemeConfigContext = createContext();
+
+const API_URL = process.env.REACT_APP_BACKEND_URL || window.location.origin;
+
+const DEFAULT_THEME = {
+  site_name: 'LOAF - Lesbians Over Age Fifty',
+  site_short_name: 'LOAF',
+  site_description: 'A community organization for lesbians over age fifty in Houston and surrounding areas.',
+  logo_url: null,
+  favicon_url: null,
+  colors: {
+    primary: '280 47% 27%',
+    primary_foreground: '0 0% 100%',
+    accent: '24 86% 55%',
+    brand_purple: '256 35% 47%',
+    brand_orange: '24 86% 55%',
+    brand_lavender: '262 46% 80%'
+  },
+  meta_theme_color: '#664fa3'
+};
+
+export const ThemeConfigProvider = ({ children }) => {
+  const [themeConfig, setThemeConfig] = useState(DEFAULT_THEME);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const applyThemeToDOM = useCallback((config) => {
+    // Apply CSS variables for colors
+    if (config.colors) {
+      const root = document.documentElement;
+      Object.entries(config.colors).forEach(([key, value]) => {
+        // Convert snake_case to kebab-case for CSS variable names
+        const cssVarName = `--${key.replace(/_/g, '-')}`;
+        root.style.setProperty(cssVarName, value);
+      });
+    }
+
+    // Update favicon
+    if (config.favicon_url) {
+      let link = document.querySelector("link[rel*='icon']");
+      if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+      }
+      link.href = config.favicon_url;
+    }
+
+    // Update document title
+    if (config.site_name) {
+      document.title = config.site_name;
+      // Also store for use by pages that want to append their own title
+      window.__SITE_NAME__ = config.site_name;
+    }
+
+    // Update meta description
+    if (config.site_description) {
+      let metaDesc = document.querySelector("meta[name='description']");
+      if (!metaDesc) {
+        metaDesc = document.createElement('meta');
+        metaDesc.name = 'description';
+        document.head.appendChild(metaDesc);
+      }
+      metaDesc.content = config.site_description;
+    }
+
+    // Update meta theme-color for PWA
+    if (config.meta_theme_color) {
+      let meta = document.querySelector("meta[name='theme-color']");
+      if (!meta) {
+        meta = document.createElement('meta');
+        meta.name = 'theme-color';
+        document.head.appendChild(meta);
+      }
+      meta.content = config.meta_theme_color;
+    }
+  }, []);
+
+  const fetchThemeConfig = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await axios.get(`${API_URL}/api/config/theme`);
+      const config = { ...DEFAULT_THEME, ...response.data };
+
+      // Merge colors if provided
+      if (response.data.colors) {
+        config.colors = { ...DEFAULT_THEME.colors, ...response.data.colors };
+      }
+
+      setThemeConfig(config);
+      applyThemeToDOM(config);
+    } catch (err) {
+      console.warn('Failed to fetch theme config, using defaults:', err.message);
+      setError(err.message);
+      // Apply default theme to DOM
+      applyThemeToDOM(DEFAULT_THEME);
+    } finally {
+      setLoading(false);
+    }
+  }, [applyThemeToDOM]);
+
+  // Fetch theme config on mount
+  useEffect(() => {
+    fetchThemeConfig();
+  }, [fetchThemeConfig]);
+
+  // Helper function to get logo URL with fallback
+  const getLogoUrl = useCallback(() => {
+    return themeConfig.logo_url || `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  }, [themeConfig.logo_url]);
+
+  // Helper function to get favicon URL with fallback
+  const getFaviconUrl = useCallback(() => {
+    return themeConfig.favicon_url || `${process.env.PUBLIC_URL}/favicon.ico`;
+  }, [themeConfig.favicon_url]);
+
+  const value = {
+    // Theme configuration
+    themeConfig,
+    loading,
+    error,
+
+    // Convenience accessors
+    siteName: themeConfig.site_name,
+    siteShortName: themeConfig.site_short_name,
+    siteDescription: themeConfig.site_description,
+    colors: themeConfig.colors,
+    metaThemeColor: themeConfig.meta_theme_color,
+
+    // Helper functions
+    getLogoUrl,
+    getFaviconUrl,
+
+    // Actions
+    refreshTheme: fetchThemeConfig,
+
+    // Default theme for reference
+    DEFAULT_THEME
+  };
+
+  return (
+    <ThemeConfigContext.Provider value={value}>
+      {children}
+    </ThemeConfigContext.Provider>
+  );
+};
+
+export const useThemeConfig = () => {
+  const context = useContext(ThemeConfigContext);
+  if (context === undefined) {
+    throw new Error('useThemeConfig must be used within a ThemeConfigProvider');
+  }
+  return context;
+};
+
+export default ThemeConfigContext;

src/context/UsersContext.js

@@ -0,0 +1,93 @@
+import React, { createContext, useState, useContext, useEffect, useCallback, useMemo } from 'react';
+import { toast } from 'sonner';
+import api from '../utils/api';
+
+const UsersContext = createContext();
+
+// Role definitions
+const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
+const MEMBER_ROLES = ['member'];
+
+export const UsersProvider = ({ children }) => {
+  const [users, setUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchUsers = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await api.get('/admin/users');
+      setUsers(response.data);
+    } catch (err) {
+      setError(err);
+      toast.error('Failed to fetch users');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+
+  // Filtered views based on role
+  const staff = useMemo(
+    () => users.filter(user => STAFF_ROLES.includes(user.role)),
+    [users]
+  );
+
+  const members = useMemo(
+    () => users.filter(user => MEMBER_ROLES.includes(user.role)),
+    [users]
+  );
+
+  const allUsers = users;
+
+  // Update a single user in the local state (useful after edits)
+  const updateUser = useCallback((updatedUser) => {
+    setUsers(prev => prev.map(user =>
+      user.id === updatedUser.id ? updatedUser : user
+    ));
+  }, []);
+
+  // Remove a user from local state
+  const removeUser = useCallback((userId) => {
+    setUsers(prev => prev.filter(user => user.id !== userId));
+  }, []);
+
+  // Add a user to local state
+  const addUser = useCallback((newUser) => {
+    setUsers(prev => [...prev, newUser]);
+  }, []);
+
+  return (
+    <UsersContext.Provider value={{
+      // All data
+      users: allUsers,
+      staff,
+      members,
+      // State
+      loading,
+      error,
+      // Actions
+      refetch: fetchUsers,
+      updateUser,
+      removeUser,
+      addUser,
+    }}>
+      {children}
+    </UsersContext.Provider>
+  );
+};
+
+// Base hook to access the context
+export const useUsers = () => {
+  const context = useContext(UsersContext);
+  if (!context) {
+    throw new Error('useUsers must be used within a UsersProvider');
+  }
+  return context;
+};
+
+export default UsersContext;

src/hooks/use-directory-config.js

@@ -0,0 +1,92 @@
+import { useState, useEffect, useCallback } from 'react';
+import api from '../utils/api';
+
+/**
+ * Default directory configuration - used as fallback if API fails
+ */
+const DEFAULT_DIRECTORY_CONFIG = {
+  fields: {
+    show_in_directory: { enabled: true, label: 'Show in Directory', required: false },
+    directory_email: { enabled: true, label: 'Directory Email', required: false },
+    directory_bio: { enabled: true, label: 'Bio', required: false },
+    directory_address: { enabled: true, label: 'Address', required: false },
+    directory_phone: { enabled: true, label: 'Phone', required: false },
+    directory_dob: { enabled: true, label: 'Birthday', required: false },
+    directory_partner_name: { enabled: true, label: 'Partner Name', required: false },
+    volunteer_interests: { enabled: true, label: 'Volunteer Interests', required: false },
+    social_media: { enabled: true, label: 'Social Media Links', required: false },
+  }
+};
+
+/**
+ * Hook to fetch and manage directory field configuration
+ * @returns {Object} - { config, loading, error, isFieldEnabled, getFieldLabel, refetch }
+ */
+const useDirectoryConfig = () => {
+  const [config, setConfig] = useState(DEFAULT_DIRECTORY_CONFIG);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const fetchConfig = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await api.get('/directory/config');
+      setConfig(response.data || DEFAULT_DIRECTORY_CONFIG);
+    } catch (err) {
+      console.error('Failed to fetch directory config:', err);
+      setError(err);
+      // Use default config on error
+      setConfig(DEFAULT_DIRECTORY_CONFIG);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+
+  /**
+   * Check if a field is enabled in the config
+   * @param {string} fieldId - The field ID to check (e.g., 'directory_email')
+   * @returns {boolean} - Whether the field is enabled
+   */
+  const isFieldEnabled = useCallback((fieldId) => {
+    const field = config?.fields?.[fieldId];
+    return field?.enabled !== false; // Default to true if not specified
+  }, [config]);
+
+  /**
+   * Get the label for a field
+   * @param {string} fieldId - The field ID
+   * @param {string} defaultLabel - Default label if not in config
+   * @returns {string} - The field label
+   */
+  const getFieldLabel = useCallback((fieldId, defaultLabel = '') => {
+    const field = config?.fields?.[fieldId];
+    return field?.label || defaultLabel;
+  }, [config]);
+
+  /**
+   * Check if a field is required
+   * @param {string} fieldId - The field ID
+   * @returns {boolean} - Whether the field is required
+   */
+  const isFieldRequired = useCallback((fieldId) => {
+    const field = config?.fields?.[fieldId];
+    return field?.required === true;
+  }, [config]);
+
+  return {
+    config,
+    loading,
+    error,
+    isFieldEnabled,
+    getFieldLabel,
+    isFieldRequired,
+    refetch: fetchConfig
+  };
+};
+
+export default useDirectoryConfig;

src/hooks/use-member-tiers.js

@@ -0,0 +1,106 @@
+// src/hooks/use-member-tiers.js
+import { useState, useEffect, useCallback } from 'react';
+import api from '../utils/api';
+import { DEFAULT_MEMBER_TIERS } from '../config/MemberTiers';
+
+/**
+ * Hook for fetching and managing member tier configuration
+ * @param {Object} options
+ * @param {boolean} options.isAdmin - Whether to use admin endpoint (includes metadata)
+ * @returns {Object} Tier state and methods
+ */
+const useMemberTiers = ({ isAdmin = false } = {}) => {
+  const [tiers, setTiers] = useState(DEFAULT_MEMBER_TIERS);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [saving, setSaving] = useState(false);
+
+  const endpoint = isAdmin
+    ? '/admin/settings/member-tiers'
+    : '/settings/member-tiers';
+
+  const fetchTiers = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await api.get(endpoint);
+      const data = response.data?.tiers || response.data || DEFAULT_MEMBER_TIERS;
+      setTiers(data);
+    } catch (err) {
+      console.error('Failed to fetch member tiers:', err);
+      setError('Failed to load member tiers');
+      // Use defaults on error
+      setTiers(DEFAULT_MEMBER_TIERS);
+    } finally {
+      setLoading(false);
+    }
+  }, [endpoint]);
+
+  useEffect(() => {
+    fetchTiers();
+  }, [fetchTiers]);
+
+  /**
+   * Update tier configuration (admin only)
+   * @param {Array} newTiers - Updated tier array
+   * @returns {Promise<boolean>} Success status
+   */
+  const updateTiers = useCallback(async (newTiers) => {
+    if (!isAdmin) {
+      console.error('updateTiers requires admin access');
+      return false;
+    }
+
+    try {
+      setSaving(true);
+      setError(null);
+      await api.put('/admin/settings/member-tiers', { tiers: newTiers });
+      setTiers(newTiers);
+      return true;
+    } catch (err) {
+      console.error('Failed to update member tiers:', err);
+      setError('Failed to save member tiers');
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }, [isAdmin]);
+
+  /**
+   * Reset tiers to defaults (superadmin only)
+   * @returns {Promise<boolean>} Success status
+   */
+  const resetToDefaults = useCallback(async () => {
+    if (!isAdmin) {
+      console.error('resetToDefaults requires admin access');
+      return false;
+    }
+
+    try {
+      setSaving(true);
+      setError(null);
+      const response = await api.post('/admin/settings/member-tiers/reset');
+      const data = response.data?.tiers || response.data || DEFAULT_MEMBER_TIERS;
+      setTiers(data);
+      return true;
+    } catch (err) {
+      console.error('Failed to reset member tiers:', err);
+      setError('Failed to reset member tiers');
+      return false;
+    } finally {
+      setSaving(false);
+    }
+  }, [isAdmin]);
+
+  return {
+    tiers,
+    loading,
+    error,
+    saving,
+    fetchTiers,
+    updateTiers,
+    resetToDefaults,
+  };
+};
+
+export default useMemberTiers;

src/hooks/use-members.js

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useState } from 'react';
+import { toast } from 'sonner';
+import api from '../utils/api';
+
+const DEFAULT_SEARCH_FIELDS = ['first_name', 'last_name', 'email'];
+
+/**
+ * Hook for fetching users from a custom endpoint (e.g., member-facing directory).
+ * For admin pages, use hooks from use-users.js instead which share a centralized context.
+ */
+const useMembers = ({
+  endpoint = '/admin/users',
+  initialFilter = 'active',
+  initialSearch = '',
+  filterKey = 'status',
+  allowedRoles = ['member'],
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  fetchErrorMessage = 'Failed to fetch members',
+  searchAccessor,
+  transform,
+  onFetchError,
+} = {}) => {
+  const [users, setUsers] = useState([]);
+  const [filteredUsers, setFilteredUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [filterValue, setFilterValue] = useState(initialFilter);
+
+  const fetchMembers = useCallback(async () => {
+    try {
+      const response = await api.get(endpoint);
+      let filtered = response.data;
+      if (typeof transform === 'function') {
+        filtered = transform(filtered);
+      }
+      if (allowedRoles && allowedRoles.length) {
+        filtered = filtered.filter(user => allowedRoles.includes(user.role));
+      }
+      setUsers(filtered);
+    } catch (error) {
+      if (typeof onFetchError === 'function') {
+        onFetchError(error);
+      } else {
+        toast.error(fetchErrorMessage);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [allowedRoles, endpoint, fetchErrorMessage, onFetchError, transform]);
+
+  useEffect(() => {
+    fetchMembers();
+  }, [fetchMembers]);
+
+  useEffect(() => {
+    let filtered = users;
+
+    if (filterValue && filterValue !== 'all') {
+      filtered = filtered.filter(user => user[filterKey] === filterValue);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user => {
+        const values = typeof searchAccessor === 'function'
+          ? searchAccessor(user)
+          : searchFields.map(field => user?.[field]);
+
+        return values
+          .filter(Boolean)
+          .some(value => value.toString().toLowerCase().includes(query));
+      });
+    }
+
+    setFilteredUsers(filtered);
+  }, [users, searchQuery, filterKey, filterValue, searchAccessor, searchFields]);
+
+  return {
+    users,
+    filteredUsers,
+    loading,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+    fetchMembers,
+  };
+};
+
+export default useMembers;

src/hooks/use-stripe-config.js

@@ -0,0 +1,91 @@
+import { useState, useEffect, useCallback } from 'react';
+import { loadStripe } from '@stripe/stripe-js';
+import api from '../utils/api';
+
+// Cache the stripe promise to avoid multiple loads
+let stripePromiseCache = null;
+let cachedPublishableKey = null;
+
+/**
+ * Hook to get Stripe configuration from the backend.
+ *
+ * Returns the Stripe publishable key and a pre-initialized Stripe promise.
+ * The publishable key is fetched from the backend API, allowing admins
+ * to configure it through the admin panel instead of environment variables.
+ */
+const useStripeConfig = () => {
+  const [publishableKey, setPublishableKey] = useState(cachedPublishableKey);
+  const [stripePromise, setStripePromise] = useState(stripePromiseCache);
+  const [loading, setLoading] = useState(!cachedPublishableKey);
+  const [error, setError] = useState(null);
+  const [environment, setEnvironment] = useState(null);
+
+  const fetchConfig = useCallback(async () => {
+    // If we already have a cached key, use it
+    if (cachedPublishableKey && stripePromiseCache) {
+      setPublishableKey(cachedPublishableKey);
+      setStripePromise(stripePromiseCache);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await api.get('/config/stripe');
+      const { publishable_key, environment: env } = response.data;
+
+      // Cache the key and stripe promise
+      cachedPublishableKey = publishable_key;
+      stripePromiseCache = loadStripe(publishable_key);
+
+      setPublishableKey(publishable_key);
+      setStripePromise(stripePromiseCache);
+      setEnvironment(env);
+    } catch (err) {
+      console.error('[useStripeConfig] Failed to fetch Stripe config:', err);
+      setError(err.response?.data?.detail || 'Failed to load Stripe configuration');
+
+      // Fallback to environment variable if available
+      const envKey = process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY;
+      if (envKey) {
+        console.warn('[useStripeConfig] Falling back to environment variable');
+        cachedPublishableKey = envKey;
+        stripePromiseCache = loadStripe(envKey);
+        setPublishableKey(envKey);
+        setStripePromise(stripePromiseCache);
+        setEnvironment(envKey.startsWith('pk_live_') ? 'live' : 'test');
+        setError(null);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchConfig();
+  }, [fetchConfig]);
+
+  // Function to clear cache (useful after admin updates settings)
+  const clearCache = useCallback(() => {
+    cachedPublishableKey = null;
+    stripePromiseCache = null;
+    setPublishableKey(null);
+    setStripePromise(null);
+    fetchConfig();
+  }, [fetchConfig]);
+
+  return {
+    publishableKey,
+    stripePromise,
+    loading,
+    error,
+    environment,
+    refetch: fetchConfig,
+    clearCache,
+    isConfigured: !!publishableKey,
+  };
+};
+
+export default useStripeConfig;

src/hooks/use-users.js

@@ -0,0 +1,171 @@
+import { useState, useMemo } from 'react';
+import { useUsers } from '../context/UsersContext';
+
+const DEFAULT_SEARCH_FIELDS = ['first_name', 'last_name', 'email'];
+
+/**
+ * Base hook that adds search and filter functionality to any user list
+ */
+const useFilteredUsers = ({
+  users,
+  initialFilter = 'all',
+  filterKey = 'status',
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  searchAccessor,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [filterValue, setFilterValue] = useState(initialFilter);
+
+  const filteredUsers = useMemo(() => {
+    let filtered = users;
+
+    // Apply filter
+    if (filterValue && filterValue !== 'all') {
+      filtered = filtered.filter(user => user[filterKey] === filterValue);
+    }
+
+    // Apply search
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(user => {
+        const values = typeof searchAccessor === 'function'
+          ? searchAccessor(user)
+          : searchFields.map(field => user?.[field]);
+
+        return values
+          .filter(Boolean)
+          .some(value => value.toString().toLowerCase().includes(query));
+      });
+    }
+
+    return filtered;
+  }, [users, searchQuery, filterKey, filterValue, searchAccessor, searchFields]);
+
+  return {
+    filteredUsers,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+  };
+};
+
+/**
+ * Hook for staff users (admin, superadmin, finance roles)
+ */
+export const useStaff = ({
+  initialFilter = 'all',
+  filterKey = 'role',
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  searchAccessor,
+} = {}) => {
+  const { staff, loading, error, refetch, updateUser, removeUser } = useUsers();
+
+  const {
+    filteredUsers,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+  } = useFilteredUsers({
+    users: staff,
+    initialFilter,
+    filterKey,
+    searchFields,
+    searchAccessor,
+  });
+
+  return {
+    users: staff,
+    filteredUsers,
+    loading,
+    error,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+    refetch,
+    updateUser,
+    removeUser,
+  };
+};
+
+/**
+ * Hook for member users (non-admin roles)
+ */
+export const useMembers = ({
+  initialFilter = 'active',
+  filterKey = 'status',
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  searchAccessor,
+} = {}) => {
+  const { members, loading, error, refetch, updateUser, removeUser } = useUsers();
+
+  const {
+    filteredUsers,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+  } = useFilteredUsers({
+    users: members,
+    initialFilter,
+    filterKey,
+    searchFields,
+    searchAccessor,
+  });
+
+  return {
+    users: members,
+    filteredUsers,
+    loading,
+    error,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+    refetch,
+    updateUser,
+    removeUser,
+  };
+};
+
+/**
+ * Hook for all users (both staff and members)
+ */
+export const useAllUsers = ({
+  initialFilter = 'all',
+  filterKey = 'status',
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  searchAccessor,
+} = {}) => {
+  const { users, loading, error, refetch, updateUser, removeUser } = useUsers();
+
+  const {
+    filteredUsers,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+  } = useFilteredUsers({
+    users,
+    initialFilter,
+    filterKey,
+    searchFields,
+    searchAccessor,
+  });
+
+  return {
+    users,
+    filteredUsers,
+    loading,
+    error,
+    searchQuery,
+    setSearchQuery,
+    filterValue,
+    setFilterValue,
+    refetch,
+    updateUser,
+    removeUser,
+  };
+};

src/index.css

@@ -1,233 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
-
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 280 47% 27%;
-    --card: 0 0% 100%;
-    --card-foreground: 280 47% 27%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 280 47% 27%;
-    --primary: 280 47% 27%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 268 33% 89%;
-    --secondary-foreground: 280 47% 27%;
-    --muted: 268 43% 95%;
-    --muted-foreground: 268 35% 47%;
-    --accent: 17 100% 73%;
-    --accent-foreground: 280 47% 27%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 268 33% 89%;
-    --input: 268 33% 89%;
-    --ring: 268 35% 47%;
-    --chart-1: 268 36% 46%;
-    --chart-2: 17 100% 73%;
-    --chart-3: 268 33% 89%;
-    --chart-4: 280 44% 29%;
-    --chart-5: 268 35% 47%;
-    --radius: 0.5rem;
-
-    /* =========================
-     Brand Colors
-     ========================= */
-    --brand-dark-lavender: 267 47% 29%;
-    --brand-purple: 256 35% 47%;
-    --brand-lavender: 262 46% 80%;
-    --brand-light-lavender: 256 32% 88%;
-    --brand-white: 0 0% 100%;
-
-    --brand-dark-orange: 13 100% 42%;
-    --brand-orange: 24 86% 55%;
-    --brand-light-orange: 24 100% 67%;
-
-    --brand-pink: 324 55% 60%;
-    --dusty-pink: 323 39% 52%;
-    --dark-rose: 324 98% 32%;
-
-    /* 
-    ==========================
-      Color Patch 
-    ==========================
-     */
-
-    --blue-linkedin: #0a66c2;
-    --blue-facebook: #1877f2;
-    --blue-twitter: #1da1f2;
-    --purple-ink: #422268;
-    --purple-deep: #48286e;
-    --purple-muted: #533a82;
-    --purple-plum: #553d8a;
-    --purple-soft: #5a4290;
-    --purple-amethyst: #644c9f;
-    --purple-lilac: #664ea2;
-    --purple-lavender: #664fa3;
-    --purple-electric: #865edf;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --green-success: #4caf50;
-    --green-sage: #5a8f72;
-    --green-muted: #66927e;
-    --green-soft: #6a9680;
-    --green-eucalyptus: #6a9a83;
-    --green-fern: #6da085;
-    --green-mint: #6fa087;
-    --green-pastel: #6fa188;
-    --green-light: #81b29a;
-    --green-bg: #e8f5e9;
-    --orange-rust: #d16b54;
-    --orange-soft: #e07a5f;
-    --orange-peach: #e88a63;
-    --orange-sand: #e88d66;
-    --orange-apricot: #ff8c5a;
-    --orange-coral: #ff8c64;
-    --orange-light: #ff9e77;
-    --orange-500: #ea580c;
-    --orange-400: #fb923c;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --red-instagram: #e4405f;
-    --red-soft: #ffebee;
-    --lavender-100: #e8e0f5;
-    --lavender-200: #eeebf4;
-    --lavender-300: #f1eef9;
-    --lavender-400: #f9f5ff;
-    --lavender-500: #f8f7fb;
-    --lavender-600: #f9f7fc;
-    --lavender-700: #f9f8fb;
-    --lavender-800: #eaedf4;
-    --neutral-50: #fafafa;
-    --neutral-100: #f9fafb;
-    --neutral-200: #fdfcf8;
-    --neutral-300: #eae0d5;
-    --neutral-400: #c4bed8;
-    --neutral-500: #c5b4e3;
-    --neutral-600: #c5bfd9;
-    --neutral-700: #dcd7ea;
-    --neutral-800: #ddd8eb;
-    --neutral-900: #ffffff;
-  }
-  .dark {
-    --background: var(--brand-dark-lavender);
-    --foreground: var(--brand-light-lavender);
-    --card: var(--brand-purple);
-    --card-foreground: var(--brand-light-lavender);
-    --popover: var(--brand-purple);
-    --popover-foreground: var(--brand-light-lavender);
-    --primary: var(--brand-light-lavender);
-    --primary-foreground: var(--brand-dark-lavender);
-    --secondary: var(--brand-purple);
-    --secondary-foreground: var(--brand-light-lavender);
-    --muted: var(--brand-purple);
-    --muted-foreground: var(--brand-light-lavender);
-    --accent: var(--brand-light-lavender);
-    --accent-foreground: var(--brand-light-lavender);
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: var(--brand-light-lavender);
-    --border: var(--brand-purple);
-    --input: var(--brand-purple);
-    --ring: var(--brand-light-lavender);
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@layer base {
-  [data-debug-wrapper="true"] {
-    display: contents !important;
-  }
-
-  [data-debug-wrapper="true"] > * {
-    margin-left: inherit;
-    margin-right: inherit;
-    margin-top: inherit;
-    margin-bottom: inherit;
-    padding-left: inherit;
-    padding-right: inherit;
-    padding-top: inherit;
-    padding-bottom: inherit;
-    column-gap: inherit;
-    row-gap: inherit;
-    gap: inherit;
-    border-left-width: inherit;
-    border-right-width: inherit;
-    border-top-width: inherit;
-    border-bottom-width: inherit;
-    border-left-style: inherit;
-    border-right-style: inherit;
-    border-top-style: inherit;
-    border-bottom-style: inherit;
-    border-left-color: inherit;
-    border-right-color: inherit;
-    border-top-color: inherit;
-    border-bottom-color: inherit;
-  }
-}
-
-@layer utilities {
-  @supports selector(::-webkit-scrollbar) {
-    .scrollbar-dashboard::-webkit-scrollbar {
-      width: 2px;
-    }
-
-    .scrollbar-dashboard::-webkit-scrollbar-thumb {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
-      height: 2px;
-    }
-
-    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
-      height: 0px;
-    }
-  }
-}
-
+@import "./styles/App.css";
+@import "./styles/theme.css";
+@import "./styles/components.css";
+@import "./styles/base.css";
+@import "./styles/utilities.css";
 /* 
 =========================
   End of File

src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { ThemeProvider } from 'next-themes';
+import { ThemeConfigProvider } from './context/ThemeConfigContext';
 import '@fontsource/fraunces/600.css';
 import '@fontsource/dm-sans/400.css';
 import '@fontsource/dm-sans/700.css';
@@ -16,7 +17,9 @@ root.render(
       enableSystem={false}
       storageKey="admin-theme"
     >
-      <App />
+      <ThemeConfigProvider>
+        <App />
+      </ThemeConfigProvider>
     </ThemeProvider>
   </React.StrictMode>
 );

src/layouts/AdminLayout.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
+import { Menu } from 'lucide-react';
 import AdminSidebar from '../components/AdminSidebar';
+import { UsersProvider } from '../context/UsersContext';
 
 const AdminLayout = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -46,29 +48,48 @@ const AdminLayout = ({ children }) => {
   };
 
   return (
-    <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
-      {/* Sidebar */}
-      <AdminSidebar
-        isOpen={sidebarOpen}
-        onToggle={toggleSidebar}
-        isMobile={isMobile}
-      />
-
-      {/* Mobile Overlay */}
-      {isMobile && sidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black/50 z-30 transition-opacity"
-          onClick={closeSidebar}
+    <UsersProvider>
+      <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
+        {/* Sidebar */}
+        <AdminSidebar
+          isOpen={sidebarOpen}
+          onToggle={toggleSidebar}
+          isMobile={isMobile}
         />
-      )}
 
-      {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
-        <div className="max-w-7xl mx-auto px-6 py-8">
-          {children}
-        </div>
-      </main>
-    </div>
+        {/* Mobile Overlay */}
+        {isMobile && sidebarOpen && (
+          <div
+            className="fixed inset-0 bg-black/50 z-30 transition-opacity"
+            onClick={closeSidebar}
+          />
+        )}
+
+        {/* Main Content Area */}
+        <main className="flex-1 overflow-y-auto scrollbar-dashboard">
+          {isMobile && (
+            <div className="sticky top-0 z-20 bg-background/90 backdrop-blur border-b border-[var(--neutral-800)] px-4 py-3 flex items-center gap-3">
+              <button
+                onClick={toggleSidebar}
+                className="p-2 rounded-lg hover:bg-[var(--neutral-800)]/20 transition-colors"
+                aria-label={sidebarOpen ? 'Close sidebar' : 'Open sidebar'}
+              >
+                <Menu className="h-5 w-5 text-primary" />
+              </button>
+              <span
+                className="text-sm font-semibold text-primary"
+                style={{ fontFamily: "'Inter', sans-serif" }}
+              >
+                Menu
+              </span>
+            </div>
+          )}
+          <div className="max-w-7xl mx-auto px-6 py-8">
+            {children}
+          </div>
+        </main>
+      </div>
+    </UsersProvider>
   );
 };
 

src/layouts/SettingsLayout.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import SettingsTabs from '../components/SettingsSidebar';
+import { Settings } from 'lucide-react';
+
+const SettingsLayout = () => {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div>
+        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
+          <Settings className="h-6 w-6" />
+          Settings
+        </h1>
+        <p className="text-muted-foreground mt-1">
+          Manage your platform configuration and preferences
+        </p>
+      </div>
+
+      {/* Tabs Navigation */}
+      <SettingsTabs />
+
+      {/* Content Area */}
+      <div className="min-w-0">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
+
+export default SettingsLayout;

src/pages/AcceptInvitation.js

@@ -163,7 +163,7 @@ const AcceptInvitation = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
       admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
       member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
@@ -181,7 +181,7 @@ const AcceptInvitation = () => {
     return (
       <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
         <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
-          <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
+          <Loader2 className="h-12 w-12 text-brand-purple  mx-auto mb-4 animate-spin" />
           <p className="text-lg text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Verifying your invitation...
           </p>
@@ -198,12 +198,12 @@ const AcceptInvitation = () => {
           <h1 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Invalid Invitation
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {error}
           </p>
           <Button
             onClick={() => navigate('/login')}
-            className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white"
+            className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white"
           >
             Go to Login
           </Button>
@@ -229,7 +229,7 @@ const AcceptInvitation = () => {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF! 🎉
           </h1>
-          <p className="text-xl text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-xl text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your account has been created successfully.
           </p>
 
@@ -237,7 +237,7 @@ const AcceptInvitation = () => {
           <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
             <div className="grid md:grid-cols-2 gap-4 text-left">
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Name
                 </p>
                 <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -245,7 +245,7 @@ const AcceptInvitation = () => {
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Email
                 </p>
                 <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -253,13 +253,13 @@ const AcceptInvitation = () => {
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Role
                 </p>
                 <div>{getRoleBadge(successUser?.role)}</div>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Status
                 </p>
                 <Badge className="bg-[var(--green-light)] text-white px-4 py-2 rounded-full text-sm">
@@ -295,14 +295,14 @@ const AcceptInvitation = () => {
         {/* Header */}
         <div className="text-center mb-8">
           <div className="flex justify-center mb-4">
-            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] flex items-center justify-center">
+            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] flex items-center justify-center">
               <Mail className="h-8 w-8 text-white" />
             </div>
           </div>
           <h1 className="text-3xl md:text-4xl font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Complete your profile to accept the invitation
           </p>
         </div>
@@ -311,7 +311,7 @@ const AcceptInvitation = () => {
         <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
           <div className="grid md:grid-cols-2 gap-4 text-sm">
             <div>
-              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Email Address
               </p>
               <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -319,13 +319,13 @@ const AcceptInvitation = () => {
               </p>
             </div>
             <div>
-              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Role
               </p>
               <div>{getRoleBadge(invitation?.role)}</div>
             </div>
             <div className="md:col-span-2">
-              <p className="text-[var(--purple-lavender)] mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <Calendar className="h-4 w-4" />
                 Invitation Expires
               </p>
@@ -350,7 +350,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Minimum 8 characters"
                 />
                 {formErrors.password && (
@@ -367,7 +367,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.confirmPassword}
                   onChange={(e) => handleChange('confirmPassword', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Re-enter password"
                 />
                 {formErrors.confirmPassword && (
@@ -386,8 +386,8 @@ const AcceptInvitation = () => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
-                  placeholder="John"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                  placeholder="Jane"
                 />
                 {formErrors.first_name && (
                   <p className="text-sm text-red-500">{formErrors.first_name}</p>
@@ -402,7 +402,7 @@ const AcceptInvitation = () => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
                 {formErrors.last_name && (
@@ -421,7 +421,7 @@ const AcceptInvitation = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {formErrors.phone && (
@@ -445,7 +445,7 @@ const AcceptInvitation = () => {
                     id="address"
                     value={formData.address}
                     onChange={(e) => handleChange('address', e.target.value)}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     placeholder="123 Main St"
                   />
                 </div>
@@ -458,7 +458,7 @@ const AcceptInvitation = () => {
                       id="city"
                       value={formData.city}
                       onChange={(e) => handleChange('city', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="San Francisco"
                     />
                   </div>
@@ -469,7 +469,7 @@ const AcceptInvitation = () => {
                       id="state"
                       value={formData.state}
                       onChange={(e) => handleChange('state', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="CA"
                       maxLength={2}
                     />
@@ -481,7 +481,7 @@ const AcceptInvitation = () => {
                       id="zipcode"
                       value={formData.zipcode}
                       onChange={(e) => handleChange('zipcode', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="94102"
                     />
                   </div>
@@ -495,7 +495,7 @@ const AcceptInvitation = () => {
                     type="date"
                     value={formData.date_of_birth}
                     onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
               </>
@@ -526,11 +526,11 @@ const AcceptInvitation = () => {
 
         {/* Footer Note */}
         <div className="mt-6 text-center">
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Already have an account?{' '}
             <button
               onClick={() => navigate('/login')}
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+              className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
             >
               Sign in instead
             </button>

src/pages/ChangePasswordRequired.js

@@ -95,7 +95,7 @@ const ChangePasswordRequired = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Password Change Required
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Your password was reset by an administrator. Please create a new password to continue.
             </p>
           </div>
@@ -111,7 +111,7 @@ const ChangePasswordRequired = () => {
                 value={formData.currentPassword}
                 onChange={handleInputChange}
                 placeholder="Enter temporary password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -125,7 +125,7 @@ const ChangePasswordRequired = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -139,14 +139,14 @@ const ChangePasswordRequired = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
-            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-brand-purple  p-4 rounded-lg">
               <div className="flex items-start">
-                <Lock className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <Lock className="h-5 w-5 text-brand-purple  mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
@@ -169,7 +169,7 @@ const ChangePasswordRequired = () => {
               <button
                 type="button"
                 onClick={handleLogout}
-                className="text-[var(--purple-lavender)] hover:text-[var(--orange-light)] text-sm underline"
+                className="text-brand-purple  hover:text-[var(--orange-light)] text-sm underline"
               >
                 Logout instead
               </button>

src/pages/Dashboard.js

@@ -7,8 +7,11 @@ import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
 import Navbar from '../components/Navbar';
 import MemberFooter from '../components/MemberFooter';
-import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale } from 'lucide-react';
+import { Calendar, User, CheckCircle, Clock, AlertCircle, Mail, Users, Image, FileText, DollarSign, Scale, Receipt, Heart, CreditCard } from 'lucide-react';
 import { toast } from 'sonner';
+import TransactionHistory from '../components/TransactionHistory';
+import MemberBadge from '@/components/MemberBadge';
+import useMemberTiers from '../hooks/use-member-tiers'
 
 const Dashboard = () => {
   const { user, resendVerificationEmail, refreshUser } = useAuth();
@@ -17,10 +20,16 @@ const Dashboard = () => {
   const [resendLoading, setResendLoading] = useState(false);
   const [eventActivity, setEventActivity] = useState(null);
   const [activityLoading, setActivityLoading] = useState(true);
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [activeTransactionTab, setActiveTransactionTab] = useState('all');
+  const joinedDate = user?.member_since || user?.created_at;
+  const { tiers, loading: tiersLoading } = useMemberTiers();
 
   useEffect(() => {
     fetchUpcomingEvents();
     fetchEventActivity();
+    fetchTransactions();
   }, []);
 
   const fetchUpcomingEvents = async () => {
@@ -46,6 +55,19 @@ const Dashboard = () => {
     }
   };
 
+  const fetchTransactions = async () => {
+    try {
+      setTransactionsLoading(true);
+      const response = await api.get('/members/transactions');
+      setTransactions(response.data);
+    } catch (error) {
+      console.error('Failed to load transactions:', error);
+      // Don't show error toast - transactions are optional
+    } finally {
+      setTransactionsLoading(false);
+    }
+  };
+
   const handleResendVerification = async () => {
     setResendLoading(true);
     try {
@@ -70,6 +92,7 @@ const Dashboard = () => {
     }
   };
 
+
   const getStatusBadge = (status) => {
     const statusConfig = {
       pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
@@ -110,6 +133,8 @@ const Dashboard = () => {
     return messages[status] || '';
   };
 
+
+
   return (
     <div className="min-h-screen bg-background">
       <Navbar />
@@ -120,21 +145,21 @@ const Dashboard = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome Back, {user?.first_name}!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Here's an overview of your membership status and upcoming events.
           </p>
         </div>
 
         {/* Email Verification Alert */}
         {user && !user.email_verified && (
-          <Card className="p-6 bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] mb-8">
+          <Card className="p-6 bg-[var(--lavender-300)] border-2 border-brand-purple  mb-8">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-brand-purple  flex-shrink-0 mt-1" />
               <div className="flex-1">
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Verify Your Email Address
                 </h3>
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Please verify your email address to complete your registration.
                   Check your inbox for the verification link.
                 </p>
@@ -142,7 +167,7 @@ const Dashboard = () => {
                   onClick={handleResendVerification}
                   disabled={resendLoading}
                   variant="outline"
-                  className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                  className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
                 >
                   <Mail className="h-4 w-4 mr-2" />
                   {resendLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -162,101 +187,123 @@ const Dashboard = () => {
               <div className="mb-4">
                 {getStatusBadge(user?.status)}
               </div>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {getStatusMessage(user?.status)}
               </p>
             </div>
             <Link to="/profile">
               <Button
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender"
                 data-testid="view-profile-button"
               >
                 <User className="h-4 w-4 mr-2" />
-                View Profile
+                Edit Profile
               </Button>
             </Link>
           </div>
         </Card>
 
         {/* Grid Layout */}
-        <div className="grid lg:grid-cols-3 gap-8">
+        <div className="grid lg:grid-cols-2 gap-8">
           {/* Quick Stats */}
-          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
-            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-              Quick Info
-            </h3>
-            <div className="space-y-4">
-              <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
-              </div>
-              <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
-              </div>
-              <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
-                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
-                </p>
-              </div>
-              {user?.subscription_start_date && user?.subscription_end_date && (
-                <>
-                  <div className="pt-4 border-t border-[var(--neutral-800)]">
-                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
-                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
-                    </p>
-                  </div>
+          <div className='space-y-8'>
+
+            <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                Quick Info
+              </h3>
+              <div className="space-y-4">
+                {/* member date and badge */}
+                <div className='flex justify-between'>
                   <div>
-                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
                     <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
+                      {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
                     </p>
                   </div>
-                </>
-              )}
-            </div>
-          </Card>
+                  {!tiersLoading && (
+                    <div className='lg:mr-10'>
+                    <MemberBadge memberSince={joinedDate} tiers={tiers} />
+                    </div>
+                  )}
+                </div>
+                {/* email */}
+                <div>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                  <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
+                </div>
+                {/* role */}
+                <div>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                  <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
+                </div>
+
+
+              </div>
+            </Card>
+            <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                Membership Info
+              </h3>
+              <div className="space-y-4">
+                {!user.subscription_end_date && !user.subscription_end_date && (
+                  <div>No subscriptions yet</div>
+                )}
+                {user?.subscription_start_date && user?.subscription_end_date && (
+                  <>
+                    <div className="pt-4 border-t border-[var(--neutral-800)]">
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
+                      <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                      <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
+                      </p>
+                    </div>
+                  </>
+                )}
+              </div>
+            </Card>
+          </div>
 
           {/* Upcoming Events */}
-          <Card className="lg:col-span-2 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
+          <Card className="lg:col-span-1 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
             <div className="flex justify-between items-center mb-6">
               <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                Upcoming Events
+                My Event Activity
               </h3>
               <Link to="/events">
-                <Button
-                  variant="ghost"
-                  className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)]"
-                  data-testid="view-all-events-button"
-                >
-                  View All
+                <Button className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender px-6">
+                  <Calendar className="h-4 w-4 mr-2" />
+                  Browse Events
                 </Button>
               </Link>
             </div>
 
             {loading ? (
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
             ) : events.length > 0 ? (
               <div className="space-y-4">
                 {events.map((event) => (
                   <Link to={`/events/${event.id}`} key={event.id}>
                     <div
-                      className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all cursor-pointer"
+                      className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  hover:shadow-md transition-all cursor-pointer"
                       data-testid={`event-card-${event.id}`}
                     >
                       <div className="flex items-start gap-4">
                         <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                          <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                          <Calendar className="h-6 w-6 text-brand-purple " />
                         </div>
                         <div className="flex-1">
                           <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {new Date(event.start_at).toLocaleDateString()} at{' '}
                             {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                           </p>
-                          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                         </div>
                       </div>
                     </div>
@@ -266,8 +313,8 @@ const Dashboard = () => {
             ) : (
               <div className="text-center py-12">
                 <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
               </div>
             )}
           </Card>
@@ -280,7 +327,7 @@ const Dashboard = () => {
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Application Under Review
               </h3>
-              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your membership application is being reviewed by our admin team. You'll be notified once validated!
               </p>
             </div>
@@ -289,15 +336,15 @@ const Dashboard = () => {
 
         {/* Payment Prompt for payment_pending status */}
         {user?.status === 'payment_pending' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border-2 border-[var(--purple-lavender)]">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border-2 border-brand-purple ">
             <div className="text-center">
               <div className="mb-4">
-                <AlertCircle className="h-16 w-16 text-[var(--purple-lavender)] mx-auto" />
+                <AlertCircle className="h-16 w-16 text-brand-purple  mx-auto" />
               </div>
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Complete Your Payment
               </h3>
-              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Great news! Your membership application has been validated. Complete your payment to activate your membership and gain full access to all member benefits.
               </p>
               <Link to="/plans">
@@ -313,155 +360,18 @@ const Dashboard = () => {
           </Card>
         )}
 
-        {/* Event Activity Section */}
-        <div className="mt-12">
-          <div className="flex justify-between items-center mb-6">
-            <h2 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-              My Event Activity
-            </h2>
-          </div>
-
-          {activityLoading ? (
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
-          ) : eventActivity ? (
-            <div className="space-y-8">
-              {/* Stats Cards */}
-              <div className="grid md:grid-cols-2 gap-6">
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                  <div className="flex items-center gap-4">
-                    <div className="bg-[var(--neutral-800)]/20 p-4 rounded-lg">
-                      <Calendar className="h-8 w-8 text-[var(--purple-lavender)]" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
-                      <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {eventActivity.total_rsvps}
-                      </p>
-                    </div>
-                  </div>
-                </Card>
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                  <div className="flex items-center gap-4">
-                    <div className="bg-[var(--green-light)]/20 p-4 rounded-lg">
-                      <CheckCircle className="h-8 w-8 text-[var(--green-light)]" />
-                    </div>
-                    <div>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
-                      <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {eventActivity.total_attended}
-                      </p>
-                    </div>
-                  </div>
-                </Card>
-              </div>
-
-              {/* Upcoming RSVP'd Events */}
-              {eventActivity.upcoming_events && eventActivity.upcoming_events.length > 0 && (
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Upcoming Events (RSVP'd)
-                  </h3>
-                  <div className="space-y-3">
-                    {eventActivity.upcoming_events.map((event) => (
-                      <Link to={`/events/${event.id}`} key={event.id}>
-                        <div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all">
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="flex-1">
-                              <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                              <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                                {new Date(event.start_at).toLocaleDateString()} at{' '}
-                                {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                              </p>
-                              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
-                            </div>
-                            <Badge className={
-                              event.rsvp_status === 'yes' ? 'bg-[var(--green-light)] text-white' :
-                                event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
-                                  'bg-gray-200 text-gray-700'
-                            }>
-                              {event.rsvp_status === 'yes' ? 'Going' :
-                                event.rsvp_status === 'maybe' ? 'Maybe' : 'Not Going'}
-                            </Badge>
-                          </div>
-                        </div>
-                      </Link>
-                    ))}
-                  </div>
-                </Card>
-              )}
-
-              {/* Past Events & Attendance */}
-              {eventActivity.past_events && eventActivity.past_events.length > 0 && (
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Past Events
-                  </h3>
-                  <div className="space-y-3">
-                    {eventActivity.past_events.slice(0, 5).map((event) => (
-                      <div key={event.id} className="p-4 border border-[var(--neutral-800)] rounded-xl">
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="flex-1">
-                            <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                              {new Date(event.start_at).toLocaleDateString()} at{' '}
-                              {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                            </p>
-                          </div>
-                          <div className="flex flex-col items-end gap-2">
-                            <Badge className={event.attended ? 'bg-[var(--green-light)] text-white' : 'bg-gray-200 text-gray-700'}>
-                              {event.attended ? 'Attended' : 'Did not attend'}
-                            </Badge>
-                            {event.attended && event.attended_at && (
-                              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                                Checked in: {new Date(event.attended_at).toLocaleDateString()}
-                              </p>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  {eventActivity.past_events.length > 5 && (
-                    <p className="text-sm text-center text-[var(--purple-lavender)] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      Showing 5 of {eventActivity.past_events.length} past events
-                    </p>
-                  )}
-                </Card>
-              )}
-
-              {/* No Events Message */}
-              {(!eventActivity.upcoming_events || eventActivity.upcoming_events.length === 0) &&
-                (!eventActivity.past_events || eventActivity.past_events.length === 0) && (
-                  <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                    <div className="text-center">
-                      <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-                      <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        No Event Activity Yet
-                      </h3>
-                      <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        Browse upcoming events and RSVP to start building your event history!
-                      </p>
-                      <Link to="/events">
-                        <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6">
-                          <Calendar className="h-4 w-4 mr-2" />
-                          Browse Events
-                        </Button>
-                      </Link>
-                    </div>
-                  </Card>
-                )}
-            </div>
-          ) : (
-            <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
-              <div className="text-center">
-                <AlertCircle className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Failed to load event activity. Please try refreshing the page.
-                </p>
-              </div>
-            </Card>
-          )}
+        {/* Transaction History Section */}
+        <div className="mt-8">
+          <TransactionHistory
+            subscriptions={transactions.subscriptions}
+            donations={transactions.donations}
+            totalSubscriptionCents={transactions.total_subscription_amount_cents}
+            totalDonationCents={transactions.total_donation_amount_cents}
+            loading={transactionsLoading}
+            isAdmin={false}
+          />
         </div>
+
       </div>
       <MemberFooter />
     </div>

src/pages/DonationSuccess.js

@@ -37,7 +37,7 @@ const DonationSuccess = () => {
 
             {/* Message */}
             <div className="space-y-4 mb-8">
-              <p className="text-xl text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xl text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your generous contribution helps support our community and continue our mission.
               </p>
 
@@ -48,12 +48,12 @@ const DonationSuccess = () => {
                     Your Support Makes a Difference
                   </span>
                 </div>
-                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A receipt for your donation has been sent to your email address.
                 </p>
               </div>
 
-              <p className="text-base text-[var(--purple-lavender)] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-brand-purple  pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
               </p>
             </div>
@@ -62,7 +62,7 @@ const DonationSuccess = () => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button
                 onClick={() => navigate('/')}
-                className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
+                className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Return to Home
@@ -70,7 +70,7 @@ const DonationSuccess = () => {
               <Button
                 onClick={() => navigate('/donate')}
                 variant="outline"
-                className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]/20 rounded-full px-8 py-6 text-lg font-medium"
+                className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--neutral-800)]/20 rounded-full px-8 py-6 text-lg font-medium"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Make Another Donation
@@ -80,12 +80,12 @@ const DonationSuccess = () => {
 
           {/* Additional Info */}
           <div className="mt-12 text-center">
-            <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Have questions about your donation?
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium transition-colors"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium transition-colors"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact us at support@loaf.org

src/pages/EventDetails.js

@@ -51,7 +51,7 @@ const EventDetails = () => {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
         </div>
       </div>
     );
@@ -68,7 +68,7 @@ const EventDetails = () => {
       <div className="max-w-4xl mx-auto px-6 py-12">
         <button
           onClick={() => navigate('/events')}
-          className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors mb-8"
+          className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors mb-8"
           data-testid="back-to-events-button"
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -79,7 +79,7 @@ const EventDetails = () => {
           <div className="mb-8">
             <div className="flex items-center gap-4 mb-6">
               <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
-                <Calendar className="h-10 w-10 text-[var(--purple-lavender)]" />
+                <Calendar className="h-10 w-10 text-brand-purple " />
               </div>
               {event.user_rsvp_status && (
                 <Badge
@@ -102,7 +102,7 @@ const EventDetails = () => {
             </h1>
 
             <div className="space-y-4 text-lg">
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleDateString('en-US', {
@@ -113,18 +113,18 @@ const EventDetails = () => {
                   })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
                   {new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <MapPin className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Users className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -139,7 +139,7 @@ const EventDetails = () => {
               <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About This Event
               </h2>
-              <p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {event.description}
               </p>
             </div>
@@ -155,7 +155,7 @@ const EventDetails = () => {
                 disabled={rsvpLoading}
                 className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
                   ? 'bg-[var(--green-light)] text-white'
-                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background'
+                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender'
                   }`}
                 data-testid="rsvp-yes-button"
               >
@@ -168,7 +168,7 @@ const EventDetails = () => {
                 variant="outline"
                 className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'maybe'
                   ? 'border-orange-400 bg-orange-100 text-orange-700'
-                  : 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
+                  : 'border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)]'
                   }`}
                 data-testid="rsvp-maybe-button"
               >
@@ -195,7 +195,7 @@ const EventDetails = () => {
               <h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Add to Your Calendar
               </h2>
-              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Never miss this event! Add it to your calendar app for reminders.
               </p>
               <AddToCalendarButton

src/pages/Events.js

@@ -54,14 +54,14 @@ const Events = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Upcoming Events
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse and RSVP to our community events.
           </p>
         </div>
 
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
           </div>
         ) : events.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
@@ -73,7 +73,7 @@ const Events = () => {
                 >
                   <div className="flex justify-between items-start mb-4">
                     <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                      <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                      <Calendar className="h-6 w-6 text-brand-purple " />
                     </div>
                     {getRSVPBadge(event.user_rsvp_status)}
                   </div>
@@ -83,24 +83,24 @@ const Events = () => {
                   </h3>
 
                   {event.description && (
-                    <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple  mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {event.description}
                     </p>
                   )}
 
                   <div className="space-y-2 text-sm">
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <Calendar className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(event.start_at).toLocaleDateString()} at{' '}
                         {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <MapPin className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
                     </div>
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <Users className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.rsvp_count || 0} attending</span>
                     </div>
@@ -120,7 +120,7 @@ const Events = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Events Available
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               There are no upcoming events at the moment. Check back later!
             </p>
           </div>

src/pages/ForgotPassword.js

@@ -37,7 +37,7 @@ const ForgotPassword = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/login" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
+          <Link to="/login" 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 Login
           </Link>
@@ -48,12 +48,12 @@ const ForgotPassword = () => {
             <>
               <div className="mb-8 text-center">
                 <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
-                  <Mail className="h-8 w-8 text-[var(--purple-lavender)]" />
+                  <Mail className="h-8 w-8 text-brand-purple " />
                 </div>
                 <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Forgot Password?
                 </h1>
-                <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   No worries! Enter your email and we'll send you reset instructions.
                 </p>
               </div>
@@ -69,7 +69,7 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="your.email@example.com"
-                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -82,7 +82,7 @@ const ForgotPassword = () => {
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
 
-                <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Remember your password?{' '}
                   <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                     Login here
@@ -98,11 +98,11 @@ const ForgotPassword = () => {
               <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Check Your Email
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 If an account exists for <span className="font-medium text-[var(--purple-ink)]">{email}</span>,
                 you will receive a password reset link shortly.
               </p>
-              <p className="text-sm text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The link will expire in 1 hour. If you don't see the email, check your spam folder.
               </p>
               <Link to="/login">

src/pages/Login.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useNavigate, Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link, useLocation, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -13,6 +13,8 @@ import { ArrowRight, ArrowLeft } from 'lucide-react';
 
 const Login = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
   const { login } = useAuth();
   const [loading, setLoading] = useState(false);
   const [formData, setFormData] = useState({
@@ -20,6 +22,30 @@ const Login = () => {
     password: ''
   });
 
+  // Show session expiry message on mount
+  useEffect(() => {
+    const sessionParam = searchParams.get('session');
+    const stateMessage = location.state?.message;
+
+    if (sessionParam === 'expired') {
+      toast.info('Your session has expired. Please log in again.', {
+        duration: 5000,
+      });
+      // Clean up URL
+      window.history.replaceState({}, '', '/login');
+    } else if (sessionParam === 'idle') {
+      toast.info('You were logged out due to inactivity. Please log in again.', {
+        duration: 5000,
+      });
+      // Clean up URL
+      window.history.replaceState({}, '', '/login');
+    } else if (stateMessage) {
+      toast.info(stateMessage, {
+        duration: 5000,
+      });
+    }
+  }, [searchParams, location.state]);
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -60,7 +86,7 @@ const Login = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-[var(--purple-lavender)] 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>
@@ -71,7 +97,7 @@ const Login = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Welcome Back
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Login to access your member dashboard.
             </p>
           </div>
@@ -87,8 +113,8 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
-                data-testid="login-email-input"
+                className="h-14 rounded-xl border-2  focus:border-brand-purple "
+                data-testid="login-email-input "
               />
             </div>
 
@@ -106,7 +132,7 @@ const Login = () => {
                 value={formData.password}
                 onChange={handleInputChange}
                 placeholder="Enter your password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 data-testid="login-password-input"
               />
             </div>
@@ -114,14 +140,14 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full py-6 text-lg font-medium shadow-lg hover:scale-105 disabled:opacity-50 btn-lavender"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Don't have an account?{' '}
               <Link to="/register" className="text-[var(--orange-light)] hover:underline font-medium">
                 Register here

src/pages/MissionValues.js

@@ -2,9 +2,11 @@ import React from 'react';
 import PublicNavbar from '../components/PublicNavbar';
 import PublicFooter from '../components/PublicFooter';
 import { Card } from '../components/ui/card';
+import { useThemeConfig } from '../context/ThemeConfigContext';
 
 const MissionValues = () => {
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  const { getLogoUrl } = useThemeConfig();
+  const loafLogo = getLogoUrl();
 
   return (
     <div className="min-h-screen bg-background">

src/pages/NotFound.js

@@ -20,7 +20,7 @@ const NotFound = () => {
               404
             </h1>
             <div className="absolute inset-0 flex items-center justify-center">
-              <Search className="h-24 w-24 text-[var(--purple-lavender)] opacity-30" />
+              <Search className="h-24 w-24 text-brand-purple  opacity-30" />
             </div>
           </div>
         </div>
@@ -33,7 +33,7 @@ const NotFound = () => {
           Page Not Found
         </h2>
         <p
-          className="text-lg text-[var(--purple-lavender)] mb-8 max-w-md mx-auto"
+          className="text-lg text-brand-purple  mb-8 max-w-md mx-auto"
           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
         >
           Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
@@ -44,14 +44,14 @@ const NotFound = () => {
           <Button
             onClick={() => navigate(-1)}
             variant="outline"
-            className="rounded-xl border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-700)] px-6 py-6"
+            className="rounded-xl border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-700)] px-6 py-6"
           >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Go Back
           </Button>
           <Button
             onClick={() => navigate('/')}
-            className="rounded-xl bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-[var(--purple-lavender)] text-white px-6 py-6"
+            className="rounded-xl bg-gradient-to-r from-brand-purple  to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-brand-purple  text-white px-6 py-6"
           >
             <Home className="h-5 w-5 mr-2" />
             Back to Home
@@ -61,13 +61,13 @@ const NotFound = () => {
         {/* Help Text */}
         <div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
           <p
-            className="text-sm text-[var(--purple-lavender)]"
+            className="text-sm text-brand-purple "
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaftx.org"
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+              className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
             >
               support@loaftx.org
             </a>

src/pages/PaymentCancel.js

@@ -25,7 +25,7 @@ const PaymentCancel = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Cancelled
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your payment was cancelled. No charges have been made to your account.
           </p>
         </div>
@@ -37,7 +37,7 @@ const PaymentCancel = () => {
           </h2>
 
           <div className="space-y-6 mb-8">
-            <p className="text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
             </p>
 
@@ -47,14 +47,14 @@ const PaymentCancel = () => {
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CreditCard className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CreditCard className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Return to the plans page to complete your subscription
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <Mail className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Mail className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Contact us if you experienced any issues during checkout
                   </span>
                 </li>
@@ -62,7 +62,7 @@ const PaymentCancel = () => {
             </div>
 
             <div className="bg-[var(--lavender-300)] p-6 rounded-xl">
-              <p className="text-sm text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <span className="font-medium text-[var(--purple-ink)]">Note:</span>{' '}
                 Your membership application is still validated. You can complete payment whenever you're ready.
               </p>
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
             <Button
               onClick={() => navigate('/dashboard')}
               variant="outline"
-              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="back-to-dashboard-button"
             >
               <ArrowLeft className="mr-2 h-5 w-5" />
@@ -96,13 +96,13 @@ const PaymentCancel = () => {
           <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Need Assistance?
           </h3>
-          <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If you encountered any technical issues or have questions about the payment process, our support team is here to help.
           </p>
           <div className="text-center">
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium text-lg"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium text-lg"
             >
               support@loaf.org
             </a>

src/pages/PaymentSuccess.js

@@ -36,7 +36,7 @@ const PaymentSuccess = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Successful!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Thank you for your payment. Your LOAF membership is now active!
           </p>
         </div>
@@ -55,25 +55,25 @@ const PaymentSuccess = () => {
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Your membership is now active and you have full access to all member benefits
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You can now RSVP and attend members-only events
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Access the community directory and connect with other members
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You'll receive our newsletter with exclusive updates and announcements
                   </span>
                 </li>
@@ -82,11 +82,11 @@ const PaymentSuccess = () => {
 
             {sessionId && (
               <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
-                <p className="text-sm text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <span className="font-medium text-[var(--purple-ink)]">Transaction ID:</span>{' '}
                   <span className="font-mono text-xs">{sessionId}</span>
                 </p>
-                <p className="text-xs text-[var(--purple-lavender)] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-brand-purple  text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A confirmation email has been sent to your registered email address.
                 </p>
               </div>
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
             <Button
               onClick={() => navigate('/events')}
               variant="outline"
-              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="browse-events-button"
             >
               <Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
 
         {/* Additional Info */}
         <div className="text-center">
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium"
             >
               support@loaf.org
             </a>

src/pages/Plans.js

@@ -217,27 +217,27 @@ const Plans = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Membership Plans
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Choose the membership plan that works best for you and become part of our vibrant community.
           </p>
         </div>
 
         {/* Status Banner */}
         {statusInfo && statusInfo.title && (
-          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-[var(--purple-lavender)]">
+          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-brand-purple ">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-brand-purple  flex-shrink-0 mt-1" />
               <div className="flex-1">
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {statusInfo.title}
                 </h3>
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {statusInfo.message}
                 </p>
                 {statusInfo.action && statusInfo.actionLink && (
                   <Button
                     onClick={() => navigate(statusInfo.actionLink)}
-                    className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
+                    className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full"
                   >
                     {statusInfo.action}
                   </Button>
@@ -249,8 +249,8 @@ const Plans = () => {
 
         {loading ? (
           <div className="text-center py-20">
-            <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+            <Loader2 className="h-12 w-12 text-brand-purple  mx-auto mb-4 animate-spin" />
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
           </div>
         ) : plans.length > 0 ? (
           <div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
@@ -266,19 +266,19 @@ const Plans = () => {
               return (
                 <Card
                   key={plan.id}
-                  className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:shadow-xl transition-all"
+                  className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-brand-purple  hover:shadow-xl transition-all"
                   data-testid={`plan-card-${plan.id}`}
                 >
                   {/* Plan Header */}
                   <div className="text-center mb-6">
                     <div className="bg-[var(--neutral-800)]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-                      <CreditCard className="h-8 w-8 text-[var(--purple-lavender)]" />
+                      <CreditCard className="h-8 w-8 text-brand-purple " />
                     </div>
                     <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {plan.name}
                     </h2>
                     {plan.description && (
-                      <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {plan.description}
                       </p>
                     )}
@@ -286,18 +286,18 @@ const Plans = () => {
 
                   {/* Pricing */}
                   <div className="text-center mb-8">
-                    <div className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Starting at
                     </div>
                     <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(minimumPrice)}
                     </div>
                     {suggestedPrice > minimumPrice && (
-                      <div className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Suggested: {formatPrice(suggestedPrice)}
                       </div>
                     )}
-                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {getBillingCycleLabel(plan.billing_cycle)}
                     </p>
                     {plan.allow_donation && (
@@ -356,7 +356,7 @@ const Plans = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Plans Available
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Membership plans are not currently available. Please check back later!
             </p>
           </div>
@@ -368,13 +368,13 @@ const Plans = () => {
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Help Choosing?
             </h3>
-            <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               If you have any questions about our membership plans or need assistance, please contact us.
             </p>
             <div className="text-center">
               <a
                 href="mailto:support@loaf.org"
-                className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
+                className="text-[var(--orange-light)] hover:text-brand-purple  font-medium"
               >
                 support@loaf.org
               </a>
@@ -390,7 +390,7 @@ const Plans = () => {
             <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Choose Your Amount
             </DialogTitle>
-            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
             </DialogDescription>
           </DialogHeader>
@@ -402,7 +402,7 @@ const Plans = () => {
                 Amount (USD) *
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-lg font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-brand-purple  text-lg font-semibold">
                   $
                 </span>
                 <Input
@@ -412,11 +412,11 @@ const Plans = () => {
                   min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
                   value={amountInput}
                   onChange={(e) => setAmountInput(e.target.value)}
-                  className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="50.00"
                 />
               </div>
-              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
               </p>
             </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 RegistrationStepIndicator from '../components/registration/RegistrationStepIndicator';
-import RegistrationStep1 from '../components/registration/RegistrationStep1';
-import RegistrationStep2 from '../components/registration/RegistrationStep2';
-import RegistrationStep3 from '../components/registration/RegistrationStep3';
-import RegistrationStep4 from '../components/registration/RegistrationStep4';
+import { ArrowRight, ArrowLeft, Loader2 } from 'lucide-react';
+import DynamicRegistrationForm, {
+  DynamicStepIndicator,
+  validateStep,
+  evaluateConditionalRules,
+} 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({
-    // Step 1: Personal & Partner Information
-    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,
+  const [formData, setFormData] = useState({});
+  const [errors, setErrors] = useState({});
 
-    // Step 2: Newsletter, Volunteer & Scholarship
-    referred_by_member_name: '',
-    newsletter_publish_name: false,
-    newsletter_publish_photo: false,
-    newsletter_publish_birthday: false,
-    newsletter_publish_none: false,
-    volunteer_interests: [],
-    scholarship_requested: false,
-    scholarship_reason: '',
-
-    // Step 3: Directory Settings
-    show_in_directory: 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;
+  // Fetch registration schema on mount
+  useEffect(() => {
+    const fetchSchema = async () => {
+      try {
+        const response = await api.get('/registration/schema');
+        setSchema(response.data);
+      } catch (error) {
+        console.error('Failed to load registration schema:', error);
+        toast.error('Failed to load registration form. Using default form.');
+        setSchema(FALLBACK_SCHEMA);
+      } finally {
+        setSchemaLoading(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 = () => {
-    const { newsletter_publish_name, newsletter_publish_photo,
-      newsletter_publish_birthday, newsletter_publish_none } = formData;
+    fetchSchema();
+  }, []);
 
-    if (!newsletter_publish_name && !newsletter_publish_photo &&
-      !newsletter_publish_birthday && !newsletter_publish_none) {
-      toast.error('Please select at least one newsletter publication preference');
-      return false;
-    }
+  // Get sorted steps
+  const sortedSteps = useMemo(() => {
+    if (!schema?.steps) return [];
+    return [...schema.steps].sort((a, b) => a.order - b.order);
+  }, [schema]);
 
-    if (formData.scholarship_requested && !formData.scholarship_reason?.trim()) {
-      toast.error('Please explain your scholarship request');
-      return false;
-    }
+  // Get current step data
+  const currentStepData = useMemo(() => {
+    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 = () => {
-    return true; // No required fields
-  };
-
-  const validateStep4 = () => {
-    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;
-  };
+  // Validate current step
+  const validateCurrentStep = useCallback(() => {
+    if (!currentStepData) return { isValid: true, errors: {} };
+    return validateStep(currentStepData, formData, hiddenFields);
+  }, [currentStepData, formData, hiddenFields]);
 
+  // Handle next step
   const handleNext = () => {
-    let isValid = false;
+    const { isValid, errors: stepErrors } = validateCurrentStep();
 
-    switch (currentStep) {
-      case 1: isValid = validateStep1(); break;
-      case 2: isValid = validateStep2(); break;
-      case 3: isValid = validateStep3(); break;
-      default: isValid = false;
+    if (!isValid) {
+      setErrors(stepErrors);
+      const firstErrorField = Object.keys(stepErrors)[0];
+      if (firstErrorField) {
+        toast.error(stepErrors[firstErrorField][0]);
+      }
+      return;
     }
 
-    if (isValid) {
-      setCurrentStep(prev => Math.min(prev + 1, 4));
-      window.scrollTo({ top: 0, behavior: 'smooth' });
-    }
-  };
-
-  const handleBack = () => {
-    setCurrentStep(prev => Math.max(prev - 1, 1));
+    setErrors({});
+    setCurrentStep((prev) => Math.min(prev + 1, sortedSteps.length));
     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
-    if (!validateStep4()) return;
+    // Validate final step
+    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)
-      const { confirmPassword, ...dataToSubmit } = formData;
+      // Prepare submission data
+      const submitData = { ...formData };
+
+      // Remove client-only fields
+      delete submitData.confirmPassword;
 
       // Convert date fields to ISO format
-      const submitData = {
-        ...dataToSubmit,
-        date_of_birth: new Date(dataToSubmit.date_of_birth).toISOString(),
-        directory_dob: dataToSubmit.directory_dob
-          ? new Date(dataToSubmit.directory_dob).toISOString()
-          : null
-      };
+      if (submitData.date_of_birth) {
+        submitData.date_of_birth = new Date(submitData.date_of_birth).toISOString();
+      }
+      if (submitData.directory_dob) {
+        submitData.directory_dob = new Date(submitData.directory_dob).toISOString();
+      }
+
+      // 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-[var(--purple-lavender)] 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-[var(--purple-lavender)]" 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} />
-
-            {currentStep === 1 && (
-              <RegistrationStep1
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
+            {/* Step Indicator */}
+            {sortedSteps.length > 1 && (
+              <DynamicStepIndicator steps={sortedSteps} currentStep={currentStep} />
             )}
 
-            {currentStep === 2 && (
-              <RegistrationStep2
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
-            )}
-
-            {currentStep === 3 && (
-              <RegistrationStep3
-                formData={formData}
-                setFormData={setFormData}
-                handleInputChange={handleInputChange}
-              />
-            )}
-
-            {currentStep === 4 && (
-              <RegistrationStep4
-                formData={formData}
-                handleInputChange={handleInputChange}
-              />
-            )}
+            {/* Dynamic Form Content */}
+            <DynamicRegistrationForm
+              schema={schema}
+              formData={formData}
+              onFormDataChange={setFormData}
+              currentStep={currentStep}
+              errors={errors}
+            />
 
             {/* 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-[var(--purple-lavender)] 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,11 +273,11 @@ const Register = () => {
                 <div></div>
               )}
 
-              {currentStep < 4 ? (
+              {currentStep < sortedSteps.length ? (
                 <Button
                   type="button"
                   onClick={handleNext}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                  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"
                 >
                   Next
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -267,16 +286,28 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-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"
+                  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'}
-                  <ArrowRight className="ml-2 h-5 w-5" />
+                  {loading ? (
+                    <>
+                      <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-[var(--purple-lavender)] 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/ResetPassword.js

@@ -71,12 +71,12 @@ const ResetPassword = () => {
         <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8 text-center">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
-              <Lock className="h-8 w-8 text-[var(--purple-lavender)]" />
+              <Lock className="h-8 w-8 text-brand-purple " />
             </div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reset Password
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Enter your new password below.
             </p>
           </div>
@@ -92,7 +92,7 @@ const ResetPassword = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -106,14 +106,14 @@ const ResetPassword = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
-            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-brand-purple  p-4 rounded-lg">
               <div className="flex items-start">
-                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <AlertCircle className="h-5 w-5 text-brand-purple  mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
@@ -132,7 +132,7 @@ const ResetPassword = () => {
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Remember your password?{' '}
               <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here

src/pages/VerifyEmail.js

@@ -52,11 +52,11 @@ const VerifyEmail = () => {
         <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg text-center">
           {status === 'loading' && (
             <>
-              <Loader2 className="h-20 w-20 text-[var(--purple-lavender)] mx-auto mb-6 animate-spin" />
+              <Loader2 className="h-20 w-20 text-brand-purple  mx-auto mb-6 animate-spin" />
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verifying Your Email...
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Please wait while we verify your email address.
               </p>
             </>
@@ -68,10 +68,10 @@ const VerifyEmail = () => {
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Email Verified Successfully!
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
-              <p className="text-base text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
               </p>
               <Link to="/login">
@@ -91,7 +91,7 @@ const VerifyEmail = () => {
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verification Failed
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
               <Link to="/">

src/pages/admin/AdminBylaws.js

@@ -169,7 +169,7 @@ const AdminBylaws = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[var(--purple-lavender)]">Loading bylaws...</p>
+        <p className="text-brand-purple ">Loading bylaws...</p>
       </div>
     );
   }
@@ -182,14 +182,14 @@ const AdminBylaws = () => {
           <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Bylaws Management
           </h1>
-          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage LOAF governing bylaws and version history
           </p>
         </div>
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -199,22 +199,22 @@ const AdminBylaws = () => {
 
       {/* Current Bylaws */}
       {currentBylaws ? (
-        <Card className="p-6 border-2 border-[var(--purple-lavender)]">
+        <Card className="p-6 border-2 border-brand-purple ">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-3 rounded-xl">
-                <Scale className="h-6 w-6 text-white" />
+              <div className="bg-light-lavender p-3 rounded-xl">
+                <Scale className="h-6 w-6 " />
               </div>
               <div>
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)]">
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-[var(--green-light)] text-white">
+                  <Badge variant={'green'} className="">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
-                  <span className="text-[var(--purple-lavender)] text-sm">
+                  <span className="text-brand-purple  text-sm">
                     Version {currentBylaws.version}
                   </span>
                 </div>
@@ -222,10 +222,10 @@ const AdminBylaws = () => {
             </div>
             <div className="flex gap-2">
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
-                className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                className="border-brand-purple  text-brand-purple "
               >
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
@@ -235,24 +235,24 @@ const AdminBylaws = () => {
                   variant="outline"
                   size="sm"
                   onClick={() => handleEdit(currentBylaws)}
-                  className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                  className="border-brand-purple  text-brand-purple "
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
               )}
               {hasPermission('bylaws.delete') && (
                 <Button
-                  variant="outline"
+                  variant="outline-destructive"
                   size="sm"
                   onClick={() => handleDelete(currentBylaws)}
-                  className="border-red-500 text-red-500 hover:bg-red-50"
+                  className="border-red-500 text-red-500"
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
               )}
             </div>
           </div>
-          <div className="flex items-center gap-4 text-sm text-[var(--purple-lavender)]">
+          <div className="flex items-center gap-4 text-sm text-brand-purple ">
             <span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
             <span>•</span>
             <span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
@@ -261,9 +261,9 @@ const AdminBylaws = () => {
       ) : (
         <Card className="p-12 text-center">
           <Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-          <p className="text-[var(--purple-lavender)] text-lg mb-4">No current bylaws set</p>
+          <p className="text-brand-purple  text-lg mb-4">No current bylaws set</p>
           {hasPermission('bylaws.create') && (
-            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
+            <Button onClick={handleCreate} className="bg-brand-purple  text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
@@ -285,7 +285,7 @@ const AdminBylaws = () => {
                     <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-1">
                       {bylawsDoc.title}
                     </h3>
-                    <div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-sm text-brand-purple ">
                       <span>Version {bylawsDoc.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylawsDoc.effective_date)}</span>
@@ -296,7 +296,7 @@ const AdminBylaws = () => {
                       variant="outline"
                       size="sm"
                       onClick={() => window.open(bylawsDoc.document_url, '_blank')}
-                      className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                      className="border-brand-purple  text-brand-purple "
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
@@ -305,7 +305,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(bylawsDoc)}
-                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                        className="border-brand-purple  text-brand-purple "
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleDelete(bylawsDoc)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className="btn-outline-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -330,7 +330,7 @@ const AdminBylaws = () => {
 
       {/* Create/Edit Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
+        <DialogContent className="overflow-y-auto max-h-[90vh]">
           <DialogHeader>
             <DialogTitle>
               {selectedBylaws ? 'Edit Bylaws' : 'Add Bylaws Version'}
@@ -404,12 +404,12 @@ const AdminBylaws = () => {
                     required={!selectedBylaws}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedBylaws && !uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -424,7 +424,7 @@ const AdminBylaws = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                  <p className="text-sm text-brand-purple  mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -455,7 +455,7 @@ const AdminBylaws = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[var(--purple-lavender)] text-white"
+                className="bg-brand-purple  text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
               Cancel
             </Button>
             <Button
-              variant="destructive"
+              variant="outline"
               onClick={confirmDelete}
-              className="bg-red-500 hover:bg-red-600"
+              className="btn-outline-destructive"
             >
               Delete
             </Button>

src/pages/admin/AdminDashboard.js

@@ -4,13 +4,16 @@ import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
-import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle, Globe } from 'lucide-react';
+import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle, Globe, CircleMinus } from 'lucide-react';
+import { StatCard } from '../../components/StatCard';
+
 
 const AdminDashboard = () => {
   const [stats, setStats] = useState({
     totalMembers: 0,
     pendingValidations: 0,
-    activeMembers: 0
+    activeMembers: 0,
+    inactiveMembers: 0
   });
   const [usersNeedingAttention, setUsersNeedingAttention] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -29,7 +32,8 @@ const AdminDashboard = () => {
         pendingValidations: users.filter(u =>
           ['pending_email', 'pending_validation', 'pre_validated', 'payment_pending'].includes(u.status)
         ).length,
-        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
+        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length,
+        inactiveMembers: users.filter(u => u.status === 'inactive' && u.role === 'member').length
       });
 
       // Find users who have received 3+ reminders (may need personal outreach)
@@ -56,18 +60,18 @@ const AdminDashboard = () => {
 
   return (
     <>
-      <div className='flex justify-between items-center'>
+      <div className='flex flex-col md:flex-row  md:justify-between md:items-center'>
         <div className="mb-8">
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage users, events, and membership applications.
           </p>
         </div>
-        <Link to={'/'}>
+        <Link to={'/'} className=''>
           <Button
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender mb-8 md:mb-0 mr-4 "
           >
             <Globe />
             View Public Site
@@ -76,57 +80,57 @@ const AdminDashboard = () => {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
-          <div className="flex items-center justify-between mb-4">
-            <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
-            </div>
-          </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.totalMembers}
-          </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-        </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
-          <div className="flex items-center justify-between mb-4">
-            <div className="bg-orange-100 p-3 rounded-lg">
-              <Clock className="h-6 w-6 text-orange-600" />
-            </div>
-          </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.pendingValidations}
-          </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
-        </Card>
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8  ">
+          <StatCard
+            title="Total Members"
+            value={loading ? '-' : stats.totalMembers}
+            icon={Users}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Pending Validations"
+            value={loading ? '-' : stats.pendingValidations}
+            icon={Clock}
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Active Members"
+            value={loading ? '-' : stats.activeMembers}
+            icon={CheckCircle}
+            iconBgClass="text-[var(--green-light)]"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Inactive Members"
+            value={loading ? '-' : stats.inactiveMembers}
+            icon={CircleMinus}
+            iconBgClass="text-brand-pink"
+            dataTestId="stat-total-users"
+          />
 
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
-          <div className="flex items-center justify-between mb-4">
-            <div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
-              <CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
-            </div>
-          </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.activeMembers}
-          </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
-        </Card>
+        </div>
       </div>
 
       {/* Quick Actions */}
       <div className="grid md:grid-cols-2 gap-8">
         <Link to="/admin/members">
           <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
-            <Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
+            <Users className="h-12 w-12 text-brand-purple mb-4" />
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Manage Members
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               View and manage paying members and their subscription status.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="btn-lavender mt-4"
               data-testid="manage-users-button"
             >
               Go to Members
@@ -140,11 +144,11 @@ const AdminDashboard = () => {
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Validation Queue
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Review and validate pending membership applications.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="mt-4 btn-lavender"
               data-testid="manage-validations-button"
             >
               View Validations
@@ -165,7 +169,7 @@ const AdminDashboard = () => {
                 <h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Members Needing Personal Outreach
                 </h3>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   These members have received multiple reminder emails. Consider calling them directly.
                 </p>
               </div>
@@ -185,7 +189,7 @@ const AdminDashboard = () => {
                             {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                           </Badge>
                         </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone || 'N/A'}</p>
                           <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -225,7 +229,7 @@ const AdminDashboard = () => {
             </div>
 
             <div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                 A friendly phone call can help them complete the registration process and feel more welcomed to the community.
               </p>

src/pages/admin/AdminDirectorySettings.js

@@ -0,0 +1,241 @@
+import React, { useState, useEffect } from 'react';
+import api from '../../utils/api';
+import { Card } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Switch } from '../../components/ui/switch';
+import { Label } from '../../components/ui/label';
+import { toast } from 'sonner';
+import { BookUser, Save, RotateCcw, Loader2, AlertCircle } from 'lucide-react';
+import {
+  Alert,
+  AlertDescription,
+} from '../../components/ui/alert';
+
+const AdminDirectorySettings = () => {
+  const [config, setConfig] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [initialConfig, setInitialConfig] = useState(null);
+
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  useEffect(() => {
+    if (initialConfig && config) {
+      const changed = JSON.stringify(config) !== JSON.stringify(initialConfig);
+      setHasChanges(changed);
+    }
+  }, [config, initialConfig]);
+
+  const fetchConfig = async () => {
+    try {
+      setLoading(true);
+      const response = await api.get('/admin/directory/config');
+      setConfig(response.data.config);
+      setInitialConfig(response.data.config);
+    } catch (error) {
+      console.error('Failed to fetch directory config:', error);
+      toast.error('Failed to load directory configuration');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleToggleField = (fieldId) => {
+    // Don't allow disabling show_in_directory - it's required
+    if (fieldId === 'show_in_directory') {
+      toast.error('The "Show in Directory" field cannot be disabled');
+      return;
+    }
+
+    setConfig(prev => ({
+      ...prev,
+      fields: {
+        ...prev.fields,
+        [fieldId]: {
+          ...prev.fields[fieldId],
+          enabled: !prev.fields[fieldId].enabled
+        }
+      }
+    }));
+  };
+
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      await api.put('/admin/directory/config', { config });
+      setInitialConfig(config);
+      setHasChanges(false);
+      toast.success('Directory configuration saved successfully');
+    } catch (error) {
+      console.error('Failed to save directory config:', error);
+      toast.error('Failed to save directory configuration');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReset = async () => {
+    if (!window.confirm('Are you sure you want to reset to default settings? This will enable all directory fields.')) {
+      return;
+    }
+
+    try {
+      setSaving(true);
+      const response = await api.post('/admin/directory/config/reset');
+      setConfig(response.data.config);
+      setInitialConfig(response.data.config);
+      setHasChanges(false);
+      toast.success('Directory configuration reset to defaults');
+    } catch (error) {
+      console.error('Failed to reset directory config:', error);
+      toast.error('Failed to reset directory configuration');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setConfig(initialConfig);
+    setHasChanges(false);
+  };
+
+  // Field descriptions for better UX
+  const fieldDescriptions = {
+    show_in_directory: 'Master toggle for members to opt-in to the directory (always enabled)',
+    directory_email: 'Email address visible to other members in the directory',
+    directory_bio: 'Short biography shown in directory profile and member cards',
+    directory_address: 'Physical address visible to other members',
+    directory_phone: 'Phone number visible to other members',
+    directory_dob: 'Birthday shown in directory profiles',
+    directory_partner_name: 'Partner name displayed in directory',
+    volunteer_interests: 'Volunteer interest badges shown in profiles',
+    social_media: 'Social media links (Facebook, Instagram, Twitter, LinkedIn)',
+  };
+
+  // Field icons for better UX
+  const fieldLabels = {
+    show_in_directory: 'Show in Directory Toggle',
+    directory_email: 'Directory Email',
+    directory_bio: 'Bio / About',
+    directory_address: 'Address',
+    directory_phone: 'Phone Number',
+    directory_dob: 'Birthday',
+    directory_partner_name: 'Partner Name',
+    volunteer_interests: 'Volunteer Interests',
+    social_media: 'Social Media Links',
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Loader2 className="h-8 w-8 animate-spin text-brand-purple" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-semibold text-foreground flex items-center gap-2">
+            <BookUser className="h-6 w-6 text-brand-purple" />
+            Directory Field Settings
+          </h2>
+          <p className="text-muted-foreground mt-1">
+            Configure which fields are available in member profiles and the directory
+          </p>
+        </div>
+      </div>
+
+      {/* Info Alert */}
+      <Alert>
+        <AlertCircle className="h-4 w-4" />
+        <AlertDescription>
+          These settings control which fields appear in the <strong>Profile page</strong> and <strong>Member Directory</strong>.
+          Disabling a field will hide it from both locations. Existing data will be preserved but not displayed.
+        </AlertDescription>
+      </Alert>
+
+      {/* Fields Configuration */}
+      <Card className="p-6">
+        <div className="space-y-6">
+          {config && Object.entries(config.fields).map(([fieldId, fieldData]) => (
+            <div
+              key={fieldId}
+              className={`flex items-center justify-between p-4 rounded-lg border ${
+                fieldData.enabled ? 'bg-background border-border' : 'bg-muted/50 border-muted'
+              }`}
+            >
+              <div className="flex-1">
+                <Label className="text-base font-medium text-foreground">
+                  {fieldLabels[fieldId] || fieldData.label || fieldId}
+                </Label>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {fieldDescriptions[fieldId] || fieldData.description}
+                </p>
+              </div>
+              <Switch
+                checked={fieldData.enabled}
+                onCheckedChange={() => handleToggleField(fieldId)}
+                disabled={fieldId === 'show_in_directory'}
+                className="data-[state=checked]:bg-brand-purple"
+              />
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      {/* Action Buttons */}
+      <div className="flex items-center justify-between pt-4 border-t">
+        <Button
+          variant="outline"
+          onClick={handleReset}
+          disabled={saving}
+          className="text-muted-foreground"
+        >
+          <RotateCcw className="h-4 w-4 mr-2" />
+          Reset to Defaults
+        </Button>
+
+        <div className="flex items-center gap-3">
+          {hasChanges && (
+            <span className="text-sm text-muted-foreground flex items-center gap-2">
+              <span className="h-2 w-2 rounded-full bg-orange-500"></span>
+              Unsaved changes
+            </span>
+          )}
+          <Button
+            variant="outline"
+            onClick={handleCancel}
+            disabled={!hasChanges || saving}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={!hasChanges || saving}
+            className="bg-brand-purple hover:bg-brand-purple/90 text-white"
+          >
+            {saving ? (
+              <>
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                Saving...
+              </>
+            ) : (
+              <>
+                <Save className="h-4 w-4 mr-2" />
+                Save Changes
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminDirectorySettings;

src/pages/admin/AdminDonations.js

@@ -3,6 +3,7 @@ import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
+import StatusBadge from '@/components/StatusBadge';
 import {
   Select,
   SelectContent,
@@ -17,6 +18,14 @@ import {
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
 import { Badge } from '../../components/ui/badge';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../components/ui/table';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -28,7 +37,13 @@ import {
   Loader2,
   Download,
   FileDown,
-  Calendar
+  Calendar,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Copy,
+  CreditCard,
+  Info
 } from 'lucide-react';
 
 const AdminDonations = () => {
@@ -43,6 +58,7 @@ const AdminDonations = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
+  const [expandedRows, setExpandedRows] = useState(new Set());
 
   useEffect(() => {
     fetchData();
@@ -157,23 +173,37 @@ const AdminDonations = () => {
     });
   };
 
-  const getStatusBadgeVariant = (status) => {
-    const variants = {
-      completed: 'default',
-      pending: 'secondary',
-      failed: 'destructive'
-    };
-    return variants[status] || 'outline';
+  const toggleRowExpansion = (donationId) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(donationId)) {
+        newExpanded.delete(donationId);
+      } else {
+        newExpanded.add(donationId);
+      }
+      return newExpanded;
+    });
   };
 
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch (error) {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+  /*
+  */
+
   const getTypeBadgeColor = (type) => {
-    return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-[var(--purple-lavender)]';
+    return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-brand-purple ';
   };
 
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
+        <Loader2 className="h-12 w-12 animate-spin text-brand-purple " />
       </div>
     );
   }
@@ -185,7 +215,7 @@ const AdminDonations = () => {
         <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Donation Management
         </h1>
-        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Track and manage all donations from members and the public
         </p>
       </div>
@@ -195,7 +225,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -203,7 +233,7 @@ const AdminDonations = () => {
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <Heart className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Heart className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -211,7 +241,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Member Donations
               </p>
               <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -227,15 +257,15 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Public Donations
               </p>
-              <p className="text-3xl font-bold text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-brand-purple  mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.public_donations || 0}
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <Globe className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Globe className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -243,7 +273,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Amount
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -251,7 +281,7 @@ const AdminDonations = () => {
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <DollarSign className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -263,12 +293,12 @@ const AdminDonations = () => {
           {/* Search and Export Row */}
           <div className="flex flex-col md:flex-row gap-4 justify-between">
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 placeholder="Search by donor name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-10 rounded-full border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
             {hasPermission('donations.export') && (
@@ -287,14 +317,14 @@ const AdminDonations = () => {
                     onClick={() => handleExport('all')}
                     className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                     <span className="text-[var(--purple-ink)]">Export All Donations</span>
                   </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => handleExport('current')}
                     className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                     <span className="text-[var(--purple-ink)]">Export Current View</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -354,7 +384,7 @@ const AdminDonations = () => {
 
           {/* Active Filters Summary */}
           {(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
-            <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Showing {filteredDonations.length} of {donations.length} donations
             </div>
           )}
@@ -364,90 +394,207 @@ const AdminDonations = () => {
       {/* Donations Table */}
       <Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
         <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-[var(--lavender-300)] border-b-2 border-[var(--neutral-800)]">
-              <tr>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Donor
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Type
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Amount
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Status
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Date
-                </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  Payment Method
-                </th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-[var(--neutral-800)]">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Donor</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Amount</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Date</TableHead>
+                <TableHead>Payment Method</TableHead>
+                <TableHead className="text-center">Details</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
               {filteredDonations.length === 0 ? (
-                <tr>
-                  <td colSpan="6" className="px-6 py-12 text-center">
+                <TableRow>
+                  <TableCell colSpan={7} className="p-12 text-center">
                     <div className="flex flex-col items-center gap-3">
                       <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
-                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
                       </p>
                     </div>
-                  </td>
-                </tr>
+                  </TableCell>
+                </TableRow>
               ) : (
-                filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors">
-                    <td className="px-6 py-4">
-                      <div>
-                        <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                          {donation.donor_name || 'Anonymous'}
-                        </p>
-                        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {donation.donor_email || 'No email'}
-                        </p>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <Badge
-                        className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
-                        style={{ fontFamily: "'Inter', sans-serif" }}
-                      >
-                        {donation.donation_type === 'member' ? 'Member' : 'Public'}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4">
-                      <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {donation.amount}
-                      </p>
-                    </td>
-                    <td className="px-6 py-4">
-                      <Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
-                        {donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
-                        <Calendar className="h-4 w-4" />
-                        <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {formatDate(donation.created_at)}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {donation.payment_method || 'N/A'}
-                      </p>
-                    </td>
-                  </tr>
-                ))
+                filteredDonations.map((donation) => {
+                  const isExpanded = expandedRows.has(donation.id);
+                  return (
+                    <React.Fragment key={donation.id}>
+                      <TableRow>
+                        <TableCell>
+                          <div>
+                            <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              {donation.donor_name || 'Anonymous'}
+                            </p>
+                            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              {donation.donor_email || 'No email'}
+                            </p>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Badge
+                            className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none  px-3 py-1`}
+                            style={{ fontFamily: "'Inter', sans-serif" }}
+                          >
+                            {donation.donation_type === 'member' ? 'Member' : 'Public'}
+                          </Badge>
+                        </TableCell>
+                        <TableCell>
+                          <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {donation.amount}
+                          </p>
+                        </TableCell>
+                        <TableCell>
+                          <StatusBadge status={donation.status} />
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2 text-brand-purple ">
+                            <Calendar className="h-4 w-4" />
+                            <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              {formatDate(donation.created_at)}
+                            </span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif capitalize" }}>
+                            {donation.payment_method || 'N/A'}
+                          </p>
+                        </TableCell>
+                        <TableCell className="text-center">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => toggleRowExpansion(donation.id)}
+                            className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                          >
+                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                      {isExpanded && (
+                        <TableRow className="bg-[var(--lavender-400)]/30">
+                          <TableCell colSpan={7} className="p-6">
+                            <div className="space-y-4">
+                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Transaction Details
+                              </h4>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {/* Payment Information */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <CreditCard className="h-4 w-4" />
+                                    Payment Information
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.payment_completed_at && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Date:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{formatDate(donation.payment_completed_at)}</span>
+                                      </div>
+                                    )}
+                                    {donation.payment_method && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Method:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{donation.payment_method}</span>
+                                      </div>
+                                    )}
+                                    {donation.card_brand && donation.card_last4 && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Card:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{donation.card_brand} ****{donation.card_last4}</span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Stripe Transaction IDs */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <Info className="h-4 w-4" />
+                                    Stripe Transaction IDs
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.stripe_payment_intent_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Payment Intent:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_payment_intent_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_payment_intent_id, 'Payment Intent ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_charge_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Charge ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_charge_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_charge_id, 'Charge ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_customer_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Customer ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_customer_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_customer_id, 'Customer ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_receipt_url && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Receipt:</span>
+                                        <Button
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={() => window.open(donation.stripe_receipt_url, '_blank')}
+                                          className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                                        >
+                                          <ExternalLink className="h-3 w-3 mr-1" />
+                                          View Receipt
+                                        </Button>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      )}
+                    </React.Fragment>
+                  );
+                })
               )}
-            </tbody>
-          </table>
+            </TableBody>
+          </Table>
         </div>
       </Card>
 
@@ -456,7 +603,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-gradient-to-r from-[var(--lavender-400)] to-[var(--lavender-300)] rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 This Month's Donations
               </p>
               <p className="text-2xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>

src/pages/admin/AdminEventAttendance.js

@@ -213,7 +213,7 @@ const AdminEventAttendance = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-[var(--purple-lavender)]">Loading event data...</div>
+        <div className="text-brand-purple ">Loading event data...</div>
       </div>
     );
   }
@@ -221,8 +221,8 @@ const AdminEventAttendance = () => {
   if (!event) {
     return (
       <div className="text-center py-12">
-        <p className="text-[var(--purple-lavender)] mb-4">Event not found</p>
-        <Button onClick={() => navigate('/admin/events')} className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl">
+        <p className="text-brand-purple  mb-4">Event not found</p>
+        <Button onClick={() => navigate('/admin/events')} className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl">
           Back to Events
         </Button>
       </div>
@@ -237,7 +237,7 @@ const AdminEventAttendance = () => {
           <Button
             onClick={() => navigate('/admin/events')}
             variant="outline"
-            className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
+            className="border-[var(--neutral-800)] text-brand-purple  rounded-xl"
             style={{ fontFamily: "'Inter', sans-serif" }}
           >
             <ArrowLeft className="h-4 w-4 mr-2" />
@@ -247,14 +247,14 @@ const AdminEventAttendance = () => {
             <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Attendance
             </h1>
-            <p className="text-[var(--purple-lavender)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage RSVPs and track attendance for this event
             </p>
           </div>
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-xl"
+          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -269,7 +269,7 @@ const AdminEventAttendance = () => {
             <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h2>
-            <div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="flex flex-wrap gap-4 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
                 <span>{moment(event.start_at).format('MMMM D, YYYY [at] h:mm A')}</span>
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-[var(--green-light)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -292,9 +292,9 @@ const AdminEventAttendance = () => {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Users className="h-8 w-8 text-[var(--purple-lavender)]" />
+            <Users className="h-8 w-8 text-brand-purple " />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
             </div>
           </div>
@@ -302,9 +302,9 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-[var(--green-light)]" />
+            <UserCheck className="h-8 w-8 text-[var(--green-light)] dark:text-[var(--green-forest)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
             </div>
           </div>
@@ -314,17 +314,17 @@ const AdminEventAttendance = () => {
           <div className="flex items-center gap-3">
             <UserX className="h-8 w-8 text-[var(--orange-soft)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)]  rounded-xl">
           <div className="flex items-center gap-3">
             <HelpCircle className="h-8 w-8 text-[var(--gold-warm)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
             </div>
           </div>
@@ -332,9 +332,9 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Check className="h-8 w-8 text-[var(--purple-lavender)]" />
+            <Check className="h-8 w-8 text-brand-purple " />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
             </div>
           </div>
@@ -350,8 +350,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'all'
-                ? 'bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] dark:bg-brand-dark-lavender text-white'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -361,8 +361,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
-                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -373,7 +373,7 @@ const AdminEventAttendance = () => {
               variant={activeTab === 'no' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'no'
                 ? 'bg-[var(--orange-soft)] hover:bg-[var(--orange-rust)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -383,8 +383,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
-                ? 'bg-[var(--gold-warm)] hover:bg-[var(--gold-soft)] text-[var(--purple-ink)]'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                ? 'bg-[var(--gold-warm)] dark:bg-orange-400 hover:bg-[var(--gold-soft)] text-white'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -395,7 +395,7 @@ const AdminEventAttendance = () => {
           {/* Search and Bulk Actions */}
           <div className="flex flex-wrap gap-3 items-center justify-between">
             <div className="flex-1 min-w-[200px] max-w-md relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-brand-purple " />
               <Input
                 type="text"
                 placeholder="Search by name or email..."
@@ -408,7 +408,7 @@ const AdminEventAttendance = () => {
 
             {selectedRsvps.size > 0 && (
               <div className="flex gap-2">
-                <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
+                <Badge className="bg-brand-purple  text-white px-3 py-1">
                   {selectedRsvps.size} selected
                 </Badge>
                 <Button
@@ -477,13 +477,13 @@ const AdminEventAttendance = () => {
                     <td className="px-4 py-3 text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_name}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_email}
                     </td>
                     <td className="px-4 py-3">
                       <Badge
                         className={`${rsvp.rsvp_status === 'yes'
-                          ? 'bg-[var(--green-light)]'
+                          ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]'
                           : rsvp.rsvp_status === 'no'
                             ? 'bg-[var(--orange-soft)]'
                             : 'bg-[var(--gold-warm)] text-[var(--purple-ink)]'
@@ -498,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
+                          className="bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
+                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:text-white hover:border-[var(--green-light)] dark:bg-[var(--green-forest)] rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />
@@ -518,7 +518,7 @@ const AdminEventAttendance = () => {
                         </Button>
                       )}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.attended_at ? moment(rsvp.attended_at).format('MMM D, YYYY h:mm A') : '-'}
                     </td>
                   </tr>
@@ -526,7 +526,7 @@ const AdminEventAttendance = () => {
               ) : (
                 <tr>
                   <td colSpan="6" className="px-4 py-12 text-center">
-                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {searchQuery ? 'No RSVPs match your search' : 'No RSVPs for this filter'}
                     </p>
                   </td>

src/pages/admin/AdminEvents.js

@@ -137,7 +137,7 @@ const AdminEvents = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Management
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage community events.
           </p>
         </div>
@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender "
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />
@@ -158,7 +158,7 @@ const AdminEvents = () => {
               </Button>
             </DialogTrigger>
 
-            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
               <DialogHeader>
                 <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -174,7 +174,7 @@ const AdminEvents = () => {
                     value={formData.title}
                     onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                     required
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] bg-background focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -200,7 +200,7 @@ const AdminEvents = () => {
                       value={formData.start_at}
                       onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
                       required
-                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     />
                   </div>
 
@@ -213,7 +213,7 @@ const AdminEvents = () => {
                       value={formData.end_at}
                       onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
                       required
-                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     />
                   </div>
                 </div>
@@ -226,7 +226,7 @@ const AdminEvents = () => {
                     value={formData.location}
                     onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                     required
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -239,7 +239,7 @@ const AdminEvents = () => {
                     value={formData.capacity}
                     onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
                     placeholder="Leave empty for unlimited"
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-[var(--purple-lavender)] border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="w-4 h-4 ui-checkbox text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
@@ -267,7 +267,7 @@ const AdminEvents = () => {
                   </Button>
                   <Button
                     type="submit"
-                    className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+                    className="btn-lavender flex-1"
                   >
                     {editingEvent ? 'Update Event' : 'Create Event'}
                   </Button>
@@ -281,7 +281,7 @@ const AdminEvents = () => {
       {/* Events List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
         </div>
       ) : events.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -294,11 +294,12 @@ const AdminEvents = () => {
               {/* Event Header */}
               <div className="flex justify-between items-start mb-4">
                 <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                  <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                  <Calendar className="h-6 w-6 text-brand-purple " />
                 </div>
                 <Badge
+
                   className={`${event.published
-                    ? 'bg-[var(--green-light)] text-white'
+                    ? 'border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]'
                     : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
                 >
@@ -312,13 +313,13 @@ const AdminEvents = () => {
               </h3>
 
               {event.description && (
-                <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.description}
                 </p>
               )}
 
               <div className="space-y-2 mb-4">
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Calendar className="h-4 w-4" />
                   <span>
                     {new Date(event.start_at).toLocaleDateString()} at{' '}
@@ -328,11 +329,11 @@ const AdminEvents = () => {
                     })}
                   </span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <MapPin className="h-4 w-4" />
                   <span className="truncate">{event.location}</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Users className="h-4 w-4" />
                   <span>{event.rsvp_count || 0} attending</span>
                 </div>
@@ -345,7 +346,7 @@ const AdminEvents = () => {
                   onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
                   variant="outline"
                   size="sm"
-                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white"
+                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white dark:hover:text-background"
                   data-testid={`mark-attendance-${event.id}`}
                 >
                   <Users className="h-4 w-4 mr-2" />
@@ -358,7 +359,7 @@ const AdminEvents = () => {
                     onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white dark:hover:bg-brand-lavender dark:hover:text-background"
                     data-testid={`toggle-publish-${event.id}`}
                   >
                     {event.published ? (
@@ -377,7 +378,7 @@ const AdminEvents = () => {
                     onClick={() => handleEdit(event)}
                     variant="outline"
                     size="sm"
-                    className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
+                    className="border-gray-400 text-gray-600 dark:text-gray-400 hover:bg-gray-400 dark:hover:text-background hover:text-white"
                     data-testid={`edit-event-${event.id}`}
                   >
                     <Edit className="h-4 w-4" />
@@ -402,12 +403,12 @@ const AdminEvents = () => {
           <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Events Yet
           </h3>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create your first event to get started!
           </p>
           <Button
             onClick={() => setIsCreateDialogOpen(true)}
-            className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
+            className="btn-lavender px-8"
           >
             <Plus className="mr-2 h-5 w-5" />
             Create Event

src/pages/admin/AdminFinancials.js

@@ -147,7 +147,7 @@ const AdminFinancials = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[var(--purple-lavender)]">Loading financial reports...</p>
+        <p className="text-brand-purple ">Loading financial reports...</p>
       </div>
     );
   }
@@ -160,14 +160,14 @@ const AdminFinancials = () => {
           <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports Management
           </h1>
-          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage annual financial reports
           </p>
         </div>
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -179,9 +179,9 @@ const AdminFinancials = () => {
       {reports.length === 0 ? (
         <Card className="p-12 text-center">
           <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-          <p className="text-[var(--purple-lavender)] text-lg mb-4">No financial reports yet</p>
+          <p className="text-brand-purple  text-lg mb-4">No financial reports yet</p>
           {hasPermission('financials.create') && (
-            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
+            <Button onClick={handleCreate} className="bg-brand-purple  text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
@@ -191,24 +191,23 @@ const AdminFinancials = () => {
         <div className="space-y-4">
           {reports.map(report => (
             <Card key={report.id} className="p-6">
-              <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
-                  <DollarSign className="h-6 w-6 mx-auto mb-1" />
-                  <div className="text-2xl font-bold">{report.year}</div>
+              <div className="flex items-center gap-3">
+                <div className="bg-light-lavender p-3 rounded-xl self-center">
+                  <DollarSign className="size-8 " />
                 </div>
                 <div className="flex-1">
                   <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                     {report.title}
                   </h3>
                   <div className="flex items-center gap-3">
-                    <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
+                    <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                       {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                     </Badge>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="text-[var(--purple-lavender)] hover:text-[var(--purple-muted)]"
+                      className="text-brand-purple  hover:text-[var(--purple-muted)]"
                     >
                       <ExternalLink className="h-4 w-4 mr-1" />
                       View
@@ -222,17 +221,17 @@ const AdminFinancials = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(report)}
-                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                        className="border-brand-purple  text-brand-purple "
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
                     )}
                     {hasPermission('financials.delete') && (
                       <Button
-                        variant="outline"
+                        variant="outline-destructive"
                         size="sm"
                         onClick={() => handleDelete(report)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className=""
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -313,12 +312,12 @@ const AdminFinancials = () => {
                     required={!selectedReport}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedReport && !uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -333,7 +332,7 @@ const AdminFinancials = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                  <p className="text-sm text-brand-purple  mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -350,7 +349,7 @@ const AdminFinancials = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[var(--purple-lavender)] text-white"
+                className="bg-brand-purple  text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedReport ? 'Update' : 'Create'}

src/pages/admin/AdminGallery.js

@@ -156,7 +156,7 @@ const AdminGallery = () => {
         <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Event Gallery Management
         </h1>
-        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Upload and manage photos for event galleries
         </p>
       </div>
@@ -184,19 +184,19 @@ const AdminGallery = () => {
 
           {/* Empty State Message */}
           {events.length === 0 && (
-            <div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
+            <div className="mt-4 p-4 bg-[var(--lavender-300)] dark:bg-brand-lavender/10 dark:border-transparent border-2 border-[var(--neutral-800)] rounded-xl">
               <div className="flex items-start gap-3">
-                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
+                <AlertCircle className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
                   <h4 className="text-sm font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                     No Events Available
                   </h4>
-                  <p className="text-sm text-[var(--purple-lavender)] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-brand-purple  mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You need to create an event before uploading gallery images. Events help organize photos by occasion.
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
+                      className="btn-lavender text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
+                className="btn-lavender "
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -236,7 +236,7 @@ const AdminGallery = () => {
                   </>
                 )}
               </Button>
-              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 You can select multiple images. Max {formatFileSize(maxFileSize)} per image.
               </p>
             </div>
@@ -251,7 +251,7 @@ const AdminGallery = () => {
             <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
+            <Badge variant="purple" className=" px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>
@@ -275,7 +275,7 @@ const AdminGallery = () => {
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
-                          className="bg-background/90 hover:bg-background text-[var(--purple-ink)] rounded-lg"
+                          className="bg-background/90 hover:bg-background text-[var(--purple-ink)]  dark:text-[#ddd8eb] rounded-lg"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Edit className="h-4 w-4 mr-1" />
@@ -299,7 +299,7 @@ const AdminGallery = () => {
                   {/* Caption Preview */}
                   {image.caption && (
                     <div className="mt-2">
-                      <p className="text-sm text-[var(--purple-lavender)] line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple  line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {image.caption}
                       </p>
                     </div>
@@ -307,7 +307,7 @@ const AdminGallery = () => {
 
                   {/* File Size */}
                   <div className="mt-1">
-                    <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {formatFileSize(image.file_size_bytes)}
                     </p>
                   </div>
@@ -320,7 +320,7 @@ const AdminGallery = () => {
               <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Images Yet
               </h3>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Upload images to create a gallery for this event.
               </p>
             </div>
@@ -367,14 +367,14 @@ const AdminGallery = () => {
             <Button
               onClick={() => setEditingCaption(null)}
               variant="outline"
-              className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
+              className="border-[var(--neutral-800)] text-brand-purple  rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Cancel
             </Button>
             <Button
               onClick={handleUpdateCaption}
-              className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
+              className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Save Caption

src/pages/admin/AdminMemberTiers.js

@@ -0,0 +1,369 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/ui/select';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../components/ui/alert-dialog';
+import { toast } from 'sonner';
+import { useAuth } from '../../context/AuthContext';
+import useMemberTiers from '../../hooks/use-member-tiers';
+import { TIER_ICON_OPTIONS, BADGE_COLOR_PRESETS } from '../../config/MemberTiers';
+import { getTierIcon } from '../../config/memberTierIcons';
+import { Save, RotateCcw, Plus, Trash2, GripVertical, AlertTriangle, Users } from 'lucide-react';
+
+const AdminMemberTiers = () => {
+  const { user } = useAuth();
+  const { tiers, loading, saving, updateTiers, resetToDefaults } = useMemberTiers({ isAdmin: true });
+  const [editedTiers, setEditedTiers] = useState([]);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [showResetDialog, setShowResetDialog] = useState(false);
+
+  const isSuperAdmin = user?.role === 'superadmin';
+
+  // Initialize edited tiers when tiers load
+  useEffect(() => {
+    if (tiers && tiers.length > 0) {
+      setEditedTiers(JSON.parse(JSON.stringify(tiers)));
+      setHasChanges(false);
+    }
+  }, [tiers]);
+
+  // Check for changes
+  useEffect(() => {
+    if (tiers && editedTiers.length > 0) {
+      const changed = JSON.stringify(tiers) !== JSON.stringify(editedTiers);
+      setHasChanges(changed);
+    }
+  }, [tiers, editedTiers]);
+
+  const handleTierChange = useCallback((index, field, value) => {
+    setEditedTiers(prev => {
+      const updated = [...prev];
+      updated[index] = { ...updated[index], [field]: value };
+      return updated;
+    });
+  }, []);
+
+  const handleAddTier = useCallback(() => {
+    const newTier = {
+      id: `tier_${Date.now()}`,
+      label: 'New Tier',
+      minYears: editedTiers.length > 0
+        ? Math.max(...editedTiers.map(t => t.maxYears || 0)) + 0.001
+        : 0,
+      maxYears: 999,
+      iconKey: 'star',
+      badgeClass: 'bg-gray-100 text-gray-800 border-gray-200',
+    };
+    setEditedTiers(prev => [...prev, newTier]);
+  }, [editedTiers]);
+
+  const handleRemoveTier = useCallback((index) => {
+    if (editedTiers.length <= 1) {
+      toast.error('You must have at least one tier');
+      return;
+    }
+    setEditedTiers(prev => prev.filter((_, i) => i !== index));
+  }, [editedTiers.length]);
+
+  const validateTiers = useCallback(() => {
+    for (let i = 0; i < editedTiers.length; i++) {
+      const tier = editedTiers[i];
+      if (!tier.label?.trim()) {
+        toast.error(`Tier ${i + 1} must have a label`);
+        return false;
+      }
+      if (tier.minYears < 0) {
+        toast.error(`Tier "${tier.label}" has invalid minimum years`);
+        return false;
+      }
+      if (tier.maxYears <= tier.minYears) {
+        toast.error(`Tier "${tier.label}" max years must be greater than min years`);
+        return false;
+      }
+    }
+
+    // Check for overlapping ranges
+    const sorted = [...editedTiers].sort((a, b) => a.minYears - b.minYears);
+    for (let i = 0; i < sorted.length - 1; i++) {
+      if (sorted[i].maxYears >= sorted[i + 1].minYears) {
+        toast.error(`Tier ranges overlap between "${sorted[i].label}" and "${sorted[i + 1].label}"`);
+        return false;
+      }
+    }
+
+    return true;
+  }, [editedTiers]);
+
+  const handleSave = async () => {
+    if (!validateTiers()) return;
+
+    const success = await updateTiers(editedTiers);
+    if (success) {
+      toast.success('Member tiers saved successfully');
+    } else {
+      toast.error('Failed to save member tiers');
+    }
+  };
+
+  const handleReset = async () => {
+    const success = await resetToDefaults();
+    if (success) {
+      toast.success('Member tiers reset to defaults');
+      setShowResetDialog(false);
+    } else {
+      toast.error('Failed to reset member tiers');
+    }
+  };
+
+  const handleDiscardChanges = () => {
+    setEditedTiers(JSON.parse(JSON.stringify(tiers)));
+    setHasChanges(false);
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header and Actions */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+        <div>
+
+          <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}>
+              Discard
+            </Button>
+          )}
+          {isSuperAdmin && (
+            <Button
+              variant="outline"
+              onClick={() => setShowResetDialog(true)}
+              className="text-destructive hover:text-destructive"
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset
+            </Button>
+          )}
+          <Button onClick={handleSave} disabled={saving || !hasChanges}>
+            <Save className="h-4 w-4 mr-2" />
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Tier Cards */}
+      <div className="space-y-4">
+        {editedTiers.map((tier, index) => {
+          const IconComponent = getTierIcon(tier.iconKey);
+
+          return (
+            <Card key={tier.id} className="bg-background">
+              <CardContent className="pt-6">
+                <div className="flex flex-col lg:flex-row gap-6">
+                  {/* Drag Handle & Remove */}
+                  <div className="flex lg:flex-col items-center gap-2 lg:pt-6">
+                    <GripVertical className="h-5 w-5 text-muted-foreground cursor-move" />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleRemoveTier(index)}
+                      className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                      disabled={editedTiers.length <= 1}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* Tier Configuration */}
+                  <div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                    {/* Label */}
+                    <div className="space-y-2">
+                      <Label htmlFor={`tier-label-${index}`}>Label</Label>
+                      <Input
+                        id={`tier-label-${index}`}
+                        value={tier.label}
+                        onChange={(e) => handleTierChange(index, 'label', e.target.value)}
+                        placeholder="Tier Name"
+                      />
+                    </div>
+
+                    {/* Min Years */}
+                    <div className="space-y-2">
+                      <Label htmlFor={`tier-min-${index}`}>Min Years</Label>
+                      <Input
+                        id={`tier-min-${index}`}
+                        type="number"
+                        step="0.001"
+                        min="0"
+                        value={tier.minYears}
+                        onChange={(e) => handleTierChange(index, 'minYears', parseFloat(e.target.value) || 0)}
+                      />
+                    </div>
+
+                    {/* Max Years */}
+                    <div className="space-y-2">
+                      <Label htmlFor={`tier-max-${index}`}>Max Years</Label>
+                      <Input
+                        id={`tier-max-${index}`}
+                        type="number"
+                        step="0.001"
+                        min="0"
+                        value={tier.maxYears}
+                        onChange={(e) => handleTierChange(index, 'maxYears', parseFloat(e.target.value) || 0)}
+                      />
+                    </div>
+
+                    {/* Icon */}
+                    <div className="space-y-2">
+                      <Label htmlFor={`tier-icon-${index}`}>Icon</Label>
+                      <Select
+                        value={tier.iconKey}
+                        onValueChange={(value) => handleTierChange(index, 'iconKey', value)}
+                      >
+                        <SelectTrigger id={`tier-icon-${index}`}>
+                          <SelectValue placeholder="Select icon" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {TIER_ICON_OPTIONS.map((option) => {
+                            const OptionIcon = getTierIcon(option.key);
+                            return (
+                              <SelectItem key={option.key} value={option.key}>
+                                <div className="flex items-center gap-2">
+                                  <OptionIcon className="h-4 w-4" />
+                                  {option.label}
+                                </div>
+                              </SelectItem>
+                            );
+                          })}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Badge Color */}
+                    <div className="space-y-2 md:col-span-2">
+                      <Label htmlFor={`tier-badge-${index}`}>Badge Style</Label>
+                      <Select
+                        value={tier.badgeClass}
+                        onValueChange={(value) => handleTierChange(index, 'badgeClass', value)}
+                      >
+                        <SelectTrigger id={`tier-badge-${index}`}>
+                          <SelectValue placeholder="Select color" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {BADGE_COLOR_PRESETS.map((preset) => (
+                            <SelectItem key={preset.label} value={preset.badgeClass}>
+                              <div className="flex items-center gap-2">
+                                <div className={`w-4 h-4 rounded ${preset.badgeClass}`} />
+                                {preset.label}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Preview */}
+                    <div className="space-y-2 md:col-span-2 flex flex-col">
+                      <Label>Preview</Label>
+                      <div className="flex-1 flex items-center">
+                        <Badge className={`px-3 py-1.5 rounded-md text-sm flex items-center gap-2 border ${tier.badgeClass}`}>
+                          <IconComponent className="h-4 w-4" />
+                          {tier.label || 'Tier Name'}
+                        </Badge>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {/* Add Tier Button */}
+      <Button variant="outline" onClick={handleAddTier} className="w-full border-dashed">
+        <Plus className="h-4 w-4 mr-2" />
+        Add Tier
+      </Button>
+
+      {/* Info Card */}
+      <Card className="bg-muted/50">
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <Users className="h-5 w-5" />
+            How Member Tiers Work
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="text-sm text-muted-foreground space-y-2">
+          <p>
+            Member tiers are automatically assigned based on how long a member has been active.
+            The tier badge appears on member profiles and in the member directory.
+          </p>
+          <ul className="list-disc list-inside space-y-1">
+            <li>Tiers are matched based on membership duration in years</li>
+            <li>Each tier should have non-overlapping year ranges</li>
+            <li>The last tier typically uses a high max value (e.g., 999) to catch all long-term members</li>
+          </ul>
+        </CardContent>
+      </Card>
+
+      {/* Reset Confirmation Dialog */}
+      <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-destructive" />
+              Reset Tiers to Defaults?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This will delete all custom tier configurations and restore the default member tiers.
+              This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleReset}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Reset to Defaults
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default AdminMemberTiers;