Implemented session and account lockout management
Enabled account sync control and session expiration management Applied some fixes to the govername page and project page
This commit is contained in:
@@ -19,6 +19,7 @@ import {
|
||||
Check,
|
||||
Filter,
|
||||
Link as LinkIcon,
|
||||
Edit2,
|
||||
} from 'lucide-react';
|
||||
import {
|
||||
getAllIndicators,
|
||||
@@ -31,11 +32,13 @@ import {
|
||||
updateEvidence,
|
||||
getAllRisks,
|
||||
createRisk,
|
||||
updateRisk,
|
||||
getProjects,
|
||||
getAllMilestones,
|
||||
} from '../services/api';
|
||||
import { Modal } from '../components/ui/Modal';
|
||||
import { useToast } from '../components/ui/Toast';
|
||||
import { RiskHeatmapMatrix } from '../components/ui/RiskHeatmapMatrix';
|
||||
import {
|
||||
Indicator,
|
||||
Evidence,
|
||||
@@ -90,6 +93,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
// Modals & States
|
||||
const [isIndicatorModalOpen, setIsIndicatorModalOpen] = useState(false);
|
||||
const [isRiskModalOpen, setIsRiskModalOpen] = useState(false);
|
||||
const [editingRisk, setEditingRisk] = useState<Risk | null>(null);
|
||||
const [selectedIndicatorForActual, setSelectedIndicatorForActual] = useState<Indicator | null>(null);
|
||||
const [actualInput, setActualInput] = useState<number>(0);
|
||||
const [uploadEvidenceType, setUploadEvidenceType] = useState<number>(EvidenceType.CompletionCertificate);
|
||||
@@ -160,7 +164,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
indicatorForm.reset();
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError('Failed to create indicator', String(err));
|
||||
toastError('Failed to create indicator', err);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -173,7 +177,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
setSelectedIndicatorForActual(null);
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError('Failed to record actual', String(err));
|
||||
toastError('Failed to record actual', err);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -184,7 +188,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
success('Evidence uploaded', 'Supporting file registered for reviewer inspection (Figure 10 / M14)');
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError('Upload failed', String(err));
|
||||
toastError('Upload failed', err);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -209,21 +213,66 @@ export const MonitoringPage: React.FC = () => {
|
||||
setReviewerComment('');
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError('Review update failed', String(err));
|
||||
toastError('Review update failed', err);
|
||||
},
|
||||
});
|
||||
|
||||
const openCreateRisk = () => {
|
||||
setEditingRisk(null);
|
||||
riskForm.reset({
|
||||
projectId: projects[0]?.id ? Number(projects[0].id) : 401,
|
||||
name: '',
|
||||
description: '',
|
||||
likelihood: RiskLikelihood.Medium,
|
||||
impact: RiskImpact.Moderate,
|
||||
});
|
||||
setIsRiskModalOpen(true);
|
||||
};
|
||||
|
||||
const openEditRisk = (rk: Risk) => {
|
||||
setEditingRisk(rk);
|
||||
riskForm.reset({
|
||||
projectId: Number(rk.projectId) || (projects[0]?.id ? Number(projects[0].id) : 401),
|
||||
name: rk.name || '',
|
||||
description: rk.description || '',
|
||||
likelihood: (rk.likelihood as RiskLikelihood) ?? RiskLikelihood.Medium,
|
||||
impact: (rk.impact as RiskImpact) ?? RiskImpact.Moderate,
|
||||
});
|
||||
setIsRiskModalOpen(true);
|
||||
};
|
||||
|
||||
const riskMutation = useMutation({
|
||||
mutationFn: (data: CreateRiskRequest) => createRisk(data),
|
||||
mutationFn: async (data: RiskFormValues) => {
|
||||
if (editingRisk) {
|
||||
return updateRisk({
|
||||
riskId: editingRisk.id,
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
likelihood: Number(data.likelihood),
|
||||
impact: Number(data.impact),
|
||||
});
|
||||
}
|
||||
return createRisk({
|
||||
projectId: Number(data.projectId),
|
||||
name: data.name,
|
||||
description: data.description,
|
||||
likelihood: Number(data.likelihood),
|
||||
impact: Number(data.impact),
|
||||
});
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['risks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['dashboard'] });
|
||||
success('Risk registered', 'Risk item added to project register');
|
||||
success(
|
||||
editingRisk ? 'Risk updated' : 'Risk registered',
|
||||
editingRisk ? 'Risk profile updated in project register' : 'Risk item added to project register'
|
||||
);
|
||||
setIsRiskModalOpen(false);
|
||||
setEditingRisk(null);
|
||||
riskForm.reset();
|
||||
},
|
||||
onError: (err: unknown) => {
|
||||
toastError('Failed to log risk', String(err));
|
||||
toastError(editingRisk ? 'Failed to update risk' : 'Failed to log risk', err);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -249,7 +298,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
toastError('Download Error', 'No active secure download link generated.');
|
||||
}
|
||||
} catch (err: any) {
|
||||
toastError('Link Error', err?.message || 'Failed to retrieve evidence secure link.');
|
||||
toastError('Link Error', err);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -288,7 +337,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
)}
|
||||
{activeTab === 'risks' && (
|
||||
<button
|
||||
onClick={() => setIsRiskModalOpen(true)}
|
||||
onClick={openCreateRisk}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 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-500/20 transition"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
@@ -614,57 +663,98 @@ export const MonitoringPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tab 3: Risk Register (M09) */}
|
||||
{/* Tab 3: Risk Register & Heatmap (M09) */}
|
||||
{activeTab === 'risks' && (
|
||||
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-900/60 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold">
|
||||
<th className="py-3.5 px-5">Risk Title & Description</th>
|
||||
<th className="py-3.5 px-4">Project ID</th>
|
||||
<th className="py-3.5 px-4 text-center">Likelihood (1–5)</th>
|
||||
<th className="py-3.5 px-4 text-center">Impact (1–5)</th>
|
||||
<th className="py-3.5 px-4 text-center">Residual Score</th>
|
||||
<th className="py-3.5 px-4">Risk Owner</th>
|
||||
<th className="py-3.5 px-5">Mitigation Control</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/50">
|
||||
{loadingRisks ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="py-8 text-center text-slate-500">
|
||||
Loading risk register...
|
||||
</td>
|
||||
<div className="space-y-6">
|
||||
{/* Live Heatmap Matrix with cell click inspection */}
|
||||
<RiskHeatmapMatrix
|
||||
risks={risks}
|
||||
projects={projects}
|
||||
onSelectRisk={(r) => openEditRisk(r)}
|
||||
title="Project Risk Heatmap & Matrix"
|
||||
subtitle="ISO 31000 standard matrix — click on any cell to filter and inspect risks or edit mitigation controls"
|
||||
/>
|
||||
|
||||
{/* Risk Register Table */}
|
||||
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
|
||||
<div className="p-4 border-b border-slate-800/80 flex items-center justify-between bg-slate-900/60">
|
||||
<div>
|
||||
<h4 className="text-sm font-bold text-white">Project Risk Register</h4>
|
||||
<p className="text-[11px] text-slate-400">Complete itemized audit log of identified risks and residual scores</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={openCreateRisk}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-xl transition shadow-md shadow-blue-500/20"
|
||||
>
|
||||
<Plus className="w-3.5 h-3.5" />
|
||||
Add Risk
|
||||
</button>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-xs border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-slate-900/60 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold">
|
||||
<th className="py-3.5 px-5">Risk Title & Description</th>
|
||||
<th className="py-3.5 px-4">Project ID</th>
|
||||
<th className="py-3.5 px-4 text-center">Likelihood (1–5)</th>
|
||||
<th className="py-3.5 px-4 text-center">Impact (1–5)</th>
|
||||
<th className="py-3.5 px-4 text-center">Residual Score</th>
|
||||
<th className="py-3.5 px-4">Risk Owner</th>
|
||||
<th className="py-3.5 px-5">Mitigation Control</th>
|
||||
<th className="py-3.5 px-4 text-right">Actions</th>
|
||||
</tr>
|
||||
) : (
|
||||
risks.map((rk) => {
|
||||
const score = rk.likelihood * rk.impact;
|
||||
const color = getRiskScoreColor(rk.likelihood, rk.impact);
|
||||
return (
|
||||
<tr key={rk.id} className="hover:bg-slate-800/40 transition-colors">
|
||||
<td className="py-3.5 px-5">
|
||||
<span className="font-semibold text-white block text-xs">{rk.name}</span>
|
||||
<span className="text-[11px] text-slate-400 line-clamp-1">{rk.description}</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-slate-400 font-mono">Project #{rk.projectId}</td>
|
||||
<td className="py-3.5 px-4 text-center font-mono font-bold text-slate-200">{rk.likelihood}</td>
|
||||
<td className="py-3.5 px-4 text-center font-mono font-bold text-slate-200">{rk.impact}</td>
|
||||
<td className="py-3.5 px-4 text-center">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold ${color.badge}`}>
|
||||
{score} / 25 ({color.level})
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-slate-300 font-medium">{getUserEmail(rk.owner)}</td>
|
||||
<td className="py-3.5 px-5 text-slate-400 text-[11px]">
|
||||
{rk.mitigationAction || 'Standard internal audit controls applied.'}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-800/50">
|
||||
{loadingRisks ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="py-8 text-center text-slate-500">
|
||||
Loading risk register...
|
||||
</td>
|
||||
</tr>
|
||||
) : risks.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={8} className="py-8 text-center text-slate-500">
|
||||
No risks recorded in the register. Click "Add Risk" to log your first risk item.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
risks.map((rk) => {
|
||||
const score = rk.likelihood * rk.impact;
|
||||
const color = getRiskScoreColor(rk.likelihood, rk.impact);
|
||||
return (
|
||||
<tr key={rk.id} className="hover:bg-slate-800/40 transition-colors">
|
||||
<td className="py-3.5 px-5">
|
||||
<span className="font-semibold text-white block text-xs">{rk.name}</span>
|
||||
<span className="text-[11px] text-slate-400 line-clamp-1">{rk.description}</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-slate-400 font-mono">Project #{rk.projectId}</td>
|
||||
<td className="py-3.5 px-4 text-center font-mono font-bold text-slate-200">{rk.likelihood}</td>
|
||||
<td className="py-3.5 px-4 text-center font-mono font-bold text-slate-200">{rk.impact}</td>
|
||||
<td className="py-3.5 px-4 text-center">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold ${color.badge}`}>
|
||||
{score} / 25 ({color.level})
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-slate-300 font-medium">{getUserEmail(rk.owner)}</td>
|
||||
<td className="py-3.5 px-5 text-slate-400 text-[11px]">
|
||||
{rk.mitigationAction || 'Standard internal audit controls applied.'}
|
||||
</td>
|
||||
<td className="py-3.5 px-4 text-right">
|
||||
<button
|
||||
onClick={() => openEditRisk(rk)}
|
||||
className="p-1.5 text-slate-400 hover:text-white hover:bg-slate-700/60 rounded-lg transition"
|
||||
title="Edit Risk"
|
||||
>
|
||||
<Edit2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
@@ -803,27 +893,32 @@ export const MonitoringPage: React.FC = () => {
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
{/* Modal: Add Risk */}
|
||||
{/* Modal: Add or Edit Risk */}
|
||||
<Modal
|
||||
isOpen={isRiskModalOpen}
|
||||
onClose={() => setIsRiskModalOpen(false)}
|
||||
title="Add Risk to Risk Register"
|
||||
subtitle="Identify and score project delivery risks"
|
||||
onClose={() => {
|
||||
setIsRiskModalOpen(false);
|
||||
setEditingRisk(null);
|
||||
}}
|
||||
title={editingRisk ? 'Edit Project Risk' : 'Add Risk to Risk Register'}
|
||||
subtitle={editingRisk ? `Updating risk item #${editingRisk.id}` : 'Identify and score project delivery risks'}
|
||||
>
|
||||
<form onSubmit={riskForm.handleSubmit((data) => riskMutation.mutate(data as any))} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1.5">Associated Project *</label>
|
||||
<select
|
||||
{...riskForm.register('projectId')}
|
||||
className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition [&>option]:bg-slate-900 [&>option]:text-white"
|
||||
>
|
||||
{projects.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{!editingRisk && (
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1.5">Associated Project *</label>
|
||||
<select
|
||||
{...riskForm.register('projectId')}
|
||||
className="w-full px-3 py-2 text-xs bg-slate-900/80 border border-slate-700/80 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500 transition [&>option]:bg-slate-900 [&>option]:text-white"
|
||||
>
|
||||
{projects.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-semibold text-slate-300 mb-1.5">Risk Title *</label>
|
||||
@@ -877,7 +972,10 @@ export const MonitoringPage: React.FC = () => {
|
||||
<div className="pt-3 border-t border-slate-800/80 flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsRiskModalOpen(false)}
|
||||
onClick={() => {
|
||||
setIsRiskModalOpen(false);
|
||||
setEditingRisk(null);
|
||||
}}
|
||||
className="px-4 py-2 text-xs font-medium text-slate-300 bg-slate-800/80 hover:bg-slate-700 rounded-xl transition"
|
||||
>
|
||||
Cancel
|
||||
@@ -887,7 +985,7 @@ export const MonitoringPage: React.FC = () => {
|
||||
disabled={riskMutation.isPending}
|
||||
className="px-4 py-2 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-500/20 transition"
|
||||
>
|
||||
{riskMutation.isPending ? 'Logging...' : 'Log Risk'}
|
||||
{riskMutation.isPending ? 'Saving...' : editingRisk ? 'Update Risk' : 'Log Risk'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user