Radia UI enhancement projects dashboard

src/components/BMDashboard/LogTools/LogTools.jsx

@@ -19,7 +19,7 @@ function LogTools() {
   const dispatch = useDispatch();
   const history = useHistory();
   const today = new Date().toISOString().split('T')[0];
-  const [selectedProject, setSelectedProject] = useState(() => projects[0]?.name || '');
+  const [selectedProject, setSelectedProject] = useState(projects?.[0]?.name || '');
   const [selectedAction, setSelectedAction] = useState('Check In');
   const [relevantToolTypes, setRelevantToolTypes] = useState([]);
   const [postObject, setPostObject] = useState({
@@ -59,29 +59,29 @@ function LogTools() {
       let availForSelectedProj = 0;
       let usingForSelectedProj = 0;
 
-      (type.available || []).forEach(availItem => {
-        if (availItem.project?.name === selectedProject) {
+      type.available?.forEach(availItem => {
+        if (availItem.project.name === selectedProject) {
           availForSelectedProj += 1;
         }
       });
 
-      (type.using || []).forEach(usingItem => {
-        if (usingItem.project?.name === selectedProject) {
+      type.using?.forEach(usingItem => {
+        if (usingItem.project.name === selectedProject) {
           usingForSelectedProj += 1;
         }
       });
 
-      if ((type[actionArray] || []).length > 0) {
+      if (type[actionArray]?.length > 0) {
         const typeDetails = {
           toolName: type.name,
           _id: type._id,
           using: 0,
           available: 0,
           items: [],
         };
-        if ((type[actionArray] || []).length > 0) {
-          (type[actionArray] || []).forEach(item => {
-            if (item.project?.name === selectedProject) {
+        if (type[actionArray]?.length > 0) {
+          type[actionArray]?.forEach(item => {
+            if (item.project.name === selectedProject) {
               const toolCodes = {
                 value: item._id,
                 label: item.code,
@@ -199,6 +199,13 @@ function LogTools() {
     clearAllSelects();
   };
 
+  if (!projects || projects.length === 0) {
+    return (
+      <div className={`${styles.page}`}>
+        <p>Loading projects...</p>
+      </div>
+    );
+  }
   return (
     <div className={`${styles.page} ${darkMode ? styles['dark-mode'] : ''}`}>
       <div className={`${styles.logFormContainer} ${darkMode ? styles['dark-mode'] : ''}`}>
@@ -299,29 +306,23 @@ function LogTools() {
           <thead>
             <tr className={`${styles.subtitleRow} ${darkMode ? styles['dark-mode'] : ''}`}>
               <td colSpan="6">
-                <span className={`${styles.tableSubtitle} ${darkMode ? styles['dark-mode'] : ''}`}>
-                  Item
-                </span>
-                <span className={`${styles.tableSubtitle} ${darkMode ? styles['dark-mode'] : ''}`}>
+                <span className={`${styles.tableSubtitle} ${styles.subtitleHighlight}`}>Item</span>
+                <span className={`${styles.tableSubtitle} ${styles.subtitleHighlight}`}>
                   Quantity
                 </span>
-                <span
-                  className={`${styles.tableSubtitle} ${styles.subtitleHighlight} ${
-                    darkMode ? styles['dark-mode'] : ''
-                  }`}
-                >
+                <span className={`${styles.tableSubtitle} ${styles.subtitleHighlight}`}>
                   Daily Log Input
                 </span>
               </td>
             </tr>
 
-            <tr className={`${styles.toolTypeHead} ${darkMode ? styles['dark-mode'] : ''}`}>
-              <td>ID </td>
-              <td>Name </td>
-              <td>Working </td>
-              <td>Available </td>
-              <td>Using </td>
-              <td>Tool/Equipment Number</td>
+            <tr className={`${styles.toolTypeHead}`}>
+              <td className={`${styles.subPropertyHighlight}`}>ID </td>
+              <td className={`${styles.subPropertyHighlight}`}>Name </td>
+              <td className={`${styles.subPropertyHighlight}`}>Working </td>
+              <td className={`${styles.subPropertyHighlight}`}>Available </td>
+              <td className={`${styles.subPropertyHighlight}`}>Using </td>
+              <td className={`${styles.subPropertyHighlight}`}>Tool/Equipment Number</td>
             </tr>
           </thead>
 

src/components/BMDashboard/LogTools/LogTools.module.css

@@ -3,14 +3,6 @@
 /* Custom dark mode table row hover effect */
 
 /* Improved dark mode table row hover effect */
-.toolTypeRow.dark-mode:hover,
-tr.toolTypeRow.dark-mode:hover,
-tbody tr.toolTypeRow.dark-mode:hover {
-  background-color: inherit !important;
-  color: inherit !important;
-  border: inherit !important;
-  transition: none !important;
-}
 
 .page {
   margin: 0;
@@ -168,6 +160,11 @@ tbody tr.toolTypeRow.dark-mode:hover {
   color: #168dc0
 }
 
+.subPropertyHighlight {
+  color: #3d4c53
+}
+
+
 .actionButtons {
   display: flex;
   flex-direction: row;
@@ -180,53 +177,35 @@ tbody tr.toolTypeRow.dark-mode:hover {
   border-bottom: 2px solid #aaacaf !important;
 }
 
-.toolTypeRow {
+.toolTypeRow td {
   border: none !important;
-  color:#aaacaf;
+  color: #1a1a1a;
 }
 
-/* Dark mode styles */
-.page.dark-mode {
-  background-color: #1e2736 !important;
+/* Dark Mode */
+:global(.dark-mode) .logFormContainer {
+  background-color: #2b2b2b;
+  color: #ffffff !important;
+  border-color: #444 !important;
 }
 
-.logFormContainer.dark-mode {
-  background-color: #343a40 !important;
-  border-color: #495057 !important;
-  color: #fff !important;
+:global(.dark-mode) .subtitleRow {
+  background-color: #1a1a1a;
+  border-bottom: 1px solid #444;
 }
 
-.titleLabel.dark-mode {
-  color: #fff !important;
+:global(body.dark-mode) .page {
+  background-color: #1e2736;
 }
 
-.selectorLabel.dark-mode {
-  color: #fff !important;
+:global(body.dark-mode) .logFormContainer {
+  background-color: #1b2a41;
+  color: #ffffff;
+  border-color: #444;
 }
 
-.subtitleRow.dark-mode {
-  background-color: #495057 !important;
-  color: #fff !important;
-}
 
-.tableSubtitle.dark-mode {
-  color: #adb5bd !important;
-}
-
-.subtitleHighlight.dark-mode {
-  color: red !important;
-}
-
-.toolTypeHead.dark-mode {
-  color: #fff !important;
-  border-bottom-color: #6c757d !important;
-  background-color: #343a40 !important;
-}
-
-.toolTypeRow.dark-mode {
-  color: #fff !important;
-}
-
-.toolTypeRow.dark-mode td {
-  color: #fff !important;
+:global(body.dark-mode) .toolTypeHead {
+  background-color: #608597;
+  border-bottom: 2px solid #444 !important;
 }

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

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const DashboardSection = ({ title, children }) => {
+  return (
+    <div
+      className="dashboardHeader"
+      style={{
+        textAlign: 'center',
+        marginTop: '20px',
+        marginBottom: '10px',
+      }}
+    >
+      <h2
+        style={{
+          fontSize: '1.2rem',
+          fontWeight: 'bold',
+          marginBottom: '10px',
+        }}
+      >
+        {title}
+      </h2>
+
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          flexWrap: 'wrap',
+          gap: '10px',
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default DashboardSection;