Merge pull request 'feat(frontend): Comprehensive RBAC implementation across admin pages' (#10) from dev into loaf-prod

Reviewed-on: #10

.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,13 +186,15 @@ const AdminBylaws = () => {
             Manage LOAF governing bylaws and version history
           </p>
         </div>
-        <Button
-          onClick={handleCreate}
-          className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
-        >
-          <Plus className="h-4 w-4" />
-          Add Version
-        </Button>
+        {hasPermission('bylaws.create') && (
+          <Button
+            onClick={handleCreate}
+            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            Add Version
+          </Button>
+        )}
       </div>
 
       {/* Current Bylaws */}
@@ -226,22 +230,26 @@ const AdminBylaws = () => {
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
               </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleEdit(currentBylaws)}
-                className="border-[#664fa3] text-[#664fa3]"
-              >
-                <Edit className="h-4 w-4" />
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => handleDelete(currentBylaws)}
-                className="border-red-500 text-red-500 hover:bg-red-50"
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
+              {hasPermission('bylaws.edit') && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleEdit(currentBylaws)}
+                  className="border-[#664fa3] text-[#664fa3]"
+                >
+                  <Edit className="h-4 w-4" />
+                </Button>
+              )}
+              {hasPermission('bylaws.delete') && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleDelete(currentBylaws)}
+                  className="border-red-500 text-red-500 hover:bg-red-50"
+                >
+                  <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>
-          <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
-            <Plus className="h-4 w-4 mr-2" />
-            Create Bylaws
-          </Button>
+          {hasPermission('bylaws.create') && (
+            <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
+              <Plus className="h-4 w-4 mr-2" />
+              Create Bylaws
+            </Button>
+          )}
         </Card>
       )}
 
@@ -290,22 +300,26 @@ const AdminBylaws = () => {
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleEdit(bylawsDoc)}
-                      className="border-[#664fa3] text-[#664fa3]"
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => handleDelete(bylawsDoc)}
-                      className="border-red-500 text-red-500 hover:bg-red-50"
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
+                    {hasPermission('bylaws.edit') && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleEdit(bylawsDoc)}
+                        className="border-[#664fa3] text-[#664fa3]"
+                      >
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {hasPermission('bylaws.delete') && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(bylawsDoc)}
+                        className="border-red-500 text-red-500 hover:bg-red-50"
+                      >
+                        <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,33 +271,35 @@ const AdminDonations = () => {
                 className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
               />
             </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  disabled={exporting}
-                  className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-3 flex items-center gap-2"
-                >
-                  <Download className="h-4 w-4" />
-                  {exporting ? 'Exporting...' : 'Export'}
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
-                <DropdownMenuItem
-                  onClick={() => handleExport('all')}
-                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
-                >
-                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                  <span className="text-[#422268]">Export All Donations</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => handleExport('current')}
-                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
-                >
-                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                  <span className="text-[#422268]">Export Current View</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
+            {hasPermission('donations.export') && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    disabled={exporting}
+                    className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-3 flex items-center gap-2"
+                  >
+                    <Download className="h-4 w-4" />
+                    {exporting ? 'Exporting...' : 'Export'}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
+                  <DropdownMenuItem
+                    onClick={() => handleExport('all')}
+                    className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                  >
+                    <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
+                    <span className="text-[#422268]">Export All Donations</span>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={() => handleExport('current')}
+                    className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                  >
+                    <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
+                    <span className="text-[#422268]">Export Current View</span>
+                  </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,13 +164,15 @@ const AdminFinancials = () => {
             Manage annual financial reports
           </p>
         </div>
-        <Button
-          onClick={handleCreate}
-          className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
-        >
-          <Plus className="h-4 w-4" />
-          Add Report
-        </Button>
+        {hasPermission('financials.create') && (
+          <Button
+            onClick={handleCreate}
+            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+          >
+            <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>
-          <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
-            <Plus className="h-4 w-4 mr-2" />
-            Create First Report
-          </Button>
+          {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,24 +215,30 @@ const AdminFinancials = () => {
                     </Button>
                   </div>
                 </div>
-                <div className="flex gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleEdit(report)}
-                    className="border-[#664fa3] text-[#664fa3]"
-                  >
-                    <Edit className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => handleDelete(report)}
-                    className="border-red-500 text-red-500 hover:bg-red-50"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
+                {(hasPermission('financials.edit') || hasPermission('financials.delete')) && (
+                  <div className="flex gap-2">
+                    {hasPermission('financials.edit') && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleEdit(report)}
+                        className="border-[#664fa3] text-[#664fa3]"
+                      >
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {hasPermission('financials.delete') && (
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(report)}
+                        className="border-red-500 text-red-500 hover:bg-red-50"
+                      >
+                        <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,26 +269,32 @@ const AdminGallery = () => {
                   </div>
 
                   {/* Overlay with Actions */}
-                  <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">
-                    <Button
-                      onClick={() => openEditCaption(image)}
-                      size="sm"
-                      className="bg-white/90 hover:bg-white text-[#422268] rounded-lg"
-                      style={{ fontFamily: "'Inter', sans-serif" }}
-                    >
-                      <Edit className="h-4 w-4 mr-1" />
-                      Caption
-                    </Button>
-                    <Button
-                      onClick={() => handleDeleteImage(image.id)}
-                      size="sm"
-                      className="bg-red-500 hover:bg-red-600 text-white rounded-lg"
-                      style={{ fontFamily: "'Inter', sans-serif" }}
-                    >
-                      <Trash2 className="h-4 w-4 mr-1" />
-                      Delete
-                    </Button>
-                  </div>
+                  {(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"
+                          className="bg-white/90 hover:bg-white text-[#422268] rounded-lg"
+                          style={{ fontFamily: "'Inter', sans-serif" }}
+                        >
+                          <Edit className="h-4 w-4 mr-1" />
+                          Caption
+                        </Button>
+                      )}
+                      {hasPermission('gallery.delete') && (
+                        <Button
+                          onClick={() => handleDeleteImage(image.id)}
+                          size="sm"
+                          className="bg-red-500 hover:bg-red-600 text-white rounded-lg"
+                          style={{ fontFamily: "'Inter', sans-serif" }}
+                        >
+                          <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,13 +192,15 @@ const AdminNewsletters = () => {
             Create and manage newsletter archive
           </p>
         </div>
-        <Button
-          onClick={handleCreate}
-          className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
-        >
-          <Plus className="h-4 w-4" />
-          Add Newsletter
-        </Button>
+        {hasPermission('newsletters.create') && (
+          <Button
+            onClick={handleCreate}
+            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+          >
+            <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>
-          <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
-            <Plus className="h-4 w-4 mr-2" />
-            Create First Newsletter
-          </Button>
+          {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,24 +252,30 @@ const AdminNewsletters = () => {
                           </Button>
                         </div>
                       </div>
-                      <div className="flex gap-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleEdit(newsletter)}
-                          className="border-[#664fa3] text-[#664fa3]"
-                        >
-                          <Edit className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleDelete(newsletter)}
-                          className="border-red-500 text-red-500 hover:bg-red-50"
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
+                      {(hasPermission('newsletters.edit') || hasPermission('newsletters.delete')) && (
+                        <div className="flex gap-2">
+                          {hasPermission('newsletters.edit') && (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleEdit(newsletter)}
+                              className="border-[#664fa3] text-[#664fa3]"
+                            >
+                              <Edit className="h-4 w-4" />
+                            </Button>
+                          )}
+                          {hasPermission('newsletters.delete') && (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleDelete(newsletter)}
+                              className="border-red-500 text-red-500 hover:bg-red-50"
+                            >
+                              <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,13 +138,15 @@ const AdminPlans = () => {
               Manage membership plans and pricing.
             </p>
           </div>
-          <Button
-            onClick={handleCreatePlan}
-            className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
-          >
-            <Plus className="h-4 w-4 mr-2" />
-            Create Plan
-          </Button>
+          {hasPermission('subscriptions.plans') && (
+            <Button
+              onClick={handleCreatePlan}
+              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
+            >
+              <Plus className="h-4 w-4 mr-2" />
+              Create Plan
+            </Button>
+          )}
         </div>
       </div>
 
@@ -286,27 +290,29 @@ const AdminPlans = () => {
               </div>
 
               {/* Actions */}
-              <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
-                <Button
-                  onClick={() => handleEditPlan(plan)}
-                  variant="outline"
-                  size="sm"
-                  className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full"
-                >
-                  <Edit className="h-4 w-4 mr-1" />
-                  Edit
-                </Button>
-                <Button
-                  onClick={() => handleDeleteClick(plan)}
-                  variant="outline"
-                  size="sm"
-                  className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
-                  disabled={plan.subscriber_count > 0}
-                >
-                  <Trash2 className="h-4 w-4 mr-1" />
-                  Delete
-                </Button>
-              </div>
+              {hasPermission('subscriptions.plans') && (
+                <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
+                  <Button
+                    onClick={() => handleEditPlan(plan)}
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full"
+                  >
+                    <Edit className="h-4 w-4 mr-1" />
+                    Edit
+                  </Button>
+                  <Button
+                    onClick={() => handleDeleteClick(plan)}
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
+                    disabled={plan.subscriber_count > 0}
+                  >
+                    <Trash2 className="h-4 w-4 mr-1" />
+                    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,33 +414,35 @@ Proceed with activation?`;
           </div>
 
           {/* Export Dropdown */}
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                disabled={exporting}
-                className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-2 flex items-center gap-2"
-              >
-                <Download className="h-4 w-4" />
-                {exporting ? 'Exporting...' : 'Export'}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
-              <DropdownMenuItem
-                onClick={() => handleExport('all')}
-                className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
-              >
-                <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                <span className="text-[#422268]">Export All Subscriptions</span>
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={() => handleExport('current')}
-                className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
-              >
-                <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                <span className="text-[#422268]">Export Current View</span>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+          {hasPermission('subscriptions.export') && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  disabled={exporting}
+                  className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-2 flex items-center gap-2"
+                >
+                  <Download className="h-4 w-4" />
+                  {exporting ? 'Exporting...' : 'Export'}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
+                <DropdownMenuItem
+                  onClick={() => handleExport('all')}
+                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                >
+                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
+                  <span className="text-[#422268]">Export All Subscriptions</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={() => handleExport('current')}
+                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                >
+                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
+                  <span className="text-[#422268]">Export Current View</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       </Card>
 
@@ -503,16 +507,18 @@ Proceed with activation?`;
 
                   {/* Actions */}
                   <div className="flex gap-2 pt-2">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => handleEdit(sub)}
-                      className="flex-1 text-[#664fa3] hover:bg-[#DDD8EB]"
-                    >
-                      <Edit className="h-4 w-4 mr-2" />
-                      Edit
-                    </Button>
-                    {sub.status === 'active' && (
+                    {hasPermission('subscriptions.edit') && (
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleEdit(sub)}
+                        className="flex-1 text-[#664fa3] hover:bg-[#DDD8EB]"
+                      >
+                        <Edit className="h-4 w-4 mr-2" />
+                        Edit
+                      </Button>
+                    )}
+                    {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                       <Button
                         size="sm"
                         variant="outline"
@@ -607,15 +613,17 @@ Proceed with activation?`;
                     </td>
                     <td className="p-4">
                       <div className="flex items-center justify-center gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => handleEdit(sub)}
-                          className="text-[#664fa3] hover:bg-[#DDD8EB]"
-                        >
-                          <Edit className="h-4 w-4" />
-                        </Button>
-                        {sub.status === 'active' && (
+                        {hasPermission('subscriptions.edit') && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => handleEdit(sub)}
+                            className="text-[#664fa3] hover:bg-[#DDD8EB]"
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                        )}
+                        {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,66 +421,78 @@ const AdminValidations = () => {
                           </Button>
                         ) : user.status === 'pending_email' ? (
                           <>
-                            <Button
-                              onClick={() => handleBypassAndValidateRequest(user)}
-                              disabled={actionLoading === user.id}
-                              size="sm"
-                              className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
-                            >
-                              {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
-                            </Button>
-                            <Button
-                              onClick={() => handleRejectUser(user)}
-                              disabled={actionLoading === user.id}
-                              size="sm"
-                              variant="outline"
-                              className="border-2 border-red-500 text-red-500 hover:bg-red-50"
-                            >
-                              <X className="h-4 w-4 mr-1" />
-                              Reject
-                            </Button>
+                            {hasPermission('users.approve') && (
+                              <Button
+                                onClick={() => handleBypassAndValidateRequest(user)}
+                                disabled={actionLoading === user.id}
+                                size="sm"
+                                className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+                              >
+                                {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
+                              </Button>
+                            )}
+                            {hasPermission('users.approve') && (
+                              <Button
+                                onClick={() => handleRejectUser(user)}
+                                disabled={actionLoading === user.id}
+                                size="sm"
+                                variant="outline"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                              >
+                                <X className="h-4 w-4 mr-1" />
+                                Reject
+                              </Button>
+                            )}
                           </>
                         ) : user.status === 'payment_pending' ? (
                           <>
-                            <Button
-                              onClick={() => handleActivatePayment(user)}
-                              size="sm"
-                              className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
-                            >
-                              <CheckCircle className="h-4 w-4 mr-1" />
-                              Activate Payment
-                            </Button>
-                            <Button
-                              onClick={() => handleRejectUser(user)}
-                              disabled={actionLoading === user.id}
-                              size="sm"
-                              variant="outline"
-                              className="border-2 border-red-500 text-red-500 hover:bg-red-50"
-                            >
-                              <X className="h-4 w-4 mr-1" />
-                              Reject
-                            </Button>
+                            {hasPermission('subscriptions.activate') && (
+                              <Button
+                                onClick={() => handleActivatePayment(user)}
+                                size="sm"
+                                className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+                              >
+                                <CheckCircle className="h-4 w-4 mr-1" />
+                                Activate Payment
+                              </Button>
+                            )}
+                            {hasPermission('users.approve') && (
+                              <Button
+                                onClick={() => handleRejectUser(user)}
+                                disabled={actionLoading === user.id}
+                                size="sm"
+                                variant="outline"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                              >
+                                <X className="h-4 w-4 mr-1" />
+                                Reject
+                              </Button>
+                            )}
                           </>
                         ) : (
                           <>
-                            <Button
-                              onClick={() => handleValidateRequest(user)}
-                              disabled={actionLoading === user.id}
-                              size="sm"
-                              className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
-                            >
-                              {actionLoading === user.id ? 'Validating...' : 'Validate'}
-                            </Button>
-                            <Button
-                              onClick={() => handleRejectUser(user)}
-                              disabled={actionLoading === user.id}
-                              size="sm"
-                              variant="outline"
-                              className="border-2 border-red-500 text-red-500 hover:bg-red-50"
-                            >
-                              <X className="h-4 w-4 mr-1" />
-                              Reject
-                            </Button>
+                            {hasPermission('users.approve') && (
+                              <Button
+                                onClick={() => handleValidateRequest(user)}
+                                disabled={actionLoading === user.id}
+                                size="sm"
+                                className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                              >
+                                {actionLoading === user.id ? 'Validating...' : 'Validate'}
+                              </Button>
+                            )}
+                            {hasPermission('users.approve') && (
+                              <Button
+                                onClick={() => handleRejectUser(user)}
+                                disabled={actionLoading === user.id}
+                                size="sm"
+                                variant="outline"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                              >
+                                <X className="h-4 w-4 mr-1" />
+                                Reject
+                              </Button>
+                            )}
                           </>
                         )}
                       </div>