Refactored UI endpoint usage

PostFundManagement.ConsoleUI/src/components/ui/RiskHeatmapMatrix.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import { Risk, Project } from '../../types';
 import { getUserEmail } from '../../lib/formatters';
 import { AlertTriangle, ShieldAlert, CheckCircle2, ChevronRight, X, Info } from 'lucide-react';
+import { HelpTooltip } from './HelpTooltip';
 
 interface RiskHeatmapMatrixProps {
   risks: Risk[];
@@ -168,7 +169,15 @@ export const RiskHeatmapMatrix: React.FC<RiskHeatmapMatrixProps> = ({
       {/* Header & Controls */}
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div>
-          {title && <h3 className="text-sm font-semibold text-white">{title}</h3>}
+          <div className="flex items-center gap-2">
+            {title && <h3 className="text-sm font-semibold text-white">{title}</h3>}
+            <HelpTooltip
+              title="Risk Heatmap Guidance"
+              content="Visualizes project risk exposure based on ISO 31000 standards. Severity score = Likelihood (1–5) × Impact (1–5). Click any populated cell to drill into registered risks."
+              size="sm"
+              placement="bottom"
+            />
+          </div>
           {subtitle && <p className="text-xs text-slate-400 mt-0.5">{subtitle}</p>}
         </div>
 
@@ -200,6 +209,12 @@ export const RiskHeatmapMatrix: React.FC<RiskHeatmapMatrixProps> = ({
               3×3 Summary
             </button>
           </div>
+          <HelpTooltip
+            title="Matrix Resolution Switcher"
+            content="Toggle between 5×5 detailed granular risk distribution and 3×3 executive aggregated categories (Low, Medium, High)."
+            size="sm"
+            placement="left"
+          />
         </div>
       </div>