export csv
This commit is contained in:
naveen prabhu
parent
0e88306546
commit
38beac66e1
@ -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;
|
||||
export default App;
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
152
ipi-survey-platform/src/pages/Reports/Reports.jsx
Normal file
152
ipi-survey-platform/src/pages/Reports/Reports.jsx
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user