ifritechnologies/pfm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed UI inconsistencies

Browse Source
This commit is contained in:
hermes
2026-09-27 12:04:22 +02:00
parent 36e5d3d7c8
commit e6fdcf3d0d
11 changed files with 1085 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/pages/GrantsPage.tsx
+56 -50
View File
@@ -638,59 +638,66 @@ export const GrantsPage: React.FC = () => {
return (
<div className="space-y-6 max-w-7xl mx-auto">
{/* Header & Execution Pipeline Summary */}
<div className="bg-[#0f1523]/80 backdrop-blur-md p-6 rounded-2xl border border-slate-800/80 shadow-xl space-y-5">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<div className="flex items-center gap-2">
<h2 className="text-2xl font-bold text-white tracking-tight">
Grant & Financial Management
</h2>
<HelpTooltip
title="Grant Financial Lifecycle"
content="Enforces the statutory financial control thread: Awards Intake (M01) -> Multi-Year Budgets (M03) -> Condition-Checked Tranche Disbursements (M04). Contracts are managed under the Monitoring module."
size="md"
placement="right"
/>
{/* Header Banner */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-gradient-to-r from-[#0d1322] via-[#0f172a] to-[#0d1322] p-6 sm:p-8 rounded-3xl border border-slate-800/80 shadow-2xl relative overflow-hidden">
<div className="absolute -right-10 -bottom-10 w-60 h-60 bg-emerald-600/10 rounded-full blur-3xl pointer-events-none" />
<div className="space-y-2 relative z-10">
<div className="flex items-center gap-3">
<div className="h-12 w-12 rounded-2xl bg-emerald-600/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400 shadow-lg shadow-emerald-500/10">
<Coins className="w-6 h-6" />
</div>
<div>
<div className="flex items-center gap-2.5 flex-wrap">
<h1 className="text-2xl sm:text-3xl font-bold tracking-tight text-white flex items-center gap-2.5">
Grant & Financial Management
</h1>
<HelpTooltip
title="Grant Financial Lifecycle"
content="Enforces the statutory financial control thread: Awards Intake (M01) -> Multi-Year Budgets (M03) -> Condition-Checked Tranche Disbursements (M04). Contracts are managed under the Monitoring module."
size="md"
placement="right"
/>
</div>
<p className="text-xs sm:text-sm text-slate-400 mt-1">
End-to-end controlled execution thread: Funding Award Intake &rarr; Budgeting &rarr; Condition-Checked Disbursement.
</p>
</div>
<p className="text-xs text-slate-400 mt-1">
End-to-end controlled execution thread: Funding Award Intake &rarr; Budgeting &rarr; Condition-Checked Disbursement.
</p>
</div>
<div className="flex items-center gap-2">
{activeTab === 'awards' && (
<button
onClick={openCreateAward}
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 cursor-pointer"
>
<Plus className="w-4 h-4" />
Register Approved Award
</button>
)}
{activeTab === 'budgets' && (
<button
onClick={() => setIsBudgetModalOpen(true)}
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 cursor-pointer"
>
<Plus className="w-4 h-4" />
Add Budget Line
</button>
)}
{activeTab === 'disbursements' && (
<button
onClick={openCreateDisbursement}
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 cursor-pointer"
>
<Plus className="w-4 h-4" />
Schedule Disbursement
</button>
)}
</div>
</div>
{/* Pipeline Summary Bar */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-3 border-t border-slate-800/80 text-xs">
<div className="flex items-center gap-2 relative z-10 self-start md:self-center">
{activeTab === 'awards' && (
<button
onClick={openCreateAward}
className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 rounded-xl shadow-lg shadow-emerald-600/25 transition cursor-pointer"
>
<Plus className="w-4 h-4" />
<span>Register Approved Award</span>
</button>
)}
{activeTab === 'budgets' && (
<button
onClick={() => setIsBudgetModalOpen(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-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 rounded-xl shadow-lg shadow-emerald-600/25 transition cursor-pointer"
>
<Plus className="w-4 h-4" />
<span>Add Budget Line</span>
</button>
)}
{activeTab === 'disbursements' && (
<button
onClick={openCreateDisbursement}
className="inline-flex items-center gap-1.5 px-4 py-2.5 text-xs font-semibold text-white bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-500 hover:to-teal-500 rounded-xl shadow-lg shadow-emerald-600/25 transition cursor-pointer"
>
<Plus className="w-4 h-4" />
<span>Schedule Disbursement</span>
</button>
)}
</div>
</div>
{/* Pipeline Summary Bar */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
<div className="p-3.5 rounded-xl bg-slate-900/60 border border-slate-800/80 flex items-center justify-between">
<div className="flex items-center gap-1.5">
<span className="text-slate-400 font-medium">Total Awards Registered</span>
@@ -728,7 +735,6 @@ export const GrantsPage: React.FC = () => {
<span className="font-bold text-amber-300 font-mono">{formatCompactZAR(pendingDisbursementValue)}</span>
</div>
</div>
</div>
{/* Tabs */}
<div className="flex gap-2 border-b border-slate-800/80 pb-3 overflow-x-auto">