- Add Settings menu for Stripe configuration- In the Member Profile page, Superadmin can assign new Role to the member- Stripe Configuration is now stored with encryption in Database

src/components/AdminSidebar.js

@@ -175,17 +175,28 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/permissions',
       disabled: false,
       superadminOnly: true
+    },
+    {
+      name: 'Settings',
+      icon: Settings,
+      path: '/admin/settings',
+      disabled: false,
+      superadminOnly: true
     }
   ];
 
   // Filter nav items based on user role
   const filteredNavItems = navItems.filter(item => {
     if (item.superadminOnly && user?.role !== 'superadmin') {
+      console.log('Filtering out superadmin-only item:', item.name, 'User role:', user?.role);
       return false;
     }
     return true;
   });
 
+  // Debug: Log filtered items count
+  console.log('Total nav items:', navItems.length, 'Filtered items:', filteredNavItems.length, 'User role:', user?.role);
+
   const isActive = (path) => {
     if (path === '/admin') {
       return location.pathname === '/admin';
@@ -364,11 +375,21 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
           </div>
 
-          {/* Permissions - Superadmin only (no header) */}
+          {/* SYSTEM Section - Superadmin only */}
           {user?.role === 'superadmin' && (
-            <div className="mt-6">
-              {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
-            </div>
+            <>
+              {isOpen && (
+                <div className="px-4 py-2 mt-6">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    System
+                  </h3>
+                </div>
+              )}
+              <div className="space-y-1">
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Settings'))}
+              </div>
+            </>
           )}
         </nav>
 

src/components/ChangeRoleDialog.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
+import { Button } from './ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Label } from './ui/label';
+import { AlertCircle, Shield } from 'lucide-react';
+import api from '../utils/api';
+import { toast } from 'sonner';
+
+export default function ChangeRoleDialog({ open, onClose, user, onSuccess }) {
+  const [roles, setRoles] = useState([]);
+  const [selectedRole, setSelectedRole] = useState('');
+  const [selectedRoleId, setSelectedRoleId] = useState(null);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchRoles();
+      // Pre-select current role
+      setSelectedRole(user.role);
+      setSelectedRoleId(user.role_id);
+    }
+  }, [open, user]);
+
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      // Reuse existing endpoint that returns assignable roles based on privilege
+      const response = await api.get('/admin/roles/assignable');
+      // Map API response to format expected by Select component
+      const mappedRoles = response.data.map(role => ({
+        value: role.code,
+        label: role.name,
+        id: role.id,
+        description: role.description
+      }));
+      setRoles(mappedRoles);
+    } catch (error) {
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedRole) {
+      toast.error('Please select a role');
+      return;
+    }
+
+    // Don't submit if role hasn't changed
+    if (selectedRole === user.role && selectedRoleId === user.role_id) {
+      toast.info('The selected role is the same as current role');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await api.put(`/admin/users/${user.id}/role`, {
+        role: selectedRole,
+        role_id: selectedRoleId
+      });
+
+      toast.success(`Role changed to ${selectedRole}`);
+
+      onSuccess();
+      onClose();
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Failed to change role';
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-[#664fa3]" />
+            Change User Role
+          </DialogTitle>
+          <DialogDescription>
+            Change role for {user.first_name} {user.last_name} ({user.email})
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Current Role Display */}
+          <div className="p-3 bg-[#f1eef9] rounded-lg border border-[#DDD8EB]">
+            <p className="text-sm text-gray-600">Current Role</p>
+            <p className="font-semibold text-[#664fa3] capitalize">{user.role}</p>
+          </div>
+
+          {/* Role Selection */}
+          <div className="space-y-2">
+            <Label htmlFor="role">New Role</Label>
+            <Select value={selectedRole} onValueChange={setSelectedRole} disabled={loadingRoles}>
+              <SelectTrigger>
+                <SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select role"} />
+              </SelectTrigger>
+              <SelectContent>
+                {roles.map((role) => (
+                  <SelectItem key={role.value} value={role.value}>
+                    <span className="capitalize">{role.label}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Warning for privileged roles */}
+          {(selectedRole === 'admin' || selectedRole === 'superadmin') && (
+            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+              <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-semibold text-amber-900">Admin Access Warning</p>
+                <p className="text-amber-700">
+                  This user will gain full administrative access to the system.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={submitting}
+            className="border-2 border-gray-300 rounded-full"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={submitting || loadingRoles}
+            className="bg-[#664fa3] hover:bg-[#7d5ec2] text-white rounded-full"
+          >
+            {submitting ? 'Changing Role...' : 'Change Role'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}