Swathi usability enhancement in daily equipemt log

package.json

@@ -105,7 +105,7 @@
     "react-plotly.js": "^2.6.0",
     "react-redux": "^7.2.0",
     "react-router": "^5.3.4",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.4",
     "react-router-hash-link": "^2.3.1",
     "react-select": "^5.10.2",
     "react-simple-maps": "^3.0.0",

src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.jsx

@@ -3,7 +3,7 @@ import { connect, useDispatch, useSelector } from 'react-redux';
 import { Button, Table, Spinner, UncontrolledTooltip } from 'reactstrap';
 import Select from 'react-select';
 import { toast } from 'react-toastify';
-
+import { useHistory } from 'react-router-dom';
 import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
 import {
   fetchAllEquipments,
@@ -148,6 +148,7 @@ function EDailyActivityLog(props) {
   const hasNoEquipments = isMissingProject || rows.length === 0;
   const noEquipmentSelected = rows.length === 0 || rows.every(r => r.selectedNumbers.length === 0);
   const isSubmitDisabled = isMissingProject || isInvalidDate || noEquipmentSelected;
+  const history = useHistory();
 
   useEffect(() => {
     dispatch(fetchBMProjects());
@@ -241,6 +242,10 @@ function EDailyActivityLog(props) {
     }
   };
 
+  const goToPurchaseEquipment = () => {
+    history.push('/bmdashboard/equipment/purchase');
+  };
+
   const projectSelectStyles = getSelectStyles(darkMode, false);
   const tableSelectStyles = getSelectStyles(darkMode, true);
 
@@ -441,62 +446,60 @@ function EDailyActivityLog(props) {
             </small>
           </div>
         </div>
-
+        {!selectedProject && (
+          <div className={styles.backgroundBlue}>Select a project to load equipments.</div>
+        )}
+        {selectedProject && rows.length === 0 && (
+          <div className={styles.backgroundBlue}>
+            <div>No equipment is currently assigned to this project</div>
+            <div>Select different project from the above section</div>
+            <div> OR </div>
+            <div>
+              <button className={styles.assignmentBtn} onClick={goToPurchaseEquipment}>
+                {' '}
+                Go To Equipment Assignment{' '}
+              </button>
+            </div>
+          </div>
+        )}
         {/* Table */}
-        <Table bordered responsive>
-          <thead className={`${darkMode ? styles.tableDark : 'table-light'} align-middle`}>
-            <tr>
-              <th>Name</th>
-              <th>
-                Working
-                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-working"></i>
-                <UncontrolledTooltip placement="top" target="tooltip-working">
-                  Total number of units operational today
-                </UncontrolledTooltip>
-              </th>
-              <th>
-                Available
-                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-available"></i>
-                <UncontrolledTooltip placement="top" target="tooltip-available">
-                  Number of units currently not in use
-                </UncontrolledTooltip>
-              </th>
-              <th>
-                Using
-                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-using"></i>
-                <UncontrolledTooltip placement="top" target="tooltip-using">
-                  Quantity being checked in/out
-                </UncontrolledTooltip>
-              </th>
-              <th>
-                Tool / Equipment #
-                <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-toolnum"></i>
-                <UncontrolledTooltip placement="top" target="tooltip-toolnum">
-                  Select the specific tool identifier
-                </UncontrolledTooltip>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {!selectedProject && (
-              <tr className={darkMode ? `select-project-row dark-mode ${styles.darkMode}` : ''}>
-                <td colSpan={5} className={`text-center py-3 ${darkMode ? 'text-light' : ''}`}>
-                  Select a project to load equipments.
-                </td>
-              </tr>
-            )}
-
-            {selectedProject && rows.length === 0 && (
-              <tr className={`${darkMode ? styles.darkMode : ''}`}>
-                <td colSpan={5} className="text-center py-3">
-                  No equipments found for this project.
-                </td>
+        {selectedProject && rows.length > 0 && (
+          <Table bordered responsive>
+            <thead className={`${darkMode ? styles.tableDark : 'table-light'} align-middle`}>
+              <tr>
+                <th>Name</th>
+                <th>
+                  Working
+                  <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-working"></i>
+                  <UncontrolledTooltip placement="top" target="tooltip-working">
+                    Total number of units operational today
+                  </UncontrolledTooltip>
+                </th>
+                <th>
+                  Available
+                  <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-available"></i>
+                  <UncontrolledTooltip placement="top" target="tooltip-available">
+                    Number of units currently not in use
+                  </UncontrolledTooltip>
+                </th>
+                <th>
+                  Using
+                  <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-using"></i>
+                  <UncontrolledTooltip placement="top" target="tooltip-using">
+                    Quantity being checked in/out
+                  </UncontrolledTooltip>
+                </th>
+                <th>
+                  Tool / Equipment #
+                  <i className={`fa fa-info-circle ${styles.infoIcon}`} id="tooltip-toolnum"></i>
+                  <UncontrolledTooltip placement="top" target="tooltip-toolnum">
+                    Select the specific tool identifier
+                  </UncontrolledTooltip>
+                </th>
               </tr>
-            )}
-
-            {selectedProject &&
-              rows.length > 0 &&
-              rows.map((r, idx) => {
+            </thead>
+            <tbody>
+              {rows.map((r, idx) => {
                 const validList = logType === 'check-in' ? r.inUseNumbers : r.availableNumbers;
                 const limit = logType === 'check-in' ? r.usingQty : r.availableQty;
 
@@ -524,8 +527,9 @@ function EDailyActivityLog(props) {
                   </tr>
                 );
               })}
-          </tbody>
-        </Table>
+            </tbody>
+          </Table>
+        )}
 
         <div className={styles.actionContainer}>
           <Button color="secondary" onClick={handleCancel} disabled={isSubmitting}>

src/components/BMDashboard/Equipment/DailyActivityLog/EDailyActivityLog.module.css

@@ -48,3 +48,21 @@
   line-height: 1.4;
   font-size: 0.85rem;
 }
+
+.backgroundBlue {
+  background-color: #c9d6c6;
+  line-height: 2;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.75rem;
+  border-radius: 0.25rem;
+}
+
+.assignmentBtn {
+  padding: 0.35rem;
+  border-radius: 0.25rem;
+  background-color: cadetblue;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #e2e8f0;
+}