Merge pull request #4415 from OneCommunityGlobal/SaiKrishna_SearchAndSortFunctionalityForProjectsDetailsTable

Vamsidhar - AddingSearchAndSortFeatureForProjectDetailsTable

Author: one-community

src/components/BMDashboard/BMDashboard.jsx

@@ -66,11 +66,17 @@ export function BMDashboard() {
           }
         });
 
-        // Handle containers
+        // Handle containers - only target containers within BMDashboard, not ProjectDetails
         const containers = bmContainer.querySelectorAll(
-          '.container, .projects-list, .project-summary, .log-bar, .log-bar-dark',
+          '.container, .projects-list, .project-summary',
         );
         containers.forEach(container => {
+          // Skip if it's inside ProjectDetails (has project-details class in parent)
+          const isInProjectDetails = container.closest('.project-details, .project-details-dark');
+          if (isInProjectDetails) {
+            return; // Don't override ProjectDetails styles
+          }
+
           if (darkMode) {
             container.style.setProperty('background-color', '#1b2a41', 'important');
             container.style.setProperty('color', '#ffffff', 'important');
@@ -80,11 +86,17 @@ export function BMDashboard() {
           }
         });
 
-        // Handle LogBar headings specifically
+        // Handle LogBar headings specifically - only within BMDashboard, not ProjectDetails
         const logBarHeadings = bmContainer.querySelectorAll(
           '.log-bar h2, .log-bar-dark h2, .log-bar__section h2',
         );
         logBarHeadings.forEach(heading => {
+          // Skip if it's inside ProjectDetails (has project-details class in parent)
+          const isInProjectDetails = heading.closest('.project-details, .project-details-dark');
+          if (isInProjectDetails) {
+            return; // Don't override ProjectDetails LogBar styles
+          }
+
           if (darkMode) {
             heading.style.setProperty('color', '#ffffff', 'important');
             heading.style.setProperty('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.5)', 'important');

src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx

@@ -3,7 +3,6 @@ import { Button } from 'reactstrap';
 import { Link } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import styles from './ProjectDetails.module.css';
-
 // button styles for each section
 const buttonStyles = {
   dailyLogging: 'green',
@@ -57,9 +56,7 @@ function LogBar(props) {
                   <Link to={buttonLabels[section].url[index]}>
                     <Button
                       type="button"
-                      className={`${styles.button} ${styles.btn} ${
-                        styles[`button--${buttonStyles[section]}`]
-                      }`}
+                      className={`${styles.button} ${styles[`button--${buttonStyles[section]}`]}`}
                     >
                       {label}
                     </Button>
@@ -68,7 +65,7 @@ function LogBar(props) {
                   <Link to={`/bmdashboard/issues/add/${projectId}`}>
                     <Button
                       type="button"
-                      className={`${styles.button} ${styles.btn} ${styles['button--maroon']}`}
+                      className={`${styles.button} ${styles['button--maroon']}`}
                     >
                       Log Issue
                     </Button>

src/components/BMDashboard/Projects/ProjectDetails/Materials/Materials.jsx

@@ -1,8 +1,9 @@
 import MaterialCard from './MaterialCard';
+import styles from '../ProjectDetails.module.css';
 
 function Materials() {
   return (
-    <div className="cards-container__content">
+    <div className={styles['cards-container__content']}>
       <MaterialCard />
       <MaterialCard />
       <MaterialCard />

src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialsDisplay.jsx

@@ -1,10 +1,11 @@
 import { Card } from 'reactstrap';
 import Materials from './Materials';
+import styles from '../ProjectDetails.module.css';
 
 function MaterialsDisplay() {
   return (
-    <Card className="cards-container">
-      <h2 className="cards-container__header">Materials with quantity less than 20% left</h2>
+    <Card className={`card ${styles['cards-container']}`}>
+      <h2>Materials with quantity less than 20% left</h2>
       <Materials />
     </Card>
   );

src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx

@@ -1,6 +1,9 @@
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { Container, Row, Col } from 'reactstrap';
+import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
+import Loading from '~/components/common/Loading';
 import LogBar from './LogBar';
 import RentedToolsDisplay from './RentedTools/RentedToolsDisplay';
 import MaterialsDisplay from './Materials/MaterialsDisplay';
@@ -9,10 +12,32 @@ import styles from './ProjectDetails.module.css';
 
 function ProjectDetails() {
   const { projectId } = useParams();
+  const dispatch = useDispatch();
   const darkMode = useSelector(state => state.theme.darkMode);
   const projects = useSelector(state => state.bmProjects) || [];
+  const [isLoading, setIsLoading] = useState(true);
   const currProject = projects.find(project => String(project._id) === String(projectId));
 
+  useEffect(() => {
+    const fetchProjects = async () => {
+      setIsLoading(true);
+      try {
+        await dispatch(fetchBMProjects());
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchProjects();
+  }, [dispatch, projectId]);
+
+  if (isLoading) {
+    return (
+      <Container className={`${styles['project-details']} text-center mt-5`}>
+        <Loading align="center" darkMode={darkMode} />
+      </Container>
+    );
+  }
+
   if (!currProject) {
     return (
       <Container className={`${styles['project-details']} text-center mt-5`}>
@@ -48,7 +73,7 @@ function ProjectDetails() {
             </Col>
           </Row>
 
-          <ProjectLog projectId={projectId} />
+          <ProjectLog projectId={projectId} darkMode={darkMode} />
         </Col>
       </Row>
     </Container>

src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css

@@ -56,9 +56,9 @@
   margin-top: 1em;
 }
 
-.log-bar__section h2,
-.card.cards-container h2,
-.project-log h2 {
+.log-bar__section :global(h2),
+.cards-container :global(h2),
+.project-log :global(h2) {
   font-size: 1em;
   font-weight: bold;
   color: #333333;
@@ -75,7 +75,7 @@
   list-style-type: none;
 }
 
-.button.btn {
+.button {
   border: 0;
   border-radius: 10px;
   margin: 0.1em;
@@ -84,34 +84,55 @@
   font-weight: 500;
 }
 
-.button.btn:hover {
+.button:hover {
   outline: auto;
   filter: brightness(130%);
   color: #ffffff !important;
 }
 
 /* buttons custom colors */
-.button.btn.button--green {
+.button--green {
   background-color: #015d4a;
   color: #ffffff !important;
 }
 
-.button.btn.button--blue {
+.button--blue {
   background-color: #0f6386;
   color: #ffffff !important;
 }
 
-.button.btn.button--indigo {
+.button--indigo {
   background-color: #203844;
   color: #ffffff !important;
 }
 
-.button.btn.button--maroon {
+.button--maroon {
   background-color: #980101;
   margin-top: 2em;
   color: #ffffff !important;
 }
 
+/* Dark mode button colors - brighter/more vibrant for visibility */
+.log-bar-dark .button--green {
+  background-color: #0d8b6f !important;
+  border: 1px solid #0fb894;
+}
+
+.log-bar-dark .button--blue {
+  background-color: #1a8bb8 !important;
+  border: 1px solid #2ba3d1;
+}
+
+.log-bar-dark .button--indigo {
+  background-color: #3a5a6b !important;
+  border: 1px solid #4d7a94;
+}
+
+.log-bar-dark .button--maroon {
+  background-color: #c41e1e !important;
+  border: 1px solid #e63939;
+}
+
 @media (min-width: 550px) {
   .log-bar {
     display: flex;
@@ -124,11 +145,11 @@
     justify-content: center;
   }
 
-  .button.btn.btn-secondary {
+  .button {
     width: auto;
   }
 
-  .button.btn.btn-secondary.button--maroon {
+  .button.button--maroon {
     margin-top: auto;
   }
 }
@@ -142,22 +163,30 @@
     margin: 2em;
   }
 
+  .log-bar-dark {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 2em;
+  }
+
   .log-bar__section {
     width: 50%;
     flex: auto;
   }
 
-  .button.btn.btn-secondary {
+  .button {
     width: auto;
   }
 
-  .button.btn.btn-secondary.button--maroon {
+  .button.button--maroon {
     margin-left: 2em;
   }
 }
 
 /* styling for containers with cards */
-.card.cards-container {
+.cards-container {
   align-items: center;
   margin: 1em 2em;
   padding: 1em;
@@ -216,7 +245,7 @@
   padding: 0.5em;
 }
 
-.single-card__body h3 {
+.single-card__body :global(h3) {
   font-size: 1em;
   margin-bottom: -0.2em;
 }
@@ -268,17 +297,17 @@
   white-space: nowrap;
 }
 
-.project-log thead {
+.project-log :global(thead) {
   background-color: transparent;
 }
 
 @media (max-width: 768px) {
-  .project-log td,
-  .project-log th {
+  .project-log :global(td),
+  .project-log :global(th) {
     font-size: 0.6em;
   }
 }
 
-ul.log-bar__btn-group {
+.log-bar__btn-group {
   padding: 0px;
 }