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