.env.development

@@ -0,0 +1,3 @@
+REACT_APP_BACKEND_URL=http://localhost:8000
+REACT_APP_BASENAME=/membership
+PUBLIC_URL=/membership

src/components/InviteStaffDialog.js

@@ -40,15 +40,14 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
   const fetchRoles = async () => {
     setLoadingRoles(true);
     try {
-      const response = await api.get('/admin/roles');
-      // Filter to show only admin-type roles (not guest or member)
-      const staffRoles = response.data.filter(role =>
-        ['admin', 'superadmin', 'finance'].includes(role.code) || !role.is_system_role
-      );
-      setRoles(staffRoles);
+      // New endpoint returns roles based on user's permission level
+      // Superadmin: all roles
+      // Admin: admin, finance, and non-elevated custom roles
+      const response = await api.get('/admin/roles/assignable');
+      setRoles(response.data);
     } catch (error) {
-      console.error('Failed to fetch roles:', error);
-      toast.error('Failed to load roles');
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
     } finally {
       setLoadingRoles(false);
     }

src/pages/admin/AdminBylaws.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from 'lucide-react';
 
 const AdminBylaws = () => {
+  const { hasPermission } = useAuth();
   const [bylaws, setBylaws] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -184,6 +186,7 @@ const AdminBylaws = () => {
             Manage LOAF governing bylaws and version history
           </p>
         </div>
+        {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -191,6 +194,7 @@ const AdminBylaws = () => {
             <Plus className="h-4 w-4" />
             Add Version
           </Button>
+        )}
       </div>
 
       {/* Current Bylaws */}
@@ -226,6 +230,7 @@ const AdminBylaws = () => {
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
               </Button>
+              {hasPermission('bylaws.edit') && (
                 <Button
                   variant="outline"
                   size="sm"
@@ -234,6 +239,8 @@ const AdminBylaws = () => {
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
+              )}
+              {hasPermission('bylaws.delete') && (
                 <Button
                   variant="outline"
                   size="sm"
@@ -242,6 +249,7 @@ const AdminBylaws = () => {
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
+              )}
             </div>
           </div>
           <div className="flex items-center gap-4 text-sm text-[#664fa3]">
@@ -254,10 +262,12 @@ const AdminBylaws = () => {
         <Card className="p-12 text-center">
           <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
+          {hasPermission('bylaws.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
+          )}
         </Card>
       )}
 
@@ -290,6 +300,7 @@ const AdminBylaws = () => {
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
+                    {hasPermission('bylaws.edit') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -298,6 +309,8 @@ const AdminBylaws = () => {
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
+                    )}
+                    {hasPermission('bylaws.delete') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -306,6 +319,7 @@ const AdminBylaws = () => {
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
+                    )}
                   </div>
                 </div>
               </Card>

src/pages/admin/AdminDonations.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
@@ -31,6 +32,7 @@ import {
 } from 'lucide-react';
 
 const AdminDonations = () => {
+  const { hasPermission } = useAuth();
   const [donations, setDonations] = useState([]);
   const [filteredDonations, setFilteredDonations] = useState([]);
   const [stats, setStats] = useState({});
@@ -269,6 +271,7 @@ const AdminDonations = () => {
                 className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
               />
             </div>
+            {hasPermission('donations.export') && (
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
@@ -296,6 +299,7 @@ const AdminDonations = () => {
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
+            )}
           </div>
 
           {/* Filters Row */}

src/pages/admin/AdminFinancials.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -31,6 +32,7 @@ import {
 } from 'lucide-react';
 
 const AdminFinancials = () => {
+  const { hasPermission } = useAuth();
   const [reports, setReports] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -162,6 +164,7 @@ const AdminFinancials = () => {
             Manage annual financial reports
           </p>
         </div>
+        {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -169,6 +172,7 @@ const AdminFinancials = () => {
             <Plus className="h-4 w-4" />
             Add Report
           </Button>
+        )}
       </div>
 
       {/* Reports List */}
@@ -176,10 +180,12 @@ const AdminFinancials = () => {
         <Card className="p-12 text-center">
           <TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No financial reports yet</p>
+          {hasPermission('financials.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
+          )}
         </Card>
       ) : (
         <div className="space-y-4">
@@ -209,7 +215,9 @@ const AdminFinancials = () => {
                     </Button>
                   </div>
                 </div>
+                {(hasPermission('financials.edit') || hasPermission('financials.delete')) && (
                   <div className="flex gap-2">
+                    {hasPermission('financials.edit') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -218,6 +226,8 @@ const AdminFinancials = () => {
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
+                    )}
+                    {hasPermission('financials.delete') && (
                       <Button
                         variant="outline"
                         size="sm"
@@ -226,7 +236,9 @@ const AdminFinancials = () => {
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
+                    )}
                   </div>
+                )}
               </div>
             </Card>
           ))}

src/pages/admin/AdminGallery.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Link } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -20,6 +21,7 @@ import { toast } from 'sonner';
 import moment from 'moment';
 
 const AdminGallery = () => {
+  const { hasPermission } = useAuth();
   const [events, setEvents] = useState([]);
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [galleryImages, setGalleryImages] = useState([]);
@@ -206,7 +208,7 @@ const AdminGallery = () => {
             </div>
           )}
 
-          {selectedEvent && (
+          {selectedEvent && hasPermission('gallery.upload') && (
             <div className="pt-4">
               <input
                 type="file"
@@ -267,7 +269,9 @@ const AdminGallery = () => {
                   </div>
 
                   {/* Overlay with Actions */}
+                  {(hasPermission('gallery.edit') || hasPermission('gallery.delete')) && (
                     <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl flex flex-col items-center justify-center gap-2">
+                      {hasPermission('gallery.edit') && (
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
@@ -277,6 +281,8 @@ const AdminGallery = () => {
                           <Edit className="h-4 w-4 mr-1" />
                           Caption
                         </Button>
+                      )}
+                      {hasPermission('gallery.delete') && (
                         <Button
                           onClick={() => handleDeleteImage(image.id)}
                           size="sm"
@@ -286,7 +292,9 @@ const AdminGallery = () => {
                           <Trash2 className="h-4 w-4 mr-1" />
                           Delete
                         </Button>
+                      )}
                     </div>
+                  )}
 
                   {/* Caption Preview */}
                   {image.caption && (

src/pages/admin/AdminNewsletters.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -32,6 +33,7 @@ import {
 } from 'lucide-react';
 
 const AdminNewsletters = () => {
+  const { hasPermission } = useAuth();
   const [newsletters, setNewsletters] = useState([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -190,6 +192,7 @@ const AdminNewsletters = () => {
             Create and manage newsletter archive
           </p>
         </div>
+        {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
             className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
@@ -197,6 +200,7 @@ const AdminNewsletters = () => {
             <Plus className="h-4 w-4" />
             Add Newsletter
           </Button>
+        )}
       </div>
 
       {/* Newsletters List */}
@@ -204,10 +208,12 @@ const AdminNewsletters = () => {
         <Card className="p-12 text-center">
           <FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
           <p className="text-[#664fa3] text-lg mb-4">No newsletters yet</p>
+          {hasPermission('newsletters.create') && (
             <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Newsletter
             </Button>
+          )}
         </Card>
       ) : (
         <div className="space-y-6">
@@ -246,7 +252,9 @@ const AdminNewsletters = () => {
                           </Button>
                         </div>
                       </div>
+                      {(hasPermission('newsletters.edit') || hasPermission('newsletters.delete')) && (
                         <div className="flex gap-2">
+                          {hasPermission('newsletters.edit') && (
                             <Button
                               variant="outline"
                               size="sm"
@@ -255,6 +263,8 @@ const AdminNewsletters = () => {
                             >
                               <Edit className="h-4 w-4" />
                             </Button>
+                          )}
+                          {hasPermission('newsletters.delete') && (
                             <Button
                               variant="outline"
                               size="sm"
@@ -263,7 +273,9 @@ const AdminNewsletters = () => {
                             >
                               <Trash2 className="h-4 w-4" />
                             </Button>
+                          )}
                         </div>
+                      )}
                     </div>
                   </Card>
                 ))}

src/pages/admin/AdminPlans.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -24,6 +25,7 @@ import {
 } from 'lucide-react';
 
 const AdminPlans = () => {
+  const { hasPermission } = useAuth();
   const [plans, setPlans] = useState([]);
   const [filteredPlans, setFilteredPlans] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -136,6 +138,7 @@ const AdminPlans = () => {
               Manage membership plans and pricing.
             </p>
           </div>
+          {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
               className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
@@ -143,6 +146,7 @@ const AdminPlans = () => {
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
             </Button>
+          )}
         </div>
       </div>
 
@@ -286,6 +290,7 @@ const AdminPlans = () => {
               </div>
 
               {/* Actions */}
+              {hasPermission('subscriptions.plans') && (
                 <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
                   <Button
                     onClick={() => handleEditPlan(plan)}
@@ -307,6 +312,7 @@ const AdminPlans = () => {
                     Delete
                   </Button>
                 </div>
+              )}
 
               {/* Warning for plans with subscribers */}
               {plan.subscriber_count > 0 && (
@@ -328,7 +334,7 @@ const AdminPlans = () => {
               ? 'Try adjusting your filters'
               : 'Create your first subscription plan to get started'}
           </p>
-          {!searchQuery && activeFilter === 'all' && (
+          {!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
               className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"

src/pages/admin/AdminStaff.js

@@ -16,7 +16,7 @@ import { UserCog, Search, Shield, UserPlus, Mail, Edit, Eye, Trash2, UserCheck,
 
 const AdminStaff = () => {
   const navigate = useNavigate();
-  const { hasPermission } = useAuth();
+  const { hasPermission, user } = useAuth();
   const [users, setUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -142,7 +142,7 @@ const AdminStaff = () => {
             </p>
           </div>
           <div className="flex gap-3">
-            {hasPermission('users.invite') && (
+            {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
                 className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"

src/pages/admin/AdminSubscriptions.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Input } from '../../components/ui/input';
@@ -44,6 +45,7 @@ import {
 } from '../../components/ui/dropdown-menu';
 
 const AdminSubscriptions = () => {
+  const { hasPermission } = useAuth();
   const [subscriptions, setSubscriptions] = useState([]);
   const [filteredSubscriptions, setFilteredSubscriptions] = useState([]);
   const [plans, setPlans] = useState([]);
@@ -412,6 +414,7 @@ Proceed with activation?`;
           </div>
 
           {/* Export Dropdown */}
+          {hasPermission('subscriptions.export') && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button
@@ -439,6 +442,7 @@ Proceed with activation?`;
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
+          )}
         </div>
       </Card>
 
@@ -503,6 +507,7 @@ Proceed with activation?`;
 
                   {/* Actions */}
                   <div className="flex gap-2 pt-2">
+                    {hasPermission('subscriptions.edit') && (
                       <Button
                         size="sm"
                         variant="outline"
@@ -512,7 +517,8 @@ Proceed with activation?`;
                         <Edit className="h-4 w-4 mr-2" />
                         Edit
                       </Button>
-                    {sub.status === 'active' && (
+                    )}
+                    {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                       <Button
                         size="sm"
                         variant="outline"
@@ -607,6 +613,7 @@ Proceed with activation?`;
                     </td>
                     <td className="p-4">
                       <div className="flex items-center justify-center gap-2">
+                        {hasPermission('subscriptions.edit') && (
                           <Button
                             size="sm"
                             variant="outline"
@@ -615,7 +622,8 @@ Proceed with activation?`;
                           >
                             <Edit className="h-4 w-4" />
                           </Button>
-                        {sub.status === 'active' && (
+                        )}
+                        {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                           <Button
                             size="sm"
                             variant="outline"

src/pages/admin/AdminValidations.js

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
@@ -35,6 +36,7 @@ import ConfirmationDialog from '../../components/ConfirmationDialog';
 import RejectionDialog from '../../components/RejectionDialog';
 
 const AdminValidations = () => {
+  const { hasPermission } = useAuth();
   const [pendingUsers, setPendingUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -419,6 +421,7 @@ const AdminValidations = () => {
                           </Button>
                         ) : user.status === 'pending_email' ? (
                           <>
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleBypassAndValidateRequest(user)}
                                 disabled={actionLoading === user.id}
@@ -427,6 +430,8 @@ const AdminValidations = () => {
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -437,9 +442,11 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         ) : user.status === 'payment_pending' ? (
                           <>
+                            {hasPermission('subscriptions.activate') && (
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
@@ -448,6 +455,8 @@ const AdminValidations = () => {
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -458,9 +467,11 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         ) : (
                           <>
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleValidateRequest(user)}
                                 disabled={actionLoading === user.id}
@@ -469,6 +480,8 @@ const AdminValidations = () => {
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Validate'}
                               </Button>
+                            )}
+                            {hasPermission('users.approve') && (
                               <Button
                                 onClick={() => handleRejectUser(user)}
                                 disabled={actionLoading === user.id}
@@ -479,6 +492,7 @@ const AdminValidations = () => {
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
                               </Button>
+                            )}
                           </>
                         )}
                       </div>