Implemented session and account lockout management

Enabled account sync control and session expiration management Applied some fixes to the govername page and project page
2026-09-18 10:19:24 +02:00
parent 41bf9b63bf
commit ec777fabf8
24 changed files with 3888 additions and 500 deletions
@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link } from 'react-router-dom';
 import {
  TrendingUp,
@@ -23,11 +23,14 @@ import {
  getBudgets,
  getDisbursements,
  getAllRisks,
+  getAllIndicators,
 } from '../services/api';
 import { formatCompactZAR, formatZAR, getIndustrySectorLabel } from '../lib/formatters';
 import { ApprovalStatus } from '../types';
+import { RiskHeatmapMatrix } from '../components/ui/RiskHeatmapMatrix';

 export const ExecutiveDashboard: React.FC = () => {
+  const queryClient = useQueryClient();
  const [selectedProgramme, setSelectedProgramme] = useState('All');
  const [selectedSector, setSelectedSector] = useState('All');
  const [selectedPeriod, setSelectedPeriod] = useState('FY 2026/27');
@@ -73,61 +76,140 @@ export const ExecutiveDashboard: React.FC = () => {
    queryFn: () => getAllRisks(),
  });

+  const { data: indicators = [] } = useQuery({
+    queryKey: ['indicators'],
+    queryFn: () => getAllIndicators(),
+  });
+
  const refetchAll = () => {
    refetchDashboard();
+    queryClient.invalidateQueries();
  };

-  // Headline metrics sourced directly from live API models
+  // Filtered projects according to active Programme and Sector dropdown selections
+  const filteredProjects = useMemo(() => {
+    return projects.filter((p) => {
+      if (selectedProgramme !== 'All' && String(p.programmeId) !== selectedProgramme) {
+        return false;
+      }
+      if (selectedSector !== 'All') {
+        const sectorLabel = getIndustrySectorLabel(p.sector);
+        if (sectorLabel !== selectedSector) return false;
+      }
+      return true;
+    });
+  }, [projects, selectedProgramme, selectedSector]);
+
+  // Filtered risks associated with the filtered project set
+  const filteredRisks = useMemo(() => {
+    if (selectedProgramme === 'All' && selectedSector === 'All') {
+      return risks;
+    }
+    const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
+    return risks.filter((r) => projectIds.has(String(r.projectId)));
+  }, [risks, filteredProjects, selectedProgramme, selectedSector]);
+
+  // Headline metrics sourced directly from live API models with real filtering
  const portfolioValue = useMemo(() => {
+    if (selectedProgramme !== 'All' || selectedSector !== 'All') {
+      const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
+      const filteredBudgets = budgets.filter((b) => projectIds.has(String(b.projectId)));
+      const budgetTotal = filteredBudgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
+      if (budgetTotal > 0) return budgetTotal;
+      const filteredAwards = awards.filter((a) => projectIds.has(String(a.projectId)));
+      const awardsTotal = filteredAwards.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
+      return awardsTotal;
+    }
    if (dashboard?.portfolioValue && dashboard.portfolioValue > 0) {
      return dashboard.portfolioValue;
    }
-    const budgetTotal = budgets.reduce((sum, b) => sum + (b.amount || 0), 0);
+    const budgetTotal = budgets.reduce((sum, b) => sum + (Number(b.amount) || 0), 0);
    if (budgetTotal > 0) return budgetTotal;
-    const awardsTotal = awards.reduce((sum, a) => sum + (a.amount || 0), 0);
+    const awardsTotal = awards.reduce((sum, a) => sum + (Number(a.amount) || 0), 0);
    return awardsTotal;
-  }, [dashboard, budgets, awards]);
+  }, [dashboard, budgets, awards, filteredProjects, selectedProgramme, selectedSector]);

-  const activeAwards = dashboard?.activeAwards ?? (awards.length || projects.length);
+  const activeAwards = useMemo(() => {
+    if (selectedProgramme !== 'All' || selectedSector !== 'All') {
+      const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
+      const matched = awards.filter((a) => projectIds.has(String(a.projectId)));
+      return matched.length || filteredProjects.length;
+    }
+    if (awards.length > 0) return awards.length;
+    return dashboard?.activeAwards ?? projects.length;
+  }, [dashboard, awards, filteredProjects, projects, selectedProgramme, selectedSector]);

  const disbursed = useMemo(() => {
-    if (dashboard?.disbursed && dashboard.disbursed > 0) {
-      return dashboard.disbursed;
-    }
-    return disbursements
+    const relevantDisbursements = disbursements.filter((d) => {
+      if (selectedProgramme !== 'All' || selectedSector !== 'All') {
+        const projectIds = new Set(filteredProjects.map((p) => String(p.id)));
+        return projectIds.has(String(d.projectId));
+      }
+      return true;
+    });
+
+    const approvedTotal = relevantDisbursements
      .filter((d) => d.status === ApprovalStatus.Approved || (d.status as number) === 3)
-      .reduce((sum, d) => sum + (d.amount || 0), 0);
-  }, [dashboard, disbursements]);
+      .reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
+
+    if (approvedTotal > 0) return approvedTotal;
+
+    const allTotal = relevantDisbursements.reduce((sum, d) => sum + (Number(d.amount) || 0), 0);
+    if (allTotal > 0 && (!dashboard?.disbursed || dashboard.disbursed === 0)) {
+      return allTotal;
+    }
+
+    return dashboard?.disbursed || 0;
+  }, [dashboard, disbursements, filteredProjects, selectedProgramme, selectedSector]);

  const onTrackPercentage = useMemo(() => {
-    if (dashboard?.onTrackPercentage !== undefined && dashboard.onTrackPercentage > 0) {
+    const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
+    if (targetProjects.length === 0) return 0;
+
+    const onTrack = targetProjects.filter(
+      (p) => p.status === ApprovalStatus.Approved || (p.status as number) === 3 || (p.status as unknown as string) === 'Active'
+    ).length;
+
+    if (onTrack === 0 && dashboard?.onTrackPercentage && dashboard.onTrackPercentage > 0) {
      return dashboard.onTrackPercentage;
    }
-    if (projects.length === 0) return 0;
-    const activeOnTrack = projects.filter((p) => p.status === ApprovalStatus.Approved).length;
-    return Math.round((activeOnTrack / projects.length) * 100);
-  }, [dashboard, projects]);
+    return Math.round((onTrack / targetProjects.length) * 100);
+  }, [dashboard, filteredProjects, projects]);

+  // Dynamically calculate At Risk count directly from live registered risks
  const atRiskCount = useMemo(() => {
-    if (dashboard?.atRiskCount !== undefined) {
-      return dashboard.atRiskCount;
-    }
-    return risks.filter((r) => r.likelihood * r.impact >= 12).length;
-  }, [dashboard, risks]);
+    const targetRisks = filteredRisks;
+    const highRisks = targetRisks.filter((r) => {
+      const score = (Number(r.likelihood) || 1) * (Number(r.impact) || 1);
+      return score >= 12 || ((Number(r.impact) || 1) >= 4 && (Number(r.likelihood) || 1) >= 3);
+    });

-  const beneficiariesReached = dashboard?.beneficiariesReached ?? 0;
+    if (targetRisks.length > 0) {
+      return highRisks.length;
+    }
+    return dashboard?.atRiskCount ?? 0;
+  }, [dashboard, filteredRisks]);
+
+  const beneficiariesReached = useMemo(() => {
+    if (dashboard?.beneficiariesReached && dashboard.beneficiariesReached > 0) {
+      return dashboard.beneficiariesReached;
+    }
+    const sumActual = indicators.reduce((sum, ind) => sum + (Number(ind.actualAmount) || 0), 0);
+    return sumActual > 0 ? sumActual : 0;
+  }, [dashboard, indicators]);

  // Real sector breakdown calculated dynamically from actual project records
  const sectorData = useMemo(() => {
-    if (!projects || projects.length === 0) return [];
+    const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
+    if (targetProjects.length === 0) return [];
    const counts: Record<string, number> = {};
-    projects.forEach((p) => {
+    targetProjects.forEach((p) => {
      const label = getIndustrySectorLabel(p.sector);
      counts[label] = (counts[label] || 0) + 1;
    });

    const colors = ['bg-emerald-500', 'bg-teal-500', 'bg-blue-500', 'bg-indigo-500', 'bg-purple-500', 'bg-amber-500'];
-    const totalProjects = projects.length;
+    const totalProjects = targetProjects.length;

    return Object.entries(counts).map(([name, count], index) => {
      const percentage = Math.round((count / totalProjects) * 100);
@@ -140,27 +222,7 @@ export const ExecutiveDashboard: React.FC = () => {
        color: colors[index % colors.length],
      };
    });
-  }, [projects, portfolioValue]);
-
-  // Risk heatmap matrix computed directly from registered risk records
-  const riskHeatmap = useMemo(() => {
-    const matrix = {
-      highImpHighLik: risks.filter((r) => r.impact >= 4 && r.likelihood >= 4).length,
-      highImpMedLik: risks.filter((r) => r.impact >= 4 && r.likelihood === 3).length,
-      highImpLowLik: risks.filter((r) => r.impact >= 4 && r.likelihood <= 2).length,
-
-      medImpHighLik: risks.filter((r) => r.impact === 3 && r.likelihood >= 4).length,
-      medImpMedLik: risks.filter((r) => r.impact === 3 && r.likelihood === 3).length,
-      medImpLowLik: risks.filter((r) => r.impact === 3 && r.likelihood <= 2).length,
-
-      lowImpHighLik: risks.filter((r) => r.impact <= 2 && r.likelihood >= 4).length,
-      lowImpMedLik: risks.filter((r) => r.impact <= 2 && r.likelihood === 3).length,
-      lowImpLowLik: risks.filter((r) => r.impact <= 2 && r.likelihood <= 2).length,
-
-      flaggedCount: risks.filter((r) => r.impact * r.likelihood >= 12).length,
-    };
-    return matrix;
-  }, [risks]);
+  }, [projects, filteredProjects, portfolioValue]);

  // Quarterly disbursements distribution computed from real disbursement items
  const quarterlyTrend = useMemo(() => {
@@ -198,26 +260,59 @@ export const ExecutiveDashboard: React.FC = () => {
    }));
  }, [disbursements]);

-  // Attention Projects derived directly from live project data
+  // Attention Projects derived directly from live project data & risk scores
  const attentionProjects = useMemo(() => {
-    if (!projects || projects.length === 0) return [];
-    return projects
-      .filter((p) => p.status === ApprovalStatus.Rejected || p.status === ApprovalStatus.Pending || p.status === ApprovalStatus.Review)
-      .slice(0, 5)
+    const targetProjects = filteredProjects.length > 0 ? filteredProjects : projects;
+    if (targetProjects.length === 0) return [];
+
+    // Map each project to its highest residual risk score
+    const projectMaxRisk: Record<string, number> = {};
+    risks.forEach((r) => {
+      const pid = String(r.projectId);
+      const score = (Number(r.likelihood) || 1) * (Number(r.impact) || 1);
+      if (!projectMaxRisk[pid] || score > projectMaxRisk[pid]) {
+        projectMaxRisk[pid] = score;
+      }
+    });
+
+    return targetProjects
      .map((p) => {
+        const maxScore = projectMaxRisk[String(p.id)] || 0;
        const isRejected = p.status === ApprovalStatus.Rejected;
        const isPending = p.status === ApprovalStatus.Pending || p.status === ApprovalStatus.Review;
+
+        let riskLevel: 'RED' | 'AMBER' | 'GREEN' = 'GREEN';
+        let statusLabel = 'Active';
+        let variance = '0%';
+        let varianceType: 'negative' | 'positive' = 'positive';
+
+        if (isRejected || maxScore >= 15) {
+          riskLevel = 'RED';
+          statusLabel = 'At Risk';
+          variance = '-15%';
+          varianceType = 'negative';
+        } else if (isPending || maxScore >= 10) {
+          riskLevel = 'AMBER';
+          statusLabel = isPending ? 'Pending' : 'Review';
+          variance = '-5%';
+          varianceType = 'negative';
+        }
+
        return {
          id: p.id,
          name: p.name,
          programme: p.programmeName || `Programme ${p.programmeId}`,
-          status: isRejected ? 'At Risk' : isPending ? 'Pending' : 'Active',
-          risk: isRejected ? 'RED' : isPending ? 'AMBER' : 'GREEN',
-          financialVariance: isRejected ? '-15%' : '0%',
-          varianceType: isRejected ? 'negative' : 'positive',
+          status: statusLabel,
+          risk: riskLevel,
+          financialVariance: variance,
+          varianceType,
+          maxScore,
        };
-      });
-  }, [projects]);
+      })
+      .filter((p) => p.risk === 'RED' || p.risk === 'AMBER')
+      .sort((a, b) => b.maxScore - a.maxScore)
+      .slice(0, 5);
+  }, [projects, filteredProjects, risks]);

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
@@ -384,15 +479,15 @@ export const ExecutiveDashboard: React.FC = () => {
        </div>
      </div>

-      {/* Visual Models Section (Sector, Heatmap, Impact Trend) */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Visual Models Section (Sector Breakdown & Disbursements) */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Panel 1: Funding by Sector */}
        <div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 flex flex-col justify-between shadow-lg backdrop-blur-sm">
          <div>
            <div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
              <h3 className="text-sm font-semibold text-white">Funding by Sector</h3>
              <span className="text-[11px] font-mono text-blue-400 bg-blue-500/10 px-2 py-0.5 rounded-md border border-blue-500/30">
-                API Calculated
+                Live Portfolio
              </span>
            </div>

@@ -436,75 +531,7 @@ export const ExecutiveDashboard: React.FC = () => {
          </div>
        </div>

-        {/* Panel 2: Portfolio Risk Heatmap */}
-        <div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 flex flex-col justify-between shadow-lg backdrop-blur-sm">
-          <div>
-            <div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
-              <h3 className="text-sm font-semibold text-white">Portfolio Risk Heatmap</h3>
-              <span className="text-[11px] font-mono text-rose-400 bg-rose-500/10 px-2 py-0.5 rounded-md border border-rose-500/30 font-semibold">
-                {riskHeatmap.flaggedCount} Flagged
-              </span>
-            </div>
-
-            <p className="text-[11px] text-slate-400 my-2">
-              Matrix distribution of project risks by Likelihood (1–5) and Impact (1–5).
-            </p>
-
-            {/* 3x3 Heatmap Matrix with real counted risks */}
-            <div className="grid grid-cols-3 gap-2 my-4">
-              {/* Row 1 - High Impact */}
-              <div className="bg-amber-950/40 text-amber-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-amber-800/40">
-                <span className="text-[10px] block text-amber-400 font-normal">Moderate</span>
-                {riskHeatmap.highImpLowLik} {riskHeatmap.highImpLowLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-rose-950/50 text-rose-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-rose-800/60">
-                <span className="text-[10px] block text-rose-400 font-normal">High</span>
-                {riskHeatmap.highImpMedLik} {riskHeatmap.highImpMedLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-rose-900/80 text-rose-100 p-2.5 rounded-xl text-center text-xs font-bold border border-rose-500 shadow-md">
-                <span className="text-[10px] block text-rose-300 font-normal">Critical</span>
-                {riskHeatmap.highImpHighLik} {riskHeatmap.highImpHighLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-
-              {/* Row 2 - Medium Impact */}
-              <div className="bg-emerald-950/40 text-emerald-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-emerald-800/40">
-                <span className="text-[10px] block text-emerald-400 font-normal">Low</span>
-                {riskHeatmap.medImpLowLik} {riskHeatmap.medImpLowLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-amber-950/40 text-amber-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-amber-800/40">
-                <span className="text-[10px] block text-amber-400 font-normal">Moderate</span>
-                {riskHeatmap.medImpMedLik} {riskHeatmap.medImpMedLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-rose-950/40 text-rose-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-rose-800/50">
-                <span className="text-[10px] block text-rose-400 font-normal">High</span>
-                {riskHeatmap.medImpHighLik} {riskHeatmap.medImpHighLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-
-              {/* Row 3 - Low Impact */}
-              <div className="bg-slate-900/80 text-slate-300 p-2.5 rounded-xl text-center text-xs font-semibold border border-slate-800">
-                <span className="text-[10px] block text-slate-500 font-normal">Trivial</span>
-                {riskHeatmap.lowImpLowLik} {riskHeatmap.lowImpLowLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-emerald-950/40 text-emerald-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-emerald-800/40">
-                <span className="text-[10px] block text-emerald-400 font-normal">Low</span>
-                {riskHeatmap.lowImpMedLik} {riskHeatmap.lowImpMedLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-              <div className="bg-amber-950/40 text-amber-200 p-2.5 rounded-xl text-center text-xs font-semibold border border-amber-800/40">
-                <span className="text-[10px] block text-amber-400 font-normal">Moderate</span>
-                {riskHeatmap.lowImpHighLik} {riskHeatmap.lowImpHighLik === 1 ? 'Risk' : 'Risks'}
-              </div>
-            </div>
-          </div>
-
-          <div className="pt-4 border-t border-slate-800/80 text-[11px] text-slate-400 flex justify-between items-center">
-            <span>Total Registered Risks: {risks.length}</span>
-            <Link to="/monitoring" className="text-blue-400 font-medium hover:underline flex items-center gap-1">
-              Risk Register <ArrowUpRight className="w-3 h-3" />
-            </Link>
-          </div>
-        </div>
-
-        {/* Panel 3: Funding-to-Impact Trend */}
+        {/* Panel 2: Disbursement Distribution */}
        <div className="bg-[#0f1523]/80 p-5 rounded-2xl border border-slate-800/80 flex flex-col justify-between shadow-lg backdrop-blur-sm">
          <div>
            <div className="flex items-center justify-between border-b border-slate-800/80 pb-3">
@@ -558,6 +585,14 @@ export const ExecutiveDashboard: React.FC = () => {
        </div>
      </div>

+      {/* Panel 3: Portfolio Risk Heatmap & Matrix */}
+      <RiskHeatmapMatrix
+        risks={filteredRisks}
+        projects={projects}
+        title="Portfolio Risk Heatmap & Matrix"
+        subtitle="Aggregated ISO 31000 distribution of project risks by Likelihood (1–5) and Impact (1–5)"
+      />
+
      {/* Projects Requiring Attention Table */}
      <div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 overflow-hidden shadow-lg backdrop-blur-sm">
        <div className="p-5 border-b border-slate-800/80 flex flex-col sm:flex-row sm:items-center justify-between gap-2 bg-[#0d121f]/90">