andika/membership-fe
3
1
Fork 1
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request 'Merge from Dev to LOAF Production' (#13) from dev into loaf-prod

Browse Source 
Reviewed-on: #13
This commit was merged in pull request #13.
This commit is contained in:
andika
2026-01-07 08:44:10 +00:00
parent d94ea7b6d5 180eb1ce85
commit 66c2bedbed
14 changed files with 797 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/health.json Normal file
View File

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

2
src/App.js
View File

@@ -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';
@@ -294,6 +295,7 @@ function App() {
<Route path="*" element={<NotFound />} />
</Routes>
<Toaster position="top-right" />
<IdleSessionWarning />
</BrowserRouter>
</AuthProvider>
);

21
src/components/AdminSidebar.js
View File

@@ -22,7 +22,7 @@ import {
Scale,
HardDrive,
Repeat,
Heart
Heart,
} from 'lucide-react';
const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
@@ -269,8 +269,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
<img
src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
alt="LOAF Logo"
className={`object-contain transition-all duration-200 ${
isOpen ? 'h-10 w-10' : 'h-8 w-8'
className={`object-contain transition-all duration-200 ${isOpen ? 'h-10 w-10' : 'h-8 w-8'
}`}
/>
{isOpen && (
@@ -278,9 +277,9 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
<h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin
</h2>
<p className="text-xs text-[#664fa3] group-hover:text-[#ff9e77] transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{/* <p className="text-xs text-[#664fa3] group-hover:text-[#ff9e77] transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
View Public Site
</p>
</p> */}
</div>
)}
</Link>
@@ -300,7 +299,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto p-4">
<nav className="flex-1 overflow-y-auto p-4 scrollbar-dashboard scrollbar-x-dashboard">
{/* Dashboard - Standalone */}
{renderNavItem(filteredNavItems.find(item => item.name === 'Dashboard'))}
@@ -370,7 +369,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
{/* User Section */}
<div className="border-t border-[#ddd8eb] p-4 space-y-2">
{isOpen && user && (
<div className="px-4 py-3 mb-2">
<div className="px-4 py-3 mb-2 flex justify-between items-center">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
{user.first_name?.[0]}{user.last_name?.[0]}
@@ -384,6 +383,8 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</p>
</div>
</div>
<Link to='/profile'><Settings size={16} />
</Link>
</div>
)}
@@ -397,8 +398,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
</div>
<div className="w-full bg-[#ddd8eb] rounded-full h-2">
<div
className={`h-2 rounded-full transition-all ${
storagePercentage > 90 ? 'bg-red-500' :
className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
storagePercentage > 75 ? 'bg-yellow-500' :
'bg-[#81B29A]'
}`}
@@ -412,8 +412,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
) : (
<div className="flex justify-center">
<div className="relative group">
<HardDrive className={`h-5 w-5 ${
storagePercentage > 90 ? 'text-red-500' :
<HardDrive className={`h-5 w-5 ${storagePercentage > 90 ? 'text-red-500' :
storagePercentage > 75 ? 'text-yellow-500' :
'text-[#664fa3]'
}`} />

232
src/components/IdleSessionWarning.js Normal file
View File

@@ -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;

4
src/components/registration/RegistrationStep4.js
View File

@@ -86,7 +86,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
<label htmlFor="accepts_tos" className="text-sm text-gray-700" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
I agree to the{' '}
<a
href="/membership/terms-of-service"
href="/become-a-member/terms-of-service"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
@@ -95,7 +95,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
</a>
{' '}and{' '}
<a
href="/membership/privacy-policy"
href="become-a-member/privacy-policy"
target="_blank"
rel="noopener noreferrer"
className="text-[#664fa3] hover:text-[#422268] font-semibold underline"

35
src/components/ui/tabs.jsx
View File

@@ -1,31 +1,33 @@
import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
const Tabs = TabsPrimitive.Root
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
"inline-flex h-full items-center justify-center rounded-lg gap-6 p-1 text-muted-foreground",
className
)}
{...props} />
))
TabsList.displayName = TabsPrimitive.List.displayName
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 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-background data-[state=active]:text-foreground data-[state=active]:shadow",
"inline-flex items-center justify-center whitespace-nowrap hover:bg-[#f1eef9] border-2 border-[#664fa3] rounded-2xl px-3 py-1 text-[#664fa3] 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",
className
)}
{...props} />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
<TabsPrimitive.Content
@@ -34,8 +36,9 @@ const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
)}
{...props} />
))
TabsContent.displayName = TabsPrimitive.Content.displayName
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export { Tabs, TabsList, TabsTrigger, TabsContent }
export { Tabs, TabsList, TabsTrigger, TabsContent };

67
src/context/AuthContext.js
View File

@@ -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();

24
src/index.css
View File

@@ -116,3 +116,27 @@ code {
border-bottom-color: inherit;
}
}
@layer utilities {
@supports selector(::-webkit-scrollbar) {
.scrollbar-dashboard::-webkit-scrollbar {
width: 2px;
}
.scrollbar-dashboard::-webkit-scrollbar-thumb {
background-color: #ddd8eb;
border-radius: 9999px;
}
.scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
height: 2px;
}
.scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
background-color: #ddd8eb;
border-radius: 9999px;
}
.hide-scrollbar-x::-webkit-scrollbar:horizontal {
height: 0px;
}
}
}

8
src/pages/BoardOfDirectors.js
View File

@@ -12,10 +12,10 @@ const BoardOfDirectors = () => {
];
const boardMembers = [
{ name: 'Danita Cole' },
{ name: 'Roxanne Cherico' },
{ name: 'Lucretia Copeland' },
{ name: 'Julie Fischer' }
{ name: 'Danita Cole', title: 'Director' },
{ name: 'Roxanne Cherico', title: 'Director' },
{ name: 'Lucretia Copeland', title: 'Director' },
{ name: 'Julie Fischer', title: 'Director' }
];

2
src/pages/TermsOfService.js
View File

@@ -2,8 +2,6 @@ import React from 'react';
import { Link } from 'react-router-dom';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
export default function TermsOfService() {

12
src/pages/admin/AdminDashboard.js
View File

@@ -4,7 +4,7 @@ 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 } from 'lucide-react';
import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle,Globe } from 'lucide-react';
const AdminDashboard = () => {
const [stats, setStats] = useState({
@@ -56,6 +56,7 @@ const AdminDashboard = () => {
return (
<>
<div className='flex justify-between items-center'>
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Admin Dashboard
@@ -64,6 +65,15 @@ const AdminDashboard = () => {
Manage users, events, and membership applications.
</p>
</div>
<Link to={'/'}>
<Button
className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
>
<Globe />
View Public Site
</Button>
</Link>
</div>
{/* Stats Grid */}
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">

120
src/pages/members/MembersDirectory.js
View File

@@ -24,6 +24,8 @@ const MembersDirectory = () => {
const [selectedMember, setSelectedMember] = useState(null);
const [profileDialogOpen, setProfileDialogOpen] = useState(false);
const { toast } = useToast();
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 12;
useEffect(() => {
fetchMembers();
@@ -33,6 +35,10 @@ const MembersDirectory = () => {
filterMembers();
}, [searchQuery, members]);
useEffect(() => {
setCurrentPage(1);
}, [searchQuery, members]);
const fetchMembers = async () => {
try {
const response = await api.get('/members/directory');
@@ -66,6 +72,14 @@ const MembersDirectory = () => {
setFilteredMembers(filtered);
};
const totalPages = Math.max(1, Math.ceil(filteredMembers.length / pageSize));
const pageStart = (currentPage - 1) * pageSize;
const paginatedMembers = filteredMembers.slice(pageStart, pageStart + pageSize);
const totalMembers = members.length;
const getInitials = (firstName, lastName) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
};
@@ -97,9 +111,15 @@ const MembersDirectory = () => {
if (!dateString) return null;
return new Date(dateString).toLocaleDateString('en-US', { month: 'long', day: 'numeric' });
};
const Border = ({ yaxis = false }) => {
return (
yaxis ?
<div className=' border-2 w-full border-[#664FA3] my-24' />
: <div className=' border-2 w-full border-[#664FA3] mb-24' />
)
}
const MemberCard = ({ member }) => (
<Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
<Card className="p-6 bg-white rounded-3xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
{/* Profile Photo */}
<div className="flex justify-center mb-4">
{member.profile_photo_url ? (
@@ -259,30 +279,34 @@ const MembersDirectory = () => {
);
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB]">
<Navbar />
<div className="max-w-7xl mx-auto px-6 py-12">
<div className="max-w-7xl mx-auto py-12">
{/* Header and Search bar */}
<div className='px-9'>
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Members Directory
<div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
<h1 className="text-4xl md:text-5xl font-bold text-[#422268] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
LOAF Members
</h1>
<p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Connect with fellow LOAF members in our community.
<p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
<span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[#664fa3] font-medium'>{totalMembers}</span>
</p>
</div>
{/* Search Bar */}
<div className="mb-8">
<div className="relative max-w-xl">
<div className="mb-24 mx-10">
<div className="relative w-full ">
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
<Input
type="text"
placeholder="Search by name or bio..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-12 pr-4 py-6 text-lg border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[#664fa3] focus:ring-[#664fa3]"
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
/>
</div>
@@ -293,6 +317,11 @@ const MembersDirectory = () => {
)}
</div>
</div>
{/* Border Decoration */}
<Border />
{/* Members Grid */}
{loading ? (
<div className="text-center py-20">
@@ -300,7 +329,7 @@ const MembersDirectory = () => {
</div>
) : filteredMembers.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{filteredMembers.map((member) => (
{paginatedMembers.map((member) => (
<MemberCard key={member.id} member={member} />
))}
</div>
@@ -318,6 +347,11 @@ const MembersDirectory = () => {
</div>
)}
{/* Border Decoration */}
<Border yaxis="true" />
{/* Info Card */}
{!loading && members.length > 0 && (
<Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
@@ -526,6 +560,66 @@ const MembersDirectory = () => {
</DialogContent>
</Dialog>
{/* Pagination */}
{!loading && filteredMembers.length > 0 && (
<div className="mt-10 flex flex-col items-center gap-4 pb-12">
<p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
</p>
<div className="flex flex-wrap items-center justify-center gap-2">
<Button
onClick={() => setCurrentPage(1)}
disabled={currentPage === 1}
className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
>
First Page
</Button>
<Button
onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
disabled={currentPage === 1}
className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
>
Previous
</Button>
{Array.from({ length: totalPages }, (_, index) => {
const pageNumber = index + 1;
const isActive = pageNumber === currentPage;
return (
<Button
key={pageNumber}
onClick={() => setCurrentPage(pageNumber)}
className={
isActive
? "bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
: "bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full"
}
>
{pageNumber}
</Button>
);
})}
<Button
onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
disabled={currentPage === totalPages}
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
>
Next
</Button>
<Button
onClick={() => setCurrentPage(totalPages)}
disabled={currentPage === totalPages}
className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
>
Last Page
</Button>
</div>
</div>
)}
<MemberFooter />
</div>
);

66
src/utils/logger.js Normal file
View File

@@ -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;