From 38beac66e10b02c840d7628e342159122cb2dd15 Mon Sep 17 00:00:00 2001
From: naveen prabhu <naveenprabhu.kvk93.com>
Date: Fri, 22 May 2026 11:23:26 +0530
Subject: [PATCH] export csv

---
 ipi-survey-platform/src/App.jsx               |  13 +-
 .../src/components/admin/AdminHeader.jsx      |   9 ++
 .../src/pages/Reports/Reports.jsx             | 152 ++++++++++++++++++
 3 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 ipi-survey-platform/src/pages/Reports/Reports.jsx

diff --git a/ipi-survey-platform/src/App.jsx b/ipi-survey-platform/src/App.jsx
index 6431aba..9fcd4d4 100644
--- a/ipi-survey-platform/src/App.jsx
+++ b/ipi-survey-platform/src/App.jsx
@@ -19,6 +19,7 @@ import PublicContactForm from '@/pages/PublicContactForm';
 import EditCompanyProfile from '@/pages/Admin/configuration/EditCompanyProfile';
 import Navbar from './pages/LandingPage/component/Navbar';
 import ManufacturingIndex from '@/pages/ManufacturingIndex/ManufacturingIndex';
+import Reports from '@/pages/Reports/Reports';
  
 const RequireOTPVerification = ({ children }) => {
   const [isVerified, setIsVerified] = useState(false);
@@ -315,6 +316,16 @@ function App() {
         {/* /> */}
       {/* </Route> */}
       <Route
+  path="/Reports"
+  element={
+    <RequireOTPVerification>
+      <RequireRole allowedRoles={['Admin', 'EstablishmentUser']}>
+        <Reports />
+      </RequireRole>
+    </RequireOTPVerification>
+  }
+/>
+      <Route
   path="/manufacturing-index"
   element={
     <RequireOTPVerification>
@@ -400,4 +411,4 @@ function App() {
   );
 }
  
-export default App;
\ No newline at end of file
+export default App;
diff --git a/ipi-survey-platform/src/components/admin/AdminHeader.jsx b/ipi-survey-platform/src/components/admin/AdminHeader.jsx
index 56b87fc..10c0012 100644
--- a/ipi-survey-platform/src/components/admin/AdminHeader.jsx
+++ b/ipi-survey-platform/src/components/admin/AdminHeader.jsx
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { logout as logoutApi } from '@/services/auth/authService';
 import { TbReport } from "react-icons/tb";
+import { HiOutlineDocumentReport } from "react-icons/hi";
 
 const logoSrc = '/assets/images/FCSCLogo.svg';
 const dashboardIconActiveSrc = '/assets/images/cuida_dashboard-outline.svg';
@@ -11,6 +12,8 @@ const configActiveSrc = '/assets/images/configrationicon-active.svg';
 const configInactiveSrc = '/assets/images/configrationicon-inactive.svg';
 const manufacturingIndexActive = <TbReport className="text-[#92722A]" />;
 const manufacturingIndexInactive = <TbReport className="text-[#232528]" />;
+const reportsActive = <HiOutlineDocumentReport className="text-[#92722A]" />;
+const reportsInactive = <HiOutlineDocumentReport className="text-[#232528]" />;
 const userActiveSrc = '/assets/images/User-active.svg';
 const userInactiveSrc = '/assets/images/User-inactive.svg';
 const manageSubmissionInactiveSrc = '/assets/images/managesubmission - inactive.svg';
@@ -170,6 +173,12 @@ const AdminHeader = () => {
               label="Manufacturing Index"
               iconActive={manufacturingIndexActive}
               iconInactive={manufacturingIndexInactive}
+            />
+                <NavItem
+              to="/Reports"
+              label="Reports"
+              iconActive={reportsActive}
+              iconInactive={reportsInactive}
             />
           </nav>
 
diff --git a/ipi-survey-platform/src/pages/Reports/Reports.jsx b/ipi-survey-platform/src/pages/Reports/Reports.jsx
new file mode 100644
index 0000000..4eb6a5a
--- /dev/null
+++ b/ipi-survey-platform/src/pages/Reports/Reports.jsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import AdminHeader from '@/components/admin/AdminHeader';
+
+const reportCards = [
+  {
+    id: 1,
+    title: 'Establishment Data (Quarterly Format)',
+    description: 'Export establishment-level structured data in a quarterly format.',
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="h-9 w-9 text-[#B57D13]">
+        <path
+          d="M4 5.5C4 4.67157 4.67157 4 5.5 4H18.5C19.3284 4 20 4.67157 20 5.5V18.5C20 19.3284 19.3284 20 18.5 20H5.5C4.67157 20 4 19.3284 4 18.5V5.5Z"
+          stroke="currentColor"
+          strokeWidth="1.8"
+        />
+        <path d="M4 9H20" stroke="currentColor" strokeWidth="1.8" />
+        <path d="M9 9V20" stroke="currentColor" strokeWidth="1.8" />
+        <path d="M15 9V20" stroke="currentColor" strokeWidth="1.8" />
+        <path d="M4 14.5H20" stroke="currentColor" strokeWidth="1.8" />
+      </svg>
+    ),
+  },
+  {
+    id: 2,
+    title: 'Product Data (Quarterly Format)',
+    description: 'Export product data at item level in a quarterly format.',
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="h-9 w-9 text-[#B57D13]">
+        <path
+          d="M12 3.75L19 7.75V16.25L12 20.25L5 16.25V7.75L12 3.75Z"
+          stroke="currentColor"
+          strokeWidth="1.8"
+          strokeLinejoin="round"
+        />
+        <path d="M12 12L19 7.75" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+        <path d="M12 12L5 7.75" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+        <path d="M12 12V20.25" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
+      </svg>
+    ),
+  },
+  {
+    id: 3,
+    title: 'Value Data (Quarterly Format)',
+    description: 'Export value data at item level in a quarterly format.',
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" className="h-9 w-9 text-[#B57D13]">
+        <path d="M6.5 16.5V12.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
+        <path d="M12 16.5V8.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
+        <path d="M17.5 16.5V5.5" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" />
+      </svg>
+    ),
+  },
+];
+
+const ExportIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5">
+    <path
+      d="M12 4V14"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.5 7.5L12 4L15.5 7.5"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 14.5V17.5C5 18.3284 5.67157 19 6.5 19H17.5C18.3284 19 19 18.3284 19 17.5V14.5"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const Reports = () => {
+  return (
+    <div className="min-h-screen bg-[#FCFBF8]">
+      <AdminHeader />
+
+      <main className="mx-auto max-w-[1600px] px-6 py-11 sm:px-8 lg:px-12">
+        <section className="space-y-8">
+          <h1 className="text-xl font-semibold text-[#101828]">
+            Reports
+          </h1>
+
+          <div className="rounded-[12px] border border-[#E7DDBD] bg-[#F7F2DE] px-8 py-7 text-[#475467]">
+            <div className="flex items-start gap-4">
+              <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#2E6BE6] text-white">
+                <svg viewBox="0 0 24 24" fill="currentColor" className="h-4 w-4">
+                  <path d="M12 6.75A1.125 1.125 0 1012 4.5a1.125 1.125 0 000 2.25zM10.875 9.75a1.125 1.125 0 112.25 0v6a1.125 1.125 0 11-2.25 0v-6z" />
+                  <path
+                    fillRule="evenodd"
+                    d="M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5zm-8.25 9.75a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </div>
+
+              <div className="space-y-2 text-sm leading-6">
+                <p className="italic text-sm text-[#344054]">This section provides reports covering the period from 2022 to the current quarter.</p>
+                <p className="text-sm text-[#475467]">
+                  The reports are generated based on the data submitted during this period and are
+                  available for review and analysis.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-5">
+            {reportCards.map((card) => (
+              <article
+                key={card.id}
+                className="flex flex-col gap-8 rounded-[14px] border border-[#ECE8DE] bg-white px-9 py-9 shadow-[0_2px_10px_rgba(16,24,40,0.06)] md:flex-row md:items-center md:justify-between"
+              >
+                <div className="flex items-start gap-6">
+                  <div className="flex h-[94px] w-[94px] shrink-0 items-center justify-center rounded-[12px] bg-[#FBEFDC]">
+                    {card.icon}
+                  </div>
+
+                  <div className="space-y-2 pt-2">
+                    <h2 className="text-xl font-semibold leading-8 text-[#101828]">
+                      {card.id}. {card.title}
+                    </h2>
+                    <p className="text-sm leading-6 text-[#475467]">{card.description}</p>
+                  </div>
+                </div>
+
+                <div className="self-start md:self-center">
+                  <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]"
+                  >
+                    <ExportIcon />
+                    <span>Export CSV</span>
+                  </button>
+                </div>
+              </article>
+            ))}
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Reports;