Merge pull request #3407 from OneCommunityGlobal/Samman-sharepdf

Samman_SharePDF button for phase II

Author: one-community

package-lock.json

@@ -29,7 +29,9 @@
     "history": "^4.10.1",
     "html-react-parser": "^1.4.14",
     "html-to-pdfmake": "^2.0.6",
+    "html2canvas": "^1.4.1",
     "joi": "^14.0.6",
+    "jspdf": "^3.0.1",
     "jwt-decode": "^2.2.0",
     "leaflet": "1.7.1",
     "leaflet.heat": "^0.2.0",

package.json

@@ -2,6 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
 import './WeeklyProjectSummary.css';
 import { useDispatch, useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
+import html2canvas from 'html2canvas';
+import { jsPDF } from 'jspdf';
 import WeeklyProjectSummaryHeader from './WeeklyProjectSummaryHeader';
 import { fetchAllMaterials } from '../../../actions/bmdashboard/materialsActions';
 import QuantityOfMaterialsUsed from './QuantityOfMaterialsUsed/QuantityOfMaterialsUsed';
@@ -268,9 +270,97 @@ export default function WeeklyProjectSummary() {
     [quantityOfMaterialsUsedData],
   );
 
+  const handleSaveAsPDF = async () => {
+    const currentOpenSections = { ...openSections };
+
+    try {
+      const allSectionsOpen = {};
+      sections.forEach(section => {
+        allSectionsOpen[section.key] = true;
+      });
+      setOpenSections(allSectionsOpen);
+
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      const contentElement = document.querySelector('.weekly-project-summary-container');
+      if (!contentElement) throw new Error('Weekly project summary container not found.');
+
+      const pdfContainer = document.createElement('div');
+      pdfContainer.id = 'pdf-export-container';
+      Object.assign(pdfContainer.style, {
+        width: '420mm',
+        padding: '10mm',
+        backgroundColor: '#fff',
+        position: 'absolute',
+        left: '-9999px',
+        boxSizing: 'border-box',
+      });
+
+      const clonedContent = contentElement.cloneNode(true);
+
+      // Remove buttons and controls not needed in PDF
+      clonedContent
+        .querySelectorAll(
+          'button, .weekly-project-summary-dropdown-icon, .no-print, .weekly-summary-header-controls',
+        )
+        .forEach(el => el.parentNode?.removeChild(el));
+
+      const styleElem = document.createElement('style');
+      styleElem.textContent = `
+          img, svg {
+          height: auto !important;
+          page-break-inside: avoid !important;
+        }
+      `;
+
+      clonedContent.prepend(styleElem);
+      pdfContainer.appendChild(clonedContent);
+      document.body.appendChild(pdfContainer);
+
+      const canvas = await html2canvas(pdfContainer, {
+        scale: 2,
+        useCORS: true,
+        backgroundColor: '#fff',
+        windowWidth: pdfContainer.scrollWidth,
+        windowHeight: pdfContainer.scrollHeight,
+        logging: false,
+      });
+
+      if (!canvas) throw new Error('Failed to capture content as image.');
+
+      const imgData = canvas.toDataURL('image/jpeg', 0.95);
+
+      const pdfWidth = 210;
+      const imgHeight = (canvas.height * pdfWidth) / canvas.width;
+
+      // eslint-disable-next-line new-cap
+      const pdf = new jsPDF({
+        orientation: 'portrait',
+        unit: 'mm',
+        format: [pdfWidth, imgHeight],
+      });
+
+      pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, imgHeight);
+
+      const now = new Date();
+      const fileName = `weekly-project-summary-${now.toISOString().slice(0, 10)}.pdf`;
+
+      // Save the PDF
+      pdf.save(fileName);
+
+      document.body.removeChild(pdfContainer);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('PDF generation failed:', err);
+    } finally {
+      setOpenSections(currentOpenSections);
+    }
+  };
+
   return (
     <div className={`weekly-project-summary-container ${darkMode ? 'dark-mode' : ''}`}>
-      <WeeklyProjectSummaryHeader />
+      <WeeklyProjectSummaryHeader handleSaveAsPDF={handleSaveAsPDF} />
       <div className="weekly-project-summary-dashboard-container">
         <div className="weekly-project-summary-dashboard-grid">
           {sections.map(({ title, key, className, content }) => (

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx

@@ -9,7 +9,7 @@ import {
 } from '../../../actions/bmdashboard/weeklyProjectSummaryActions';
 import './WeeklyProjectSummary.css';
 
-export default function WeeklyProjectSummaryHeader() {
+export default function WeeklyProjectSummaryHeader({ handleSaveAsPDF }) {
   const dispatch = useDispatch();
   const projectFilter = useSelector(state => state.weeklyProjectSummary.projectFilter);
   const dateRangeFilter = useSelector(state => state.weeklyProjectSummary.dateRangeFilter);
@@ -100,7 +100,9 @@ export default function WeeklyProjectSummaryHeader() {
             ))}
           </Input>
 
-          <Button className="weekly-summary-share-btn">Share PDF</Button>
+          <Button className="weekly-summary-share-btn" onClick={handleSaveAsPDF}>
+            Share PDF
+          </Button>
         </div>
       </header>
     </div>

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummaryHeader.jsx

@@ -7,6 +7,7 @@ export default function AccordianWrapper({ children, title }) {
 
   return (
     <Collapsible
+      open
       className={darkMode ? 'bg-space-cadet text-light' : ''}
       openedClassName={darkMode ? 'bg-space-cadet text-light' : ''}
       trigger={title}

src/components/TotalOrgSummary/AccordianWrapper/AccordianWrapper.jsx

@@ -52,4 +52,4 @@
 
 .chart-title.dark-mode p{
   color: white;
-}
+}