Fixed change management rendering error

PostFundManagement.ConsoleUI/src/pages/BeneficiariesPage.tsx

@@ -38,6 +38,7 @@ import { HelpTooltip } from '../components/ui/HelpTooltip';
 import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useTableSort, SortableTh } from '../utils/tableSort';
+import { ApprovalStatusBadge } from '../components/ui/StatusBadge';
 import { Beneficiary, ComplianceItem, Outcome, ApprovalStatus } from '../types';
 import { getApprovalStatusBadge, formatDate, APPROVAL_STATUS_OPTIONS } from '../lib/formatters';
 
@@ -727,7 +728,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 whitespace-nowrap">{getApprovalStatusBadge(c.status)}</td>
+                        <td className="py-3.5 px-4 whitespace-nowrap">
+                          <ApprovalStatusBadge status={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
@@ -946,7 +949,9 @@ export const BeneficiariesPage: React.FC = () => {
                         <p className="font-semibold text-white">{ci.title}</p>
                         <p className="text-[11px] text-slate-400 truncate max-w-sm">{ci.requirements}</p>
                       </div>
-                      <div className="shrink-0">{getApprovalStatusBadge(ci.status)}</div>
+                      <div className="shrink-0">
+                        <ApprovalStatusBadge status={ci.status} />
+                      </div>
                     </div>
                   ))}
                 </div>

PostFundManagement.ConsoleUI/src/pages/ChangeManagementPage.tsx

@@ -36,6 +36,7 @@ import { useToast } from '../components/ui/Toast';
 import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useTableSort, SortableTh } from '../utils/tableSort';
+import { ApprovalStatusBadge, PriorityBadge } from '../components/ui/StatusBadge';
 import { Issue, ChangeRequest, ApprovalStatus, ActivityStatus, Priority } from '../types';
 import {
   getApprovalStatusBadge,
@@ -484,7 +485,7 @@ export const ChangeManagementPage: React.FC = () => {
                 <div className="flex items-center gap-1.5 text-xs text-slate-400">
                   <FolderKanban className="w-3.5 h-3.5 text-amber-400" />
                   <select
-                    value={selectedProjectId}
+                    value={effectiveProjectId ? String(effectiveProjectId) : ''}
                     onChange={(e) => setSelectedProjectId(e.target.value)}
                     className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
                   >
@@ -587,7 +588,9 @@ export const ChangeManagementPage: React.FC = () => {
                               </div>
                             </div>
                           </td>
-                          <td className="py-3.5 px-4 whitespace-nowrap">{getPriorityBadge(iss.priority)}</td>
+                          <td className="py-3.5 px-4 whitespace-nowrap">
+                            <PriorityBadge priority={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" />
@@ -678,7 +681,7 @@ export const ChangeManagementPage: React.FC = () => {
                 <div className="flex items-center gap-1.5 text-xs text-slate-400">
                   <FolderKanban className="w-3.5 h-3.5 text-amber-400" />
                   <select
-                    value={selectedProjectId}
+                    value={effectiveProjectId ? String(effectiveProjectId) : ''}
                     onChange={(e) => setSelectedProjectId(e.target.value)}
                     className="bg-slate-900 border border-slate-800 rounded-xl px-3 py-1.5 text-xs text-white focus:outline-none focus:border-amber-500 max-w-[180px] truncate"
                   >
@@ -784,7 +787,9 @@ export const ChangeManagementPage: React.FC = () => {
                         <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 whitespace-nowrap">{getApprovalStatusBadge(cr.status)}</td>
+                        <td className="py-3.5 px-4 whitespace-nowrap">
+                          <ApprovalStatusBadge status={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">

PostFundManagement.ConsoleUI/src/pages/SiteVisitsPage.tsx

@@ -31,6 +31,7 @@ import { useToast } from '../components/ui/Toast';
 import { ExportButton } from '../components/ui/ExportButton';
 import { ExportColumn } from '../utils/exportUtils';
 import { useTableSort, SortableTh } from '../utils/tableSort';
+import { ApprovalStatusBadge } from '../components/ui/StatusBadge';
 import { SiteVisit, ApprovalStatus } from '../types';
 import {
   getApprovalStatusBadge,
@@ -407,7 +408,9 @@ 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 whitespace-nowrap">{getApprovalStatusBadge(v.status)}</td>
+                        <td className="py-3.5 px-4 whitespace-nowrap">
+                          <ApprovalStatusBadge status={v.status} />
+                        </td>
                         <td className="py-3.5 px-5 text-right whitespace-nowrap space-x-2">
                           <button
                             onClick={() => {
@@ -559,7 +562,9 @@ export const SiteVisitsPage: React.FC = () => {
                             </div>
                           </div>
                         </div>
-                        <div>{getApprovalStatusBadge(v.status)}</div>
+                        <div>
+                          <ApprovalStatusBadge status={v.status} />
+                        </div>
                       </div>
 
                       <div className="bg-slate-900/70 p-3.5 rounded-xl border border-slate-800/60 text-xs text-slate-300 leading-relaxed max-h-36 overflow-y-auto">
@@ -690,7 +695,9 @@ export const SiteVisitsPage: React.FC = () => {
               </div>
               <div>
                 <span className="text-[10px] uppercase font-semibold text-slate-400 block">Status</span>
-                <div className="mt-0.5">{getApprovalStatusBadge(selectedVisitForDetail.status)}</div>
+                <div className="mt-0.5">
+                  <ApprovalStatusBadge status={selectedVisitForDetail.status} />
+                </div>
               </div>
               <div>
                 <span className="text-[10px] uppercase font-semibold text-slate-400 block">Inspector</span>