- - New ThemeConfigContext provider that fetches theme on app load and applies it to the DOM (title, meta description, favicon, CSS variables,

theme-color)/- - Admin Theme settings page under Settings > Theme tab/- All logo references (5 components) now pull from the theme config with fallback to default

.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",

src/App.js

@@ -23,7 +23,9 @@ 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';
@@ -31,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';
@@ -286,18 +289,22 @@ function App() {
           } />
           <Route path="/admin/permissions" element={
             <PrivateRoute adminOnly>
-              <AdminLayout>
+              <Navigate to="/admin/settings/permissions" replace />
-                <AdminRoles />
-              </AdminLayout>
             </PrivateRoute>
           } />
           <Route path="/admin/settings" element={
             <PrivateRoute adminOnly>
               <AdminLayout>
-                <AdminSettings />
+                <SettingsLayout />
               </AdminLayout>
             </PrivateRoute>
-          } />
+          }>
+            <Route index element={<Navigate to="stripe" replace />} />
+            <Route path="stripe" element={<AdminSettings />} />
+            <Route path="permissions" element={<AdminRoles />} />
+            <Route path="member-tiers" element={<AdminMemberTiers />} />
+            <Route path="theme" element={<AdminTheme />} />
+          </Route>
 
           {/* 404 - Catch all undefined routes */}
           <Route path="*" element={<NotFound />} />

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 {
@@ -32,6 +33,7 @@ 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);
@@ -169,13 +171,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/bylaws',
       disabled: false
     },
-    {
+
-      name: 'Permissions',
-      icon: Shield,
-      path: '/admin/permissions',
-      disabled: false,
-      superadminOnly: true
-    },
     {
       name: 'Settings',
       icon: Settings,
@@ -287,7 +283,7 @@ 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'
                 }`}

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)]">

src/components/ChangeRoleDialog.js

@@ -77,7 +77,7 @@ export default function ChangeRoleDialog({ open, onClose, user, onSuccess }) {
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[500px]">
+      <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]" />

src/components/CreateMemberDialog.js

@@ -181,7 +181,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   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="John"
+                  placeholder="Jane"
                 />
                 {errors.first_name && (
                   <p className="text-sm text-red-500">{errors.first_name}</p>

src/components/CreateStaffDialog.js

@@ -106,7 +106,7 @@ 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" />
@@ -165,7 +165,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 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="John"
+                placeholder="Jane"
               />
               {errors.first_name && (
                 <p className="text-sm text-red-500">{errors.first_name}</p>

src/components/InviteStaffDialog.js

@@ -123,7 +123,7 @@ 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" />
@@ -196,7 +196,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   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="John"
+                  placeholder="Jane"
                 />
               </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 { MEMBER_TIER_ICONS } from '../config/memberTierIcons';
+
+const MemberBadge = ({ memberSince, tiers }) => {
+  const tier = getTierForMember(memberSince, tiers);
+  const Icon = MEMBER_TIER_ICONS[tier.icon] || MEMBER_TIER_ICONS.FaUser;
+
+  return (
+    <Badge className={`px-3 py-1 rounded-md text-sm flex items-center gap-2 ${tier.badgeClass}`}>
+      <Icon className="h-4 w-4" />
+      {tier.label}
+    </Badge>
+  );
+};
+
+export default MemberBadge;

src/components/MemberCard.js

@@ -0,0 +1,186 @@
+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';
+
+// 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 }) => {
+    const joinedDate = member.created_at;
+    return (
+        <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
+            {/* Profile Photo */}
+            <div className='flex justify-end items-center'>
+               member since badge
+            </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 */}
+            {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 */}
+            {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 */}
+            {joinedDate && (
+                <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(joinedDate).toLocaleDateString('en-US', {
+                            month: 'long',
+                            year: 'numeric'
+                        })}
+                    </span>
+                </div>
+            )}
+
+            {/* Contact Information */}
+            <div className="space-y-3 mb-4">
+                {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>
+                )}
+
+                {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>
+                )}
+
+                {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 */}
+            {(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

@@ -111,7 +111,7 @@ const MemberFooter = () => {
               <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)
+  // Get logo URL from theme config (with fallback to default)
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  const loafLogo = getLogoUrl();
 
   const handleLogout = () => {
     logout();

src/components/PaymentActivationDialog.js

@@ -156,8 +156,8 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
   if (!user) return null;
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
+    <Dialog open={open} onOpenChange={onOpenChange} className="">
-      <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl">
+      <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

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)
+  // Get logo URL from theme config (with fallback to default)
-  const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
+  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"
@@ -176,7 +194,71 @@ const PublicNavbar = () => {
                 Members Only
               </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>
 
@@ -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
@@ -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/SettingsSidebar.js

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

@@ -7,24 +7,70 @@ export const StatCard = ({
   icon: Icon,
   iconBgClass,
   dataTestId,
-}) => (
+}) => {
+  const valueString = value == null ? "" : String(value);
+
+  const digitCount =
+    valueString.replace(/\D/g, "").length || valueString.length;
+  /**
+ * 
+const getValueFontSize = () => {
+  if (digitCount <= 3) {
+      // 3.75rem for 3 or fewer digits
+      return "3.75rem";
+    } else if (digitCount <= 6) {
+      // Scale down for more digits
+      return "clamp(2rem, 5cqi, 3rem)";
+    } else if (digitCount <= 9) {
+      return "clamp(1.5rem, 4cqi, 2.5rem)";
+    } else {
+      return "clamp(1.25rem, 3cqi, 2rem)";
+    }
+  };
+  
+  * */
+
+  const getValueFontSize = () => {
+    switch (true) {
+      case digitCount <= 3:
+        // 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 ">
+      <div className="flex items-start gap-4 mb-4 justify-between">
-      <div className={`${iconBgClass} p-3 rounded-lg `}>
+        <div
-        <Icon className="size-8" />
+          className="space-y-8 "
-      </div>
+          style={{
-
+            containerType: "inline-size",
-      <div className="space-y-8">
+            maxWidth: "200px",
+            width: "100%",
+          }}
+        >
           <p
-          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
+            className="font-semibold text-[var(--purple-ink)] mb-1"
-          style={{ fontFamily: "'Inter', sans-serif" }}
+            style={{ fontSize: valueFontSize, lineHeight: 1 }}
           >
             {value}
           </p>
         </div>
+
+        <div className={`${iconBgClass} p-3 rounded-lg `}>
+          <Icon className="size-8" />
+        </div>
       </div>
       <p
         className="text-sm text-brand-purple "
@@ -33,4 +79,5 @@ export const StatCard = ({
         {title}
       </p>
     </Card>
-);
+  );
+};

src/components/StatusBadge.js

@@ -0,0 +1,42 @@
+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' },
+  pre_validated: { label: 'Pre-Validated', variant: 'green' },
+  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' }
+};
+
+//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/config/MemberTiers.js

@@ -0,0 +1,27 @@
+// src/config/memberTiers.js
+export const DEFAULT_MEMBER_TIERS = [
+  {
+    id: 'new',
+    label: 'New Member',
+    minDays: 0,
+    maxDays: 364, // < 1 year
+    icon: 'FaSeedling',
+    badgeClass: 'bg-[var(--lavender-300)] text-[var(--purple-ink)] hover:text-white',
+  },
+  {
+    id: 'silver',
+    label: 'Silver Member',
+    minDays: 365,
+    maxDays: 729,
+    icon: 'FaMedal',
+    badgeClass: 'bg-slate-200 text-slate-900 hover:text-white',
+  },
+  {
+    id: 'gold',
+    label: 'Gold Member',
+    minDays: 730,
+    maxDays: null, // open-ended
+    icon: 'FaCrown',
+    badgeClass: 'bg-amber-200 text-amber-900 hover:text-white',
+  },
+];

src/config/memberTierIcons.js

@@ -0,0 +1,9 @@
+// src/config/memberTierIcons.js
+import { FaSeedling, FaMedal, FaCrown, FaUser } from 'react-icons/fa';
+
+export const MEMBER_TIER_ICONS = {
+  FaSeedling,
+  FaMedal,
+  FaCrown,
+  FaUser,
+};

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-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-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.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"
     >
+      <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,6 +48,7 @@ const AdminLayout = ({ children }) => {
   };
 
   return (
+    <UsersProvider>
       <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
         {/* Sidebar */}
         <AdminSidebar
@@ -64,11 +67,29 @@ const AdminLayout = ({ children }) => {
 
         {/* 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

@@ -387,7 +387,7 @@ const AcceptInvitation = () => {
                   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="John"
+                  placeholder="Jane"
                 />
                 {formErrors.first_name && (
                   <p className="text-sm text-red-500">{formErrors.first_name}</p>

src/pages/Dashboard.js

@@ -7,7 +7,7 @@ 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';
 
 const Dashboard = () => {
@@ -17,6 +17,7 @@ const Dashboard = () => {
   const [resendLoading, setResendLoading] = useState(false);
   const [eventActivity, setEventActivity] = useState(null);
   const [activityLoading, setActivityLoading] = useState(true);
+  const [activeTransactionTab, setActiveTransactionTab] = useState('all');
   const joinedDate = user?.member_since || user?.created_at;
 
   useEffect(() => {
@@ -180,7 +181,7 @@ const Dashboard = () => {
         </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" }}>
@@ -219,19 +220,41 @@ const Dashboard = () => {
               )}
             </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_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>
 
           {/* 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
+                <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">
-                  className="btn-lavender "
+                  <Calendar className="h-4 w-4 mr-2" />
-                  data-testid="view-all-events-button"
+                  Browse Events
-                >
-                  View All
                 </Button>
               </Link>
             </div>
@@ -313,155 +336,129 @@ const Dashboard = () => {
           </Card>
         )}
 
-        {/* Event Activity Section */}
+        {/* Transaction History Section */}
-        <div className="mt-12">
+        <Card className="mt-12 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <div className="flex justify-between items-center mb-6">
+          {/* Header */}
-            <h2 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <div className="flex items-center gap-3 mb-6">
-              My Event Activity
+            <div className="p-2 bg-[var(--green-light)] rounded-lg">
+              <Receipt className="h-5 w-5 text-white" />
+            </div>
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              Transaction History
             </h2>
           </div>
 
-          {activityLoading ? (
+          {/* Stats Row */}
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
+          <div className="grid grid-cols-2 gap-4 mb-6">
-          ) : eventActivity ? (
+            <div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
-            <div className="space-y-8">
+              <div className="flex items-center gap-2 mb-2">
-              {/* Stats Cards */}
+                <CreditCard className="h-4 w-4 text-[var(--green-light)]" />
-              <div className="grid md:grid-cols-2 gap-6">
+                <span className="text-sm text-[var(--green-light)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                  Total Subscriptions
-                  <div className="flex items-center gap-4">
+                </span>
-                    <div className="bg-[var(--neutral-800)]/20 p-4 rounded-lg">
-                      <Calendar className="h-8 w-8 text-brand-purple " />
               </div>
-                    <div>
+              <p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+                $30.00
-                      <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              </p>
-                        {eventActivity.total_rsvps}
+              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                1 payment(s)
               </p>
             </div>
+            <div className="p-4 bg-[var(--lavender-300)]/30 rounded-xl border border-[var(--neutral-800)]">
+              <div className="flex items-center gap-2 mb-2">
+                <Heart className="h-4 w-4 text-[var(--coral)]" />
+                <span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  Total Donations
+                </span>
               </div>
-                </Card>
+              <p className="text-3xl font-bold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                $0.00
-                  <div className="flex items-center gap-4">
+              </p>
-                    <div className="bg-[var(--green-light)]/20 p-4 rounded-lg">
+              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      <CheckCircle className="h-8 w-8 text-[var(--green-light)]" />
+                0 donation(s)
-                    </div>
-                    <div>
-                      <p className="text-sm text-brand-purple " 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 */}
+          {/* Filter Tabs */}
-              {eventActivity.upcoming_events && eventActivity.upcoming_events.length > 0 && (
+          <div className="flex gap-2 mb-6">
-                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <button
-                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              onClick={() => setActiveTransactionTab('all')}
-                    Upcoming Events (RSVP'd)
+              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                  </h3>
+                activeTransactionTab === 'all'
-                  <div className="space-y-3">
+                  ? 'bg-[var(--purple-lavender)] text-white'
-                    {eventActivity.upcoming_events.map((event) => (
+                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
-                      <Link to={`/events/${event.id}`} key={event.id}>
+              }`}
-                        <div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  hover:shadow-md transition-all">
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
-                          <div className="flex items-start justify-between gap-4">
+            >
-                            <div className="flex-1">
+              All (1)
-                              <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+            </button>
-                              <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <button
-                                {new Date(event.start_at).toLocaleDateString()} at{' '}
+              onClick={() => setActiveTransactionTab('subscriptions')}
-                                {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+              className={`px-6 py-2 rounded-full font-medium transition-all ${
-                              </p>
+                activeTransactionTab === 'subscriptions'
-                              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                  ? 'bg-[var(--purple-lavender)] text-white'
+                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
+              }`}
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Subscriptions (1)
+            </button>
+            <button
+              onClick={() => setActiveTransactionTab('donations')}
+              className={`px-6 py-2 rounded-full font-medium transition-all ${
+                activeTransactionTab === 'donations'
+                  ? 'bg-[var(--purple-lavender)] text-white'
+                  : 'border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] bg-transparent hover:bg-[var(--lavender-300)]/30'
+              }`}
+              style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+            >
+              Donations (0)
+            </button>
           </div>
-                            <Badge className={
+
-                              event.rsvp_status === 'yes' ? 'bg-[var(--green-light)] text-white' :
+          {/* Transaction List */}
-                                event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
+          <div className="space-y-4">
-                                  'bg-gray-200 text-gray-700'
+            {(activeTransactionTab === 'all' || activeTransactionTab === 'subscriptions') && (
-                            }>
+              <div className="flex items-center justify-between p-4 border border-[var(--neutral-800)] rounded-xl">
-                              {event.rsvp_status === 'yes' ? 'Going' :
+                <div className="flex items-center gap-4">
-                                event.rsvp_status === 'maybe' ? 'Maybe' : 'Not Going'}
+                  <div className="w-12 h-12 bg-[var(--purple-lavender)] rounded-lg"></div>
+                  <div>
+                    <div className="flex items-center gap-2 mb-1">
+                      <span className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        Annual Membership
+                      </span>
+                      <Badge className="bg-[var(--green-light)] text-white text-xs px-2 py-0.5 rounded">
+                        active
                       </Badge>
                     </div>
+                    <div className="flex items-center gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Calendar className="h-3.5 w-3.5" />
+                      <span>Dec 16, 2025</span>
+                      <span>•</span>
+                      <span>Custom</span>
                     </div>
-                      </Link>
+                    <span className="text-sm text-[var(--coral)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    ))}
+                      Manual Payment
+                    </span>
+                  </div>
+                </div>
+                <span className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  $30.00
+                </span>
+              </div>
+            )}
+            {activeTransactionTab === 'donations' && (
+              <div className="text-center py-8">
+                <Heart className="h-12 w-12 text-[var(--neutral-800)] mx-auto mb-3" />
+                <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  No donations yet
+                </p>
+              </div>
+            )}
           </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-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>
-                          </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-brand-purple " 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-brand-purple  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-brand-purple  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(--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>
-                  </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-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Failed to load event activity. Please try refreshing the page.
-                </p>
-              </div>
-            </Card>
-          )}
-        </div>
       </div>
       <MemberFooter />
     </div>

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/admin/AdminBylaws.js

@@ -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'}

src/pages/admin/AdminDashboard.js

@@ -60,7 +60,7 @@ 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
@@ -69,9 +69,9 @@ const AdminDashboard = () => {
             Manage users, events, and membership applications.
           </p>
         </div>
-        <Link to={'/'}>
+        <Link to={'/'} className=''>
           <Button
-            className="btn-lavender"
+            className="btn-lavender mb-8 md:mb-0  "
           >
             <Globe />
             View Public Site

src/pages/admin/AdminMemberTiers.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Card } from '../../components/ui/card';
+import { Badge } from '../../components/ui/badge';
+import { DEFAULT_MEMBER_TIERS } from '../../config/MemberTiers';
+
+const AdminMemberTiers = () => {
+  return (
+    <div className="space-y-6">
+      <p className="text-muted-foreground">
+        Configure tier names, time ranges, and badges used in the members directory.
+      </p>
+
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+        <div className="space-y-4">
+          {DEFAULT_MEMBER_TIERS.map((tier) => {
+            const rangeLabel = tier.maxDays == null
+              ? `${tier.minDays}+ days`
+              : `${tier.minDays}–${tier.maxDays} days`;
+
+            return (
+              <div
+                key={tier.id}
+                className="flex flex-wrap items-center justify-between gap-4 border border-[var(--neutral-800)] rounded-xl p-4"
+              >
+                <div>
+                  <div className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    {tier.label}
+                  </div>
+                  <div className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    {rangeLabel}
+                  </div>
+                </div>
+                <Badge className={`px-3 py-1 rounded-md text-sm ${tier.badgeClass}`}>
+                  {tier.icon}
+                </Badge>
+              </div>
+            );
+          })}
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default AdminMemberTiers;

src/pages/admin/AdminMembers.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import {
@@ -20,17 +19,24 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
+import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
+import { useMembers } from '../../hooks/use-users';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { hasPermission } = useAuth();
-  const [users, setUsers] = useState([]);
+  const {
-  const [filteredUsers, setFilteredUsers] = useState([]);
+    users,
-  const [loading, setLoading] = useState(true);
+    filteredUsers,
-  const [searchQuery, setSearchQuery] = useState('');
+    loading,
-  const [statusFilter, setStatusFilter] = useState('active');
+    searchQuery,
+    setSearchQuery,
+    filterValue: statusFilter,
+    setFilterValue: setStatusFilter,
+    refetch,
+  } = useMembers();
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
   const [statusChanging, setStatusChanging] = useState(null);
@@ -41,53 +47,13 @@ const AdminMembers = () => {
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [exporting, setExporting] = useState(false);
 
-  useEffect(() => {
-    fetchMembers();
-  }, []);
-
-  useEffect(() => {
-    filterUsers();
-  }, [users, searchQuery, statusFilter]);
-
-  const fetchMembers = async () => {
-    try {
-      const response = await api.get('/admin/users');
-      // Filter to only members
-      const members = response.data.filter(user => user.role === 'member');
-      setUsers(members);
-    } catch (error) {
-      toast.error('Failed to fetch members');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filterUsers = () => {
-    let filtered = users;
-
-    if (statusFilter && statusFilter !== 'all') {
-      filtered = filtered.filter(user => user.status === statusFilter);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user =>
-        user.first_name.toLowerCase().includes(query) ||
-        user.last_name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredUsers(filtered);
-  };
-
   const handleActivatePayment = (user) => {
     setSelectedUserForPayment(user);
     setPaymentDialogOpen(true);
   };
 
   const handlePaymentSuccess = () => {
-    fetchMembers(); // Refresh list
+    refetch(); // Refresh list
   };
 
   const handleStatusChangeRequest = (userId, currentStatus, newStatus, user) => {
@@ -108,7 +74,7 @@ const AdminMembers = () => {
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success('Member status updated successfully');
-      fetchMembers(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update status');
     } finally {
@@ -200,27 +166,6 @@ const AdminMembers = () => {
     };
   };
 
-  const getStatusBadge = (status) => {
-    const config = {
-      pending_email: { label: 'Pending Email', variant: 'orange2' },
-      pending_validation: { label: 'Pending Validation', variant: 'gray' },
-      pre_validated: { label: 'Pre-Validated', variant: 'green' },
-      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' }
-    };
-
-    const statusConfig = config[status] || config.inactive;
-    return (
-      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };
-
   const getReminderInfo = (user) => {
     const emailReminders = user.email_verification_reminders_sent || 0;
     const eventReminders = user.event_attendance_reminders_sent || 0;
@@ -244,7 +189,7 @@ const AdminMembers = () => {
   return (
     <>
       <div className="mb-8">
-        <div className="flex justify-between items-start mb-4">
+        <div className="flex flex-col md:flex-row  justify-between items-start mb-4">
           <div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
@@ -253,7 +198,7 @@ const AdminMembers = () => {
               Manage paying members and their subscriptions.
             </p>
           </div>
-          <div className="flex gap-3 flex-wrap">
+          <div className="flex gap-3 flex-wrap ">
             {hasPermission('users.export') && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -325,15 +270,6 @@ const AdminMembers = () => {
           Quick Overview
         </div>
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-
-
-          <StatCard
-            title="Total Members"
-            value={users.length}
-            icon={Users}
-            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
-            dataTestId="stat-total-members"
-          />
           <StatCard
             title="Active"
             value={users.filter(u => u.status === 'active').length}
@@ -355,9 +291,13 @@ const AdminMembers = () => {
             iconBgClass=" text-brand-pink"
             dataTestId="stat-inactive-members"
           />
-
+          <StatCard
-
+            title="Total Members"
-
+            value={users.length}
+            icon={Users}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            dataTestId="stat-total-members"
+          />
         </div>
       </div>
 
@@ -401,7 +341,8 @@ const AdminMembers = () => {
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
           {filteredUsers.map((user) => {
-            const joinedDate = user.member_since || user.created_at;
+            const joinedDate = user.created_at;
+            const memberDate = user.member_since;
             return (
               <Card
                 key={user.id}
@@ -421,12 +362,13 @@ const AdminMembers = () => {
                         <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
                           {user.first_name} {user.last_name}
                         </h3>
-                        {getStatusBadge(user.status)}
+                        <StatusBadge status={user.status} />
                       </div>
                       <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         <p>Email: {user.email}</p>
                         <p>Phone: {user.phone}</p>
-                        <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        <p>Registered: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        <p>Member Since: {memberDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                         {user.referred_by_member_name && (
                           <p>Referred by: {user.referred_by_member_name}</p>
                         )}
@@ -578,19 +520,19 @@ const AdminMembers = () => {
       <CreateMemberDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
 
       <InviteStaffDialog
         open={inviteDialogOpen}
         onOpenChange={setInviteDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
 
       <WordPressImportWizard
         open={importDialogOpen}
         onOpenChange={setImportDialogOpen}
-        onSuccess={fetchMembers}
+        onSuccess={refetch}
       />
     </>
   );

src/pages/admin/AdminNewsletters.js

@@ -287,7 +287,7 @@ const AdminNewsletters = () => {
 
       {/* Create/Edit Dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-2xl">
+        <DialogContent className="max-w-2xl overflow-y-auto max-h-[90vh]">
           <DialogHeader>
             <DialogTitle>
               {selectedNewsletter ? 'Edit Newsletter' : 'Add Newsletter'}

src/pages/admin/AdminPlans.js

@@ -23,6 +23,7 @@ import {
   Search,
   DollarSign
 } from 'lucide-react';
+import StatusBadge from '@/components/StatusBadge';
 
 const AdminPlans = () => {
   const { hasPermission } = useAuth();
@@ -236,7 +237,7 @@ const AdminPlans = () => {
                   {plan.active ? 'Active' : 'Inactive'}
                 </Badge>
                 {plan.subscriber_count > 0 && (
-                  <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
+                  <Badge className="bg-[var(--neutral-800)] hover:text-white text-[var(--purple-ink)]">
                     <Users className="h-3 w-3 mr-1" />
                     {plan.subscriber_count}
                   </Badge>

src/pages/admin/AdminRoles.js

@@ -39,6 +39,7 @@ const AdminRoles = () => {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [showPermissionsModal, setShowPermissionsModal] = useState(false);
   const [expandedModules, setExpandedModules] = useState({});
+  const [savingPermissions, setSavingPermissions] = useState(false);
   const [formData, setFormData] = useState({
     code: '',
     name: '',
@@ -46,6 +47,15 @@ const AdminRoles = () => {
     permissions: []
   });
 
+  const formatRoleSlug = (value) => (
+    value
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/_+/g, '-')
+      .replace(/^_+|_+$/g, '')
+  );
+
   useEffect(() => {
     fetchRoles();
     fetchPermissions();
@@ -133,6 +143,7 @@ const AdminRoles = () => {
   };
 
   const handleSavePermissions = async () => {
+    setSavingPermissions(true);
     try {
       await api.put(`/admin/roles/${selectedRole.id}/permissions`, {
         permission_codes: selectedPermissions
@@ -142,6 +153,8 @@ const AdminRoles = () => {
       fetchRoles();
     } catch (error) {
       toast.error('Failed to update permissions');
+    } finally {
+      setSavingPermissions(false);
     }
   };
 
@@ -155,6 +168,14 @@ const AdminRoles = () => {
     });
   };
 
+  const addPermissions = (permissionCodes) => {
+    setSelectedPermissions(prev => [...new Set([...prev, ...permissionCodes])]);
+  };
+
+  const removePermissions = (permissionCodes) => {
+    setSelectedPermissions(prev => prev.filter(code => !permissionCodes.includes(code)));
+  };
+
   const toggleModule = (module) => {
     setExpandedModules(prev => ({
       ...prev,
@@ -184,16 +205,13 @@ const AdminRoles = () => {
   const groupedPermissions = groupPermissionsByModule();
 
   return (
-    <div className="space-y-6 ">
+    <div className="space-y-6">
-      {/* Header */}
+      {/* Action Bar */}
-      <div className="flex justify-between items-center ">
+      <div className="flex justify-between items-center">
-        <div>
+        <p className="text-muted-foreground">
-          <h1 className="text-3xl font-bold text-[var(--purple-ink)]">Role Management</h1>
-          <p className="text-gray-600 mt-1">
           Create and manage custom roles with specific permissions
         </p>
-        </div>
+        <Button className="btn-lavender" onClick={() => setShowCreateModal(true)}>
-        <Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
           <Plus className="w-4 h-4 mr-2" />
           Create Role
         </Button>
@@ -282,8 +300,28 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="space-y-4">
+
             <div>
-              <Label>Role Code *</Label>
+              <Label>Role Name *</Label>
+              <Input
+                placeholder="e.g., Content Editor, Finance Manager"
+                value={formData.name}
+                onChange={(e) => {
+                  const nextName = e.target.value;
+                  setFormData(prev => {
+                    const prevAuto = formatRoleSlug(prev.name);
+                    const isAuto = !prev.code || prev.code === prevAuto;
+                    return {
+                      ...prev,
+                      name: nextName,
+                      code: isAuto ? formatRoleSlug(nextName) : prev.code
+                    };
+                  });
+                }}
+              />
+            </div>
+            <div>
+              <Label>Role Slug *</Label>
               <Input
                 placeholder="e.g., content_editor, finance_manager"
                 value={formData.code}
@@ -294,15 +332,6 @@ const AdminRoles = () => {
               </p>
             </div>
 
-            <div>
-              <Label>Role Name *</Label>
-              <Input
-                placeholder="e.g., Content Editor, Finance Manager"
-                value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              />
-            </div>
-
             <div>
               <Label>Description</Label>
               <Textarea
@@ -318,11 +347,20 @@ const AdminRoles = () => {
                 Select permissions for this role. You can also add permissions later.
               </p>
               <div className="border rounded-lg p-4 max-h-64 overflow-y-auto scrollbar-dashboard">
-                {Object.entries(groupedPermissions).map(([module, perms]) => (
+                {Object.entries(groupedPermissions).map(([module, perms]) => {
+                  const moduleCodes = perms.map(perm => perm.code);
+                  const selectedCount = moduleCodes.filter(code => formData.permissions.includes(code)).length;
+                  const hasPermissions = moduleCodes.length > 0;
+                  const isAllSelected = hasPermissions && selectedCount === moduleCodes.length;
+                  const isNoneSelected = selectedCount === 0;
+
+                  return (
                     <div key={module} className="mb-4">
+                      <div className="flex items-center justify-between mb-2">
                         <button
+                          type="button"
                           onClick={() => toggleModule(module)}
-                      className="flex items-center w-full text-left font-medium mb-2 hover:text-blue-600"
+                          className="flex items-center text-left font-medium hover:text-blue-600"
                         >
                           {expandedModules[module] ? (
                             <ChevronUp className="w-4 h-4 mr-1" />
@@ -331,6 +369,35 @@ const AdminRoles = () => {
                           )}
                           {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
                         </button>
+                        <div className="flex items-center gap-3">
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setFormData(prev => ({
+                                ...prev,
+                                permissions: [...new Set([...prev.permissions, ...moduleCodes])]
+                              }));
+                            }}
+                            disabled={!hasPermissions || isAllSelected}
+                            className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            Select all
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              setFormData(prev => ({
+                                ...prev,
+                                permissions: prev.permissions.filter(code => !moduleCodes.includes(code))
+                              }));
+                            }}
+                            disabled={!hasPermissions || isNoneSelected}
+                            className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                          >
+                            Deselect all
+                          </button>
+                        </div>
+                      </div>
                       {expandedModules[module] && (
                         <div className="space-y-2 ml-5">
                           {perms.map(perm => (
@@ -355,7 +422,8 @@ const AdminRoles = () => {
                         </div>
                       )}
                     </div>
-                ))}
+                  );
+                })}
               </div>
             </div>
           </div>
@@ -382,10 +450,6 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="space-y-4">
-            <div>
-              <Label>Role Code</Label>
-              <Input value={selectedRole?.code || ''} disabled />
-            </div>
 
             <div>
               <Label>Role Name *</Label>
@@ -395,6 +459,11 @@ const AdminRoles = () => {
               />
             </div>
 
+            <div>
+              <Label>Role Slug</Label>
+              <Input value={selectedRole?.code || ''} disabled />
+            </div>
+
             <div>
               <Label>Description</Label>
               <Textarea
@@ -426,11 +495,20 @@ const AdminRoles = () => {
           </DialogHeader>
 
           <div className="border rounded-lg p-4">
-            {Object.entries(groupedPermissions).map(([module, perms]) => (
+            {Object.entries(groupedPermissions).map(([module, perms]) => {
+              const moduleCodes = perms.map(perm => perm.code);
+              const selectedCount = moduleCodes.filter(code => selectedPermissions.includes(code)).length;
+              const hasPermissions = moduleCodes.length > 0;
+              const isAllSelected = hasPermissions && selectedCount === moduleCodes.length;
+              const isNoneSelected = selectedCount === 0;
+
+              return (
                 <div key={module} className="mb-6">
+                  <div className="flex items-center justify-between mb-3">
                     <button
+                      type="button"
                       onClick={() => toggleModule(module)}
-                  className="flex items-center w-full text-left font-medium text-lg mb-3 hover:text-blue-600"
+                      className="flex items-center text-left font-medium text-lg hover:text-blue-600"
                     >
                       {expandedModules[module] ? (
                         <ChevronUp className="w-5 h-5 mr-2" />
@@ -439,6 +517,25 @@ const AdminRoles = () => {
                       )}
                       {module.charAt(0).toUpperCase() + module.slice(1)} ({perms.length})
                     </button>
+                    <div className="flex items-center gap-3">
+                      <button
+                        type="button"
+                        onClick={() => addPermissions(moduleCodes)}
+                        disabled={!hasPermissions || isAllSelected}
+                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Select all
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => removePermissions(moduleCodes)}
+                        disabled={!hasPermissions || isNoneSelected}
+                        className="text-xs font-medium text-gray-500 hover:text-brand-purple disabled:opacity-50 disabled:cursor-not-allowed"
+                      >
+                        Deselect all
+                      </button>
+                    </div>
+                  </div>
                   {expandedModules[module] && (
                     <div className="space-y-3 ml-7">
                       {perms.map(perm => (
@@ -459,15 +556,16 @@ const AdminRoles = () => {
                     </div>
                   )}
                 </div>
-            ))}
+              );
+            })}
           </div>
 
           <DialogFooter>
             <Button variant="outline" onClick={() => setShowPermissionsModal(false)}>
               Cancel
             </Button>
-            <Button onClick={handleSavePermissions}>
+            <Button onClick={handleSavePermissions} disabled={savingPermissions}>
-              Save Permissions
+              {savingPermissions ? 'Saving...' : 'Save Permissions'}
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -491,6 +589,15 @@ const AdminRoles = () => {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {savingPermissions && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="bg-white rounded-xl shadow-lg px-6 py-5 text-center">
+            <div className="mx-auto h-10 w-10 animate-spin rounded-full border-4 border-[var(--neutral-800)] border-t-transparent" />
+            <p className="mt-4 text-sm font-medium text-gray-700">Saving permissions...</p>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/pages/admin/AdminSettings.js

@@ -126,18 +126,7 @@ export default function AdminSettings() {
   }
 
   return (
-    <div className="container mx-auto p-6 max-w-4xl">
+    <div className="space-y-6">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
-          <SettingsIcon className="h-8 w-8 text-brand-purple" />
-          Settings
-        </h1>
-        <p className="text-gray-600 mt-2">
-          Manage system configuration and integrations
-        </p>
-      </div>
-
       {/* Stripe Integration Card */}
       <Card className="border-2 border-[var(--lavender-200)] shadow-sm">
         <CardHeader className="bg-gradient-to-r from-[var(--lavender-100)] to-white border-b-2 border-[var(--lavender-200)]">

src/pages/admin/AdminStaff.js

@@ -1,10 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
@@ -12,72 +11,39 @@ import CreateStaffDialog from '../../components/CreateStaffDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import PendingInvitationsTable from '../../components/PendingInvitationsTable';
 import { toast } from 'sonner';
-import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX } from 'lucide-react';
+import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX, ShieldIcon } from 'lucide-react';
+import StatusBadge from '../../components/StatusBadge';
+import { StatCard } from '@/components/StatCard';
+import { CircleMinus, CreditCard, Users } from 'lucide-react';
+import { useStaff } from '../../hooks/use-users';
 
 const AdminStaff = () => {
   const navigate = useNavigate();
   const { hasPermission, user } = useAuth();
-  const [users, setUsers] = useState([]);
+  const {
-  const [filteredUsers, setFilteredUsers] = useState([]);
+    users,
-  const [loading, setLoading] = useState(true);
+    filteredUsers,
-  const [searchQuery, setSearchQuery] = useState('');
+    loading,
-  const [roleFilter, setRoleFilter] = useState('all');
+    searchQuery,
+    setSearchQuery,
+    filterValue: roleFilter,
+    setFilterValue: setRoleFilter,
+    refetch,
+  } = useStaff({
+    initialFilter: 'all',
+    filterKey: 'role',
+  });
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
   const [activeTab, setActiveTab] = useState('staff-list');
 
-  // Staff roles (non-guest, non-member) - includes all admin-type roles
-  const STAFF_ROLES = ['admin', 'superadmin', 'finance'];
-
-  useEffect(() => {
-    fetchStaff();
-  }, []);
-
-  useEffect(() => {
-    filterUsers();
-  }, [users, searchQuery, roleFilter]);
-
-  const fetchStaff = async () => {
-    try {
-      const response = await api.get('/admin/users');
-      // Filter to only staff roles
-      const staffUsers = response.data.filter(user =>
-        STAFF_ROLES.includes(user.role)
-      );
-      setUsers(staffUsers);
-    } catch (error) {
-      toast.error('Failed to fetch staff');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filterUsers = () => {
-    let filtered = users;
-
-    if (roleFilter && roleFilter !== 'all') {
-      filtered = filtered.filter(user => user.role === roleFilter);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user =>
-        user.first_name.toLowerCase().includes(query) ||
-        user.last_name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredUsers(filtered);
-  };
-
   const handleToggleStatus = async (userId, currentStatus) => {
     const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
 
     try {
       await api.put(`/admin/users/${userId}/status`, { status: newStatus });
       toast.success(`User ${newStatus === 'active' ? 'activated' : 'deactivated'} successfully`);
-      fetchStaff(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to update user status');
     }
@@ -91,48 +57,19 @@ const AdminStaff = () => {
     try {
       await api.delete(`/admin/users/${userId}`);
       toast.success('User deleted successfully');
-      fetchStaff(); // Refresh list
+      refetch(); // Refresh list
     } catch (error) {
       toast.error(error.response?.data?.detail || 'Failed to delete user');
     }
   };
 
-  const getRoleBadge = (role) => {
-    const config = {
-      superadmin: { label: 'Superadmin', variant: 'purple' },
-      admin: { label: 'Admin', variant: 'green' },
-      moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-      staff: { label: 'Staff', variant: 'gray' },
-      media: { label: 'Media', variant: 'gray2' }
-    };
 
-    const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
-    return (
-      <Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
-        <Shield className="h-3 w-3 mr-1 inline" />
-        {roleConfig.label}
-      </Badge>
-    );
-  };
 
-  const getStatusBadge = (status) => {
-    const config = {
-      active: { label: 'Active', variant: 'green' },
-      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
-    };
-
-    const statusConfig = config[status] || config.inactive;
-    return (
-      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };
 
   return (
     <>
       <div className="mb-8">
-        <div className="flex justify-between items-start mb-4">
+        <div className="flex flex-col md:flex-row justify-between items-start mb-4">
           <div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Staff Management
@@ -141,7 +78,8 @@ const AdminStaff = () => {
               Manage internal team members and their roles.
             </p>
           </div>
-          <div className="flex gap-3">
+
+          <div className="flex gap-3 ">
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
@@ -165,42 +103,52 @@ const AdminStaff = () => {
       </div>
 
       {/* Stats */}
-      <div className="grid md:grid-cols-4 gap-4 mb-8">
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
+          Quick Overview
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        </div>
-            {users.length}
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
-          </p>
+          <StatCard
-        </Card>
+            title="Total Staff"
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+            //TODO: refractor codebase to have a central admin and user roles config - when user adds roles, they should be added to the config
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
+            value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media'].includes(u.role)).length}
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            icon={Users}
-            {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
-          </p>
+            dataTestId="stat-total-members"
-        </Card>
+          />
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <StatCard
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
+            title="Admins"
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
-            {users.filter(u => u.role === 'moderator').length}
+            icon={Shield}
-          </p>
+            iconBgClass="text-[var(--green-light)]"
-        </Card>
+            dataTestId="stat-active-members"
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          />
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <StatCard
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            title="Finance Managers"
-            {users.filter(u => u.status === 'active').length}
+            value={users.filter(u => u.role === 'finance').length}
-          </p>
+            icon={CreditCard}
-        </Card>
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-payment-pending-members"
+          />
+          <StatCard
+            title="Inactive"
+            value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length && users.filter(u => u.status !== 'inactive').length}
+            icon={CircleMinus}
+            iconBgClass=" text-brand-pink"
+            dataTestId="stat-inactive-members"
+          />
+        </div>
       </div>
 
       {/* Tabs */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
-        <TabsList className="grid w-full grid-cols-2 mb-8">
+        <TabsList className="grid w-full grid-cols-2 mb-8 ">
-          <TabsTrigger value="staff-list" className="text-lg  py-3">
+          <TabsTrigger value="staff-list" className="text-sm sm:text-md md:text-lg  py-3">
-            <UserCog className="h-5 w-5 mr-2" />
+            <UserCog className="h-5 w-5 mr-2 hidden md:inline" />
             Staff Members
           </TabsTrigger>
-          <TabsTrigger value="pending-invitations" className="text-lg py-3  ">
+          <TabsTrigger value="pending-invitations" className="text-sm sm:text-md md:text-lg  py-3  ">
-            <Mail className="h-5 w-5 mr-2" />
+            <Mail className="h-5 w-5 mr-2 hidden md:inline" />
             Pending Invitations
           </TabsTrigger>
         </TabsList>
@@ -263,8 +211,8 @@ const AdminStaff = () => {
                             <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                               {user.first_name} {user.last_name}
                             </h3>
-                          {getRoleBadge(user.role)}
+                            <StatusBadge status={user.role} />
-                          {getStatusBadge(user.status)}
+                            <StatusBadge status={user.status} />
                           </div>
                           <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             <p>Email: {user.email}</p>
@@ -351,7 +299,7 @@ const AdminStaff = () => {
       <CreateStaffDialog
         open={createDialogOpen}
         onOpenChange={setCreateDialogOpen}
-        onSuccess={fetchStaff}
+        onSuccess={refetch}
       />
 
       <InviteStaffDialog

src/pages/admin/AdminSubscriptions.js

@@ -19,7 +19,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../components/ui/dialog';
-import { Badge } from '../../components/ui/badge';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -47,6 +46,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
+import StatusBadge from '@/components/StatusBadge';
 
 const AdminSubscriptions = () => {
   const { hasPermission } = useAuth();
@@ -302,14 +302,7 @@ Proceed with activation?`;
     }
   };
 
-  const getStatusBadgeVariant = (status) => {
+
-    const variants = {
-      active: 'default',
-      cancelled: 'destructive',
-      expired: 'secondary'
-    };
-    return variants[status] || 'outline';
-  };
 
   if (loading) {
     return (
@@ -501,7 +494,7 @@ Proceed with activation?`;
                         {sub.user.email}
                       </p>
                     </div>
-                    <Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
+                    <StatusBadge status={sub.status} />
                   </div>
 
                   {/* Plan & Period */}
@@ -635,9 +628,8 @@ Proceed with activation?`;
                           </div>
                         </td>
                         <td className="p-4">
-                          <Badge variant={getStatusBadgeVariant(sub.status)}>
+                          <StatusBadge status={sub.status} />
-                            {sub.status}
+
-                          </Badge>
                         </td>
                         <td className="p-4">
                           <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -856,7 +848,7 @@ Proceed with activation?`;
 
       {/* Edit Subscription Dialog */}
       <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
-        <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl">
+        <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl overflow-y-auto max-h-[90vh]">
           <DialogHeader>
             <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Subscription

src/pages/admin/AdminTheme.js

@@ -0,0 +1,743 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import api from '../../utils/api';
+import { useAuth } from '../../context/AuthContext';
+import { useThemeConfig } from '../../context/ThemeConfigContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { Textarea } from '../../components/ui/textarea';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../../components/ui/alert-dialog';
+import { toast } from 'sonner';
+import { Palette, Upload, Trash2, RotateCcw, Save, Image, Globe, AlertTriangle } from 'lucide-react';
+
+const AdminTheme = () => {
+  const { user } = useAuth();
+  const { refreshTheme, DEFAULT_THEME } = useThemeConfig();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [uploadingLogo, setUploadingLogo] = useState(false);
+  const [uploadingFavicon, setUploadingFavicon] = useState(false);
+  const [showResetDialog, setShowResetDialog] = useState(false);
+  const [themeData, setThemeData] = useState({
+    site_name: '',
+    site_short_name: '',
+    site_description: '',
+    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'
+  });
+  const [originalData, setOriginalData] = useState(null);
+  const [metadata, setMetadata] = useState({
+    is_default: true,
+    updated_at: null,
+    updated_by: null
+  });
+
+  const isSuperAdmin = user?.role === 'superadmin';
+
+  const fetchThemeSettings = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await api.get('/admin/settings/theme');
+      const { config, is_default, updated_at, updated_by } = response.data;
+
+      setThemeData(config);
+      setOriginalData(config);
+      setMetadata({ is_default, updated_at, updated_by });
+    } catch (error) {
+      toast.error('Failed to fetch theme settings');
+      console.error('Fetch theme error:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchThemeSettings();
+  }, [fetchThemeSettings]);
+
+  const handleInputChange = (field, value) => {
+    setThemeData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleColorChange = (colorKey, value) => {
+    setThemeData(prev => ({
+      ...prev,
+      colors: {
+        ...prev.colors,
+        [colorKey]: value
+      }
+    }));
+  };
+
+  const handleSaveSettings = async () => {
+    try {
+      setSaving(true);
+
+      // Build update payload with only changed fields
+      const payload = {};
+
+      if (themeData.site_name !== originalData?.site_name) {
+        payload.site_name = themeData.site_name;
+      }
+      if (themeData.site_short_name !== originalData?.site_short_name) {
+        payload.site_short_name = themeData.site_short_name;
+      }
+      if (themeData.site_description !== originalData?.site_description) {
+        payload.site_description = themeData.site_description;
+      }
+      if (JSON.stringify(themeData.colors) !== JSON.stringify(originalData?.colors)) {
+        payload.colors = themeData.colors;
+      }
+      if (themeData.meta_theme_color !== originalData?.meta_theme_color) {
+        payload.meta_theme_color = themeData.meta_theme_color;
+      }
+
+      if (Object.keys(payload).length === 0) {
+        toast.info('No changes to save');
+        return;
+      }
+
+      await api.put('/admin/settings/theme', payload);
+
+      toast.success('Theme settings saved successfully');
+
+      // Refresh theme context and re-fetch settings
+      await refreshTheme();
+      await fetchThemeSettings();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to save theme settings');
+      console.error('Save theme error:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleLogoUpload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    const allowedTypes = ['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error('Invalid file type. Please upload PNG, JPEG, WebP, or SVG.');
+      return;
+    }
+
+    // Validate file size (5MB)
+    if (file.size > 5 * 1024 * 1024) {
+      toast.error('File too large. Maximum size is 5MB.');
+      return;
+    }
+
+    try {
+      setUploadingLogo(true);
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await api.post('/admin/settings/theme/logo', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+
+      setThemeData(prev => ({
+        ...prev,
+        logo_url: response.data.logo_url
+      }));
+
+      toast.success('Logo uploaded successfully');
+      await refreshTheme();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to upload logo');
+      console.error('Upload logo error:', error);
+    } finally {
+      setUploadingLogo(false);
+      // Reset the input
+      event.target.value = '';
+    }
+  };
+
+  const handleFaviconUpload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    // Validate file type
+    const allowedTypes = ['image/x-icon', 'image/vnd.microsoft.icon', 'image/png', 'image/svg+xml'];
+    if (!allowedTypes.includes(file.type)) {
+      toast.error('Invalid file type. Please upload ICO, PNG, or SVG.');
+      return;
+    }
+
+    // Validate file size (1MB)
+    if (file.size > 1 * 1024 * 1024) {
+      toast.error('File too large. Maximum size is 1MB.');
+      return;
+    }
+
+    try {
+      setUploadingFavicon(true);
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const response = await api.post('/admin/settings/theme/favicon', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' }
+      });
+
+      setThemeData(prev => ({
+        ...prev,
+        favicon_url: response.data.favicon_url
+      }));
+
+      toast.success('Favicon uploaded successfully');
+      await refreshTheme();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to upload favicon');
+      console.error('Upload favicon error:', error);
+    } finally {
+      setUploadingFavicon(false);
+      // Reset the input
+      event.target.value = '';
+    }
+  };
+
+  const handleDeleteLogo = async () => {
+    try {
+      await api.delete('/admin/settings/theme/logo');
+
+      setThemeData(prev => ({
+        ...prev,
+        logo_url: null
+      }));
+
+      toast.success('Logo deleted successfully');
+      await refreshTheme();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to delete logo');
+    }
+  };
+
+  const handleDeleteFavicon = async () => {
+    try {
+      await api.delete('/admin/settings/theme/favicon');
+
+      setThemeData(prev => ({
+        ...prev,
+        favicon_url: null
+      }));
+
+      toast.success('Favicon deleted successfully');
+      await refreshTheme();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to delete favicon');
+    }
+  };
+
+  const handleResetToDefaults = async () => {
+    try {
+      await api.post('/admin/settings/theme/reset');
+
+      toast.success('Theme reset to defaults');
+      setShowResetDialog(false);
+
+      await refreshTheme();
+      await fetchThemeSettings();
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to reset theme');
+    }
+  };
+
+  // Convert HSL string to approximate hex for color picker
+  const hslToHex = (hslString) => {
+    if (!hslString) return '#000000';
+
+    const parts = hslString.split(' ');
+    if (parts.length !== 3) return '#000000';
+
+    const h = parseFloat(parts[0]) / 360;
+    const s = parseFloat(parts[1]) / 100;
+    const l = parseFloat(parts[2]) / 100;
+
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    };
+
+    let r, g, b;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1/3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+
+    const toHex = (x) => {
+      const hex = Math.round(x * 255).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  };
+
+  // Convert hex to HSL string
+  const hexToHsl = (hex) => {
+    if (!hex) return '0 0% 0%';
+
+    // Remove # if present
+    hex = hex.replace('#', '');
+
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+        case g: h = ((b - r) / d + 2) / 6; break;
+        case b: h = ((r - g) / d + 4) / 6; break;
+        default: h = 0;
+      }
+    }
+
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  };
+
+  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>
+    );
+  }
+
+  const colorFields = [
+    { key: 'primary', label: 'Primary Color', description: 'Main brand color used for buttons and highlights' },
+    { key: 'primary_foreground', label: 'Primary Foreground', description: 'Text color on primary backgrounds' },
+    { key: 'accent', label: 'Accent Color', description: 'Secondary highlight color' },
+    { key: 'brand_purple', label: 'Brand Purple', description: 'Purple brand color' },
+    { key: 'brand_orange', label: 'Brand Orange', description: 'Orange brand color' },
+    { key: 'brand_lavender', label: 'Brand Lavender', description: 'Lavender brand color' }
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Action Buttons */}
+      <div className="flex items-center justify-between">
+        <p className="text-muted-foreground">
+          Customize the appearance of your membership site
+        </p>
+        <div className="flex items-center gap-2">
+          {isSuperAdmin && (
+            <Button
+              variant="outline"
+              onClick={() => setShowResetDialog(true)}
+              className="text-destructive hover:text-destructive"
+            >
+              <RotateCcw className="h-4 w-4 mr-2" />
+              Reset to Defaults
+            </Button>
+          )}
+          <Button onClick={handleSaveSettings} disabled={saving}>
+            <Save className="h-4 w-4 mr-2" />
+            {saving ? 'Saving...' : 'Save Changes'}
+          </Button>
+        </div>
+      </div>
+
+      {/* Metadata Banner */}
+      {!metadata.is_default && metadata.updated_at && (
+        <div className="bg-muted/50 border rounded-lg px-4 py-3 text-sm text-muted-foreground">
+          Last updated {new Date(metadata.updated_at).toLocaleDateString()}
+          {metadata.updated_by && ` by ${metadata.updated_by}`}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* Branding Section */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Globe className="h-5 w-5" />
+              Branding
+            </CardTitle>
+            <CardDescription>
+              Configure your site name and brand identity
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Site Name */}
+            <div className="space-y-2">
+              <Label htmlFor="site_name">Site Name</Label>
+              <Input
+                id="site_name"
+                value={themeData.site_name}
+                onChange={(e) => handleInputChange('site_name', e.target.value)}
+                placeholder="LOAF - Lesbians Over Age Fifty"
+                maxLength={200}
+              />
+              <p className="text-xs text-muted-foreground">
+                Displayed in the browser title and navigation
+              </p>
+            </div>
+
+            {/* Short Name */}
+            <div className="space-y-2">
+              <Label htmlFor="site_short_name">Short Name</Label>
+              <Input
+                id="site_short_name"
+                value={themeData.site_short_name}
+                onChange={(e) => handleInputChange('site_short_name', e.target.value)}
+                placeholder="LOAF"
+                maxLength={50}
+              />
+              <p className="text-xs text-muted-foreground">
+                Used for PWA home screen icon label
+              </p>
+            </div>
+
+            {/* Site Description */}
+            <div className="space-y-2">
+              <Label htmlFor="site_description">Site Description</Label>
+              <Textarea
+                id="site_description"
+                value={themeData.site_description}
+                onChange={(e) => handleInputChange('site_description', e.target.value)}
+                placeholder="A community organization for lesbians over age fifty..."
+                maxLength={500}
+                rows={3}
+              />
+              <p className="text-xs text-muted-foreground">
+                Used for SEO meta description tag ({themeData.site_description?.length || 0}/500)
+              </p>
+            </div>
+
+            {/* Meta Theme Color */}
+            <div className="space-y-2">
+              <Label htmlFor="meta_theme_color">Browser Theme Color</Label>
+              <div className="flex items-center gap-2">
+                <input
+                  type="color"
+                  id="meta_theme_color"
+                  value={themeData.meta_theme_color}
+                  onChange={(e) => handleInputChange('meta_theme_color', e.target.value)}
+                  className="h-10 w-14 rounded border cursor-pointer"
+                />
+                <Input
+                  value={themeData.meta_theme_color}
+                  onChange={(e) => handleInputChange('meta_theme_color', e.target.value)}
+                  placeholder="#664fa3"
+                  className="flex-1"
+                  maxLength={7}
+                />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Color shown in mobile browser address bar (PWA)
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Logo & Favicon Section */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Image className="h-5 w-5" />
+              Logo & Favicon
+            </CardTitle>
+            <CardDescription>
+              Upload your organization's logo and favicon
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* Logo Upload */}
+            <div className="space-y-3">
+              <Label>Logo</Label>
+              <div className="flex items-start gap-4">
+                <div className="w-24 h-24 bg-muted rounded-lg flex items-center justify-center overflow-hidden border">
+                  {themeData.logo_url ? (
+                    <img
+                      src={themeData.logo_url}
+                      alt="Logo"
+                      className="w-full h-full object-contain"
+                    />
+                  ) : (
+                    <Image className="h-10 w-10 text-muted-foreground" />
+                  )}
+                </div>
+                <div className="flex-1 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <label className="cursor-pointer">
+                      <input
+                        type="file"
+                        accept="image/png,image/jpeg,image/webp,image/svg+xml"
+                        onChange={handleLogoUpload}
+                        className="hidden"
+                        disabled={uploadingLogo}
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={uploadingLogo}
+                        asChild
+                      >
+                        <span>
+                          <Upload className="h-4 w-4 mr-2" />
+                          {uploadingLogo ? 'Uploading...' : 'Upload'}
+                        </span>
+                      </Button>
+                    </label>
+                    {themeData.logo_url && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleDeleteLogo}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    PNG, JPEG, WebP, or SVG. Max 5MB.
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Favicon Upload */}
+            <div className="space-y-3">
+              <Label>Favicon</Label>
+              <div className="flex items-start gap-4">
+                <div className="w-16 h-16 bg-muted rounded-lg flex items-center justify-center overflow-hidden border">
+                  {themeData.favicon_url ? (
+                    <img
+                      src={themeData.favicon_url}
+                      alt="Favicon"
+                      className="w-8 h-8 object-contain"
+                    />
+                  ) : (
+                    <Globe className="h-6 w-6 text-muted-foreground" />
+                  )}
+                </div>
+                <div className="flex-1 space-y-2">
+                  <div className="flex items-center gap-2">
+                    <label className="cursor-pointer">
+                      <input
+                        type="file"
+                        accept="image/x-icon,image/vnd.microsoft.icon,image/png,image/svg+xml"
+                        onChange={handleFaviconUpload}
+                        className="hidden"
+                        disabled={uploadingFavicon}
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        disabled={uploadingFavicon}
+                        asChild
+                      >
+                        <span>
+                          <Upload className="h-4 w-4 mr-2" />
+                          {uploadingFavicon ? 'Uploading...' : 'Upload'}
+                        </span>
+                      </Button>
+                    </label>
+                    {themeData.favicon_url && (
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={handleDeleteFavicon}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    ICO, PNG, or SVG. Max 1MB.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Color Scheme Section */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Palette className="h-5 w-5" />
+              Color Scheme
+            </CardTitle>
+            <CardDescription>
+              Customize the color palette used throughout the site. Colors are stored as HSL values.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+              {colorFields.map((field) => (
+                <div key={field.key} className="space-y-2">
+                  <Label htmlFor={`color_${field.key}`}>{field.label}</Label>
+                  <div className="flex items-center gap-2">
+                    <input
+                      type="color"
+                      id={`color_${field.key}`}
+                      value={hslToHex(themeData.colors[field.key])}
+                      onChange={(e) => handleColorChange(field.key, hexToHsl(e.target.value))}
+                      className="h-10 w-14 rounded border cursor-pointer"
+                    />
+                    <Input
+                      value={themeData.colors[field.key]}
+                      onChange={(e) => handleColorChange(field.key, e.target.value)}
+                      placeholder="280 47% 27%"
+                      className="flex-1 font-mono text-sm"
+                    />
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    {field.description}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Preview Section */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle>Preview</CardTitle>
+            <CardDescription>
+              See how your theme changes will look
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div
+              className="rounded-lg border p-6 space-y-4"
+              style={{
+                '--preview-primary': themeData.colors.primary,
+                '--preview-accent': themeData.colors.accent,
+                '--preview-brand-purple': themeData.colors.brand_purple,
+                '--preview-brand-orange': themeData.colors.brand_orange,
+                '--preview-brand-lavender': themeData.colors.brand_lavender,
+              }}
+            >
+              <div className="flex items-center gap-4">
+                {themeData.logo_url ? (
+                  <img src={themeData.logo_url} alt="Preview Logo" className="h-16 w-16 object-contain" />
+                ) : (
+                  <div className="h-16 w-16 bg-muted rounded-lg flex items-center justify-center">
+                    <Image className="h-8 w-8 text-muted-foreground" />
+                  </div>
+                )}
+                <div>
+                  <h3 className="text-xl font-bold">{themeData.site_name || 'Site Name'}</h3>
+                  <p className="text-sm text-muted-foreground">{themeData.site_short_name || 'Short Name'}</p>
+                  {themeData.site_description && (
+                    <p className="text-xs text-muted-foreground mt-1 max-w-md">{themeData.site_description}</p>
+                  )}
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-3 pt-4">
+                <div
+                  className="px-4 py-2 rounded-lg text-white font-medium"
+                  style={{ backgroundColor: `hsl(${themeData.colors.primary})` }}
+                >
+                  Primary
+                </div>
+                <div
+                  className="px-4 py-2 rounded-lg text-white font-medium"
+                  style={{ backgroundColor: `hsl(${themeData.colors.accent})` }}
+                >
+                  Accent
+                </div>
+                <div
+                  className="px-4 py-2 rounded-lg text-white font-medium"
+                  style={{ backgroundColor: `hsl(${themeData.colors.brand_purple})` }}
+                >
+                  Brand Purple
+                </div>
+                <div
+                  className="px-4 py-2 rounded-lg font-medium"
+                  style={{ backgroundColor: `hsl(${themeData.colors.brand_orange})` }}
+                >
+                  Brand Orange
+                </div>
+                <div
+                  className="px-4 py-2 rounded-lg font-medium"
+                  style={{ backgroundColor: `hsl(${themeData.colors.brand_lavender})` }}
+                >
+                  Brand Lavender
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 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 Theme to Defaults?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This will delete all custom theme settings including uploaded logo and favicon.
+              The site will revert to the default LOAF theme. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleResetToDefaults}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Reset to Defaults
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+};
+
+export default AdminTheme;

src/pages/admin/AdminUserView.js

@@ -10,6 +10,7 @@ import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera,
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
+import StatusBadge from '../../components/StatusBadge';
 import TransactionHistory from '../../components/TransactionHistory';
 
 const AdminUserView = () => {
@@ -279,7 +280,7 @@ const AdminUserView = () => {
   if (loading) return <div>Loading...</div>;
   if (!user) return null;
 
-  const joinedDate = user.member_since || user.created_at;
+  const joinedDate = user.created_at;
   const memberSinceBaseline = formatDateInputValue(user.member_since);
   const memberSinceHasChanges = memberSince !== memberSinceBaseline;
 
@@ -313,8 +314,9 @@ const AdminUserView = () => {
                 {user.first_name} {user.last_name}
               </h1>
               {/* Status & Role Badges */}
-              <Badge>{user.status}</Badge>
+              <StatusBadge status={user.status} />
-              <Badge>{user.role}</Badge>
+              <StatusBadge status={user.role} />
+             
             </div>
 
             {/* Contact Info */}
@@ -333,7 +335,7 @@ const AdminUserView = () => {
               </div>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
-                <span>Joined {formatDateDisplayValue(joinedDate)}</span>
+                <span>Registered: {formatDateDisplayValue(joinedDate)}</span>
               </div>
             </div>
           </div>

src/pages/admin/AdminValidations.js

@@ -3,7 +3,6 @@ import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
-import { Badge } from '../../components/ui/badge';
 import { Input } from '../../components/ui/input';
 import {
   Select,
@@ -34,6 +33,7 @@ import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react'
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
+import StatusBadge from '@/components/StatusBadge';
 
 const AdminValidations = () => {
   const { hasPermission } = useAuth();
@@ -235,22 +235,7 @@ const AdminValidations = () => {
     }
   };
 
-  const getStatusBadge = (status) => {
-    const config = {
-      pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
-      pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
-      payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
-    };
  
-    const statusConfig = config[status];
-    return (
-      <Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
-        {statusConfig.label}
-      </Badge>
-    );
-  };
 
   const handleSort = (column) => {
     if (sortBy === column) {
@@ -401,7 +386,7 @@ const AdminValidations = () => {
                     </TableCell>
                     <TableCell>{user.email}</TableCell>
                     <TableCell>{user.phone}</TableCell>
-                    <TableCell>{getStatusBadge(user.status)}</TableCell>
+                    <TableCell><StatusBadge status={user.status} /></TableCell>
                     <TableCell>
                       {new Date(user.created_at).toLocaleDateString()}
                     </TableCell>

src/pages/members/Bylaws.js

@@ -5,20 +5,34 @@ import MemberFooter from '../../components/MemberFooter';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
 import { toast } from 'sonner';
-import { Scale, ExternalLink, History, Check } from 'lucide-react';
+import { Scale, ExternalLink, History, Check, Search, Calendar } from 'lucide-react';
 
 export default function Bylaws() {
   const [currentBylaws, setCurrentBylaws] = useState(null);
   const [history, setHistory] = useState([]);
+  const [years, setYears] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
   const [showHistory, setShowHistory] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     fetchCurrentBylaws();
+    fetchYears();
     fetchHistory();
   }, []);
 
+  const fetchYears = async () => {
+    try {
+      const response = await api.get('/bylaws/years');
+      setYears(response.data);
+    } catch (error) {
+      console.error('Failed to load years');
+    }
+  };
+
   const fetchCurrentBylaws = async () => {
     try {
       const response = await api.get('/bylaws/current');
@@ -32,15 +46,46 @@ export default function Bylaws() {
     }
   };
 
-  const fetchHistory = async () => {
+  const fetchHistory = async (year = null) => {
     try {
-      const response = await api.get('/bylaws/history');
+      const url = year ? `/bylaws/history?year=${year}` : '/bylaws/history';
+      const response = await api.get(url);
       setHistory(response.data);
     } catch (error) {
       console.error('Failed to load bylaws history');
     }
   };
 
+  const handleYearFilter = (year) => {
+    setSelectedYear(year);
+    fetchHistory(year);
+  };
+
+  const clearFilter = () => {
+    setSelectedYear(null);
+    fetchHistory();
+  };
+
+  const filteredHistory = history.filter(bylaws =>
+    bylaws.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    (bylaws.version && bylaws.version.toLowerCase().includes(searchTerm.toLowerCase()))
+  );
+
+  const groupByYear = (items) => {
+    const grouped = {};
+    items.forEach(item => {
+      const year = new Date(item.effective_date).getFullYear();
+      if (!grouped[year]) {
+        grouped[year] = [];
+      }
+      grouped[year].push(item);
+    });
+    return grouped;
+  };
+
+  const groupedHistory = groupByYear(filteredHistory.filter(b => !b.is_current));
+  const sortedYears = Object.keys(groupedHistory).sort((a, b) => b - a);
+
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleDateString('en-US', {
       year: 'numeric',
@@ -75,6 +120,44 @@ export default function Bylaws() {
           <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Review the official governing bylaws and policies of the LOAF community.
           </p>
+
+          {/* Filters */}
+          <div className="flex gap-4 flex-wrap items-center">
+            {/* Search */}
+            <div className="relative flex-1 min-w-[300px]">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
+              <Input
+                type="text"
+                placeholder="Search bylaws..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
+              />
+            </div>
+
+            {/* Year Filter */}
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                onClick={clearFilter}
+                variant={selectedYear === null ? "default" : "outline"}
+                size="sm"
+                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
+              >
+                All Years
+              </Button>
+              {years.map(year => (
+                <Button
+                  key={year}
+                  onClick={() => handleYearFilter(year)}
+                  variant={selectedYear === year ? "default" : "outline"}
+                  size="sm"
+                  className={selectedYear === year ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
+                >
+                  {year}
+                </Button>
+              ))}
+            </div>
+          </div>
         </div>
 
         {/* Current Bylaws */}
@@ -124,7 +207,7 @@ export default function Bylaws() {
         )}
 
         {/* Version History Toggle */}
-        {history.length > 1 && (
+        {filteredHistory.filter(b => !b.is_current).length > 0 && (
           <div className="mb-6">
             <Button
               onClick={() => setShowHistory(!showHistory)}
@@ -132,18 +215,22 @@ export default function Bylaws() {
               className="w-full border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
             >
               <History className="h-4 w-4" />
-              {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
+              {showHistory ? 'Hide' : 'View'} Version History ({filteredHistory.filter(b => !b.is_current).length} previous {filteredHistory.filter(b => !b.is_current).length === 1 ? 'version' : 'versions'})
             </Button>
           </div>
         )}
 
         {/* Version History */}
-        {showHistory && history.length > 1 && (
+        {showHistory && filteredHistory.filter(b => !b.is_current).length > 0 && (
-          <div className="space-y-4">
+          <div className="space-y-6">
-            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            {sortedYears.map(year => (
-              Previous Versions
+              <div key={year}>
+                <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Calendar className="h-5 w-5" />
+                  {year}
                 </h3>
-            {history.filter(b => !b.is_current).map(bylaws => (
+                <div className="space-y-4">
+                  {groupedHistory[year].map(bylaws => (
                     <Card key={bylaws.id} className="p-6 bg-[var(--lavender-600)] rounded-xl border border-[var(--neutral-800)]">
                       <div className="flex items-center justify-between">
                         <div>
@@ -169,6 +256,9 @@ export default function Bylaws() {
                     </Card>
                   ))}
                 </div>
+              </div>
+            ))}
+          </div>
         )}
 
         {/* Information Card */}

src/pages/members/EventGallery.js

@@ -285,7 +285,7 @@ const EventGallery = () => {
 
       {/* Lightbox Modal */}
       <Dialog open={selectedImageIndex !== null} onOpenChange={closeLightbox}>
-        <DialogContent className="max-w-7xl w-full h-[90vh] p-0 bg-black border-0">
+        <DialogContent className="max-w-7xl w-full h-[90vh] p-0 bg-black border-0 overflow-y-auto max-h-[90vh]">
           {selectedImageIndex !== null && galleryImages[selectedImageIndex] && (
             <div className="relative w-full h-full flex items-center justify-center">
               {/* Close Button */}

src/pages/members/Financials.js

@@ -5,20 +5,36 @@ import MemberFooter from '../../components/MemberFooter';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
+import { Input } from '../../components/ui/input';
 import { toast } from 'sonner';
-import { DollarSign, ExternalLink, TrendingUp } from 'lucide-react';
+import { DollarSign, ExternalLink, TrendingUp, Search, Calendar } from 'lucide-react';
 
 export default function Financials() {
   const [reports, setReports] = useState([]);
+  const [years, setYears] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(null);
+  const [searchTerm, setSearchTerm] = useState('');
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    fetchYears();
     fetchReports();
   }, []);
 
-  const fetchReports = async () => {
+  const fetchYears = async () => {
     try {
-      const response = await api.get('/financials');
+      const response = await api.get('/financials/years');
+      setYears(response.data);
+    } catch (error) {
+      console.error('Failed to load years');
+    }
+  };
+
+  const fetchReports = async (year = null) => {
+    try {
+      setLoading(true);
+      const url = year ? `/financials?year=${year}` : '/financials';
+      const response = await api.get(url);
       setReports(response.data);
     } catch (error) {
       toast.error('Failed to load financial reports');
@@ -27,6 +43,36 @@ export default function Financials() {
     }
   };
 
+  const handleYearFilter = (year) => {
+    setSelectedYear(year);
+    fetchReports(year);
+  };
+
+  const clearFilter = () => {
+    setSelectedYear(null);
+    fetchReports();
+  };
+
+  const filteredReports = reports.filter(report =>
+    report.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    report.year.toString().includes(searchTerm)
+  );
+
+  const groupByYear = (items) => {
+    const grouped = {};
+    items.forEach(item => {
+      const year = item.year;
+      if (!grouped[year]) {
+        grouped[year] = [];
+      }
+      grouped[year].push(item);
+    });
+    return grouped;
+  };
+
+  const groupedReports = groupByYear(filteredReports);
+  const sortedYears = Object.keys(groupedReports).sort((a, b) => b - a);
+
   if (loading) {
     return (
       <div className="min-h-screen bg-background">
@@ -53,28 +99,69 @@ export default function Financials() {
           <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Access annual financial reports and stay informed about LOAF's fiscal responsibility.
           </p>
+
+          {/* Filters */}
+          <div className="flex gap-4 flex-wrap items-center">
+            {/* Search */}
+            <div className="relative flex-1 min-w-[300px]">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
+              <Input
+                type="text"
+                placeholder="Search financial reports..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
+              />
+            </div>
+
+            {/* Year Filter */}
+            <div className="flex gap-2 flex-wrap">
+              <Button
+                onClick={clearFilter}
+                variant={selectedYear === null ? "default" : "outline"}
+                size="sm"
+                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
+              >
+                All Years
+              </Button>
+              {years.map(year => (
+                <Button
+                  key={year}
+                  onClick={() => handleYearFilter(year)}
+                  variant={selectedYear === year ? "default" : "outline"}
+                  size="sm"
+                  className={selectedYear === year ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
+                >
+                  {year}
+                </Button>
+              ))}
+            </div>
+          </div>
         </div>
 
         {/* Reports List */}
-        {reports.length === 0 ? (
+        {filteredReports.length === 0 ? (
           <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
             <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
             <p className="text-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              No financial reports available yet
+              No financial reports found
             </p>
           </Card>
         ) : (
+          <div className="space-y-8">
+            {sortedYears.map(year => (
+              <div key={year}>
+                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Calendar className="h-6 w-6" />
+                  {year}
+                </h2>
                 <div className="space-y-6">
-            {reports.map(report => (
+                  {groupedReports[year].map(report => (
                     <Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                       <div className="flex items-center gap-6">
                         {/* Year Badge */}
-                  <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
+                        <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl self-start">
-                    <DollarSign className="h-8 w-8 mx-auto mb-2" />
+                <DollarSign className="h-8 w-8 text-white" />
-                    <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      {report.year}
-                    </div>
-                    <div className="text-sm opacity-90">Fiscal Year</div>
               </div>
 
                         {/* Report Details */}
@@ -99,10 +186,13 @@ export default function Financials() {
                     </Card>
                   ))}
                 </div>
+              </div>
+            ))}
+          </div>
         )}
 
         {/* Transparency Note */}
-        {reports.length > 0 && (
+        {filteredReports.length > 0 && (
           <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
             <div className="flex items-start gap-3">
               <TrendingUp className="h-5 w-5 text-brand-purple  mt-1" />

src/pages/members/MembersDirectory.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import api from '../../utils/api';
 import Navbar from '../../components/Navbar';
 import MemberFooter from '../../components/MemberFooter';
@@ -15,62 +15,51 @@ import {
 } from '../../components/ui/dialog';
 import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
+import StatusBadge from '@/components/StatusBadge';
+import MemberCard from '../../components/MemberCard';
+import useMembers from '../../hooks/use-members';
 
 const MembersDirectory = () => {
-  const [members, setMembers] = useState([]);
-  const [filteredMembers, setFilteredMembers] = useState([]);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [loading, setLoading] = useState(true);
   const [selectedMember, setSelectedMember] = useState(null);
   const [profileDialogOpen, setProfileDialogOpen] = useState(false);
   const { toast } = useToast();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 12;
-
+  const allowedRoles = useMemo(() => [], []);
-  useEffect(() => {
+  const searchAccessor = useCallback(
-    fetchMembers();
+    (member) => [
-  }, []);
+      `${member.first_name} ${member.last_name}`,
-
+      member.directory_bio || ''
-  useEffect(() => {
+    ],
-    filterMembers();
+    []
-  }, [searchQuery, members]);
+  );
-
+  const handleFetchError = useCallback(() => {
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [searchQuery, members]);
-
-  const fetchMembers = async () => {
-    try {
-      const response = await api.get('/members/directory');
-      setMembers(response.data);
-      setFilteredMembers(response.data);
-    } catch (error) {
-      console.error('Failed to fetch members:', error);
     toast({
       title: "Error",
       description: "Failed to load members directory. Please try again.",
       variant: "destructive"
     });
-    } finally {
+  }, [toast]);
-      setLoading(false);
-    }
-  };
 
-  const filterMembers = () => {
+  const {
-    if (!searchQuery.trim()) {
+    users: members,
-      setFilteredMembers(members);
+    filteredUsers: filteredMembers,
-      return;
+    loading,
-    }
+    searchQuery,
-
+    setSearchQuery,
-    const query = searchQuery.toLowerCase();
+  } = useMembers({
-    const filtered = members.filter(member => {
+    endpoint: '/members/directory',
-      const fullName = `${member.first_name} ${member.last_name}`.toLowerCase();
+    initialFilter: 'active',
-      const bio = (member.directory_bio || '').toLowerCase();
+    filterKey: 'status',
-      return fullName.includes(query) || bio.includes(query);
+    allowedRoles,
+    searchAccessor,
+    fetchErrorMessage: 'Failed to load members directory. Please try again.',
+    onFetchError: handleFetchError
   });
 
-    setFilteredMembers(filtered);
+  useEffect(() => {
-  };
+    setCurrentPage(1);
+  }, [searchQuery, members]);
 
   const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
 
@@ -80,9 +69,7 @@ const MembersDirectory = () => {
 
   const totalMembers = members.length;
 
-  const getInitials = (firstName, lastName) => {
+
-    return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-  };
 
   const getSocialMediaLink = (url) => {
     if (!url) return null;
@@ -118,168 +105,6 @@ const MembersDirectory = () => {
         : <div className=' border-2 w-full border-brand-purple  mb-24' />
     )
   }
-  const MemberCard = ({ member }) => {
-    const joinedDate = member.member_since || member.created_at;
-    return (
-      <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
-      {/* Profile Photo */}
-      <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 */}
-      {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 */}
-      {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 */}
-      {joinedDate && (
-        <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(joinedDate).toLocaleDateString('en-US', {
-              month: 'long',
-              year: 'numeric'
-            })}
-          </span>
-        </div>
-      )}
-
-      {/* Contact Information */}
-      <div className="space-y-3 mb-4">
-        {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>
-        )}
-
-        {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>
-        )}
-
-        {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 */}
-      {(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={() => handleViewProfile(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>
-    );
-  };
 
   return (
     <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
@@ -296,7 +121,7 @@ const MembersDirectory = () => {
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current members in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
             </p>
           </div>
 
@@ -333,7 +158,7 @@ const MembersDirectory = () => {
         ) : filteredMembers.length > 0 ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {paginatedMembers.map((member) => (
-              <MemberCard key={member.id} member={member} />
+              <MemberCard key={member.id} member={member} onViewProfile={handleViewProfile} />
             ))}
           </div>
         ) : (
@@ -354,7 +179,7 @@ const MembersDirectory = () => {
 
         {/* Border Decoration */}
         <Border yaxis="true" />
-
+        {/* todo: use badge to display if member */}
         {/* Info Card */}
         {!loading && members.length > 0 && (
           <Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
@@ -377,15 +202,15 @@ const MembersDirectory = () => {
           </Card>
         )}
       </div>
-
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
         <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>
-                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)] flex items-center justify-between mr-8" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedMember.first_name} {selectedMember.last_name}
+                  <StatusBadge status={selectedMember.membership_status || selectedMember.status} />
                 </DialogTitle>
                 {selectedMember.directory_partner_name && (
                   <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -563,8 +388,6 @@ const MembersDirectory = () => {
         </DialogContent>
       </Dialog>
 
-
-
       {/* Pagination */}
       {!loading && filteredMembers.length > 0 && (
         <div className="mt-10 flex flex-col items-center gap-4 pb-12">

src/pages/members/NewsletterArchive.js

@@ -167,8 +167,8 @@ export default function NewsletterArchive() {
                   {groupedNewsletters[year].map(newsletter => (
                     <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                       <div className="flex items-start gap-4">
-                        <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg flex-shrink-0">
+                       <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl">
-                          <FileText className="h-6 w-6 text-brand-purple " />
+                <FileText className="h-8 w-8 text-white" />
               </div>
                         <div className="flex-1 min-w-0">
                           <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>

src/styles/App.css

@@ -54,3 +54,4 @@ h6 {
     #ffffff 100%
   );
 }
+

src/utils/member-tiers.js

@@ -0,0 +1,23 @@
+// src/utils/member-tiers.js
+import { differenceInDays } from 'date-fns';
+import { DEFAULT_MEMBER_TIERS } from '../config/memberTiers';
+
+export const getTenureDays = (memberSince) => {
+    if (!memberSince) return null;
+    const since = new Date(memberSince);
+    if (Number.isNaN(since.getTime())) return null;
+    return Math.max(0, differenceInDays(new Date(), since));
+};
+
+export const getTierForMember = (memberSince, tiers = DEFAULT_MEMBER_TIERS) => {
+    const days = getTenureDays(memberSince);
+    if (days == null) return tiers[0];
+
+    const match = tiers.find(
+        (tier) =>
+            days >= tier.minDays &&
+            (tier.maxDays == null || days <= tier.maxDays)
+    );
+
+    return match || tiers[0];
+};

tailwind.config.js

@@ -101,6 +101,6 @@ module.exports = {
 
 	plugins: [
 		require("tailwindcss-animate"),
-		require("@tailwindcss/typography")
+		require("@tailwindcss/typography"),
 	],
 };

yarn.lock

@@ -2552,6 +2552,11 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz#767cf8e5d528a5d90c9740ca66eb079f5e87d423"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
 "@tailwindcss/typography@^0.5.19":
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.19.tgz#ecb734af2569681eb40932f09f60c2848b909456"