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.

src/pages/admin/AdminSubscriptions.js

@@ -19,7 +19,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from '../../components/ui/dialog';
-import { Badge } from '../../components/ui/badge';
 import api from '../../utils/api';
 import { toast } from 'sonner';
 import {
@@ -47,6 +46,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
+import StatusBadge from '@/components/StatusBadge';
 
 const AdminSubscriptions = () => {
   const { hasPermission } = useAuth();
@@ -302,14 +302,7 @@ Proceed with activation?`;
     }
   };
 
-  const getStatusBadgeVariant = (status) => {
-    const variants = {
-      active: 'default',
-      cancelled: 'destructive',
-      expired: 'secondary'
-    };
-    return variants[status] || 'outline';
-  };
+
 
   if (loading) {
     return (
@@ -501,7 +494,7 @@ Proceed with activation?`;
                         {sub.user.email}
                       </p>
                     </div>
-                    <Badge variant={getStatusBadgeVariant(sub.status)}>{sub.status}</Badge>
+                    <StatusBadge status={sub.status} />
                   </div>
 
                   {/* Plan & Period */}
@@ -635,9 +628,8 @@ Proceed with activation?`;
                           </div>
                         </td>
                         <td className="p-4">
-                          <Badge variant={getStatusBadgeVariant(sub.status)}>
-                            {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" }}>