feat: add AdminMemberTiers page, MemberBadge component, and SettingsLayout; refactor routes and sidebar for improved navigation

src/components/AdminSidebar.js

@@ -169,13 +169,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/bylaws',
       disabled: false
     },
-    {
-      name: 'Permissions',
-      icon: Shield,
-      path: '/admin/permissions',
-      disabled: false,
-      superadminOnly: true
-    },
+
     {
       name: 'Settings',
       icon: Settings,

src/components/MemberBadge.js

@@ -0,0 +1,19 @@
+// src/components/MemberBadge.js
+import React from 'react';
+import { Badge } from './ui/badge';
+import { getTierForMember } from '../utils/member-tiers';
+import { MEMBER_TIER_ICONS } from '../config/memberTierIcons';
+
+const MemberBadge = ({ memberSince, tiers }) => {
+  const tier = getTierForMember(memberSince, tiers);
+  const Icon = MEMBER_TIER_ICONS[tier.icon] || MEMBER_TIER_ICONS.FaUser;
+
+  return (
+    <Badge className={`px-3 py-1 rounded-md text-sm flex items-center gap-2 ${tier.badgeClass}`}>
+      <Icon className="h-4 w-4" />
+      {tier.label}
+    </Badge>
+  );
+};
+
+export default MemberBadge;

src/components/MemberCard.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import StatusBadge from './StatusBadge';
 import { Card } from './ui/card';
 import { Button } from './ui/button';
 import { Heart, Calendar, Mail, Phone, MapPin, Facebook, Instagram, Twitter, Linkedin, UserCircle } from 'lucide-react';
@@ -24,7 +23,7 @@ const MemberCard = ({ member, onViewProfile }) => {
         <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-end items-center'>
-                <StatusBadge status={member.membership_status || member.status} />
+               member since badge
             </div>
             <div className="flex justify-center mb-4">
                 {member.profile_photo_url ? (

src/components/SettingsSidebar.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { CreditCard, Shield, Settings, Star } from 'lucide-react';
+
+const settingsItems = [
+  { label: 'Stripe Integration', path: '/admin/settings/stripe', icon: CreditCard },
+  { label: 'Permissions', path: '/admin/settings/permissions', icon: Shield },
+  { label: 'Member Tiers', path: '/admin/settings/member-tiers', icon: Star },
+];
+
+const SettingsSidebar = () => {
+  return (
+    <aside className="w-full lg:w-64 shrink-0 bg-background border border-[var(--neutral-800)] rounded-2xl p-4 lg:sticky lg:top-8 h-max">
+      <div className="flex items-center gap-2 px-2 pb-3 border-b border-[var(--neutral-800)]">
+        <Settings className="h-4 w-4 text-[var(--purple-ink)]" />
+        <span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          Settings
+        </span>
+      </div>
+      <nav className="mt-3 space-y-1">
+        {settingsItems.map((item) => {
+          const Icon = item.icon;
+          return (
+            <NavLink
+              key={item.label}
+              to={item.path}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors',
+                  isActive
+                    ? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
+                    : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/10',
+                ].join(' ')
+              }
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.label}</span>
+            </NavLink>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+};
+
+export default SettingsSidebar;