Frontend Release to Main [4.12]

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.css

@@ -297,4 +297,89 @@
   .weekly-project-summary-dashboard-grid {
     grid-template-columns: 1fr;
   }
-}
+}
+
+/* ---------------- STATUS CARD ---------------- */
+.status-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 25px;
+  width: 100%;             
+  max-width: 284px;       
+  height: 190px;
+  text-align: center;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  padding: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+/* ---------------- RESPONSIVE GRID LAYOUT ---------------- */
+.project-status-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 1600px;
+  margin: auto;
+}
+
+/* ---------------- OVAL STATUS BUTTON ---------------- */
+.weekly-status-button {
+  width: 130px;
+  height: 65px;
+  border-radius: 50px / 32px; 
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
+  margin: 12px 0; 
+}
+
+.weekly-card-title {
+  color: #000;
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.weekly-status-value {
+  color: #000;
+  font-size: 40px;
+  font-weight: 600;
+}
+
+
+/* ---------------- RESPONSIVE BREAKPOINTS ---------------- */
+@media (min-width: 1600px) {
+  .project-status-grid {
+    grid-template-columns: repeat(6, 1fr); 
+  }
+}
+
+@media (max-width: 1400px) {
+  .project-status-grid {
+    grid-template-columns: repeat(4, 1fr); 
+  }
+}
+
+@media (max-width: 1024px) { 
+  .project-status-grid {
+    grid-template-columns: repeat(3, 1fr); 
+  }
+}
+
+@media (max-width: 768px) { 
+  .project-status-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 576px) { 
+  .project-status-grid {
+    grid-template-columns: repeat(1, 1fr); 
+  }
+}

src/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx

@@ -4,6 +4,105 @@ import { useSelector } from 'react-redux';
 import { v4 as uuidv4 } from 'uuid';
 import WeeklyProjectSummaryHeader from './WeeklyProjectSummaryHeader';
 
+const projectStatusButtons = [
+  {
+    title: 'Total Projects',
+    value: 426,
+    change: '+16% week over week',
+    bgColor: '#F0FFEE',
+    buttonColor: '#BAF0B6',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Completed Projects',
+    value: 127,
+    change: '+14% week over week',
+    bgColor: '#F3FCFF',
+    buttonColor: '#C1EFFB',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Delayed Projects',
+    value: 34,
+    change: '-18% week over week',
+    bgColor: '#FFE9FA',
+    buttonColor: '#FECFF3',
+    textColor: '#C82F2F',
+  },
+  {
+    title: 'Active Projects',
+    value: 265,
+    change: '+3% week over week',
+    bgColor: '#E8E8FF',
+    buttonColor: '#CBCBFE',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Avg Project Duration',
+    value: '17 hrs',
+    change: '+13% week over week',
+    bgColor: '#FFF6EE',
+    buttonColor: '#FFD8A5',
+    textColor: '#FFD8A5',
+  },
+  {
+    title: 'Total Material Cost',
+    value: '$27.6K',
+    change: '+9% week over week',
+    bgColor: '#FFF3F3',
+    buttonColor: '#FBC1C2',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Total Material Used',
+    value: '2714',
+    change: '+11% week over week',
+    bgColor: '#DAC8FF',
+    buttonColor: '#B28ECC',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Active Projects',
+    value: '265',
+    change: '+3% week over week',
+    bgColor: '#E8E8FF',
+    buttonColor: '#CBCBFE',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Total Labor Hours Invested',
+    value: '12.8K',
+    change: '+17% week over week',
+    bgColor: '#E5C1FC',
+    buttonColor: '#F6E1FB',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Total Labor Cost',
+    value: '$18.4K',
+    change: '+14% week over week',
+    bgColor: '#FFFDF3',
+    buttonColor: '#FBF9C1',
+    textColor: '#328D1B',
+  },
+  {
+    title: 'Material Available',
+    value: 693,
+    change: '-8% week over week',
+    bgColor: '#B4D9C5',
+    buttonColor: '#31BD41',
+    textColor: '#C82F2F',
+  },
+  {
+    title: 'Material Wasted',
+    value: 879,
+    change: '+14% week over week',
+    bgColor: '#EFBABB',
+    buttonColor: '#F79395',
+    textColor: '#328D1B',
+  },
+];
+
 export default function WeeklyProjectSummary() {
   const [openSections, setOpenSections] = useState({});
 
@@ -23,11 +122,27 @@ export default function WeeklyProjectSummary() {
       className: 'full',
       content: (
         <div className="project-status-grid">
-          {Array.from({ length: 12 }).map(() => {
+          {projectStatusButtons.map(button => {
             const uniqueId = uuidv4();
             return (
-              <div key={uniqueId} className="weekly-project-summary-card small-card">
-                📊 Card
+              <div
+                key={uniqueId}
+                className="weekly-project-summary-card status-card"
+                style={{ backgroundColor: button.bgColor }} // Dynamic Background
+              >
+                <div className="weekly-card-title">{button.title}</div>
+                <div
+                  className="weekly-status-button"
+                  style={{ backgroundColor: button.buttonColor }} // Dynamic Oval Color
+                >
+                  <span className="weekly-status-value">{button.value}</span>
+                </div>
+                <div
+                  className="weekly-status-change"
+                  style={{ color: button.textColor }} // Dynamic Change Color
+                >
+                  {button.change}
+                </div>
               </div>
             );
           })}

src/components/Badge/AssignBadge.jsx

@@ -214,12 +214,7 @@ function AssignBadge(props) {
         >
           Assign Badge
         </Button>
-        <Modal
-          isOpen={isOpen}
-          toggle={toggle}
-          backdrop="static"
-          className={darkMode ? 'text-light dark-mode' : ''}
-        >
+        <Modal isOpen={isOpen} toggle={toggle} className={darkMode ? 'text-light dark-mode' : ''}>
           <ModalHeader className={darkMode ? 'bg-space-cadet' : ''} toggle={toggle}>
             Assign Badge
           </ModalHeader>

src/components/Badge/BadgeReport.jsx

@@ -84,54 +84,68 @@ function BadgeReport(props) {
     };
   }
 
-  const FormatReportForPdf = (badges, callback) => {
-    const bgReport = [];
-    bgReport[0] = `<h3>Badge Report (Page 1 of ${Math.ceil(badges.length / 4)})</h3>
-  <div style="margin-bottom: 20px; color: orange;"><h4>For ${props.firstName} ${
-      props.lastName
-    }</h4></div>
-  <div style="color:#DEE2E6; margin:10px 0px 20px 0px; text-align:center;">_______________________________________________________________________________________________</div>`;
-
-    for (let i = 0; i < badges.length; i += 1) {
-      imageToUri(badges[i].badge.imageUrl, function(uri) {
-        bgReport[i + 1] = `
-      <table>
-        <thead>
-          <tr>
-            <th>Badge Image</th>
-            <th>Badge Name, Count Awarded & Badge Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td style="width:160px">
-              <div><img height="150" width="150" src=${uri}/></div>
-            </td>
-            <td style="width:500px">
-              <div><b>Name:</b> <span class="name">${badges[i].badge.badgeName}</span></div>
-              <div><b>Count:</b> ${badges[i].count}</div>
-              <div><b>Description:</b> ${badges[i].badge.description}</div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      ${
-        (i + 1) % 4 === 0 && i + 1 !== badges.length
-          ? `</br></br></br>
-      <h3>Badge Report (Page ${1 + Math.ceil((i + 1) / 4)} of ${Math.ceil(badges.length / 4)})</h3>
-    <div style="margin-bottom: 20px; color: orange;"><h4>For ${props.firstName} ${
-              props.lastName
-            }</h4></div>
-    <div style="color:#DEE2E6; margin:10px 0px 20px 0px; text-align:center;">_______________________________________________________________________________________________</div>
-      `
-          : ''
-      }`;
-        if (i === badges.length - 1) {
-          setTimeout(() => {
-            callback(bgReport.join('\n'));
-          }, 100);
-        }
+  const FormatReportForPdf = async (badges, callback) => {
+    try {
+      const bgReport = [];
+      bgReport[0] = `<h3>Badge Report (Page 1 of ${Math.ceil(badges.length / 4)})</h3>
+        <div style="margin-bottom: 20px; color: orange;"><h4>For ${props.firstName} ${
+        props.lastName
+      }</h4></div>
+        <div style="color:#DEE2E6; margin:10px 0px 20px 0px; text-align:center;">_______________________________________________________________________________________________</div>`;
+
+      const badgePromises = badges.map((badge, i) => {
+        const imageUrl = badge.badge?.imageUrl || ''; // Fallback to empty string if imageUrl is missing
+        const badgeName = badge.badge?.badgeName || 'Unknown Badge'; // Fallback for missing badgeName
+        const description = badge.badge?.description || 'No description available'; // Fallback for missing description
+
+        return new Promise((resolve) => {
+          imageToUri(imageUrl, (uri) => {
+            const badgeHtml = `
+              <table>
+                <thead>
+                  <tr>
+                    <th>Badge Image</th>
+                    <th>Badge Name, Count Awarded & Badge Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td style="width:160px">
+                      <div><img height="150" width="150" src="${uri}" /></div>
+                    </td>
+                    <td style="width:500px">
+                      <div><b>Name:</b> <span class="name">${badgeName}</span></div>
+                      <div><b>Count:</b> ${badge.count}</div>
+                      <div><b>Description:</b> ${description}</div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+              ${
+                (i + 1) % 4 === 0 && i + 1 !== badges.length
+                  ? `</br></br></br>
+              <h3>Badge Report (Page ${1 + Math.ceil((i + 1) / 4)} of ${Math.ceil(
+                      badges.length / 4
+                    )})</h3>
+              <div style="margin-bottom: 20px; color: orange;"><h4>For ${props.firstName} ${
+                      props.lastName
+                    }</h4></div>
+              <div style="color:#DEE2E6; margin:10px 0px 20px 0px; text-align:center;">_______________________________________________________________________________________________</div>
+              `
+                  : ''
+              }`;
+            resolve(badgeHtml);
+          });
+        });
       });
+
+      const badgeHtmlArray = await Promise.all(badgePromises);
+      bgReport.push(...badgeHtmlArray);
+
+      callback(bgReport.join('\n'));
+    } catch (error) {
+      console.error('Error generating badge report:', error);
+      callback('<p>Error generating badge report. Please try again later.</p>');
     }
   };