Implemented rbac

PostFundManagement.ConsoleUI/src/pages/GovernancePage.tsx

@@ -57,6 +57,7 @@ import { useToast } from '../components/ui/Toast';
 import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useAuth } from '../auth/AuthProvider';
+import { useRbac } from '../auth/rbac';
 import { useTableSort, SortableTh } from '../utils/tableSort';
 import { FundingInstrumentsSection, InstructionsSection } from '../components/governance/InstructionsSection';
 import { RulesSection } from '../components/governance/RulesSection';
@@ -122,6 +123,7 @@ type ProgrammeFormValues = z.infer<typeof programmeSchema>;
 export const GovernancePage: React.FC = () => {
   const queryClient = useQueryClient();
   const { sub, user, claims } = useAuth();
+  const { canAdd, canApprove, canExport } = useRbac();
   const currentUserId = sub || user?.id || '';
   const { success, error: toastError } = useToast();
 
@@ -808,7 +810,7 @@ export const GovernancePage: React.FC = () => {
 
         {/* Tab Actions */}
         <div className="flex items-center gap-2 relative z-10 self-start md:self-center flex-wrap">
-          {activeTab === 'organisations' && (
+          {activeTab === 'organisations' && canAdd('governance') && (
             <button
               onClick={openCreateOrg}
               className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
@@ -817,7 +819,7 @@ export const GovernancePage: React.FC = () => {
               <span>Register Organisation</span>
             </button>
           )}
-          {activeTab === 'portfolios' && (
+          {activeTab === 'portfolios' && canAdd('governance') && (
             <button
               onClick={openCreatePortfolio}
               className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
@@ -826,7 +828,7 @@ export const GovernancePage: React.FC = () => {
               <span>Create Portfolio</span>
             </button>
           )}
-          {activeTab === 'programmes' && (
+          {activeTab === 'programmes' && canAdd('governance') && (
             <button
               onClick={openCreateProgramme}
               className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
@@ -835,7 +837,7 @@ export const GovernancePage: React.FC = () => {
               <span>Create Programme</span>
             </button>
           )}
-          {(activeTab === 'instruments' || activeTab === 'instructions') && (
+          {(activeTab === 'instruments' || activeTab === 'instructions') && canAdd('governance') && (
             <button
               onClick={() => setIsInstructionCreateTriggered(true)}
               className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
@@ -844,7 +846,7 @@ export const GovernancePage: React.FC = () => {
               <span>Add Funding Instrument</span>
             </button>
           )}
-          {activeTab === 'rules' && (
+          {activeTab === 'rules' && canAdd('governance') && (
             <button
               onClick={() => setIsRuleCreateTriggered(true)}
               className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 rounded-xl shadow-lg shadow-blue-600/25 transition cursor-pointer"
@@ -973,6 +975,7 @@ export const GovernancePage: React.FC = () => {
               <span>Refresh Directory</span>
             </button>
             <ExportButton
+              claim="governance"
               title="Organisation Master Registry"
               subtitle="Official directory of verified recipient and funder entities"
               filename={`pfm-organisations-${new Date().toISOString().split('T')[0]}`}
@@ -1108,6 +1111,7 @@ export const GovernancePage: React.FC = () => {
               <span>Refresh Portfolios</span>
             </button>
             <ExportButton
+              claim="governance"
               title="Funder Portfolios Registry"
               subtitle="High-level funding groupings and thematic capital allocations"
               filename={`pfm-portfolios-${new Date().toISOString().split('T')[0]}`}
@@ -1239,6 +1243,7 @@ export const GovernancePage: React.FC = () => {
               <span>Refresh Programmes</span>
             </button>
             <ExportButton
+              claim="governance"
               title="Strategic Programmes Hierarchy"
               subtitle="Operational funding vehicles linked to funder portfolios"
               filename={`pfm-programmes-${new Date().toISOString().split('T')[0]}`}