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>