feat: integrate get_report functionality for admin, validator, researcher dashboard

src/app/dashboard/admin/reports/[reportId]/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { ReportDetail } from "../components/report-detail";
+
+export default function AdminReportDetailPage() {
+  const params = useParams();
+  const reportId = params.reportId as string;
+
+  const handleBackClick = () => {
+    window.history.back();
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] text-white">
+      <ReportDetail
+        reportId={reportId}
+        onBackClick={handleBackClick}
+      />
+    </div>
+  );
+}

src/app/dashboard/admin/reports/components/report-detail.tsx

@@ -3,17 +3,59 @@
 import { ArrowLeft } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import type { Report } from "../types"
+import { useReportData } from "@/hooks/useReportData"
 import poc1 from '../../../../../../public/poc1.svg';
 import poc2 from '../../../../../../public/poc2.svg';
 import poc3 from '../../../../../../public/poc3.svg';
 import Image from "next/image";
 
 interface ReportDetailProps {
-  report: Report
+  reportId?: string; // New: for fetching from blockchain
+  report?: Report;   // Optional: fallback to existing prop
   onBackClick: () => void
 }
 
-export function ReportDetail({ report, onBackClick }: ReportDetailProps) {
+export function ReportDetail({ reportId, report: propReport, onBackClick }: ReportDetailProps) {
+  // Fetch report data from blockchain/IPFS if reportId is provided
+  const { reportData: fetchedReport, loading, error } = useReportData(reportId || "");
+
+  // Use fetched data if available, otherwise fall back to prop
+  const report = fetchedReport || propReport;
+
+  // Show loading state while fetching
+  if (reportId && loading) {
+    return (
+      <div className="p-6">
+        <div className="animate-pulse">
+          <div className="h-8 bg-gray-700 rounded w-1/3 mb-6"></div>
+          <div className="h-6 bg-gray-700 rounded w-2/3 mb-4"></div>
+          <div className="grid grid-cols-4 gap-6 mb-6">
+            <div className="h-16 bg-gray-700 rounded"></div>
+            <div className="h-16 bg-gray-700 rounded"></div>
+            <div className="h-16 bg-gray-700 rounded"></div>
+            <div className="h-16 bg-gray-700 rounded"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Show error state if fetching failed
+  if (reportId && error) {
+    return (
+      <div className="p-6">
+        <div className="bg-red-900/20 border border-red-500/20 rounded-lg p-6 text-center">
+          <h3 className="text-red-400 font-semibold mb-2">Error Loading Report</h3>
+          <p className="text-red-300">{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Return null if no report data available
+  if (!report) {
+    return null;
+  }
   return (
     <div className="p-6">
       <div className="flex items-center mb-6">

src/app/dashboard/components/report/ReportHeader.tsx

@@ -18,7 +18,11 @@ export const ReportHeader: React.FC<ReportHeaderProps> = ({
         {title}
       </div>
 
-      {status ? <StatusBadge status={status} /> : actionButton}
+      {status ? (
+        <StatusBadge className="capitalize" status={status} />
+      ) : (
+        actionButton
+      )}
     </div>
   );
 };