Fixed change management rendering error

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>