Reports Export excel api integrated

ipi-survey-platform/src/pages/Reports/Reports.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import AdminHeader from '@/components/admin/AdminHeader';
+import {getReportEstablishment,getReportProduct,getReportValue} from '@/services/reports';
 
 const reportCards = [
   {
@@ -79,6 +80,67 @@ const ExportIcon = () => (
 );
 
 const Reports = () => {
+  const [loading, setLoading] = React.useState(false);
+
+  const getReport = async (reportType) => {
+    if (loading) {
+      return; // Prevent multiple clicks while loading
+    }
+    setLoading(true);
+    try {
+      let response;
+      let fileNames = '';
+      if (reportType === 'Establishment Data (Quarterly Format)') {
+        response = await getReportEstablishment();
+        fileNames = 'Establishment Data (Quarterly Format).xlsx';
+      } else if (reportType === 'Product Data (Quarterly Format)') {
+        response = await getReportProduct();
+        fileNames = 'Product Data (Quarterly Format).xlsx';
+      } else if (reportType === 'Value Data (Quarterly Format)') {
+        response = await getReportValue();
+        fileNames = 'Value Data (Quarterly Format).xlsx';
+      } else {
+        console.warn(`Report type "${reportType}" is not implemented yet.`);
+        setLoading(false);
+        return;
+      }
+       const blob = new Blob([response.data], {
+      type: response.headers["content-type"],
+    });
+
+    const url = window.URL.createObjectURL(blob);
+
+    const link = document.createElement("a");
+    link.href = url;
+
+   
+
+    // Dynamic filename from backend
+    const contentDisposition =
+      response.headers["content-disposition"];
+
+    if (contentDisposition) {
+      const match = contentDisposition.match(/filename="?(.+)"?/);
+
+      if (match?.[1]) {
+        fileNames = match[1];
+      }
+    }
+
+    link.setAttribute("download", fileNames);
+
+    document.body.appendChild(link);
+    link.click();
+
+    link.remove();
+    window.URL.revokeObjectURL(url);
+    setLoading(false);
+      
+    } catch (error) {
+      console.error(`Error fetching report:`, error);
+      setLoading(false);
+    }
+  };
   return (
     <div className="min-h-screen bg-[#FCFBF8]">
       <AdminHeader />
@@ -135,6 +197,7 @@ const Reports = () => {
                   <button
                     type="button"
                     className="inline-flex h-[52px] min-w-[160px] items-center justify-center gap-3 rounded-[10px] border border-[#BF8415] px-6 text-sm font-medium text-[#BF8415] transition-colors hover:bg-[#FFF8EA]"
+                    onClick={() => getReport(card.title)}
                   >
                     <ExportIcon />
                     <span>Export CSV</span>

ipi-survey-platform/src/services/reports.js

@@ -0,0 +1,52 @@
+import { getRequest } from '@/services/api/CommonService';
+const endpoint = '/exports';
+
+export const getReportEstablishment = async (config = {}) => {
+  try {
+    const url = `${endpoint}/annex-ii`;
+
+    const response = await getRequest(url, {
+      responseType: "blob",
+      ...config,
+    });
+
+    return response;
+  } catch (error) {
+    console.error("Error fetching report:", error);
+    throw error;
+  }
+};
+
+export const getReportProduct = async (config = {}) => {
+  try {
+    const url = `${endpoint}/annex-iii-quantity`;
+
+    const response = await getRequest(url, {
+      responseType: "blob",
+      ...config,
+    });
+
+    return response;
+  } catch (error) {
+    console.error("Error fetching report:", error);
+    throw error;
+  }
+};
+
+export const getReportValue = async (config = {}) => {
+  try {
+    const url = `${endpoint}/annex-iii-values`;
+
+    const response = await getRequest(url, {
+      responseType: "blob",
+      ...config,
+    });
+
+    return response;
+  } catch (error) {
+    console.error("Error fetching report:", error);
+    throw error;
+  }
+};
+
+