Removed settings page mock data and replaced with api calls

PostFundManagement.ConsoleUI/src/components/monitoring/EvidenceReviewQueue.tsx

@@ -23,6 +23,7 @@ import {
   Check,
   FileSpreadsheet,
   FileCheck,
+  RefreshCw,
 } from 'lucide-react';
 import {
   getAllEvidence,
@@ -53,6 +54,8 @@ import {
 } from '../../lib/formatters';
 import { Modal } from '../ui/Modal';
 import { useToast } from '../ui/Toast';
+import { ExportButton } from '../ui/ExportButton';
+import { ExportColumn } from '../../utils/exportUtils';
 
 export interface EvidenceReviewQueueProps {
   initialProjectId?: string | number | 'all';
@@ -154,7 +157,12 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
   });
 
   // Query evidence: if a project is selected (e.g. the first project by default), fetch via /v1/api/evidence/{projectId}
-  const { data: rawEvidenceList = [], isLoading: loadingEvidence } = useQuery<Evidence[]>({
+  const {
+    data: rawEvidenceList = [],
+    isLoading: loadingEvidence,
+    refetch: refetchEvidence,
+    isFetching: isFetchingEvidence,
+  } = useQuery<Evidence[]>({
     queryKey: ['evidence', selectedProjectId],
     queryFn: async () => {
       if (selectedProjectId && selectedProjectId !== 'all') {
@@ -168,6 +176,19 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
   // UI depends entirely on the API response - no mock or demo data
   const allEvidence: Evidence[] = rawEvidenceList;
 
+  const evidenceExportColumns: ExportColumn<Evidence>[] = [
+    { header: 'Evidence ID', key: 'id' },
+    { header: 'File Name', key: 'fileName' },
+    { header: 'Project ID', key: 'projectId', format: (val) => `Project #${val}` },
+    { header: 'Milestone ID', key: 'milestoneId', format: (val) => (val ? `Milestone #${val}` : '—') },
+    { header: 'Activity ID', key: 'activityId', format: (val) => (val ? `Activity #${val}` : '—') },
+    { header: 'Document Type', key: 'evidenceType', format: (val) => getEvidenceTypeLabel(val) },
+    { header: 'Submitter', key: 'createdBy', format: (val) => getUserEmail(val) },
+    { header: 'Submission Date', key: 'createdAt', format: (val) => formatDate(val) },
+    { header: 'Verification Status', key: 'status', format: (val) => getApprovalStatusBadge(val).label },
+    { header: 'Review Remarks', key: 'remarks', format: (val) => val || '—' },
+  ];
+
   // Review evidence mutation: Facilitates Approve & Reject decisions via PUT /v1/api/evidence
   const reviewMutation = useMutation({
     mutationFn: async ({
@@ -408,14 +429,36 @@ export const EvidenceReviewQueue: React.FC<EvidenceReviewQueueProps> = ({
             </p>
           </div>
 
-          <div className="flex items-center gap-2.5 shrink-0">
+          <div className="flex items-center gap-2 self-end sm:self-center shrink-0 flex-wrap">
+            <button
+              type="button"
+              onClick={() => {
+                refetchEvidence();
+                success('Refreshed', 'Latest deliverable evidence records updated.');
+              }}
+              disabled={isFetchingEvidence}
+              className="inline-flex items-center justify-center gap-1.5 px-3.5 py-2 text-xs font-semibold text-slate-300 bg-[#0d121f] hover:bg-slate-800 border border-slate-700/80 rounded-xl transition cursor-pointer shadow-xs disabled:opacity-50"
+              title="Force refresh evidence from API"
+            >
+              <RefreshCw className={`w-3.5 h-3.5 text-blue-400 ${isFetchingEvidence ? 'animate-spin' : ''}`} />
+              <span>Refresh</span>
+            </button>
+
+            <ExportButton
+              title="Deliverable Evidence & Verification Ledger"
+              subtitle="Audited records of submitted milestone deliverables and verification decisions"
+              filename={`pfm-evidence-review-${new Date().toISOString().split('T')[0]}`}
+              columns={evidenceExportColumns}
+              data={filteredEvidence}
+            />
+
             <button
               type="button"
               onClick={() => setIsManualIngestModalOpen(true)}
-              className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-200 hover:text-white bg-slate-900/90 hover:bg-slate-800 border border-slate-700/80 px-3.5 py-2 rounded-xl transition shadow-xs cursor-pointer"
+              className="inline-flex items-center gap-1.5 text-xs font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 border border-transparent px-3.5 py-2 rounded-xl transition shadow-md shadow-blue-500/20 cursor-pointer"
               title="Upload document on behalf of awardee"
             >
-              <Upload className="w-3.5 h-3.5 text-blue-400" />
+              <Upload className="w-3.5 h-3.5" />
               <span>Ingest Evidence</span>
             </button>
           </div>