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

Updated api usage, corrected table designs

Browse Source
This commit is contained in:
hermes
2026-09-27 13:31:27 +02:00
parent 2efd2859c7
commit c1c5641d1e
11 changed files with 13413 additions and 3582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PostFundManagement.ConsoleUI/src/pages/BeneficiariesPage.tsx
+33 -33
View File
@@ -494,31 +494,31 @@ export const BeneficiariesPage: React.FC = () => {
</button>
</div>
</div>
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
<SortableTh column="name" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort}>
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
<SortableTh column="name" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-5 whitespace-nowrap">
Beneficiary / Cohort
</SortableTh>
<SortableTh column="category" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort}>
<SortableTh column="category" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
Category
</SortableTh>
<SortableTh column="location" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort}>
<SortableTh column="location" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
Location
</SortableTh>
<SortableTh column="targetCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort}>
<SortableTh column="targetCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
Target Headcount
</SortableTh>
<SortableTh column="reachedCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort}>
<SortableTh column="reachedCount" currentColumn={benSortCol} direction={benSortDir} onSort={handleBenSort} className="py-3.5 px-4 whitespace-nowrap">
Reached Headcount
</SortableTh>
<th className="py-3 px-4">Reach Progress</th>
<th className="py-3 px-4 text-right">Actions</th>
<th className="py-3.5 px-4 font-semibold whitespace-nowrap">Reach Progress</th>
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/60 text-xs">
<tbody className="divide-y divide-slate-800/60">
{loadingBens ? (
<tr>
<td colSpan={7} className="py-12 text-center text-slate-400">
@@ -538,27 +538,27 @@ export const BeneficiariesPage: React.FC = () => {
sortedBens.map((b) => {
const prog = b.targetCount && b.targetCount > 0 ? Math.round(((b.reachedCount || 0) / b.targetCount) * 100) : 0;
return (
<tr key={b.id} className="hover:bg-slate-800/30 transition">
<td className="py-3.5 px-4 font-semibold text-white">
<tr key={b.id} className="hover:bg-slate-800/40 transition-colors">
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
<div className="flex items-center gap-2">
<Users className="w-3.5 h-3.5 text-blue-400 shrink-0" />
<span>{b.name}</span>
</div>
</td>
<td className="py-3.5 px-4 text-slate-300">
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
<span className="bg-slate-800/80 px-2 py-0.5 rounded-md border border-slate-700/60 text-[11px]">
{b.category || 'General'}
</span>
</td>
<td className="py-3.5 px-4 text-slate-300">
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
<div className="flex items-center gap-1.5 text-slate-400">
<MapPin className="w-3 h-3 text-slate-500" />
<span>{b.location || 'Not Specified'}</span>
</div>
</td>
<td className="py-3.5 px-4 font-medium text-slate-200">{(b.targetCount || 0).toLocaleString()}</td>
<td className="py-3.5 px-4 font-bold text-emerald-400">{(b.reachedCount || 0).toLocaleString()}</td>
<td className="py-3.5 px-4">
<td className="py-3.5 px-4 whitespace-nowrap font-medium text-slate-200">{(b.targetCount || 0).toLocaleString()}</td>
<td className="py-3.5 px-4 whitespace-nowrap font-bold text-emerald-400">{(b.reachedCount || 0).toLocaleString()}</td>
<td className="py-3.5 px-4 whitespace-nowrap">
<div className="flex items-center gap-2 max-w-[140px]">
<div className="flex-1 bg-slate-800 h-1.5 rounded-full overflow-hidden">
<div className="bg-emerald-500 h-full rounded-full" style={{ width: `${Math.min(100, prog)}%` }} />
@@ -566,7 +566,7 @@ export const BeneficiariesPage: React.FC = () => {
<span className="text-[11px] font-mono text-slate-400">{prog}%</span>
</div>
</td>
<td className="py-3.5 px-4 text-right space-x-2">
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
<button
onClick={() => {
setSelectedBenForDetail(b);
@@ -679,27 +679,27 @@ export const BeneficiariesPage: React.FC = () => {
</div>
</div>
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
<SortableTh column="title" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort}>
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
<SortableTh column="title" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-5 whitespace-nowrap">
Compliance Title
</SortableTh>
<SortableTh column="requirements" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort}>
<SortableTh column="requirements" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-4 whitespace-nowrap">
Requirements
</SortableTh>
<SortableTh column="status" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort}>
<SortableTh column="status" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-4 whitespace-nowrap">
Verification Status
</SortableTh>
<SortableTh column="createdAt" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort}>
<SortableTh column="createdAt" currentColumn={compSortCol} direction={compSortDir} onSort={handleCompSort} className="py-3.5 px-4 whitespace-nowrap">
Created
</SortableTh>
<th className="py-3 px-4 text-right">Actions</th>
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/60 text-xs">
<tbody className="divide-y divide-slate-800/60">
{loadingComps ? (
<tr>
<td colSpan={5} className="py-12 text-center text-slate-400">
@@ -717,8 +717,8 @@ export const BeneficiariesPage: React.FC = () => {
</tr>
) : (
sortedComps.map((c) => (
<tr key={c.id} className="hover:bg-slate-800/30 transition">
<td className="py-3.5 px-4 font-semibold text-white">
<tr key={c.id} className="hover:bg-slate-800/40 transition-colors">
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
<div className="flex items-center gap-2">
<ShieldCheck className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
<span>{c.title}</span>
@@ -727,9 +727,9 @@ export const BeneficiariesPage: React.FC = () => {
<td className="py-3.5 px-4 text-slate-300 max-w-xs truncate" title={c.requirements || ''}>
{c.requirements || 'None'}
</td>
<td className="py-3.5 px-4">{getApprovalStatusBadge(c.status)}</td>
<td className="py-3.5 px-4 text-slate-400">{formatDate(c.createdAt)}</td>
<td className="py-3.5 px-4 text-right">
<td className="py-3.5 px-4 whitespace-nowrap">{getApprovalStatusBadge(c.status)}</td>
<td className="py-3.5 px-4 whitespace-nowrap text-slate-400">{formatDate(c.createdAt)}</td>
<td className="py-3.5 px-5 text-right whitespace-nowrap">
<button
onClick={() => handleOpenEditComp(c)}
className="p-1 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition cursor-pointer"
PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx
+30 -30
View File
@@ -534,28 +534,28 @@ export const ChangeManagementPage: React.FC = () => {
</div>
</div>
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
<SortableTh column="title" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort}>
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
<SortableTh column="title" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-5 whitespace-nowrap">
Issue Summary
</SortableTh>
<SortableTh column="priority" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort}>
<SortableTh column="priority" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
Priority
</SortableTh>
<SortableTh column="assignedTo" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort}>
<SortableTh column="assignedTo" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
Assigned To
</SortableTh>
<SortableTh column="status" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort}>
<SortableTh column="status" currentColumn={issueSortCol} direction={issueSortDir} onSort={handleIssueSort} className="py-3.5 px-4 whitespace-nowrap">
Status
</SortableTh>
<th className="py-3 px-4">Resolution Notes</th>
<th className="py-3 px-4 text-right">Actions</th>
<th className="py-3.5 px-4 font-semibold whitespace-nowrap">Resolution Notes</th>
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/60 text-xs">
<tbody className="divide-y divide-slate-800/60">
{loadingIssues ? (
<tr>
<td colSpan={6} className="py-12 text-center text-slate-400">
@@ -575,8 +575,8 @@ export const ChangeManagementPage: React.FC = () => {
sortedIssues.map((iss) => {
const isResolved = iss.status === ActivityStatus.Inactive || !!iss.resolvedAt;
return (
<tr key={iss.id} className="hover:bg-slate-800/30 transition">
<td className="py-3.5 px-4 font-semibold text-white">
<tr key={iss.id} className="hover:bg-slate-800/40 transition-colors">
<td className="py-3.5 px-5 font-semibold text-white">
<div className="flex items-start gap-2.5">
<AlertOctagon
className={`w-4 h-4 mt-0.5 shrink-0 ${isResolved ? 'text-emerald-400' : 'text-rose-400'}`}
@@ -587,14 +587,14 @@ export const ChangeManagementPage: React.FC = () => {
</div>
</div>
</td>
<td className="py-3.5 px-4">{getPriorityBadge(iss.priority)}</td>
<td className="py-3.5 px-4 text-slate-300">
<td className="py-3.5 px-4 whitespace-nowrap">{getPriorityBadge(iss.priority)}</td>
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300">
<div className="flex items-center gap-1.5">
<User className="w-3.5 h-3.5 text-slate-400" />
<span className="truncate max-w-[150px]">{iss.assignedTo ? getUserEmail(iss.assignedTo) : 'Unassigned'}</span>
</div>
</td>
<td className="py-3.5 px-4">
<td className="py-3.5 px-4 whitespace-nowrap">
{isResolved ? (
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
<CheckCircle2 className="w-3 h-3" /> Resolved
@@ -608,7 +608,7 @@ export const ChangeManagementPage: React.FC = () => {
<td className="py-3.5 px-4 text-slate-400 max-w-xs truncate">
{iss.resolution || <span className="italic text-slate-600">Pending resolution...</span>}
</td>
<td className="py-3.5 px-4 text-right space-x-2">
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
<button
onClick={() => openResolveIssue(iss)}
className="px-2.5 py-1 text-xs font-medium text-amber-400 hover:text-amber-300 bg-amber-950/40 hover:bg-amber-900/40 rounded-lg border border-amber-800/40 transition cursor-pointer"
@@ -733,27 +733,27 @@ export const ChangeManagementPage: React.FC = () => {
</div>
</div>
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
<SortableTh column="title" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort}>
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
<SortableTh column="title" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-5 whitespace-nowrap">
Change Proposal
</SortableTh>
<SortableTh column="justification" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort}>
<SortableTh column="justification" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
Justification
</SortableTh>
<SortableTh column="revisedBudget" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort}>
<SortableTh column="revisedBudget" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
Revised Budget
</SortableTh>
<SortableTh column="status" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort}>
<SortableTh column="status" currentColumn={changeSortCol} direction={changeSortDir} onSort={handleChangeSort} className="py-3.5 px-4 whitespace-nowrap">
Governance Status
</SortableTh>
<th className="py-3 px-4 text-right">In-Place Decision</th>
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">In-Place Decision</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/60 text-xs">
<tbody className="divide-y divide-slate-800/60">
{loadingChanges ? (
<tr>
<td colSpan={5} className="py-12 text-center text-slate-400">
@@ -771,8 +771,8 @@ export const ChangeManagementPage: React.FC = () => {
</tr>
) : (
sortedChanges.map((cr) => (
<tr key={cr.id} className="hover:bg-slate-800/30 transition">
<td className="py-3.5 px-4 font-semibold text-white">
<tr key={cr.id} className="hover:bg-slate-800/40 transition-colors">
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
<div className="flex items-center gap-2">
<GitPullRequest className="w-4 h-4 text-amber-400 shrink-0" />
<span>{cr.title}</span>
@@ -781,11 +781,11 @@ export const ChangeManagementPage: React.FC = () => {
<td className="py-3.5 px-4 text-slate-300 max-w-xs truncate" title={cr.justification || ''}>
{cr.justification || 'None'}
</td>
<td className="py-3.5 px-4 font-mono font-semibold text-slate-200">
<td className="py-3.5 px-4 whitespace-nowrap font-mono font-semibold text-slate-200">
{formatZAR(cr.revisedBudget || 0)}
</td>
<td className="py-3.5 px-4">{getApprovalStatusBadge(cr.status)}</td>
<td className="py-3.5 px-4 text-right space-x-2">
<td className="py-3.5 px-4 whitespace-nowrap">{getApprovalStatusBadge(cr.status)}</td>
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
{cr.status === ApprovalStatus.Approved ? (
<span className="text-xs font-semibold text-emerald-400 bg-emerald-500/10 px-2.5 py-1 rounded-lg border border-emerald-500/20">
Resolved & Enacted
PostFundManagement.ConsoleUI/src/pages/SettingsPage.tsx
+1 -1
View File
@@ -1268,7 +1268,7 @@ export const SettingsPage: React.FC = () => {
</div>
{/* Filter & Action Toolbar */}
<div className="bg-[#0f1523]/80 backdrop-blur-md p-4 rounded-2xl border border-slate-800/80 shadow-xl flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3">
<div className="relative z-30 bg-[#0f1523]/80 backdrop-blur-md p-4 rounded-2xl border border-slate-800/80 shadow-xl flex flex-col lg:flex-row items-stretch lg:items-center justify-between gap-3">
<div className="relative flex-1 max-w-md">
<Search className="w-4 h-4 text-slate-500 absolute left-3 top-3" />
<input
PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx
+14 -14
View File
@@ -353,27 +353,27 @@ export const SiteVisitsPage: React.FC = () => {
</div>
</div>
<div className="bg-[#0f1523]/80 backdrop-blur-md rounded-2xl border border-slate-800/80 shadow-xl overflow-hidden">
<div className="bg-[#0f1523]/80 rounded-2xl border border-slate-800/80 shadow-lg backdrop-blur-sm overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left border-collapse">
<table className="w-full text-left text-xs border-collapse">
<thead>
<tr className="border-b border-slate-800/80 bg-slate-900/50 text-[11px] font-semibold text-slate-400 uppercase tracking-wider">
<SortableTh column="inspectorName" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
<tr className="bg-[#0d121f]/95 border-b border-slate-800/80 text-slate-400 uppercase tracking-wider font-semibold text-[11px]">
<SortableTh column="inspectorName" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-5 whitespace-nowrap">
Inspector Name
</SortableTh>
<SortableTh column="visitedAt" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
<SortableTh column="visitedAt" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
Inspection Date
</SortableTh>
<SortableTh column="findings" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
<SortableTh column="findings" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
Field Observations & Findings
</SortableTh>
<SortableTh column="status" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort}>
<SortableTh column="status" currentColumn={visitSortCol} direction={visitSortDir} onSort={handleVisitSort} className="py-3.5 px-4 whitespace-nowrap">
Verification Status
</SortableTh>
<th className="py-3 px-4 text-right">Actions</th>
<th className="py-3.5 px-5 text-right font-medium whitespace-nowrap">Actions</th>
</tr>
</thead>
<tbody className="divide-y divide-slate-800/60 text-xs">
<tbody className="divide-y divide-slate-800/60">
{loadingVisits ? (
<tr>
<td colSpan={5} className="py-12 text-center text-slate-400">
@@ -391,14 +391,14 @@ export const SiteVisitsPage: React.FC = () => {
</tr>
) : (
sortedVisits.map((v) => (
<tr key={v.id} className="hover:bg-slate-800/30 transition">
<td className="py-3.5 px-4 font-semibold text-white">
<tr key={v.id} className="hover:bg-slate-800/40 transition-colors">
<td className="py-3.5 px-5 whitespace-nowrap font-semibold text-white">
<div className="flex items-center gap-2">
<User className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
<span>{v.inspectorName || 'Field Officer'}</span>
</div>
</td>
<td className="py-3.5 px-4 text-slate-300 font-medium">
<td className="py-3.5 px-4 whitespace-nowrap text-slate-300 font-medium">
<div className="flex items-center gap-1.5 text-slate-300">
<Calendar className="w-3 h-3 text-slate-500" />
<span>{formatDate(v.visitedAt)}</span>
@@ -407,8 +407,8 @@ export const SiteVisitsPage: React.FC = () => {
<td className="py-3.5 px-4 text-slate-300 max-w-sm truncate" title={v.findings || ''}>
{v.findings || 'No findings recorded.'}
</td>
<td className="py-3.5 px-4">{getApprovalStatusBadge(v.status)}</td>
<td className="py-3.5 px-4 text-right space-x-2">
<td className="py-3.5 px-4 whitespace-nowrap">{getApprovalStatusBadge(v.status)}</td>
<td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
<button
onClick={() => {
setSelectedVisitForDetail(v);