Merge pull request #3275 from OneCommunityGlobal/jaissica-create-button-prototype-for-summary-dashboard

Jaissica-added buttons in summary dashboard

Author: one-community

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>
             );
           })}