feat: Introduce StatusBadge component for consistent status representation
- Added StatusBadge component to standardize the display of user and membership statuses across various admin pages. - Refactored AdminMembers, AdminPlans, AdminStaff, AdminSubscriptions, AdminUserView, AdminValidations, and MembersDirectory to utilize the new StatusBadge component. - Removed redundant status badge logic from AdminMembers, AdminStaff, and AdminValidations. - Updated AdminLayout to include a mobile-friendly sidebar toggle button with Menu icon. - Created MemberCard component to encapsulate member display logic, improving code reusability. - Adjusted various components to enhance user experience and maintain consistent styling.
This commit is contained in:
@@ -4,7 +4,6 @@ import { useAuth } from '../../context/AuthContext';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
|
||||
import {
|
||||
@@ -20,6 +19,7 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
import CreateMemberDialog from '../../components/CreateMemberDialog';
|
||||
import InviteStaffDialog from '../../components/InviteStaffDialog';
|
||||
import WordPressImportWizard from '../../components/WordPressImportWizard';
|
||||
import StatusBadge from '../../components/StatusBadge';
|
||||
import { StatCard } from '@/components/StatCard';
|
||||
|
||||
const AdminMembers = () => {
|
||||
@@ -200,27 +200,6 @@ const AdminMembers = () => {
|
||||
};
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
const config = {
|
||||
pending_email: { label: 'Pending Email', variant: 'orange2' },
|
||||
pending_validation: { label: 'Pending Validation', variant: 'gray' },
|
||||
pre_validated: { label: 'Pre-Validated', variant: 'green' },
|
||||
payment_pending: { label: 'Payment Pending', variant: 'orange' },
|
||||
active: { label: 'Active', variant: 'green' },
|
||||
inactive: { label: 'Inactive', variant: 'gray2' },
|
||||
canceled: { label: 'Canceled', variant: 'red' },
|
||||
expired: { label: 'Expired', variant: 'red2' },
|
||||
abandoned: { label: 'Abandoned', variant: 'gray3' }
|
||||
};
|
||||
|
||||
const statusConfig = config[status] || config.inactive;
|
||||
return (
|
||||
<Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getReminderInfo = (user) => {
|
||||
const emailReminders = user.email_verification_reminders_sent || 0;
|
||||
const eventReminders = user.event_attendance_reminders_sent || 0;
|
||||
@@ -325,8 +304,6 @@ const AdminMembers = () => {
|
||||
Quick Overview
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
|
||||
|
||||
|
||||
<StatCard
|
||||
title="Total Members"
|
||||
value={users.length}
|
||||
@@ -355,9 +332,6 @@ const AdminMembers = () => {
|
||||
iconBgClass=" text-brand-pink"
|
||||
dataTestId="stat-inactive-members"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -401,7 +375,8 @@ const AdminMembers = () => {
|
||||
) : filteredUsers.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{filteredUsers.map((user) => {
|
||||
const joinedDate = user.member_since || user.created_at;
|
||||
const joinedDate = user.created_at;
|
||||
const memberDate = user.member_since;
|
||||
return (
|
||||
<Card
|
||||
key={user.id}
|
||||
@@ -421,12 +396,13 @@ const AdminMembers = () => {
|
||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{user.first_name} {user.last_name}
|
||||
</h3>
|
||||
{getStatusBadge(user.status)}
|
||||
<StatusBadge status={user.status} />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p>Email: {user.email}</p>
|
||||
<p>Phone: {user.phone}</p>
|
||||
<p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
|
||||
<p>Registered: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
|
||||
<p>Member Since: {memberDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
|
||||
{user.referred_by_member_name && (
|
||||
<p>Referred by: {user.referred_by_member_name}</p>
|
||||
)}
|
||||
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
Search,
|
||||
DollarSign
|
||||
} from 'lucide-react';
|
||||
import StatusBadge from '@/components/StatusBadge';
|
||||
|
||||
const AdminPlans = () => {
|
||||
const { hasPermission } = useAuth();
|
||||
@@ -236,7 +237,7 @@ const AdminPlans = () => {
|
||||
{plan.active ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
{plan.subscriber_count > 0 && (
|
||||
<Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
|
||||
<Badge className="bg-[var(--neutral-800)] hover:text-white text-[var(--purple-ink)]">
|
||||
<Users className="h-3 w-3 mr-1" />
|
||||
{plan.subscriber_count}
|
||||
</Badge>
|
||||
|
||||
@@ -12,7 +12,10 @@ import CreateStaffDialog from '../../components/CreateStaffDialog';
|
||||
import InviteStaffDialog from '../../components/InviteStaffDialog';
|
||||
import PendingInvitationsTable from '../../components/PendingInvitationsTable';
|
||||
import { toast } from 'sonner';
|
||||
import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX } from 'lucide-react';
|
||||
import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck, UserX, ShieldIcon } from 'lucide-react';
|
||||
import StatusBadge from '../../components/StatusBadge';
|
||||
import { StatCard } from '@/components/StatCard';
|
||||
import { CircleMinus, CreditCard, Users } from 'lucide-react';
|
||||
|
||||
const AdminStaff = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -97,37 +100,8 @@ const AdminStaff = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleBadge = (role) => {
|
||||
const config = {
|
||||
superadmin: { label: 'Superadmin', variant: 'purple' },
|
||||
admin: { label: 'Admin', variant: 'green' },
|
||||
moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
|
||||
staff: { label: 'Staff', variant: 'gray' },
|
||||
media: { label: 'Media', variant: 'gray2' }
|
||||
};
|
||||
|
||||
const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
|
||||
return (
|
||||
<Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
|
||||
<Shield className="h-3 w-3 mr-1 inline" />
|
||||
{roleConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
const config = {
|
||||
active: { label: 'Active', variant: 'green' },
|
||||
inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
|
||||
};
|
||||
|
||||
const statusConfig = config[status] || config.inactive;
|
||||
return (
|
||||
<Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -141,6 +115,7 @@ const AdminStaff = () => {
|
||||
Manage internal team members and their roles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 ">
|
||||
{hasPermission('users.create') && (
|
||||
<Button
|
||||
@@ -165,31 +140,41 @@ const AdminStaff = () => {
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid 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 mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
|
||||
<p className="text-3xl 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 mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
|
||||
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
||||
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
|
||||
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{users.filter(u => u.role === 'moderator').length}
|
||||
</p>
|
||||
</Card>
|
||||
<Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
|
||||
<p className="text-sm text-brand-purple mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
|
||||
<p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{users.filter(u => u.status === 'active').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"
|
||||
//TODO: refractor codebase to have a central admin and user roles config - when user adds roles, they should be added to the config
|
||||
value={users.filter(u => ['admin', 'superadmin', 'finance', 'staff', 'media', 'moderator'].includes(u.role)).length}
|
||||
icon={Users}
|
||||
iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
|
||||
dataTestId="stat-total-members"
|
||||
/>
|
||||
<StatCard
|
||||
title="Admins"
|
||||
value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
|
||||
icon={Shield}
|
||||
iconBgClass="text-[var(--green-light)]"
|
||||
dataTestId="stat-active-members"
|
||||
/>
|
||||
<StatCard
|
||||
title="Moderators"
|
||||
value={users.filter(u => u.role === 'moderator').length}
|
||||
icon={CreditCard}
|
||||
iconBgClass="text-brand-light-orange"
|
||||
dataTestId="stat-payment-pending-members"
|
||||
/>
|
||||
<StatCard
|
||||
title="Inactive"
|
||||
value={users.filter(u => ['admin', 'superadmin'].includes(u.role)).length && users.filter(u => u.status !== 'inactive').length}
|
||||
icon={CircleMinus}
|
||||
iconBgClass=" text-brand-pink"
|
||||
dataTestId="stat-inactive-members"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
@@ -250,79 +235,79 @@ const AdminStaff = () => {
|
||||
className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
|
||||
data-testid={`staff-card-${user.id}`}
|
||||
>
|
||||
<div className="flex justify-between items-start flex-wrap gap-4">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
{/* Avatar */}
|
||||
<div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
|
||||
{user.first_name?.[0]}{user.last_name?.[0]}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{user.first_name} {user.last_name}
|
||||
</h3>
|
||||
{getRoleBadge(user.role)}
|
||||
{getStatusBadge(user.status)}
|
||||
<div className="flex justify-between items-start flex-wrap gap-4">
|
||||
<div className="flex items-start gap-4 flex-1">
|
||||
{/* Avatar */}
|
||||
<div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
|
||||
{user.first_name?.[0]}{user.last_name?.[0]}
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p>Email: {user.email}</p>
|
||||
<p>Phone: {user.phone}</p>
|
||||
<p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
|
||||
{user.last_login && (
|
||||
<p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
|
||||
)}
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-2 flex-wrap">
|
||||
<h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{user.first_name} {user.last_name}
|
||||
</h3>
|
||||
<StatusBadge status={user.role} />
|
||||
<StatusBadge status={user.status} />
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
<p>Email: {user.email}</p>
|
||||
<p>Phone: {user.phone}</p>
|
||||
<p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
|
||||
{user.last_login && (
|
||||
<p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
onClick={() => navigate(`/admin/users/${user.id}`)}
|
||||
variant="outline"
|
||||
className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Manage
|
||||
</Button>
|
||||
|
||||
{hasPermission('users.status') && (
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
<Button
|
||||
onClick={() => handleToggleStatus(user.id, user.status)}
|
||||
onClick={() => navigate(`/admin/users/${user.id}`)}
|
||||
variant="outline"
|
||||
className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
|
||||
? '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'
|
||||
}`}
|
||||
className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
|
||||
>
|
||||
{user.status === 'active' ? (
|
||||
<>
|
||||
<UserX className="h-4 w-4 mr-2" />
|
||||
Deactivate
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserCheck className="h-4 w-4 mr-2" />
|
||||
Activate
|
||||
</>
|
||||
)}
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Manage
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{hasPermission('users.delete') && (
|
||||
<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 dark:hover:bg-red-600/10 rounded-full px-4 py-2"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
{hasPermission('users.status') && (
|
||||
<Button
|
||||
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 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' ? (
|
||||
<>
|
||||
<UserX className="h-4 w-4 mr-2" />
|
||||
Deactivate
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<UserCheck className="h-4 w-4 mr-2" />
|
||||
Activate
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{hasPermission('users.delete') && (
|
||||
<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 dark:hover:bg-red-600/10 rounded-full px-4 py-2"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -19,7 +19,6 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '../../components/ui/dialog';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import api from '../../utils/api';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
@@ -47,6 +46,7 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '../../components/ui/dropdown-menu';
|
||||
import StatusBadge from '@/components/StatusBadge';
|
||||
|
||||
const AdminSubscriptions = () => {
|
||||
const { hasPermission } = useAuth();
|
||||
@@ -302,14 +302,7 @@ Proceed with activation?`;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadgeVariant = (status) => {
|
||||
const variants = {
|
||||
active: 'default',
|
||||
cancelled: 'destructive',
|
||||
expired: 'secondary'
|
||||
};
|
||||
return variants[status] || 'outline';
|
||||
};
|
||||
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -501,7 +494,7 @@ Proceed with activation?`;
|
||||
{sub.user.email}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
|
||||
<StatusBadge status={sub.status} />
|
||||
</div>
|
||||
|
||||
{/* Plan & Period */}
|
||||
@@ -635,9 +628,8 @@ Proceed with activation?`;
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<Badge variant={getStatusBadgeVariant(sub.status)}>
|
||||
{sub.status}
|
||||
</Badge>
|
||||
<StatusBadge status={sub.status} />
|
||||
|
||||
</td>
|
||||
<td className="p-4">
|
||||
<div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
|
||||
@@ -10,6 +10,7 @@ import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera,
|
||||
import { toast } from 'sonner';
|
||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
import ChangeRoleDialog from '../../components/ChangeRoleDialog';
|
||||
import StatusBadge from '../../components/StatusBadge';
|
||||
|
||||
const AdminUserView = () => {
|
||||
const { userId } = useParams();
|
||||
@@ -277,7 +278,7 @@ const AdminUserView = () => {
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (!user) return null;
|
||||
|
||||
const joinedDate = user.member_since || user.created_at;
|
||||
const joinedDate = user.created_at;
|
||||
const memberSinceBaseline = formatDateInputValue(user.member_since);
|
||||
const memberSinceHasChanges = memberSince !== memberSinceBaseline;
|
||||
|
||||
@@ -311,8 +312,9 @@ const AdminUserView = () => {
|
||||
{user.first_name} {user.last_name}
|
||||
</h1>
|
||||
{/* Status & Role Badges */}
|
||||
<Badge>{user.status}</Badge>
|
||||
<Badge>{user.role}</Badge>
|
||||
<StatusBadge status={user.status} />
|
||||
<StatusBadge status={user.role} />
|
||||
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
@@ -331,7 +333,7 @@ const AdminUserView = () => {
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>Joined {formatDateDisplayValue(joinedDate)}</span>
|
||||
<span>Registered: {formatDateDisplayValue(joinedDate)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -506,13 +508,7 @@ const AdminUserView = () => {
|
||||
{sub.plan.billing_cycle}
|
||||
</p>
|
||||
</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>
|
||||
<StatusBadge status={sub.status} />
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4 text-sm">
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useAuth } from '../../context/AuthContext';
|
||||
import api from '../../utils/api';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import { Badge } from '../../components/ui/badge';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
@@ -34,6 +33,7 @@ import { CheckCircle, Clock, Search, ArrowUp, ArrowDown, X } from 'lucide-react'
|
||||
import PaymentActivationDialog from '../../components/PaymentActivationDialog';
|
||||
import ConfirmationDialog from '../../components/ConfirmationDialog';
|
||||
import RejectionDialog from '../../components/RejectionDialog';
|
||||
import StatusBadge from '@/components/StatusBadge';
|
||||
|
||||
const AdminValidations = () => {
|
||||
const { hasPermission } = useAuth();
|
||||
@@ -235,22 +235,7 @@ const AdminValidations = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusBadge = (status) => {
|
||||
const config = {
|
||||
pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
|
||||
pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
|
||||
pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
|
||||
payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
|
||||
rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
|
||||
};
|
||||
|
||||
const statusConfig = config[status];
|
||||
return (
|
||||
<Badge className={`${statusConfig.className} px-2 py-1 rounded-full text-xs`}>
|
||||
{statusConfig.label}
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const handleSort = (column) => {
|
||||
if (sortBy === column) {
|
||||
@@ -401,7 +386,7 @@ const AdminValidations = () => {
|
||||
</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>{user.phone}</TableCell>
|
||||
<TableCell>{getStatusBadge(user.status)}</TableCell>
|
||||
<TableCell><StatusBadge status={user.status} /></TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.created_at).toLocaleDateString()}
|
||||
</TableCell>
|
||||
|
||||
@@ -15,6 +15,8 @@ import {
|
||||
} from '../../components/ui/dialog';
|
||||
import { User, Search, Mail, MapPin, Phone, Heart, Facebook, Instagram, Twitter, Linkedin, UserCircle, Calendar } from 'lucide-react';
|
||||
import { useToast } from '../../hooks/use-toast';
|
||||
import StatusBadge from '@/components/StatusBadge';
|
||||
import MemberCard from '../../components/MemberCard';
|
||||
|
||||
const MembersDirectory = () => {
|
||||
const [members, setMembers] = useState([]);
|
||||
@@ -80,9 +82,7 @@ const MembersDirectory = () => {
|
||||
|
||||
const totalMembers = members.length;
|
||||
|
||||
const getInitials = (firstName, lastName) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
|
||||
};
|
||||
|
||||
|
||||
const getSocialMediaLink = (url) => {
|
||||
if (!url) return null;
|
||||
@@ -118,168 +118,6 @@ const MembersDirectory = () => {
|
||||
: <div className=' border-2 w-full border-brand-purple mb-24' />
|
||||
)
|
||||
}
|
||||
const MemberCard = ({ member }) => {
|
||||
const joinedDate = member.member_since || member.created_at;
|
||||
return (
|
||||
<Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
|
||||
{/* Profile Photo */}
|
||||
<div className="flex justify-center mb-4">
|
||||
{member.profile_photo_url ? (
|
||||
<img
|
||||
src={member.profile_photo_url}
|
||||
alt={`${member.first_name} ${member.last_name}`}
|
||||
className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
|
||||
<span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{getInitials(member.first_name, member.last_name)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Name */}
|
||||
<h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{member.first_name} {member.last_name}
|
||||
</h3>
|
||||
|
||||
{/* Partner Name */}
|
||||
{member.directory_partner_name && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Heart className="h-4 w-4 text-[var(--orange-light)]" />
|
||||
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Partner: {member.directory_partner_name}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bio */}
|
||||
{member.directory_bio && (
|
||||
<p className="text-brand-purple text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{member.directory_bio}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Member Since */}
|
||||
{joinedDate && (
|
||||
<div className="flex items-center justify-center gap-2 mb-4">
|
||||
<Calendar className="h-4 w-4 text-brand-purple " />
|
||||
<span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
Member since {new Date(joinedDate).toLocaleDateString('en-US', {
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-3 mb-4">
|
||||
{member.directory_email && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Mail className="h-4 w-4 text-brand-purple flex-shrink-0" />
|
||||
<a
|
||||
href={`mailto:${member.directory_email}`}
|
||||
className="text-brand-purple hover:text-[var(--purple-ink)] truncate"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{member.directory_email}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{member.directory_phone && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Phone className="h-4 w-4 text-brand-purple flex-shrink-0" />
|
||||
<a
|
||||
href={`tel:${member.directory_phone}`}
|
||||
className="text-brand-purple hover:text-[var(--purple-ink)]"
|
||||
style={{ fontFamily: "'Nunito Sans', sans-serif" }}
|
||||
>
|
||||
{member.directory_phone}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{member.directory_address && (
|
||||
<div className="flex items-start gap-2 text-sm">
|
||||
<MapPin className="h-4 w-4 text-brand-purple flex-shrink-0 mt-0.5" />
|
||||
<span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
{member.directory_address}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Social Media Links */}
|
||||
{(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
|
||||
<div className="pt-4 border-t border-[var(--neutral-800)]">
|
||||
<div className="flex justify-center gap-3">
|
||||
{member.social_media_facebook && (
|
||||
<a
|
||||
href={getSocialMediaLink(member.social_media_facebook)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Facebook"
|
||||
>
|
||||
<Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{member.social_media_instagram && (
|
||||
<a
|
||||
href={getSocialMediaLink(member.social_media_instagram)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Instagram"
|
||||
>
|
||||
<Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{member.social_media_twitter && (
|
||||
<a
|
||||
href={getSocialMediaLink(member.social_media_twitter)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="Twitter/X"
|
||||
>
|
||||
<Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
|
||||
</a>
|
||||
)}
|
||||
|
||||
{member.social_media_linkedin && (
|
||||
<a
|
||||
href={getSocialMediaLink(member.social_media_linkedin)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
|
||||
title="LinkedIn"
|
||||
>
|
||||
<Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* View Profile Button */}
|
||||
<div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
|
||||
<Button
|
||||
onClick={() => handleViewProfile(member.id)}
|
||||
className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-white rounded-full py-5"
|
||||
>
|
||||
<UserCircle className="h-4 w-4 mr-2" />
|
||||
View Full Profile
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
|
||||
@@ -354,7 +192,7 @@ const MembersDirectory = () => {
|
||||
|
||||
{/* Border Decoration */}
|
||||
<Border yaxis="true" />
|
||||
|
||||
{/* todo: use badge to display if member */}
|
||||
{/* Info Card */}
|
||||
{!loading && members.length > 0 && (
|
||||
<Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
|
||||
@@ -377,15 +215,16 @@ const MembersDirectory = () => {
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Profile Detail Dialog */}
|
||||
<Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
|
||||
{selectedMember && (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
<DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)] flex items-center justify-between mr-8" style={{ fontFamily: "'Inter', sans-serif" }}>
|
||||
{selectedMember.first_name} {selectedMember.last_name}
|
||||
{/* todo: figure out the correct selection to get the status of the user and pass into badge */}
|
||||
<StatusBadge status={selectedMember.status} />
|
||||
</DialogTitle>
|
||||
{selectedMember.directory_partner_name && (
|
||||
<DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
|
||||
@@ -563,8 +402,6 @@ const MembersDirectory = () => {
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && filteredMembers.length > 0 && (
|
||||
<div className="mt-10 flex flex-col items-center gap-4 pb-12">
|
||||
|
||||
Reference in New Issue
Block a user