Manoj - Add inventory navigation icons, cross-page links, and BM Dashboard dropdown under Other Links

src/components/BMDashboard/Equipment/List/EquipmentList.jsx

@@ -1,21 +1,43 @@
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  FaCubes,
+  FaShoppingCart,
+  FaRecycle,
+  FaWrench,
+  FaTools,
+  FaRulerCombined,
+} from 'react-icons/fa';
 import useTheme from '../../../../hooks/useTheme';
 import EquipmentsTable from './EquipmentsTable';
 import EquipmentsInputs from './EquipmentsInputs';
+import InventoryNavBar from '../../InventoryTypesList/InventoryNavBar';
 import styles from './Equipments.module.css';
 
+const siblingCategories = [
+  { label: 'Materials', route: '/bmdashboard/materials', icon: <FaCubes /> },
+  { label: 'Consumables', route: '/bmdashboard/consumables', icon: <FaShoppingCart /> },
+  { label: 'Reusables', route: '/bmdashboard/reusables', icon: <FaRecycle /> },
+  { label: 'Tools', route: '/bmdashboard/tools', icon: <FaWrench /> },
+  { label: 'Units', route: '/bmdashboard/units', icon: <FaRulerCombined /> },
+];
+
 function EquipmentList() {
   const [equipment, setEquipment] = useState({ label: 'All Equipments', value: '0' });
   const [project, setProject] = useState({ label: 'All Projects', value: '0' });
-
-  // Use the custom hook to handle dark mode
+  const darkMode = useSelector(state => state.theme.darkMode);
   useTheme();
 
   return (
     <div className={`${styles.PageViewContainer}`}>
       <div className={`${styles.Page}`}>
         <div className={`${styles.Box}`}>
-          <div className={`${styles.BuildingTitle}`}>EQUIPMENTS</div>
+          <div className={`${styles.BuildingTitle} ${darkMode ? styles.darkTitle : ''}`}>
+            <FaTools style={{ marginRight: '10px', verticalAlign: 'middle' }} />
+            EQUIPMENT
+          </div>
+          {/* Inventory Navigation Bar */}
+          <InventoryNavBar categories={siblingCategories} styles={styles} />
           <EquipmentsInputs
             equipment={equipment}
             setEquipment={setEquipment}

src/components/BMDashboard/Equipment/List/Equipments.module.css

@@ -106,7 +106,7 @@
 
 /* Link Styling */
 .linkButton {
-  color: #0d6efd; 
+  color: #0d6efd;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.2s ease;
@@ -213,7 +213,6 @@ body.bm-dashboard-dark table {
   border-color: #404040 !important;
 }
 
-/* Table headers - FORCE background */
 body.dark-mode table thead,
 body.dark-mode table thead tr,
 body.dark-mode table thead th,
@@ -225,7 +224,6 @@ body.bm-dashboard-dark table thead th {
   border-color: #404040 !important;
 }
 
-/* Table body - FORCE background */
 body.dark-mode table tbody,
 body.dark-mode table tbody tr,
 body.dark-mode table tbody td,
@@ -237,7 +235,6 @@ body.bm-dashboard-dark table tbody td {
   border-color: #404040 !important;
 }
 
-/* Remove any white backgrounds on hover */
 body.dark-mode table tbody tr:hover,
 body.dark-mode table tbody tr:hover td,
 body.bm-dashboard-dark table tbody tr:hover,
@@ -246,7 +243,6 @@ body.bm-dashboard-dark table tbody tr:hover td {
   color: #fff !important;
 }
 
-/* Reactstrap table classes */
 body.dark-mode .table,
 body.dark-mode .table-responsive,
 body.bm-dashboard-dark .table,
@@ -265,13 +261,11 @@ body.bm-dashboard-dark .table-responsive {
   color: #fff !important;
 }
 
-/* Force all table descendants */
 body.dark-mode .table *,
 body.bm-dashboard-dark .table * {
   border-color: #404040 !important;
 }
 
-/* Buttons inside tables */
 body.dark-mode table button,
 body.dark-mode table .btn,
 body.bm-dashboard-dark table button,
@@ -290,7 +284,6 @@ body.bm-dashboard-dark table .btn:hover {
   border-color: #4dabf7 !important;
 }
 
-/* Specific button styles */
 body.dark-mode .btn-outline-primary,
 body.bm-dashboard-dark .btn-outline-primary {
   color: #4dabf7 !important;
@@ -309,7 +302,6 @@ body.bm-dashboard-dark .btn-outline-primary:active {
   border-color: #4dabf7 !important;
 }
 
-/* Icon buttons */
 body.dark-mode table button[type="button"],
 body.bm-dashboard-dark table button[type="button"] {
   color: #4dabf7 !important;
@@ -322,7 +314,6 @@ body.bm-dashboard-dark table button[type="button"]:hover {
   color: #74c0fc !important;
 }
 
-/* Links in tables */
 body.dark-mode table a,
 body.bm-dashboard-dark table a {
   color: #4dabf7 !important;
@@ -334,7 +325,6 @@ body.bm-dashboard-dark table a:hover {
   color: #74c0fc !important;
 }
 
-/* React-Select in dark mode */
 body.dark-mode .css-b62m3t-container,
 body.dark-mode .css-b62m3t-container *,
 body.bm-dashboard-dark .css-b62m3t-container,
@@ -385,7 +375,6 @@ body.bm-dashboard-dark .css-10wo9uf-option:hover {
   background-color: #3d3d3d !important;
 }
 
-/* Modal styling */
 body.dark-mode .modal-content,
 body.dark-mode .modal-header,
 body.dark-mode .modal-body,
@@ -399,15 +388,13 @@ body.bm-dashboard-dark .modal-footer {
   border-color: #404040 !important;
 }
 
-/* Form labels */
 body.dark-mode label,
 body.dark-mode .form-label,
 body.bm-dashboard-dark label,
 body.bm-dashboard-dark .form-label {
   color: #fff !important;
 }
 
-/* Tooltip */
 body.dark-mode .tooltip,
 body.dark-mode .tooltip-inner,
 body.bm-dashboard-dark .tooltip,
@@ -416,15 +403,13 @@ body.bm-dashboard-dark .tooltip-inner {
   color: #fff !important;
 }
 
-/* Container backgrounds */
 body.dark-mode .container,
 body.dark-mode .container-fluid,
 body.bm-dashboard-dark .container,
 body.bm-dashboard-dark .container-fluid {
   background-color: transparent !important;
 }
 
-/* Row backgrounds */
 body.dark-mode .row,
 body.dark-mode .col,
 body.dark-mode [class*="col-"],
@@ -434,45 +419,176 @@ body.bm-dashboard-dark [class*="col-"] {
   background-color: transparent !important;
 }
 
-/* Dark Mode Additional Enhancements */
 body.dark-mode .Box,
 body.bm-dashboard-dark .Box {
   background: #1a1a1a !important;
   box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
 }
 
 body.dark-mode .BuildingTitle,
-body.bm-dashboard-dark .BuildingTitle {
+body.dark-mode .BuildingTitle svg,
+body.bm-dashboard-dark .BuildingTitle,
+body.bm-dashboard-dark .BuildingTitle svg {
   color: #fff !important;
   border-bottom-color: #4dabf7;
 }
 
-body.dark-mode .PageViewContainer,
-body.bm-dashboard-dark .PageViewContainer {
-  background-color: #0a0a0a;
-}
-
 /* Responsive Design */
-@media (width <= 768px) {
+@media (width <=768px) {
   .PageViewContainer {
     padding: 1rem 0.5rem;
   }
-  
+
   .Box {
     padding: 1rem;
   }
-  
+
   .BuildingTitle {
     font-size: 1.5rem;
   }
-  
+
   .tableWrapper {
     border-radius: 6px;
+    position: relative;
   }
-
+
+  .tableWrapper::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 24px;
+    background: linear-gradient(to right, transparent, rgb(0 0 0 / 8%));
+    pointer-events: none;
+  }
+
   .tableWrapper tbody td,
   .BuildingTableHeaderLine th {
     padding: 0.75rem 0.5rem;
     font-size: 0.85rem;
   }
+
+  .inventoryNav {
+    gap: 10px;
+  }
+
+  .returnBtn {
+    flex: 1 1 100%;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .categoryIcons {
+    width: 100%;
+    justify-content: flex-start;
+  }
+}
+
+@media (width <= 480px) {
+  .categoryIconLink {
+    padding: 5px 8px;
+    font-size: 0.7rem;
+  }
+
+  .iconWrapper {
+    font-size: 1rem;
+  }
+}
+
+/* ── Inventory Navigation Bar ── */
+.inventoryNav {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+
+.returnBtn {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 16px;
+  background-color: #0d5675;
+  color: #fff;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+.returnBtn:hover {
+  background-color: #1a73c0;
+  color: #fff;
+}
+
+.categoryIcons {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.categoryIconLink {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 6px 10px;
+  border: 1px solid #4dabf7;
+  border-radius: 8px;
+  color: #0d5675;
+  text-decoration: none;
+  font-size: 0.75rem;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.categoryIconLink:hover {
+  background-color: #0d5675;
+  color: #fff;
+  border-color: #0d5675;
+}
+
+.iconWrapper {
+  font-size: 1.2rem;
+}
+
+.iconLabel {
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+body.dark-mode .returnBtn,
+body.bm-dashboard-dark .returnBtn {
+  background-color: #1a3a4d;
+  color: #fff;
+}
+
+body.dark-mode .returnBtn:hover,
+body.bm-dashboard-dark .returnBtn:hover {
+  background-color: #1a73c0;
+  color: #fff;
+}
+
+body.dark-mode .categoryIconLink,
+body.bm-dashboard-dark .categoryIconLink {
+  border-color: #4dabf7;
+  color: #4dabf7;
+}
+
+body.dark-mode .categoryIconLink:hover,
+body.bm-dashboard-dark .categoryIconLink:hover {
+  background-color: #4dabf7;
+  color: #0f172a;
+  border-color: #4dabf7;
+}
+
+body.dark-mode .PageViewContainer,
+body.bm-dashboard-dark .PageViewContainer {
+  background-color: #0a0a0a;
+}
+
+.darkTitle {
+  color: #fff !important;
 }