Refactored UI

Added Role filed to user table and endpoint implementation
This commit is contained in:
2026-09-28 10:25:00 +02:00
parent 7037ea72ca
commit ea71e55e2d
21 changed files with 3100 additions and 128 deletions
@@ -40,6 +40,7 @@ import { toolsService } from '../../services/toolsService';
import { Modal } from '../ui/Modal';
import { useToast } from '../ui/Toast';
import { ProblemDetailsAlert } from '../ui/ProblemDetailsAlert';
import { HelpTooltip } from '../ui/HelpTooltip';
import { ExportButton } from '../ui/ExportButton';
import { ExportColumn } from '../../utils/exportUtils';
import { useTableSort, SortableTh } from '../../utils/tableSort';
@@ -437,9 +438,16 @@ export const ContractsManagement: React.FC<ContractsManagementProps> = ({
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-lg">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Total Contracts
</span>
<div className="flex items-center gap-1.5">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Total Contracts
</span>
<HelpTooltip
title="Total Legal Contracts"
content="Total grant agreements and legal instruments registered across portfolios."
size="sm"
/>
</div>
<div className="w-8 h-8 rounded-lg bg-blue-500/10 text-blue-400 flex items-center justify-center border border-blue-500/20">
<FileText className="w-4 h-4" />
</div>
@@ -454,9 +462,16 @@ export const ContractsManagement: React.FC<ContractsManagementProps> = ({
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-lg">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Active Value (ZAR)
</span>
<div className="flex items-center gap-1.5">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Active Value (ZAR)
</span>
<HelpTooltip
title="Active Contract Value"
content="Cumulative financial value of legally active commitments."
size="sm"
/>
</div>
<div className="w-8 h-8 rounded-lg bg-emerald-500/10 text-emerald-400 flex items-center justify-center border border-emerald-500/20">
<ShieldCheck className="w-4 h-4" />
</div>
@@ -471,9 +486,16 @@ export const ContractsManagement: React.FC<ContractsManagementProps> = ({
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-lg">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
In Review / Draft
</span>
<div className="flex items-center gap-1.5">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
In Review / Draft
</span>
<HelpTooltip
title="Draft & Review Contracts"
content="Contracts currently undergoing legal review, signing, or counter-signature."
size="sm"
/>
</div>
<div className="w-8 h-8 rounded-lg bg-amber-500/10 text-amber-400 flex items-center justify-center border border-amber-500/20">
<Clock className="w-4 h-4" />
</div>
@@ -488,9 +510,16 @@ export const ContractsManagement: React.FC<ContractsManagementProps> = ({
<div className="bg-[#0f1523]/80 backdrop-blur-md p-5 rounded-2xl border border-slate-800/80 shadow-lg">
<div className="flex items-center justify-between">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Approved Awards Available
</span>
<div className="flex items-center gap-1.5">
<span className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
Approved Awards Available
</span>
<HelpTooltip
title="Approved Awards"
content="Approved grant awards eligible for formal contract generation and document attachment."
size="sm"
/>
</div>
<div className="w-8 h-8 rounded-lg bg-indigo-500/10 text-indigo-400 flex items-center justify-center border border-indigo-500/20">
<Briefcase className="w-4 h-4" />
</div>
@@ -54,6 +54,7 @@ import {
} from '../../lib/formatters';
import { Modal } from '../ui/Modal';
import { useToast } from '../ui/Toast';
import { HelpTooltip } from '../ui/HelpTooltip';
import { ExportButton } from '../ui/ExportButton';
import { ExportColumn } from '../../utils/exportUtils';
@@ -419,10 +420,18 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
{filteredEvidence.length} {filteredEvidence.length === 1 ? 'file' : 'files'} in view
</span>
</div>
<h3 className="text-lg font-bold text-white tracking-tight flex items-center gap-2">
<FileCheck className="w-5 h-5 text-blue-400" />
Evidence Review & Verification Hub
</h3>
<div className="flex items-center gap-2">
<h3 className="text-lg font-bold text-white tracking-tight flex items-center gap-2">
<FileCheck className="w-5 h-5 text-blue-400" />
Evidence Review & Verification Hub
</h3>
<HelpTooltip
title="Deliverable Evidence Verification"
content="Inspect and verify deliverable evidence uploaded against project milestones and operational activities before authorizing completion sign-offs."
size="sm"
placement="bottom"
/>
</div>
<p className="text-xs text-slate-400 mt-1 max-w-3xl leading-relaxed">
Inspect and verify deliverable evidence uploaded by awardees against project milestones and operational activities.
Review supporting documentation, download verified files, and authorize completion sign-offs.