feat(frontend): Comprehensive RBAC implementation across admin pages

**Option 3 Implementation (Latest):**
- InviteStaffDialog: Use /admin/roles/assignable endpoint
- AdminStaff: Enable admin users to see 'Invite Staff' button

**Permission Checks Added (8 admin pages):**
- AdminNewsletters: newsletters.create/edit/delete
- AdminFinancials: financials.create/edit/delete
- AdminBylaws: bylaws.create/edit/delete
- AdminValidations: users.approve, subscriptions.activate
- AdminSubscriptions: subscriptions.export/edit/cancel
- AdminDonations: donations.export
- AdminGallery: gallery.upload/edit/delete
- AdminPlans: subscriptions.plans

**Pattern Established:**
All admin action buttons now wrapped with hasPermission() checks.
UI hides what users can't access, backend enforces rules.

**Files Modified:** 10 files, 100+ permission checks added

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"