Merge pull request 'dev' (#19) from dev into loaf-prod

Reviewed-on: #19

public/health.json

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

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Toaster } from './components/ui/sonner';
+import IdleSessionWarning from './components/IdleSessionWarning';
 import Landing from './pages/Landing';
 import Register from './pages/Register';
 import Login from './pages/Login';
@@ -21,6 +22,7 @@ import AdminUserView from './pages/admin/AdminUserView';
 import AdminStaff from './pages/admin/AdminStaff';
 import AdminMembers from './pages/admin/AdminMembers';
 import AdminPermissions from './pages/admin/AdminPermissions';
+import AdminSettings from './pages/admin/AdminSettings';
 import AdminRoles from './pages/admin/AdminRoles';
 import AdminEvents from './pages/admin/AdminEvents';
 import AdminEventAttendance from './pages/admin/AdminEventAttendance';
@@ -289,11 +291,19 @@ function App() {
               </AdminLayout>
             </PrivateRoute>
           } />
+          <Route path="/admin/settings" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminSettings />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
 
           {/* 404 - Catch all undefined routes */}
           <Route path="*" element={<NotFound />} />
         </Routes>
         <Toaster position="top-right" />
+        <IdleSessionWarning />
       </BrowserRouter>
     </AuthProvider>
   );

src/components/AddToCalendarButton.js

@@ -117,7 +117,7 @@ export default function AddToCalendarButton({
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
-        <Button variant={variant} size={size} className="gap-2">
+        <Button variant={variant} size={size} className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender">
           <Calendar className="h-4 w-4" />
           Add to Calendar
           <ChevronDown className="h-4 w-4" />

src/components/AdminSidebar.js

@@ -175,17 +175,28 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/permissions',
       disabled: false,
       superadminOnly: true
+    },
+    {
+      name: 'Settings',
+      icon: Settings,
+      path: '/admin/settings',
+      disabled: false,
+      superadminOnly: true
     }
   ];
 
   // Filter nav items based on user role
   const filteredNavItems = navItems.filter(item => {
     if (item.superadminOnly && user?.role !== 'superadmin') {
+      console.log('Filtering out superadmin-only item:', item.name, 'User role:', user?.role);
       return false;
     }
     return true;
   });
 
+  // Debug: Log filtered items count
+  console.log('Total nav items:', navItems.length, 'Filtered items:', filteredNavItems.length, 'User role:', user?.role);
+
   const isActive = (path) => {
     if (path === '/admin') {
       return location.pathname === '/admin';
@@ -213,7 +224,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             ${item.disabled
               ? 'opacity-50 cursor-not-allowed text-brand-purple '
               : active
-                ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]'
+                ? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
                 : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20'
             }
           `}
@@ -243,7 +254,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
 
           {/* Badge when collapsed */}
           {!isOpen && item.badge > 0 && !item.disabled && (
-            <div className="absolute -top-1 -right-1 bg-accent foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+            <div className="absolute -top-1 -right-1 bg-accent text-white foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
               {item.badge}
             </div>
           )}
@@ -286,9 +297,6 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                 <h2 className="text-xl font-semibold text-primary dark:text-brand-light-lavender " style={{ fontFamily: "'Inter', sans-serif" }}>
                   Admin
                 </h2>
-                <p className="text-xs text-muted-foreground group-hover:text-accent transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  View Public Site
-                </p>
               </div>
             )}
           </Link>
@@ -367,12 +375,22 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
           </div>
 
-          {/* Permissions - Superadmin only (no header) */}
+          {/* SYSTEM Section - Superadmin only */}
           {user?.role === 'superadmin' && (
-            <div className="mt-6">
-              {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+            <>
+              {isOpen && (
+                <div className="px-4 py-2 mt-6">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    System
+                  </h3>
                 </div>
               )}
+              <div className="space-y-1">
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Settings'))}
+              </div>
+            </>
+          )}
         </nav>
 
         {/* User Section */}

src/components/AttendanceDialog.js

@@ -55,7 +55,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}

src/components/ChangeRoleDialog.js

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

src/components/CreateMemberDialog.js

@@ -31,6 +31,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -84,8 +85,8 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
       if (payload.date_of_birth === '') {
         delete payload.date_of_birth;
       }
-      if (payload.member_since === '') {
-        delete payload.member_since;
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
       }
 
       await api.post('/admin/users/create', payload);
@@ -119,7 +120,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />

src/components/CreateStaffDialog.js

@@ -22,10 +22,12 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     first_name: '',
     last_name: '',
     phone: '',
+    member_since: '',
     role: 'admin'
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -74,7 +76,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     setLoading(true);
 
     try {
-      await api.post('/admin/users/create', formData);
+      const payload = { ...formData };
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
+      }
+      await api.post('/admin/users/create', payload);
       toast.success('Staff member created successfully');
 
       // Reset form
@@ -84,6 +90,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
         first_name: '',
         last_name: '',
         phone: '',
+        member_since: '',
         role: 'admin'
       });
 
@@ -200,6 +207,20 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               )}
             </div>
 
+            {/* Member Since */}
+            <div className="grid gap-2">
+              <Label htmlFor="member_since" className="text-[var(--purple-ink)]">
+                Member Since
+              </Label>
+              <Input
+                id="member_since"
+                type="date"
+                value={formData.member_since}
+                onChange={(e) => handleChange('member_since', e.target.value)}
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              />
+            </div>
+
             {/* Role */}
             <div className="grid gap-2">
               <Label htmlFor="role" className="text-[var(--purple-ink)]">

src/components/IdleSessionWarning.js

@@ -0,0 +1,232 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import logger from '../utils/logger';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+
+/**
+ * IdleSessionWarning Component
+ *
+ * Monitors user activity and warns before session expiration
+ * - Warns 1 minute before JWT expiry (at 29 minutes if JWT is 30 min)
+ * - Auto-logout on expiration
+ * - "Stay Logged In" extends session
+ */
+const IdleSessionWarning = () => {
+  const { user, logout, refreshUser } = useAuth();
+  const navigate = useNavigate();
+
+  // Configuration
+  const SESSION_DURATION = 30 * 60 * 1000; // 30 minutes in milliseconds
+  const WARNING_BEFORE_EXPIRY = 1 * 60 * 1000; // Warn 1 minute before expiry
+  const WARNING_TIME = SESSION_DURATION - WARNING_BEFORE_EXPIRY; // 29 minutes
+
+  const [showWarning, setShowWarning] = useState(false);
+  const [timeRemaining, setTimeRemaining] = useState(60); // seconds
+  const [isExtending, setIsExtending] = useState(false);
+
+  const activityTimeoutRef = useRef(null);
+  const warningTimeoutRef = useRef(null);
+  const countdownIntervalRef = useRef(null);
+  const lastActivityRef = useRef(Date.now());
+
+  // Reset activity timer
+  const resetActivityTimer = useCallback(() => {
+    lastActivityRef.current = Date.now();
+
+    // Clear existing timers
+    if (activityTimeoutRef.current) {
+      clearTimeout(activityTimeoutRef.current);
+    }
+    if (warningTimeoutRef.current) {
+      clearTimeout(warningTimeoutRef.current);
+    }
+    if (countdownIntervalRef.current) {
+      clearInterval(countdownIntervalRef.current);
+    }
+
+    // Hide warning if showing
+    if (showWarning) {
+      setShowWarning(false);
+    }
+
+    // Set new warning timer
+    warningTimeoutRef.current = setTimeout(() => {
+      // Show warning
+      setShowWarning(true);
+      setTimeRemaining(60); // 60 seconds until logout
+
+      // Start countdown
+      countdownIntervalRef.current = setInterval(() => {
+        setTimeRemaining((prev) => {
+          if (prev <= 1) {
+            // Time's up - logout
+            handleSessionExpired();
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+
+      // Set auto-logout timer
+      activityTimeoutRef.current = setTimeout(() => {
+        handleSessionExpired();
+      }, WARNING_BEFORE_EXPIRY);
+
+    }, WARNING_TIME);
+  }, [showWarning]);
+
+  // Handle session expiration
+  const handleSessionExpired = useCallback(() => {
+    // Clear all timers
+    if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
+    if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
+    if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+
+    setShowWarning(false);
+    logout();
+    navigate('/login', {
+      state: { message: 'Your session has expired due to inactivity. Please log in again.' }
+    });
+  }, [logout, navigate]);
+
+  // Handle "Stay Logged In" button
+  const handleExtendSession = async () => {
+    setIsExtending(true);
+    try {
+      // Refresh user data to get new token
+      await refreshUser();
+
+      // Reset activity timer
+      resetActivityTimer();
+
+      logger.log('[IdleSessionWarning] Session extended successfully');
+    } catch (error) {
+      logger.error('[IdleSessionWarning] Failed to extend session:', error);
+
+      // If refresh fails, logout
+      handleSessionExpired();
+    } finally {
+      setIsExtending(false);
+    }
+  };
+
+  // Track user activity
+  useEffect(() => {
+    if (!user) return;
+
+    const activityEvents = [
+      'mousedown',
+      'mousemove',
+      'keypress',
+      'scroll',
+      'touchstart',
+      'click'
+    ];
+
+    // Throttle activity detection to avoid too many resets
+    let throttleTimeout = null;
+    const handleActivity = () => {
+      if (throttleTimeout) return;
+
+      throttleTimeout = setTimeout(() => {
+        resetActivityTimer();
+        throttleTimeout = null;
+      }, 1000); // Throttle to once per second
+    };
+
+    // Add event listeners
+    activityEvents.forEach(event => {
+      document.addEventListener(event, handleActivity, { passive: true });
+    });
+
+    // Initialize timer
+    resetActivityTimer();
+
+    // Cleanup
+    return () => {
+      activityEvents.forEach(event => {
+        document.removeEventListener(event, handleActivity);
+      });
+
+      if (activityTimeoutRef.current) clearTimeout(activityTimeoutRef.current);
+      if (warningTimeoutRef.current) clearTimeout(warningTimeoutRef.current);
+      if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+      if (throttleTimeout) clearTimeout(throttleTimeout);
+    };
+  }, [user, resetActivityTimer]);
+
+  // Don't render if user is not logged in
+  if (!user) return null;
+
+  return (
+    <Dialog open={showWarning} onOpenChange={(open) => {
+      if (!open) {
+        // Prevent closing dialog by clicking outside
+        // User must click a button
+        return;
+      }
+    }}>
+      <DialogContent
+        className="max-w-md"
+        onPointerDownOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <div className="flex items-center gap-3 mb-2">
+            <div className="bg-[#ff9e77]/10 p-3 rounded-full">
+              <AlertTriangle className="h-6 w-6 text-[#ff9e77]" />
+            </div>
+            <DialogTitle className="text-[#422268]">
+              Session About to Expire
+            </DialogTitle>
+          </div>
+          <DialogDescription className="text-[#664fa3]">
+            Your session will expire in <strong className="text-[#422268] text-lg">{timeRemaining}</strong> seconds due to inactivity.
+
+            <div className="mt-4 p-4 bg-[#f1eef9] rounded-lg border border-[#ddd8eb]">
+              <p className="text-sm text-[#422268]">
+                Click <strong>"Stay Logged In"</strong> to continue your session, or you will be automatically logged out.
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter className="flex-col sm:flex-row gap-3 mt-4">
+          <Button
+            variant="outline"
+            onClick={handleSessionExpired}
+            className="border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9]"
+          >
+            Log Out Now
+          </Button>
+          <Button
+            onClick={handleExtendSession}
+            disabled={isExtending}
+            className="bg-[#664fa3] hover:bg-[#422268] text-white"
+          >
+            {isExtending ? (
+              <>
+                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                Extending...
+              </>
+            ) : (
+              'Stay Logged In'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default IdleSessionWarning;

src/components/ImportMembersDialog.js

@@ -138,7 +138,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />

src/components/Navbar.js

@@ -39,7 +39,7 @@ const Navbar = () => {
               style={{ fontFamily: "'Poppins', sans-serif" }}
               data-testid="admin-nav-button"
             >
-              Admin Panel
+              Dashboard
             </button>
           </Link>
         )}
@@ -110,7 +110,7 @@ const Navbar = () => {
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
-            Dashboard
+            My Profile
           </Link>
           <Link
             to="/events"
@@ -170,14 +170,7 @@ const Navbar = () => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <Link
-            to="/profile"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
-            data-testid="profile-nav-button"
-          >
-            Profile
-          </Link>
+
         </nav>
 
         {/* Mobile Hamburger Button */}
@@ -231,7 +224,7 @@ const Navbar = () => {
             )}
 
             {/* Navigation Links */}
-            <nav className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
               <div className="space-y-2">
                 <Link
                   to="/"
@@ -373,7 +366,7 @@ const Navbar = () => {
                     className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
-                    Admin Panel
+                    Dashboard
                   </Button>
                 </Link>
               )}

src/components/PlanDialog.js

@@ -159,7 +159,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}

src/components/PublicNavbar.js

@@ -165,7 +165,7 @@ const PublicNavbar = () => {
               className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
-              {user ? 'Dashboard' : 'Become a Member'}
+              {user ? 'My Profile' : 'Become a Member'}
             </Link>
             {!user && (
               <Link
@@ -204,7 +204,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto scrollbar-dashboard">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -270,7 +270,7 @@ const PublicNavbar = () => {
                 className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
-                {user ? 'Dashboard' : 'Become a Member'}
+                {user ? 'My Profile' : 'Become a Member'}
               </Link>
 
               {!user && (

src/components/StatCard.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Card } from "./ui/card";
+
+export const StatCard = ({
+  title,
+  value,
+  icon: Icon,
+  iconBgClass,
+  dataTestId,
+}) => (
+  <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={`${iconBgClass} p-3 rounded-lg `}>
+        <Icon className="size-8" />
+      </div>
+
+      <div className="space-y-8">
+        <p
+          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
+          style={{ fontFamily: "'Inter', sans-serif" }}
+        >
+          {value}
+        </p>
+      </div>
+    </div>
+    <p
+      className="text-sm text-brand-purple "
+      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+    >
+      {title}
+    </p>
+  </Card>
+);

src/components/TransactionHistory.js

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

src/components/WordPressImportWizard.js

@@ -896,7 +896,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard

src/components/ui/badge.jsx

@@ -16,7 +16,7 @@ const badgeVariants = cva(
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
         green:
-          "border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]",
+          "border-transparent bg-[var(--green-forest)] text-white hover:bg-[var(--green-fern)]",
         orange:
           "border-transparent bg-orange-500 text-white hover:bg-orange-500/80",
         orange2:
@@ -28,6 +28,7 @@ const badgeVariants = cva(
         gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
         gray3:
           "border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
+        purple: "bg-light-lavender",
       },
     },
     defaultVariants: {

src/components/ui/button.jsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva("btn", {
   variants: {
@@ -11,6 +11,7 @@ const buttonVariants = cva("btn", {
       secondary: "btn-secondary",
       ghost: "btn-ghost",
       outline: "btn-outline",
+      "outline-destructive": "btn-outline-destructive",
       accent: "btn-accent",
       destructive: "btn-destructive",
       link: "btn-link",
@@ -26,18 +27,20 @@ const buttonVariants = cva("btn", {
     variant: "default",
     size: "default",
   },
-})
+});
 
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size }), className)}
         ref={ref}
         {...props}
       />
-  )
-})
-Button.displayName = "Button"
+    );
+  }
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/card.jsx

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

src/components/ui/command.jsx

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

src/components/ui/context-menu.jsx

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

src/components/ui/dropdown-menu.jsx

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

src/components/ui/input.jsx

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

src/components/ui/select.jsx

@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden scrollbar-dashboard scrollbar-x-dashboard rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

src/components/ui/tabs.jsx

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

src/context/AuthContext.js

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

src/layouts/AdminLayout.js

@@ -63,7 +63,7 @@ const AdminLayout = ({ children }) => {
       )}
 
       {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
         <div className="max-w-7xl mx-auto px-6 py-8">
           {children}
         </div>

src/pages/Dashboard.js

@@ -17,6 +17,7 @@ const Dashboard = () => {
   const [resendLoading, setResendLoading] = useState(false);
   const [eventActivity, setEventActivity] = useState(null);
   const [activityLoading, setActivityLoading] = useState(true);
+  const joinedDate = user?.member_since || user?.created_at;
 
   useEffect(() => {
     fetchUpcomingEvents();
@@ -168,11 +169,11 @@ const Dashboard = () => {
             </div>
             <Link to="/profile">
               <Button
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender"
                 data-testid="view-profile-button"
               >
                 <User className="h-4 w-4 mr-2" />
-                View Profile
+                Edit Profile
               </Button>
             </Link>
           </div>
@@ -197,7 +198,7 @@ const Dashboard = () => {
               <div>
                 <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
+                  {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
                 </p>
               </div>
               {user?.subscription_start_date && user?.subscription_end_date && (
@@ -227,8 +228,7 @@ const Dashboard = () => {
               </h3>
               <Link to="/events">
                 <Button
-                  variant="ghost"
-                  className="text-[var(--orange-light)] hover:text-brand-purple "
+                  className="btn-lavender "
                   data-testid="view-all-events-button"
                 >
                   View All
@@ -442,7 +442,7 @@ const Dashboard = () => {
                         Browse upcoming events and RSVP to start building your event history!
                       </p>
                       <Link to="/events">
-                        <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6">
+                        <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>

src/pages/EventDetails.js

@@ -155,7 +155,7 @@ const EventDetails = () => {
                 disabled={rsvpLoading}
                 className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
                   ? 'bg-[var(--green-light)] text-white'
-                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background'
+                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender'
                   }`}
                 data-testid="rsvp-yes-button"
               >

src/pages/Login.js

@@ -87,7 +87,7 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+                className="h-14 rounded-xl border-2  focus:border-brand-purple "
                 data-testid="login-email-input "
               />
             </div>
@@ -114,7 +114,7 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full py-6 text-lg font-medium shadow-lg hover:scale-105 disabled:opacity-50 btn-lavender"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}

src/pages/Profile.js

@@ -12,6 +12,7 @@ import MemberFooter from '../components/MemberFooter';
 import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
+import TransactionHistory from '../components/TransactionHistory';
 
 const Profile = () => {
   const { user } = useAuth();
@@ -24,6 +25,8 @@ const Profile = () => {
   const fileInputRef = useRef(null);
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50); // Default 50MB
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800); // Default 50MB in bytes
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [formData, setFormData] = useState({
     // Personal Information
     first_name: '',
@@ -58,6 +61,7 @@ const Profile = () => {
   useEffect(() => {
     fetchConfig();
     fetchProfile();
+    fetchTransactions();
   }, []);
 
   const fetchConfig = async () => {
@@ -112,6 +116,19 @@ const Profile = () => {
     }
   };
 
+  const fetchTransactions = async () => {
+    try {
+      setTransactionsLoading(true);
+      const response = await api.get('/members/transactions');
+      setTransactions(response.data);
+    } catch (error) {
+      console.error('Failed to load transactions:', error);
+      // Don't show error toast - transactions are optional
+    } finally {
+      setTransactionsLoading(false);
+    }
+  };
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -703,6 +720,18 @@ const Profile = () => {
           open={passwordDialogOpen}
           onOpenChange={setPasswordDialogOpen}
         />
+
+        {/* Transaction History Section */}
+        <div className="mt-8">
+          <TransactionHistory
+            subscriptions={transactions.subscriptions}
+            donations={transactions.donations}
+            totalSubscriptionCents={transactions.total_subscription_amount_cents}
+            totalDonationCents={transactions.total_donation_amount_cents}
+            loading={transactionsLoading}
+            isAdmin={false}
+          />
+        </div>
       </div>
       <MemberFooter />
     </div>

src/pages/Register.js

@@ -258,7 +258,7 @@ const Register = () => {
                 <Button
                   type="button"
                   onClick={handleNext}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
                 >
                   Next
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -267,7 +267,7 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-backgroundrounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
                   {loading ? 'Creating Account...' : 'Create Account'}

src/pages/admin/AdminBylaws.js

@@ -189,7 +189,7 @@ const AdminBylaws = () => {
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -202,15 +202,15 @@ const AdminBylaws = () => {
         <Card className="p-6 border-2 border-brand-purple ">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-3 rounded-xl">
-                <Scale className="h-6 w-6 text-white" />
+              <div className="bg-light-lavender p-3 rounded-xl">
+                <Scale className="h-6 w-6 " />
               </div>
               <div>
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)]">
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-[var(--green-light)] text-white">
+                  <Badge variant={'green'} className="">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
@@ -222,7 +222,7 @@ const AdminBylaws = () => {
             </div>
             <div className="flex gap-2">
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
                 className="border-brand-purple  text-brand-purple "
@@ -242,10 +242,10 @@ const AdminBylaws = () => {
               )}
               {hasPermission('bylaws.delete') && (
                 <Button
-                  variant="outline"
+                  variant="outline-destructive"
                   size="sm"
                   onClick={() => handleDelete(currentBylaws)}
-                  className="border-red-500 text-red-500 hover:bg-red-50"
+                  className="border-red-500 text-red-500"
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleDelete(bylawsDoc)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className="btn-outline-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
               Cancel
             </Button>
             <Button
-              variant="destructive"
+              variant="outline"
               onClick={confirmDelete}
-              className="bg-red-500 hover:bg-red-600"
+              className="btn-outline-destructive"
             >
               Delete
             </Button>

src/pages/admin/AdminDashboard.js

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

src/pages/admin/AdminDonations.js

@@ -28,7 +28,13 @@ import {
   Loader2,
   Download,
   FileDown,
-  Calendar
+  Calendar,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Copy,
+  CreditCard,
+  Info
 } from 'lucide-react';
 
 const AdminDonations = () => {
@@ -43,6 +49,7 @@ const AdminDonations = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
+  const [expandedRows, setExpandedRows] = useState(new Set());
 
   useEffect(() => {
     fetchData();
@@ -157,6 +164,27 @@ const AdminDonations = () => {
     });
   };
 
+  const toggleRowExpansion = (donationId) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(donationId)) {
+        newExpanded.delete(donationId);
+      } else {
+        newExpanded.add(donationId);
+      }
+      return newExpanded;
+    });
+  };
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch (error) {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+
   const getStatusBadgeVariant = (status) => {
     const variants = {
       completed: 'default',
@@ -385,12 +413,15 @@ const AdminDonations = () => {
                 <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Payment Method
                 </th>
+                <th className="px-6 py-4 text-center text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Details
+                </th>
               </tr>
             </thead>
             <tbody className="divide-y divide-[var(--neutral-800)]">
               {filteredDonations.length === 0 ? (
                 <tr>
-                  <td colSpan="6" className="px-6 py-12 text-center">
+                  <td colSpan="7" className="px-6 py-12 text-center">
                     <div className="flex flex-col items-center gap-3">
                       <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
                       <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -400,8 +431,11 @@ const AdminDonations = () => {
                   </td>
                 </tr>
               ) : (
-                filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors">
+                filteredDonations.map((donation) => {
+                  const isExpanded = expandedRows.has(donation.id);
+                  return (
+                    <React.Fragment key={donation.id}>
+                      <tr className="hover:bg-[var(--lavender-400)] transition-colors">
                         <td className="px-6 py-4">
                           <div>
                             <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -443,8 +477,136 @@ const AdminDonations = () => {
                             {donation.payment_method || 'N/A'}
                           </p>
                         </td>
+                        <td className="px-6 py-4 text-center">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => toggleRowExpansion(donation.id)}
+                            className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                          >
+                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                          </Button>
+                        </td>
                       </tr>
-                ))
+                      {/* Expandable Details Row */}
+                      {isExpanded && (
+                        <tr className="bg-[var(--lavender-400)]/30">
+                          <td colSpan="7" className="px-6 py-6">
+                            <div className="space-y-4">
+                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Transaction Details
+                              </h4>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {/* Payment Information */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <CreditCard className="h-4 w-4" />
+                                    Payment Information
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.payment_completed_at && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Date:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{formatDate(donation.payment_completed_at)}</span>
+                                      </div>
+                                    )}
+                                    {donation.payment_method && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Method:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{donation.payment_method}</span>
+                                      </div>
+                                    )}
+                                    {donation.card_brand && donation.card_last4 && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Card:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{donation.card_brand} ****{donation.card_last4}</span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Stripe Transaction IDs */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <Info className="h-4 w-4" />
+                                    Stripe Transaction IDs
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.stripe_payment_intent_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Payment Intent:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_payment_intent_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_payment_intent_id, 'Payment Intent ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_charge_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Charge ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_charge_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_charge_id, 'Charge ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_customer_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Customer ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_customer_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_customer_id, 'Customer ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_receipt_url && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Receipt:</span>
+                                        <Button
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={() => window.open(donation.stripe_receipt_url, '_blank')}
+                                          className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                                        >
+                                          <ExternalLink className="h-3 w-3 mr-1" />
+                                          View Receipt
+                                        </Button>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })
               )}
             </tbody>
           </table>

src/pages/admin/AdminEventAttendance.js

@@ -254,7 +254,7 @@ const AdminEventAttendance = () => {
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-xl"
+          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-[var(--green-light)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -302,7 +302,7 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-[var(--green-light)]" />
+            <UserCheck className="h-8 w-8 text-[var(--green-light)] dark:text-[var(--green-forest)]" />
             <div>
               <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
@@ -350,7 +350,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'all'
-                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] text-white'
+                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] dark:bg-brand-dark-lavender text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -361,7 +361,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
-                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white'
+                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -383,7 +383,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
-                ? 'bg-[var(--gold-warm)] hover:bg-[var(--gold-soft)] text-[var(--purple-ink)]'
+                ? 'bg-[var(--gold-warm)] dark:bg-orange-400 hover:bg-[var(--gold-soft)] text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -483,7 +483,7 @@ const AdminEventAttendance = () => {
                     <td className="px-4 py-3">
                       <Badge
                         className={`${rsvp.rsvp_status === 'yes'
-                          ? 'bg-[var(--green-light)]'
+                          ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]'
                           : rsvp.rsvp_status === 'no'
                             ? 'bg-[var(--orange-soft)]'
                             : 'bg-[var(--gold-warm)] text-[var(--purple-ink)]'
@@ -498,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
+                          className="bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
+                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:text-white hover:border-[var(--green-light)] dark:bg-[var(--green-forest)] rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />

src/pages/admin/AdminEvents.js

@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender "
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />
@@ -158,7 +158,7 @@ const AdminEvents = () => {
               </Button>
             </DialogTrigger>
 
-            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
               <DialogHeader>
                 <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple  rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] bg-background focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
+                    className="w-4 h-4 ui-checkbox text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
@@ -267,7 +267,7 @@ const AdminEvents = () => {
                   </Button>
                   <Button
                     type="submit"
-                    className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+                    className="btn-lavender flex-1"
                   >
                     {editingEvent ? 'Update Event' : 'Create Event'}
                   </Button>
@@ -297,8 +297,9 @@ const AdminEvents = () => {
                   <Calendar className="h-6 w-6 text-brand-purple " />
                 </div>
                 <Badge
+
                   className={`${event.published
-                    ? 'bg-[var(--green-light)] text-white'
+                    ? 'border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]'
                     : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
                 >
@@ -345,7 +346,7 @@ const AdminEvents = () => {
                   onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
                   variant="outline"
                   size="sm"
-                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white"
+                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white dark:hover:text-background"
                   data-testid={`mark-attendance-${event.id}`}
                 >
                   <Users className="h-4 w-4 mr-2" />
@@ -358,7 +359,7 @@ const AdminEvents = () => {
                     onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white dark:hover:bg-brand-lavender dark:hover:text-background"
                     data-testid={`toggle-publish-${event.id}`}
                   >
                     {event.published ? (
@@ -377,7 +378,7 @@ const AdminEvents = () => {
                     onClick={() => handleEdit(event)}
                     variant="outline"
                     size="sm"
-                    className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
+                    className="border-gray-400 text-gray-600 dark:text-gray-400 hover:bg-gray-400 dark:hover:text-background hover:text-white"
                     data-testid={`edit-event-${event.id}`}
                   >
                     <Edit className="h-4 w-4" />
@@ -407,7 +408,7 @@ const AdminEvents = () => {
           </p>
           <Button
             onClick={() => setIsCreateDialogOpen(true)}
-            className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
+            className="btn-lavender px-8"
           >
             <Plus className="mr-2 h-5 w-5" />
             Create Event

src/pages/admin/AdminFinancials.js

@@ -167,7 +167,7 @@ const AdminFinancials = () => {
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>
@@ -229,10 +229,10 @@ const AdminFinancials = () => {
                     )}
                     {hasPermission('financials.delete') && (
                       <Button
-                        variant="outline"
+                        variant="outline-destructive"
                         size="sm"
                         onClick={() => handleDelete(report)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className=""
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>

src/pages/admin/AdminGallery.js

@@ -184,7 +184,7 @@ const AdminGallery = () => {
 
           {/* Empty State Message */}
           {events.length === 0 && (
-            <div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
+            <div className="mt-4 p-4 bg-[var(--lavender-300)] dark:bg-brand-lavender/10 dark:border-transparent border-2 border-[var(--neutral-800)] rounded-xl">
               <div className="flex items-start gap-3">
                 <AlertCircle className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
@@ -196,7 +196,7 @@ const AdminGallery = () => {
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
+                      className="btn-lavender text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
+                className="btn-lavender "
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -251,7 +251,7 @@ const AdminGallery = () => {
             <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-brand-purple  text-white px-3 py-1">
+            <Badge variant="purple" className=" px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>

src/pages/admin/AdminMembers.js

@@ -14,12 +14,13 @@ import {
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
 import { toast } from 'sonner';
-import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircle, Clock, Mail, UserPlus, Upload, Download, FileDown, ChevronDown } from 'lucide-react';
+import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircle, Clock, Mail, UserPlus, Upload, Download, FileDown, ChevronDown, CircleMinus } from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
+import { StatCard } from '@/components/StatCard';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
@@ -319,31 +320,45 @@ const AdminMembers = () => {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'active').length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'payment_pending').length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'inactive').length}
-          </p>
-        </Card>
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </div>
+        <div className="grid 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}
+            icon={CheckCircle}
+            iconBgClass="text-[var(--green-light)]"
+            dataTestId="stat-active-members"
+          />
+          <StatCard
+            title="Payment Pending"
+            value={users.filter(u => u.status === 'payment_pending').length}
+            icon={CreditCard}
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-payment-pending-members"
+          />
+          <StatCard
+            title="Inactive"
+            value={users.filter(u => u.status === 'inactive').length}
+            icon={CircleMinus}
+            iconBgClass=" text-brand-pink"
+            dataTestId="stat-inactive-members"
+          />
+
+
+
+        </div>
       </div>
 
       {/* Filters */}
@@ -385,7 +400,9 @@ const AdminMembers = () => {
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
-          {filteredUsers.map((user) => (
+          {filteredUsers.map((user) => {
+            const joinedDate = user.member_since || user.created_at;
+            return (
               <Card
                 key={user.id}
                 className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
@@ -409,7 +426,7 @@ const AdminMembers = () => {
                       <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: {new Date(user.created_at).toLocaleDateString()}</p>
+                        <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                         {user.referred_by_member_name && (
                           <p>Referred by: {user.referred_by_member_name}</p>
                         )}
@@ -478,7 +495,7 @@ const AdminMembers = () => {
                         <Button
                           variant="outline"
                           size="sm"
-                        className="border-brand-purple  text-brand-purple dark:bg-background dark:border-brand-lavender dark:text-brand-light-lavender hover:bg-brand-light-lavender  "
+                          className=""
                         >
                           <Eye className="h-4 w-4 mr-1" />
                           View Profile
@@ -523,7 +540,8 @@ const AdminMembers = () => {
                   </div>
                 </div>
               </Card>
-          ))}
+            );
+          })}
         </div>
       ) : (
         <div className="text-center py-20">

src/pages/admin/AdminNewsletters.js

@@ -195,7 +195,7 @@ const AdminNewsletters = () => {
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-light-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter
@@ -266,10 +266,10 @@ const AdminNewsletters = () => {
                           )}
                           {hasPermission('newsletters.delete') && (
                             <Button
-                              variant="outline"
+                              variant="outline-destructive"
                               size="sm"
                               onClick={() => handleDelete(newsletter)}
-                              className="border-red-500 text-red-500 hover:bg-red-50"
+                              className=""
                             >
                               <Trash2 className="h-4 w-4" />
                             </Button>

src/pages/admin/AdminPlans.js

@@ -141,7 +141,7 @@ const AdminPlans = () => {
           {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+              className="btn-lavender "
             >
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
@@ -294,7 +294,7 @@ const AdminPlans = () => {
                     onClick={() => handleEditPlan(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full dark:hover:text-background"
                   >
                     <Edit className="h-4 w-4 mr-1" />
                     Edit
@@ -303,7 +303,7 @@ const AdminPlans = () => {
                     onClick={() => handleDeleteClick(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
+                    className="flex-1 border-red-500 text-red-500 hover:bg-red-500 dark:hover:bg-red-500/10 hover:text-white rounded-full"
                     disabled={plan.subscriber_count > 0}
                   >
                     <Trash2 className="h-4 w-4 mr-1" />

src/pages/admin/AdminRoles.js

@@ -193,7 +193,7 @@ const AdminRoles = () => {
             Create and manage custom roles with specific permissions
           </p>
         </div>
-        <Button onClick={() => setShowCreateModal(true)}>
+        <Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
           <Plus className="w-4 h-4 mr-2" />
           Create Role
         </Button>
@@ -273,7 +273,7 @@ const AdminRoles = () => {
 
       {/* Create Role Modal */}
       <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
-        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto scrollbar-dashboard scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Create New Role</DialogTitle>
             <DialogDescription>
@@ -317,7 +317,7 @@ const AdminRoles = () => {
               <p className="text-sm text-gray-600 mb-3">
                 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">
+              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto scrollbar-dashboard">
                 {Object.entries(groupedPermissions).map(([module, perms]) => (
                   <div key={module} className="mb-4">
                     <button
@@ -417,7 +417,7 @@ const AdminRoles = () => {
 
       {/* Manage Permissions Modal */}
       <Dialog open={showPermissionsModal} onOpenChange={setShowPermissionsModal}>
-        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Manage Permissions: {selectedRole?.name}</DialogTitle>
             <DialogDescription>

src/pages/admin/AdminSettings.js

@@ -0,0 +1,506 @@
+import React, { useState, useEffect } from 'react';
+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 { AlertCircle, CheckCircle, Settings as SettingsIcon, RefreshCw, Zap, Edit, Save, X, Copy, Eye, EyeOff, ExternalLink } from 'lucide-react';
+import api from '../../utils/api';
+import { toast } from 'sonner';
+
+export default function AdminSettings() {
+  const [stripeStatus, setStripeStatus] = useState(null);
+  const [loadingStatus, setLoadingStatus] = useState(true);
+  const [testing, setTesting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    secret_key: '',
+    webhook_secret: ''
+  });
+
+  // Show/hide sensitive values
+  const [showSecretKey, setShowSecretKey] = useState(false);
+  const [showWebhookSecret, setShowWebhookSecret] = useState(false);
+
+  useEffect(() => {
+    fetchStripeStatus();
+  }, []);
+
+  const fetchStripeStatus = async () => {
+    setLoadingStatus(true);
+    try {
+      const response = await api.get('/admin/settings/stripe/status');
+      setStripeStatus(response.data);
+    } catch (error) {
+      console.error('Failed to fetch Stripe status:', error);
+      toast.error('Failed to load Stripe status');
+    } finally {
+      setLoadingStatus(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    try {
+      const response = await api.post('/admin/settings/stripe/test-connection');
+      toast.success(response.data.message);
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Connection test failed';
+      toast.error(message);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setFormData({
+      secret_key: '',
+      webhook_secret: ''
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setFormData({
+      secret_key: '',
+      webhook_secret: ''
+    });
+    setShowSecretKey(false);
+    setShowWebhookSecret(false);
+  };
+
+  const handleSave = async () => {
+    // Validate inputs
+    if (!formData.secret_key || !formData.webhook_secret) {
+      toast.error('Both Secret Key and Webhook Secret are required');
+      return;
+    }
+
+    if (!formData.secret_key.startsWith('sk_test_') && !formData.secret_key.startsWith('sk_live_')) {
+      toast.error('Invalid Secret Key format. Must start with sk_test_ or sk_live_');
+      return;
+    }
+
+    if (!formData.webhook_secret.startsWith('whsec_')) {
+      toast.error('Invalid Webhook Secret format. Must start with whsec_');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await api.put('/admin/settings/stripe', formData);
+      toast.success('Stripe settings updated successfully');
+      setIsEditing(false);
+      setFormData({
+        secret_key: '',
+        webhook_secret: ''
+      });
+      setShowSecretKey(false);
+      setShowWebhookSecret(false);
+      // Refresh status
+      await fetchStripeStatus();
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Failed to update Stripe settings';
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const copyToClipboard = (text, label) => {
+    navigator.clipboard.writeText(text);
+    toast.success(`${label} copied to clipboard`);
+  };
+
+  if (loadingStatus) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="h-8 w-8 animate-spin text-brand-purple" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      {/* 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)]">
+          <div className="flex justify-between items-start">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="h-5 w-5 text-brand-purple" />
+                Stripe Integration
+              </CardTitle>
+              <CardDescription>
+                Payment processing and subscription management
+              </CardDescription>
+            </div>
+            {!isEditing && (
+              <Button
+                onClick={handleEditClick}
+                variant="outline"
+                className="border-2 border-brand-purple text-brand-purple hover:bg-[#f1eef9] rounded-full"
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                Edit Settings
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+
+        <CardContent className="pt-6 space-y-6">
+          {isEditing ? (
+            /* Edit Mode */
+            <div className="space-y-6">
+              {/* Secret Key Input */}
+              <div className="space-y-2">
+                <Label htmlFor="secret_key">Stripe Secret Key</Label>
+                <div className="relative">
+                  <Input
+                    id="secret_key"
+                    type={showSecretKey ? 'text' : 'password'}
+                    value={formData.secret_key}
+                    onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
+                    placeholder="sk_test_... or sk_live_..."
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowSecretKey(!showSecretKey)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showSecretKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <p className="text-xs text-gray-500">
+                  Get this from your Stripe Dashboard → Developers → API keys
+                </p>
+              </div>
+
+              {/* Webhook Secret Input */}
+              <div className="space-y-2">
+                <Label htmlFor="webhook_secret">Stripe Webhook Secret</Label>
+                <div className="relative">
+                  <Input
+                    id="webhook_secret"
+                    type={showWebhookSecret ? 'text' : 'password'}
+                    value={formData.webhook_secret}
+                    onChange={(e) => setFormData({ ...formData, webhook_secret: e.target.value })}
+                    placeholder="whsec_..."
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowWebhookSecret(!showWebhookSecret)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showWebhookSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <p className="text-xs text-gray-500">
+                  Get this from your Stripe Dashboard → Developers → Webhooks → Add endpoint
+                </p>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
+                <Button
+                  onClick={handleCancelEdit}
+                  variant="outline"
+                  className="border-2 border-gray-300 rounded-full"
+                  disabled={saving}
+                >
+                  <X className="h-4 w-4 mr-2" />
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving}
+                  className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
+                >
+                  {saving ? (
+                    <>
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="h-4 w-4 mr-2" />
+                      Save Settings
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            /* View Mode */
+            <>
+              {/* Status Display */}
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                  <div>
+                    <p className="font-semibold text-gray-900">Configuration Status</p>
+                    <p className="text-sm text-gray-600">Credentials stored in database (encrypted)</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {stripeStatus?.configured ? (
+                      <>
+                        <CheckCircle className="h-5 w-5 text-green-600" />
+                        <span className="text-green-600 font-semibold">Configured</span>
+                      </>
+                    ) : (
+                      <>
+                        <AlertCircle className="h-5 w-5 text-amber-600" />
+                        <span className="text-amber-600 font-semibold">Not Configured</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {stripeStatus?.configured && (
+                  <>
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Environment</p>
+                        <p className="text-sm text-gray-600">Detected from secret key prefix</p>
+                      </div>
+                      <span className={`px-3 py-1 rounded-full text-sm font-semibold ${
+                        stripeStatus.environment === 'live'
+                          ? 'bg-green-100 text-green-800 border-2 border-green-300'
+                          : 'bg-blue-100 text-blue-800 border-2 border-blue-300'
+                      }`}>
+                        {stripeStatus.environment === 'live' ? 'Live' : 'Test'}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Secret Key</p>
+                        <p className="text-sm text-gray-600 font-mono">
+                          {stripeStatus.secret_key_prefix}...
+                        </p>
+                      </div>
+                      <CheckCircle className="h-5 w-5 text-green-600" />
+                    </div>
+
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Webhook Secret</p>
+                        <p className="text-sm text-gray-600">Webhook endpoint configuration</p>
+                      </div>
+                      {stripeStatus.webhook_secret_set ? (
+                        <div className="flex items-center gap-2">
+                          <CheckCircle className="h-5 w-5 text-green-600" />
+                          <span className="text-green-600 font-semibold text-sm">Set</span>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <AlertCircle className="h-5 w-5 text-amber-600" />
+                          <span className="text-amber-600 font-semibold text-sm">Not Set</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Webhook URL */}
+                    <div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1">
+                          <p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+                            <ExternalLink className="h-4 w-4" />
+                            Webhook URL
+                          </p>
+                          <p className="text-sm text-blue-700 mb-2">
+                            Configure this webhook endpoint in your Stripe Dashboard:
+                          </p>
+                          <div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
+                            {stripeStatus.webhook_url}
+                          </div>
+                        </div>
+                        <Button
+                          onClick={() => copyToClipboard(stripeStatus.webhook_url, 'Webhook URL')}
+                          variant="outline"
+                          size="sm"
+                          className="border-blue-300 text-blue-700 hover:bg-blue-100"
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      <div className="mt-3 text-xs text-blue-600">
+                        <p className="font-semibold mb-1">Webhook Events to Configure:</p>
+                        <div className="space-y-2">
+                          <div>
+                            <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
+                            <ul className="list-disc list-inside ml-2">
+                              <li>checkout.session.completed - Handles subscriptions & donations</li>
+                            </ul>
+                          </div>
+                          <div className="opacity-80">
+                            <p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
+                            <ul className="list-disc list-inside ml-2 text-xs">
+                              <li>payment_intent.created</li>
+                              <li>payment_intent.succeeded</li>
+                              <li>charge.succeeded</li>
+                              <li>charge.updated</li>
+                            </ul>
+                            <p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
+                          </div>
+                          <div className="opacity-70">
+                            <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
+                            <ul className="list-disc list-inside ml-2">
+                              <li>invoice.payment_succeeded</li>
+                              <li>invoice.payment_failed</li>
+                              <li>customer.subscription.updated</li>
+                              <li>customer.subscription.deleted</li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Configuration Instructions (Not Configured) */}
+              {!stripeStatus?.configured && (
+                <>
+                  <div className="p-4 bg-amber-50 border-2 border-amber-200 rounded-lg">
+                    <div className="flex items-start gap-2">
+                      <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+                      <div className="text-sm">
+                        <p className="font-semibold text-amber-900 mb-2">Configuration Required</p>
+                        <p className="text-amber-700 mb-2">
+                          Click "Edit Settings" above to configure your Stripe credentials.
+                        </p>
+                        <p className="text-amber-700">
+                          Get your API keys from{' '}
+                          <a
+                            href="https://dashboard.stripe.com/apikeys"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-semibold underline"
+                          >
+                            Stripe Dashboard
+                          </a>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Webhook URL Info (Always visible) */}
+                  <div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1">
+                        <p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+                          <ExternalLink className="h-4 w-4" />
+                          Webhook URL Configuration
+                        </p>
+                        <p className="text-sm text-blue-700 mb-2">
+                          After configuring your API keys, set up this webhook endpoint in your Stripe Dashboard:
+                        </p>
+                        <div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
+                          {stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe'}
+                        </div>
+                      </div>
+                      <Button
+                        onClick={() => copyToClipboard(stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe', 'Webhook URL')}
+                        variant="outline"
+                        size="sm"
+                        className="border-blue-300 text-blue-700 hover:bg-blue-100"
+                      >
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <div className="mt-3 text-xs text-blue-600">
+                      <p className="font-semibold mb-1">Webhook Events to Configure:</p>
+                      <div className="space-y-2">
+                        <div>
+                          <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
+                          <ul className="list-disc list-inside ml-2">
+                            <li>checkout.session.completed - Handles subscriptions & donations</li>
+                          </ul>
+                        </div>
+                        <div className="opacity-80">
+                          <p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
+                          <ul className="list-disc list-inside ml-2 text-xs">
+                            <li>payment_intent.created</li>
+                            <li>payment_intent.succeeded</li>
+                            <li>charge.succeeded</li>
+                            <li>charge.updated</li>
+                          </ul>
+                          <p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
+                        </div>
+                        <div className="opacity-70">
+                          <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
+                          <ul className="list-disc list-inside ml-2">
+                            <li>invoice.payment_succeeded</li>
+                            <li>invoice.payment_failed</li>
+                            <li>customer.subscription.updated</li>
+                            <li>customer.subscription.deleted</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* Test Connection Button */}
+              {stripeStatus?.configured && (
+                <div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
+                  <Button
+                    onClick={fetchStripeStatus}
+                    variant="outline"
+                    className="border-2 border-gray-300 rounded-full"
+                    disabled={loadingStatus}
+                  >
+                    <RefreshCw className={`h-4 w-4 mr-2 ${loadingStatus ? 'animate-spin' : ''}`} />
+                    Refresh Status
+                  </Button>
+                  <Button
+                    onClick={handleTestConnection}
+                    disabled={testing}
+                    className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
+                  >
+                    {testing ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        Testing...
+                      </>
+                    ) : (
+                      <>
+                        <Zap className="h-4 w-4 mr-2" />
+                        Test Connection
+                      </>
+                    )}
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Future Settings Sections Placeholder */}
+      <div className="mt-6 p-6 border-2 border-dashed border-gray-300 rounded-lg text-center text-gray-500">
+        <p className="text-sm">Additional settings sections will be added here</p>
+        <p className="text-xs mt-1">(Email, Storage, Notifications, etc.)</p>
+      </div>
+    </div>
+  );
+}

src/pages/admin/AdminStaff.js

@@ -99,16 +99,16 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
-      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
-      moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-      staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
-      media: { label: 'Media', className: 'bg-gray-400 text-white' }
+      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 className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <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>
@@ -117,13 +117,13 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
+      active: { label: 'Active', variant: 'green' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
     const statusConfig = config[status] || config.inactive;
     return (
-      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
         {statusConfig.label}
       </Badge>
     );
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
+                className="btn-util-purple  h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
+                className="btn-util-green h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -242,7 +242,9 @@ const AdminStaff = () => {
             </div>
           ) : filteredUsers.length > 0 ? (
             <div className="space-y-4">
-              {filteredUsers.map((user) => (
+              {filteredUsers.map((user) => {
+                const joinedDate = user.member_since || user.created_at;
+                return (
                   <Card
                     key={user.id}
                     className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
@@ -267,7 +269,7 @@ const AdminStaff = () => {
                         <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>
                           <p>Phone: {user.phone}</p>
-                          <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                          <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                           {user.last_login && (
                             <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
                           )}
@@ -291,8 +293,8 @@ const AdminStaff = () => {
                           onClick={() => handleToggleStatus(user.id, user.status)}
                           variant="outline"
                           className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
-                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50'
-                            : 'border-green-500 text-green-600 hover:bg-green-50'
+                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
+                            : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
                             }`}
                         >
                           {user.status === 'active' ? (
@@ -313,7 +315,7 @@ const AdminStaff = () => {
                         <Button
                           onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
                           variant="outline"
-                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 rounded-full px-4 py-2"
+                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
                         >
                           <Trash2 className="h-4 w-4 mr-2" />
                           Delete
@@ -322,7 +324,8 @@ const AdminStaff = () => {
                     </div>
                   </div>
                   </Card>
-              ))}
+                );
+              })}
             </div>
           ) : (
             <div className="text-center py-20">

src/pages/admin/AdminSubscriptions.js

@@ -35,7 +35,11 @@ import {
   Download,
   FileDown,
   AlertTriangle,
-  Info
+  Info,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Copy
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -55,6 +59,7 @@ const AdminSubscriptions = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [planFilter, setPlanFilter] = useState('all');
   const [exporting, setExporting] = useState(false);
+  const [expandedRows, setExpandedRows] = useState(new Set());
 
   // Edit subscription dialog state
   const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -265,6 +270,38 @@ Proceed with activation?`;
     });
   };
 
+  const formatDateTime = (dateString) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const toggleRowExpansion = (subscriptionId) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(subscriptionId)) {
+        newExpanded.delete(subscriptionId);
+      } else {
+        newExpanded.add(subscriptionId);
+      }
+      return newExpanded;
+    });
+  };
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch (error) {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+
   const getStatusBadgeVariant = (status) => {
     const variants = {
       active: 'default',
@@ -419,7 +456,7 @@ Proceed with activation?`;
               <DropdownMenuTrigger asChild>
                 <Button
                   disabled={exporting}
-                  className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-2 flex items-center gap-2"
+                  className="btn-green py-2 flex items-center gap-2"
                 >
                   <Download className="h-4 w-4" />
                   {exporting ? 'Exporting...' : 'Export'}
@@ -521,9 +558,9 @@ Proceed with activation?`;
                     {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                       <Button
                         size="sm"
-                        variant="outline"
+                        variant="outline-destructive"
                         onClick={() => handleCancelSubscription(sub.id)}
-                        className="flex-1 text-red-600 hover:bg-red-50"
+                        className="flex-1 "
                       >
                         <XCircle className="h-4 w-4 mr-2" />
                         Cancel
@@ -566,6 +603,9 @@ Proceed with activation?`;
                 <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Total
                 </th>
+                <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Details
+                </th>
                 <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Actions
                 </th>
@@ -573,8 +613,11 @@ Proceed with activation?`;
             </thead>
             <tbody>
               {filteredSubscriptions.length > 0 ? (
-                filteredSubscriptions.map((sub) => (
-                  <tr key={sub.id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
+                filteredSubscriptions.map((sub) => {
+                  const isExpanded = expandedRows.has(sub.id);
+                  return (
+                    <React.Fragment key={sub.id}>
+                      <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
                         <td className="p-4">
                           <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {sub.user.first_name} {sub.user.last_name}
@@ -611,6 +654,16 @@ Proceed with activation?`;
                         <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                           {formatPrice(sub.amount_paid_cents || 0)}
                         </td>
+                        <td className="p-4">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => toggleRowExpansion(sub.id)}
+                            className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                          >
+                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                          </Button>
+                        </td>
                         <td className="p-4">
                           <div className="flex items-center justify-center gap-2">
                             {hasPermission('subscriptions.edit') && (
@@ -626,9 +679,9 @@ Proceed with activation?`;
                             {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                               <Button
                                 size="sm"
-                            variant="outline"
+                                variant="outline-destructive"
                                 onClick={() => handleCancelSubscription(sub.id)}
-                            className="text-red-600 hover:bg-red-50"
+                                className=""
                               >
                                 <XCircle className="h-4 w-4" />
                               </Button>
@@ -636,10 +689,162 @@ Proceed with activation?`;
                           </div>
                         </td>
                       </tr>
-                ))
+                      {/* Expandable Details Row */}
+                      {isExpanded && (
+                        <tr className="bg-[var(--lavender-400)]/30">
+                          <td colSpan="9" className="p-6">
+                            <div className="space-y-4">
+                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Transaction Details
+                              </h4>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {/* Payment Information */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <CreditCard className="h-4 w-4" />
+                                    Payment Information
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {sub.payment_completed_at && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Date:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
+                                      </div>
+                                    )}
+                                    {sub.payment_method && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Method:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
+                                      </div>
+                                    )}
+                                    {sub.card_brand && sub.card_last4 && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Card:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Stripe Transaction IDs */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <Info className="h-4 w-4" />
+                                    Stripe Transaction IDs
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {sub.stripe_payment_intent_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Payment Intent:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_payment_intent_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_charge_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Charge ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_charge_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_subscription_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Subscription ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_subscription_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_invoice_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Invoice ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_invoice_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_customer_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Customer ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_customer_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_receipt_url && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Receipt:</span>
+                                        <Button
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
+                                          className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                                        >
+                                          <ExternalLink className="h-3 w-3 mr-1" />
+                                          View Receipt
+                                        </Button>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })
               ) : (
                 <tr>
-                  <td colSpan="8" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <td colSpan="9" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     No subscriptions found
                   </td>
                 </tr>

src/pages/admin/AdminUserView.js

@@ -5,9 +5,12 @@ import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
 import { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';
-import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2 } from 'lucide-react';
+import { Input } from '../../components/ui/input';
+import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2, Shield } from 'lucide-react';
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
+import ChangeRoleDialog from '../../components/ChangeRoleDialog';
+import TransactionHistory from '../../components/TransactionHistory';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -16,21 +19,65 @@ const AdminUserView = () => {
   const [loading, setLoading] = useState(true);
   const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
   const [resendVerificationLoading, setResendVerificationLoading] = useState(false);
-  const [subscriptions, setSubscriptions] = useState([]);
-  const [subscriptionsLoading, setSubscriptionsLoading] = useState(true);
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState(null);
   const [uploadingPhoto, setUploadingPhoto] = useState(false);
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
+  const [memberSince, setMemberSince] = useState('');
+  const [memberSinceSaving, setMemberSinceSaving] = useState(false);
   const fileInputRef = useRef(null);
+  const [changeRoleDialogOpen, setChangeRoleDialogOpen] = useState(false);
+
+  const formatLocalDateInputValue = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const formatDateInputValue = (value) => {
+    if (!value) return '';
+    if (typeof value === 'string') {
+      if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        return value;
+      }
+      const parsed = new Date(value);
+      if (Number.isNaN(parsed.getTime())) {
+        return value.slice(0, 10);
+      }
+      return formatLocalDateInputValue(parsed);
+    }
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return '';
+    return formatLocalDateInputValue(parsed);
+  };
+
+  const formatDateDisplayValue = (value) => {
+    if (!value) return 'N/A';
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      const [year, month, day] = value.split('-').map(Number);
+      return new Date(year, month - 1, day).toLocaleDateString();
+    }
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return 'N/A';
+    return parsed.toLocaleDateString();
+  };
 
   useEffect(() => {
     fetchConfig();
     fetchUserProfile();
-    fetchSubscriptions();
+    fetchTransactions();
   }, [userId]);
 
+  useEffect(() => {
+    if (user) {
+      setMemberSince(formatDateInputValue(user.member_since));
+    }
+  }, [user]);
+
   const fetchUserProfile = async () => {
     try {
       const response = await api.get(`/admin/users/${userId}`);
@@ -43,14 +90,15 @@ const AdminUserView = () => {
     }
   };
 
-  const fetchSubscriptions = async () => {
+  const fetchTransactions = async () => {
     try {
-      const response = await api.get(`/admin/subscriptions?user_id=${userId}`);
-      setSubscriptions(response.data);
+      setTransactionsLoading(true);
+      const response = await api.get(`/admin/users/${userId}/transactions`);
+      setTransactions(response.data);
     } catch (error) {
-      console.error('Failed to fetch subscriptions:', error);
+      console.error('Failed to fetch transactions:', error);
     } finally {
-      setSubscriptionsLoading(false);
+      setTransactionsLoading(false);
     }
   };
 
@@ -175,6 +223,27 @@ const AdminUserView = () => {
     }
   };
 
+  const handleMemberSinceSave = async () => {
+    if (!user) return;
+    setMemberSinceSaving(true);
+    try {
+      const payload = {
+        member_since: memberSince ? memberSince : null
+      };
+      const response = await api.put(`/admin/users/${userId}`, payload);
+      setUser(prev => ({
+        ...prev,
+        ...(response?.data || {}),
+        member_since: payload.member_since
+      }));
+      toast.success('Member since updated successfully');
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to update member since');
+    } finally {
+      setMemberSinceSaving(false);
+    }
+  };
+
   const getActionMessage = () => {
     if (!pendingAction || !user) return {};
 
@@ -202,9 +271,18 @@ const AdminUserView = () => {
     return {};
   };
 
+  const handleRoleChanged = () => {
+    // Refresh user data after role change
+    fetchUserProfile();
+  };
+
   if (loading) return <div>Loading...</div>;
   if (!user) return null;
 
+  const joinedDate = user.member_since || user.created_at;
+  const memberSinceBaseline = formatDateInputValue(user.member_since);
+  const memberSinceHasChanges = memberSince !== memberSinceBaseline;
+
   return (
     <>
       {/* Back Button */}
@@ -255,7 +333,7 @@ const AdminUserView = () => {
               </div>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
-                <span>Joined {new Date(user.created_at).toLocaleDateString()}</span>
+                <span>Joined {formatDateDisplayValue(joinedDate)}</span>
               </div>
             </div>
           </div>
@@ -278,6 +356,15 @@ const AdminUserView = () => {
             {resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
           </Button>
 
+          <Button
+            onClick={() => setChangeRoleDialogOpen(true)}
+            variant="outline"
+            className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
+          >
+            <Shield className="h-4 w-4 mr-2" />
+            Change Role
+          </Button>
+
           {!user.email_verified && (
             <Button
               onClick={handleResendVerificationRequest}
@@ -343,10 +430,31 @@ const AdminUserView = () => {
           <div>
             <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
             <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              {new Date(user.date_of_birth).toLocaleDateString()}
+              {formatDateDisplayValue(user.date_of_birth)}
             </p>
           </div>
 
+          <div>
+            <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</label>
+            <div className="mt-1 flex flex-wrap items-center gap-2">
+              <Input
+                type="date"
+                value={memberSince}
+                onChange={(e) => setMemberSince(e.target.value)}
+                className="max-w-[200px] border-[var(--neutral-800)]"
+              />
+              <Button
+                type="button"
+                size="sm"
+                onClick={handleMemberSinceSave}
+                disabled={memberSinceSaving || !memberSinceHasChanges}
+                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+              >
+                {memberSinceSaving ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          </div>
+
           {user.partner_first_name && (
             <div>
               <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
@@ -376,97 +484,17 @@ const AdminUserView = () => {
         </div>
       </Card>
 
-      {/* Subscription Info (if applicable) */}
-      {user.role === 'member' && (
-        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] mt-8">
-          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
-            Subscription Information
-          </h2>
-
-          {subscriptionsLoading ? (
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
-          ) : subscriptions.length === 0 ? (
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
-          ) : (
-            <div className="space-y-6">
-              {subscriptions.map((sub) => (
-                <div key={sub.id} className="p-6 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
-                  <div className="flex items-start justify-between mb-4">
-                    <div>
-                      <h3 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {sub.plan.name}
-                      </h3>
-                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {sub.plan.billing_cycle}
-                      </p>
+      {/* Transaction History */}
+      <div className="mt-8">
+        <TransactionHistory
+          subscriptions={transactions.subscriptions}
+          donations={transactions.donations}
+          totalSubscriptionCents={transactions.total_subscription_amount_cents}
+          totalDonationCents={transactions.total_donation_amount_cents}
+          loading={transactionsLoading}
+          isAdmin={true}
+        />
       </div>
-                    <Badge className={
-                      sub.status === 'active' ? 'bg-[var(--green-light)] text-white' :
-                        sub.status === 'expired' ? 'bg-red-500 text-white' :
-                          'bg-gray-400 text-white'
-                    }>
-                      {sub.status}
-                    </Badge>
-                  </div>
-
-                  <div className="grid md:grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {new Date(sub.start_date).toLocaleDateString()}
-                      </p>
-                    </div>
-                    {sub.end_date && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {new Date(sub.end_date).toLocaleDateString()}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.base_subscription_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.donation_cents > 0 && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          ${(sub.donation_cents / 100).toFixed(2)}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
-                      <p className="text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.amount_paid_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.payment_method && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.payment_method}
-                        </p>
-                      </div>
-                    )}
-                    {sub.stripe_subscription_id && (
-                      <div className="md:col-span-2">
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
-                        <p className="text-[var(--purple-ink)] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.stripe_subscription_id}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </Card>
-      )}
 
       {/* Admin Action Confirmation Dialog */}
       <ConfirmationDialog
@@ -476,6 +504,14 @@ const AdminUserView = () => {
         loading={resetPasswordLoading || resendVerificationLoading}
         {...getActionMessage()}
       />
+
+      {/* Change Role Dialog */}
+      <ChangeRoleDialog
+        open={changeRoleDialogOpen}
+        onClose={() => setChangeRoleDialogOpen(false)}
+        user={user}
+        onSuccess={handleRoleChanged}
+      />
     </>
   );
 };

src/pages/admin/AdminValidations.js

@@ -437,7 +437,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
@@ -450,7 +450,7 @@ const AdminValidations = () => {
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
-                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+                                className="btn-light-lavender"
                               >
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
@@ -462,7 +462,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
@@ -487,7 +487,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject

src/pages/members/MemberCalendar.js

@@ -195,7 +195,7 @@ export default function MemberCalendar() {
         </Card>
 
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
             {selectedEvent && (
               <>
                 <DialogHeader>

src/pages/members/MembersDirectory.js

@@ -118,7 +118,9 @@ const MembersDirectory = () => {
         : <div className=' border-2 w-full border-brand-purple  mb-24' />
     )
   }
-  const MemberCard = ({ member }) => (
+  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">
@@ -160,11 +162,11 @@ const MembersDirectory = () => {
       )}
 
       {/* Member Since */}
-      {member.created_at && (
+      {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(member.created_at).toLocaleDateString('en-US', {
+            Member since {new Date(joinedDate).toLocaleDateString('en-US', {
               month: 'long',
               year: 'numeric'
             })}
@@ -277,6 +279,7 @@ const MembersDirectory = () => {
       </div>
     </Card>
     );
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
@@ -377,7 +380,7 @@ const MembersDirectory = () => {
 
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
-        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>

src/pages/members/NewsletterArchive.js

@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
                 onClick={clearFilter}
                 variant={selectedYear === null ? "default" : "outline"}
                 size="sm"
-                className={selectedYear === null ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
+                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
               >
                 All Years
               </Button>

src/styles/components.css

@@ -9,31 +9,35 @@
   }
 
   .btn-primary {
-    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-secondary {
-    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
+    @apply hover:bg-brand-purple bg-brand-purple/10  rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple  hover:text-background;
   }
 
   .btn-outline {
-    @apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6;
+    @apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-accent {
-    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-destructive {
-    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6 transition-transform;
+  }
+
+  .btn-outline-destructive {
+    @apply border border-destructive bg-none border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-link {
-    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
+    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-sm {
@@ -51,27 +55,40 @@
   .btn-icon {
     @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
   }
+  .btn-green {
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6;
+  }
   .btn-util-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6;
   }
 
   .btn-util-purple {
-    @apply bg-brand-purple  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--purple-lavender)]  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-light-orange {
-    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
   .btn-pink {
-    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
   .btn-lavender {
-    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-foreground dark:hover:text-background;
   }
+  .btn-light-lavender {
+    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
+  }
+
+  /* Badges */
+
   .badge {
-    @apply px-3 py-1 rounded-full text-sm font-medium ;
+    @apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
   }
   .badge-green {
-    @apply bg-[var(--green-light)] text-white;
+    @apply bg-[var(--green-light)] text-white transition-transform;
+  }
+  /* Backgrounds */
+  .bg-light-lavender {
+    @apply bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
   }
 }

src/styles/theme.css

@@ -54,6 +54,7 @@
     --blue-linkedin: #0a66c2;
     --blue-facebook: #1877f2;
     --blue-twitter: #1da1f2;
+    --red-instagram: #e4405f;
     --purple-ink: #422268;
     --purple-ink-2: #422268;
     --purple-deep: #48286e;
@@ -77,7 +78,7 @@
     --green-muted: #66927e;
     --green-soft: #6a9680;
     --green-eucalyptus: #6a9a83;
-    --green-forest: #5e8374;
+    --green-forest: #5a7d68;
     --green-fern: #6da085;
     --green-mint: #6fa087;
     --green-pastel: #6fa188;
@@ -96,7 +97,6 @@
     --gold-warm: #f2cc8f;
     --gold-soft: #e8bf7a;
     --gold-warm: #f2cc8f;
-    --red-instagram: #e4405f;
     --red-soft: #ffebee;
     --lavender-100: #e8e0f5;
     --lavender-200: #eeebf4;
@@ -118,6 +118,12 @@
     --neutral-900: #ffffff;
   }
   .dark {
+    /* 
+    ==========================
+      Dark Theme Colors
+    ==========================
+    */
+
     --background: 246 28% 8%;
     --foreground: 255 30% 92%;
 
@@ -155,6 +161,14 @@
 
     --radius: 0.5rem;
 
+    /* 
+    =========================
+      Brand Colors
+    =========================
+    */
+
+    --brand-purple: 262 46% 80%;
+
     /* -------- Purples (Primary UI) -------- */
     --purple-ink: #422268; /* deepest background */
     --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */

src/utils/logger.js

@@ -0,0 +1,66 @@
+/**
+ * Production-safe logging utility
+ *
+ * In production (NODE_ENV=production), logs are disabled by default
+ * to prevent exposing sensitive information in browser console.
+ *
+ * In development, all logs are shown for debugging.
+ *
+ * Usage:
+ *   import logger from '../utils/logger';
+ *   logger.log('[Component]', 'message', data);
+ *   logger.error('[Component]', 'error message', error);
+ *   logger.warn('[Component]', 'warning message');
+ */
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+
+// Force enable logs with REACT_APP_DEBUG_LOGS=true in .env
+const debugEnabled = process.env.REACT_APP_DEBUG_LOGS === 'true';
+
+const shouldLog = isDevelopment || debugEnabled;
+
+const logger = {
+  log: (...args) => {
+    if (shouldLog) {
+      console.log(...args);
+    }
+  },
+
+  error: (...args) => {
+    // Always log errors, but sanitize in production
+    if (shouldLog) {
+      console.error(...args);
+    } else {
+      // In production, only log error type without details
+      console.error('An error occurred. Enable debug logs for details.');
+    }
+  },
+
+  warn: (...args) => {
+    if (shouldLog) {
+      console.warn(...args);
+    }
+  },
+
+  info: (...args) => {
+    if (shouldLog) {
+      console.info(...args);
+    }
+  },
+
+  debug: (...args) => {
+    if (shouldLog) {
+      console.debug(...args);
+    }
+  },
+
+  // Special method for sensitive data - NEVER logs in production
+  sensitive: (...args) => {
+    if (isDevelopment) {
+      console.log('[SENSITIVE]', ...args);
+    }
+  }
+};
+
+export default logger;