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/layouts/AdminLayout.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useTheme } from 'next-themes';
+import { Menu } from 'lucide-react';
 import AdminSidebar from '../components/AdminSidebar';
 
 const AdminLayout = ({ children }) => {
@@ -64,6 +65,23 @@ const AdminLayout = ({ children }) => {
 
       {/* Main Content Area */}
       <main className="flex-1 overflow-y-auto scrollbar-dashboard">
+        {isMobile && (
+          <div className="sticky top-0 z-20 bg-background/90 backdrop-blur border-b border-[var(--neutral-800)] px-4 py-3 flex items-center gap-3">
+            <button
+              onClick={toggleSidebar}
+              className="p-2 rounded-lg hover:bg-[var(--neutral-800)]/20 transition-colors"
+              aria-label={sidebarOpen ? 'Close sidebar' : 'Open sidebar'}
+            >
+              <Menu className="h-5 w-5 text-primary" />
+            </button>
+            <span
+              className="text-sm font-semibold text-primary"
+              style={{ fontFamily: "'Inter', sans-serif" }}
+            >
+              Menu
+            </span>
+          </div>
+        )}
         <div className="max-w-7xl mx-auto px-6 py-8">
           {children}
         </div>