Merge pull request #2821 from OneCommunityGlobal/vedant-fix-project-d…

…ashboard

Vedant Fix project dashboard and add multi-select option

src/components/BMDashboard/BMDashboard.css

@@ -16,31 +16,44 @@
   }
 }
 
-/* project summaries */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1em;
+}
+
 .projects-list {
-  width: 80%;
+  width: 100%;
+  max-width: 1200px;
   list-style-type: none;
   max-height: 80vh;
   overflow-x: hidden;
   overflow-y: auto;
-  padding:0;
+  padding: 0;
+  margin: 1em auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f9f9f9;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .project-summary {
   background-color: #e8f4f9;
-  min-height: 20vh;
-  height: auto;
-  margin-bottom: 2em;
+  margin: 1em;
   padding: 1em;
   border-radius: 5px;
+  transition: transform 0.2s;
+}
+
+.project-summary:hover {
+  transform: scale(1.02);
 }
 
 .project-summary_header {
   font-size: clamp(0.8em, 3vw, 1.3em);
   font-weight: bold;
   text-align: center;
   justify-content: center;
-  /* color: #3ea0cb; */
 }
 
 .project-summary_content {
@@ -63,13 +76,10 @@
 .project-summary_span {
   color: #3ea0cb;
   font-weight: bold;
-  /* margin-left: 1em; */
   display: inline-block;
-  white-space: no-wrap;
+  white-space: nowrap;
 }
 
-/* error page */
-
 .bm-error-page {
   width: 100%;
   max-width: 1536px;
@@ -81,8 +91,6 @@
   margin-top: 2rem;
 }
 
-/* forms */
-
 .inv-form-page-container {
   width: 100%;
   max-width: 800px;
@@ -141,6 +149,23 @@
 }
 
 .form-footer {
-font-size: 0.875em;
-margin-top:3px;
+  font-size: 0.875em;
+  margin-top: 3px;
+}
+
+.projects-list::-webkit-scrollbar {
+  width: 8px;
+}
+
+.projects-list::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+.projects-list::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+.projects-list::-webkit-scrollbar-thumb:hover {
+  background: #555;
 }

src/components/BMDashboard/BMDashboard.jsx

@@ -26,7 +26,7 @@ export function BMDashboard() {
   }, [errors]);
 
   return (
-    <Container className="justify-content-center align-items-center mw-80 px-4">
+    <Container className="justify-content-center align-items-center">
       <header className="bm-dashboard__header">
         <h1>Building and Inventory Management Dashboard</h1>
       </header>

src/components/BMDashboard/Projects/ProjectSelectForm.jsx

@@ -33,7 +33,7 @@ function ProjectSelectForm() {
   };
 
   return (
-    <Form className="w-100 p-3  text-center">
+    <Form className="w-100 p-1 text-center">
       <Row className="ml-0 gx-5 w-75 mx-auto" md="2" sm="1" xs="1">
         <FormGroup>
           <Col className="p-3">

src/components/BMDashboard/Projects/ProjectSummary.css

@@ -0,0 +1,35 @@
+.project-summary_content {
+  padding: 20px;
+}
+
+.project-summary_item {
+  margin-bottom: 15px;
+}
+
+.project-summary_label {
+  font-weight: bold;
+  text-align: left;
+  white-space: normal; /* Allow text to wrap properly */
+}
+
+.project-summary_value {
+  overflow-wrap: break-word; /* Ensures the content wraps if too long */
+  word-wrap: break-word; /* Ensures wrapping behavior */
+}
+
+.project-summary_span {
+  display: block;
+  word-break: break-word; /* Break words to prevent overflow */
+  line-height: 1.4;
+  white-space: normal; /* Allow wrapping in span */
+}
+
+@media (max-width: 700px) {
+  .project-summary_label {
+    font-size: 14px;
+  }
+
+  .project-summary_span {
+    font-size: 12px; /* Optional: adjust font size for smaller screens */
+  }
+}

src/components/BMDashboard/Projects/ProjectSummary.jsx

@@ -1,5 +1,6 @@
 import { Row, Col, Label } from 'reactstrap';
 import { useState, useEffect } from 'react';
+import './ProjectSummary.css'; // Import the CSS file
 
 function ProjectSummary({ project }) {
   const {
@@ -26,82 +27,82 @@ function ProjectSummary({ project }) {
     };
   }, []);
 
-  const summaryLabelCol = windowWidth < 700 ? '6' : '4';
-  const summaryLabelCol1 = windowWidth < 700 ? '6' : '8';
-  const summaryLabelCol2 = windowWidth < 700 ? '6' : '7';
+  const summaryLabelCol = windowWidth < 700 ? 12 : 4; // full-width on smaller screens
+  const summaryValueCol = windowWidth < 700 ? 12 : 8; // full-width on smaller screens
+  const summaryLabelColShort = windowWidth < 700 ? 6 : 4; // adjust for shorter labels
 
   return (
     <div className="project-summary_content">
       <Row className="project-summary_header mx-auto">
         <h2>{project.name} Summary</h2>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelCol}>
           <Label className="project-summary_label">Total hours of work done:</Label>
         </Col>
-        <Col xs="3">
+        <Col xs={summaryValueCol} sm={summaryValueCol}>
           <span className="project-summary_span">{hoursWorked}</span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelCol}>
           <Label className="project-summary_label">Total cost of materials:</Label>
         </Col>
-        <Col xs="3">
+        <Col xs={summaryValueCol} sm={summaryValueCol}>
           <span className="project-summary_span">{totalMaterialsCost} USD</span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelCol}>
           <Label className="project-summary_label">Total cost of equipment:</Label>
         </Col>
-        <Col xs="3">
+        <Col xs={summaryValueCol} sm={summaryValueCol}>
           <span className="project-summary_span">{totalEquipmentCost} USD</span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelCol}>
           <Label className="project-summary_label">Waste:</Label>
         </Col>
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryValueCol} sm={summaryValueCol}>
           <span className="project-summary_span">
             {mostMaterialWaste?.stockWasted} {mostMaterialWaste?.itemType.unit} of{' '}
             {mostMaterialWaste?.itemType.name} has been wasted!
           </span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelCol}>
           <Label className="project-summary_label">Total members:</Label>
         </Col>
-        <Col xs="3">
+        <Col xs={summaryValueCol} sm={summaryValueCol}>
           <span className="project-summary_span">{members.length}</span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelColShort}>
           <Label className="project-summary_label">Rentals:</Label>
         </Col>
-        <Col xs={summaryLabelCol2}>
+        <Col xs={summaryValueCol} sm={8}>
           <span className="project-summary_span">Excavator 2 rental ends in 72 hours!</span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelColShort}>
           <Label className="project-summary_label">Most material bought:</Label>
         </Col>
-        <Col xs={summaryLabelCol2}>
+        <Col xs={summaryValueCol} sm={8} className="project-summary_value">
           <span className="project-summary_span">
             {mostMaterialBought?.stockBought} {mostMaterialBought?.itemType.unit} of{' '}
             {mostMaterialBought?.itemType.name} purchased for this project
           </span>
         </Col>
       </Row>
       <Row className="project-summary_item mx-auto">
-        <Col xs={summaryLabelCol}>
+        <Col xs={summaryLabelCol} sm={summaryLabelColShort}>
           <Label className="project-summary_label">Stock:</Label>
         </Col>
-        <Col xs={summaryLabelCol1}>
+        <Col xs={summaryValueCol} sm={summaryValueCol} className="project-summary_value">
           <span className="project-summary_span">
             {leastMaterialAvailable?.itemType.name} is nearly out of stock (
             {leastMaterialAvailable?.stockAvailable} {leastMaterialAvailable?.itemType.unit}{' '}

src/components/BMDashboard/Projects/ProjectsList.jsx

@@ -1,15 +1,38 @@
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { Row } from 'reactstrap';
+import Select from 'react-select';
 import ProjectSummary from './ProjectSummary';
 
 function ProjectsList() {
   const projects = useSelector(state => state.bmProjects);
+  const [selectedProjects, setSelectedProjects] = useState([]);
+
+  const projectOptions = projects.map(project => ({
+    value: project._id,
+    label: project.name,
+  }));
+
+  const handleSelectChange = selectedOptions => {
+    setSelectedProjects(selectedOptions || []);
+  };
+
+  const filteredProjects = selectedProjects.length
+    ? projects.filter(project => selectedProjects.some(selected => selected.value === project._id))
+    : projects;
 
   return (
-    <Row className="ml-0 mt-2 text-center">
-      {projects.length ? (
+    <Row className="ml-0 text-center">
+      <Select
+        isMulti
+        options={projectOptions}
+        onChange={handleSelectChange}
+        className="mb-3"
+        placeholder="Select Projects"
+      />
+      {filteredProjects.length ? (
         <ul className="projects-list">
-          {projects.map(project => (
+          {filteredProjects.map(project => (
             <li className="project-summary" key={project._id}>
               <ProjectSummary project={project} />
             </li>

src/components/BMDashboard/_tests_/BMDashboard.test.jsx

@@ -93,13 +93,14 @@ describe('BMDashboard Tests', () => {
       </Provider>,
     );
 
-    const dropdown = screen.getByRole('combobox');
+    const dropdown = screen.getByLabelText(/select/i); // Use the label associated with the dropdown
     userEvent.click(dropdown);
 
     expect(screen.getByText('Project 1')).toBeInTheDocument();
     expect(screen.getByText('Project 2')).toBeInTheDocument();
     expect(screen.queryByText('Project 3')).toBeNull();
   });
+
   //Test Case 3:
   it('Shows an error message if no project is selected and the button is clicked', async () => {
     render(
@@ -157,7 +158,7 @@ describe('BMDashboard Tests', () => {
       </Provider>,
     );
 
-    const selectDropdown = screen.getByRole('combobox');
+    const selectDropdown = screen.getByLabelText(/select/i); // Use the label here as well
     userEvent.selectOptions(selectDropdown, '1');
 
     const goToDashboardButton = screen.getByRole('button', { name: /go to project dashboard/i });