View Reports - Corporate Dashboard

"import React, { useState, useRef, useEffect } from "react"; import { AgGridReact } from "ag-grid-react"; import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-balham.css"; import "bootstrap/dist/css/bootstrap.min.css"; import { Button, Form, Nav, Dropdown } from "react-bootstrap"; import { FaSync, FaUpload, FaSearch } from "react-icons/fa"; import { ClientSideRowModelModule } from "ag-grid-community"; import { ModuleRegistry } from "ag-grid-community"; import commerztechLogo from "../assets/images/logo/commerztechlogo.png"; import logo from "../assets/images/logo/PMR.png"; import logout from "../assets/images/logo/logout.png"; import { useLocation ,useNavigate} from "react-router-dom"; import PMRService from "../services/pmrservice"; // Register AG Grid modules ModuleRegistry.registerModules([ClientSideRowModelModule]); const ViewReports = () => { const gridRef = useRef(null); const [activeTab, setActiveTab] = useState("All"); const [searchQuery, setSearchQuery] = useState(""); const categories = ["All", "General", "Imaging", "Blood work", "Cardiology", "Gastroenterology", "Neurology", "Prescriptions"]; const [activeItem, setActiveItem] = useState(""); const [showDropdown, setShowDropdown] = useState(false); const [selectedCategory, setSelectedCategory] = useState("All"); const token = localStorage.getItem('respData') const [togglePDF, setTogglePDF] = useState(true); const [rowData, setRowData] = useState([{ name: "", date: "", category: "", clinic: "", url: '', reportId: '' }]); const [rowDataStatus, setRowDataStatus] = useState(true) const [viewReportData, setReportData] = useState({ ReportGroupName: '', ProviderName: '', HospitalName: '', UserID: 5, SearchKey: '', ReportDateStart: null, ReportDateEnd: null, SiteID: '' }); const [pdfUrl, setPDFURL] = useState() const navigate=useNavigate(); const location = useLocation(); const data = location.state?.data || {}; // console.log("Response data in reports", JSON.stringify(data) // Sample Data // const rowData = [ // { name: "Comprehensive Health Checkup Report", date: "01/25/2025", category: "Blood work", clinic: "Redcliffe Labs" }, // { name: "Medication Script - STEVE MUNOZ PA", date: "01/02/2025", category: "Prescriptions", clinic: "COBB" }, // { name: "Comprehensive Blood Test Report", date: "11/20/2024", category: "Blood work", clinic: "VIJAYA DIAGNOSTIC CE..." }, // { name: "Comprehensive Health Analysis Report", date: "10/18/2024", category: "Blood work", clinic: "DOCTORC" }, // { name: "Office Visit Report - Gregory Tsai, MD", date: "04/15/2024", category: "General", clinic: "MOUNT SINAI WEST DE..." }, // { name: "Eye Exam Report - Andrew Nguyen", date: "09/30/2022", category: "General", clinic: "310 E 14TH ST OPHTHAL..." }, // { name: "Pap Test Report - RENU CHALASANI", date: "07/06/2018", category: "Gastroenterology", clinic: "Clinical Pathology Labor..." }, // ]; // Columns Definition const columnDefs = [ { headerName: "Report Name", field: "name", flex: 2, sortable: true, filter: true }, { headerName: "Report Date", field: "date", flex: 1, sortable: true, filter: true }, { headerName: "Category", field: "category", flex: 1, sortable: true, filter: true }, { headerName: "Clinic/Diagnostics Center", field: "clinic", flex: 2, sortable: true, filter: true }, ]; const defaultColDef = { sortable: true, filter: true }; const [reportData, setReportData1] = useState([]); const [selectedReport, setSelectedReport] = useState(null); const onRowClicked = (event) => { console.log(event.data, "event.data") const reportId = event.data.reportId; PMRService.getPMRReportsPerId(reportId).then(resp => { const blobUrl = URL.createObjectURL(resp); console.log('bloburl', blobUrl) setPDFURL(blobUrl) setSelectedReport(blobUrl) }) setTogglePDF(!togglePDF); }; const getReports = () => { PMRService.getPMRReports(viewReportData).then(resp => { setReportData1(resp); console.log(resp, "viewReport") if (Array.isArray(reportData) && reportData.length > 0) { const formattedData = reportData.map(report => ({ name: report.report_name, date: report.report_date, category: report.group_name, clinic: report.hospital_name, url: report.report_path, reportId: report.report_id })); setRowData(formattedData); setRowDataStatus(false); } }) } useEffect(() => { console.log(rowData.length) if (rowData.length == 1) { getReports() } }, [reportData]); // // Filter Logic // const getFilteredData = () => { // console.log("filter row data", rowData) // // const data = rowData // console.log("filter after row data", data) // // return data // }; function logOut(){ navigate('/') console.log("clicked") } return ( <div style={{ backgroundColor: "#f5f5f5", minHeight: "100vh" }}> {/* Header Section */} <div style={{ backgroundColor: "white", boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)", padding: "10px 20px", display: "flex", justifyContent: "space-between", alignItems: "center", }} > <img src={commerztechLogo} alt="CommerzTech" style={{ width: 130, height: 40 }} /> <img src={logo} alt="PMR Logo" style={{ width: 130, height: 40 }} /> <img src={logout} alt="Logout" style={{ cursor: "pointer", width: 18, height: 20 }} onClick={logOut}/> </div> <div className="container-fluid"> <Nav className="mb-3 d-flex flex-wrap justify-content-start bg-white shadow-sm p-2 w-100 mt-5"> {[ "Dashboard", "Your Reports", "Shared Reports", "Blogs", "Second Opinion", "Spends", "Risk Calculator", "Vaccinations", "My Notes" ].map((item) => ( <Nav.Item key={item} className="flex-grow-1 text-center"> {item === "Your Reports" ? ( <Dropdown show={showDropdown} onToggle={() => setShowDropdown(!showDropdown)}> <Dropdown.Toggle as={Nav.Link} className={`fw-bold w-100 ${activeItem === item ? "bg-primary text-white" : "text-dark"}`} onClick={() => { setActiveItem(item); setShowDropdown(!showDropdown); }} > {item} </Dropdown.Toggle> <Dropdown.Menu> {categories.map((category) => ( <Dropdown.Item key={category} onClick={() => { setSelectedCategory(category); setActiveTab(category); setShowDropdown(false); }} > {category} </Dropdown.Item> ))} </Dropdown.Menu> </Dropdown> ) : ( <Nav.Link href="#" className={`fw-bold w-100 ${activeItem === item ? "bg-primary text-white" : "text-dark"}`} onClick={() => setActiveItem(item)} > {item} </Nav.Link> )} </Nav.Item> ))} </Nav> {/* Search Box */} <div className="mb-3"> <Form className="d-flex"> <div className="input-group"> <span className="input-group-text bg-light"> <FaSearch /> </span> <Form.Control type="text" placeholder="Search reports by name or clinic..." value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} /> </div> </Form> </div> {/* Header */} {/* Header */} <div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex align-items-center"> <input type="checkbox" id="includeArchived" className="me-2" /> <label htmlFor="includeArchived" className="text-danger fw-bold me-3"> Include Archived Reports </label> <Button variant="link" className="text-primary fw-bold"> <FaSync /> Refresh </Button> </div> <div> <Button variant="link" className="fw-bold"> <span className="text-muted">Have a report(s) to upload?</span> <FaUpload /> <span className="text-danger">Click here</span> </Button> </div> </div> {/* Tabs */} <ul className="nav nav-tabs"> {["All", "General", "Imaging", "Blood work", "Cardiology", "Gastroenterology", "Neurology", "Prescriptions"].map((tab) => ( <li className="nav-item" key={tab}> <button className={`nav-link ${activeTab === tab ? "active" : ""}`} onClick={() => setActiveTab(tab)} > {tab} ({rowData.filter((r) => tab === "All" || r.category === tab).length}) </button> </li> ))} </ul> {/* Grid & Preview Section */} <div className="row mt-3"> <div className="col-md-7"> <div className="ag-theme-balham p-2 border rounded shadow-sm" style={{ height: "500px" }}> <AgGridReact theme={'legacy'} ref={gridRef} rowData={rowData} columnDefs={columnDefs} defaultColDef={defaultColDef} animateRows={true} modules={[ClientSideRowModelModule]} onRowClicked={onRowClicked} /> </div> </div> <div className="col-md-5 d-flex flex-column align-items-center justify-content-center border rounded shadow-sm" style={{ height: "500px", background: "#f9f9f9" }}> <h5 className="text-secondary">Preview</h5> {selectedReport ? ( <iframe src={pdfUrl} width="100%" height="450px" title="Report Preview"></iframe> ) : ( <p className="text-muted">Please select a report to view</p> )} </div> </div> </div> </div> ); }; export default ViewReports; using these code I want to create the new grid desgin. to create the new desgin like a profissional generate working code "