Ajay added filters and navigation in Tools page

public/index.css

@@ -192,24 +192,6 @@ body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
   color: #ffffff !important;
 }
 
-body.dark-mode .modal-content,
-body.bm-dashboard-dark .modal-content {
-  background-color: #2e5061;
-  color: #ffffff !important;
-}
-
-body.dark-mode .modal-header,
-body.bm-dashboard-dark .modal-header {
-  background-color: #3a506b;
-  border-color: #4a6072;
-  color: #ffffff !important;
-}
-
-body.dark-mode .modal-title,
-body.bm-dashboard-dark .modal-title {
-  color: #ffffff !important;
-}
-
 body.dark-mode .modal-body,
 body.bm-dashboard-dark .modal-body {
   color: #ffffff !important;
@@ -366,4 +348,97 @@ body.bm-dashboard-dark .page-item.active .page-link {
   .tab-content {
   background-color: transparent;
   border: none;
-}
+}
+
+/* Update these sections in your index.css */
+
+/* Explicit targeting for all input types and selects */
+body.dark-mode .form-control,
+body.bm-dashboard-dark .form-control,
+body.dark-mode select,
+body.bm-dashboard-dark select,
+body.dark-mode input[type="text"] {
+    background-color: #1e293b !important; /* Darker navy for input fields */
+    color: #ffffff !important;
+    border: 1px solid #334155 !important;
+}
+
+/* Fix for the Project and Tool dropdown arrows and internal padding */
+body.dark-mode select.form-control,
+body.bm-dashboard-dark select.form-control {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 0.75rem center !important;
+    background-size: 16px 12px !important;
+}
+
+/* Ensure placeholder text is visible but muted */
+body.dark-mode .form-control::placeholder {
+    color: #94a3b8 !important;
+}
+
+/* Styling for the options inside the dropdowns */
+body.dark-mode option,
+body.bm-dashboard-dark option {
+    background-color: #1e293b !important;
+    color: #ffffff !important;
+}
+
+/* GLOBAL OVERRIDE: This will fix all modals in the project at once */
+body.dark-mode .modal-content,
+body.bm-dashboard-dark .modal-content {
+    background-color: #1b2a41 !important;
+    border: 1px solid #2e3d55 !important;
+    color: #ffffff !important;
+}
+
+body.dark-mode .modal-header,
+body.dark-mode .modal-body,
+body.dark-mode .modal-footer,
+body.bm-dashboard-dark .modal-header,
+body.bm-dashboard-dark .modal-body,
+body.bm-dashboard-dark .modal-footer {
+    background-color: #1b2a41 !important;
+    color: #ffffff !important;
+    border-color: #2e3d55 !important;
+}
+
+
+/* Force Project and Tool dropdowns to stay dark */
+body.dark-mode .form-control,
+body.dark-mode select,
+body.dark-mode input {
+    background-color: #1e293b !important;
+    color: #ffffff !important;
+    border: 1px solid #334155 !important;
+}
+
+/* Fixes the white dropdown arrow issues */
+body.dark-mode select.form-control {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
+}
+
+/* index.css */
+
+/* Applied to all modals globally to ensure differentiation */
+body.dark-mode .modal-header,
+body.bm-dashboard-dark .modal-header {
+    background-color: #24344d !important; /* Slightly lighter than the body #1b2a41 */
+    border-bottom: 1px solid #334155 !important; /* Prominent separator line */
+    color: #ffffff !important;
+    padding: 1rem 1.5rem;
+}
+
+/* Ensure the title inside stands out */
+body.dark-mode .modal-title,
+body.bm-dashboard-dark .modal-title {
+    font-weight: 600;
+    letter-spacing: 0.5px;
+}
+body.dark-mode .modal-content .table thead th {
+    background-color: #2d3d5a !important; /* Distinct table header color */
+    color: #ffffff !important;
+    border-bottom: 2px solid #334155 !important;
+    font-size: 0.85rem;
+    letter-spacing: 1px;
+}

src/components/BMDashboard/ItemList/ItemListView.module.css

@@ -111,11 +111,12 @@ table thead th, table td {
   color: #e8edf4;
 }
 
-.darkMode .selectInput input,
-.darkMode .selectInput select {
-  background-color: #2a3f5f;
-  color: #e8edf4;
-  border: 1px solid #3f5269;
+
+/* RESET selects per theme — REQUIRED */
+.lightTheme .selectInput select {
+  background-color: #ffffff;
+  color: #111827;
+  border-color: #d1d5db;
 }
 
 .darkMode .selectInput input::placeholder {
@@ -365,3 +366,88 @@ table thead th, table td {
 .lightDatePickerPopper .react-datepicker__triangle {
   display: none;
 }
+
+.filterSelect {
+  height: 40px;
+  padding: 0 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  border: 1px solid transparent;
+  appearance: none;
+}
+
+.darkTheme .filterSelect {
+  background-color: #1e293b;
+  color: #e5e7eb;
+  border-color: #334155;
+}
+.darkTheme .filterSelect option {
+  background-color: #1e293b;
+  color: #e5e7eb;
+}
+
+.lightTheme .filterSelect option {
+  background-color: #ffffff;
+  color: #111827;
+}
+.lightTheme .filterSelect:focus {
+  outline: none;
+  border-color: #2563eb;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
+}
+
+.darkTheme .filterSelect:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
+}
+
+.lightTheme .selectInput select option {
+  background-color: #ffffff;
+  color: #111827;
+}
+
+.darkTheme .selectInput select option {
+  background-color: #1e293b;
+  color: #e5e7eb;
+}
+
+
+/* Dark theme selects */
+.itemsListContainer.darkTheme select {
+  background-color: #1e293b;
+  color: #e5e7eb;
+  border-color: #334155;
+}
+
+/* Light theme selects */
+.itemsListContainer.lightTheme select {
+  background-color: #ffffff;
+  color: #111827;
+  border-color: #d1d5db;
+}
+/* ===========================
+   SELECT FOCUS (AUTHORITATIVE)
+   =========================== */
+
+/* Base select reset */
+.selectInput select {
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* LIGHT MODE focus */
+.itemsListContainer.lightTheme .selectInput select:focus {
+  border-color: #2563eb !important; /* blue-600 */
+  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35) !important;
+  background-color: #ffffff !important;
+  color: #111827 !important;
+}
+
+/* DARK MODE focus */
+.itemsListContainer.darkTheme .selectInput select:focus {
+  border-color: #2563eb;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
+  background-color: #1e293b !important;
+  color: #e5e7eb !important;
+}

src/components/BMDashboard/ItemList/SelectForm.jsx

@@ -5,47 +5,71 @@ export default function SelectForm({
   items,
   setSelectedProject,
   setSelectedItem,
-  setSelectedCondition,
-  setSelectedToolStatus,
+  selectedProject, // optional (controlled)
+  selectedItem, // optional (controlled)
+  darkStyle,
 }) {
   let projectsSet = [];
   if (items.length) {
     projectsSet = [...new Set(items.map(el => el.project?.name))];
   }
 
   const handleChange = event => {
-    setSelectedItem('all');
-    setSelectedCondition('all');
-    setSelectedToolStatus('all');
-    setSelectedProject(event.target.value);
+    const newProject = event.target.value;
+
+    const toolsForNewProject =
+      newProject === 'all'
+        ? [...new Set(items.map(m => m.itemType?.name).filter(Boolean))]
+        : [
+            ...new Set(
+              items
+                .filter(mat => mat.project?.name === newProject && mat.itemType?.name)
+                .map(m => m.itemType.name),
+            ),
+          ];
+
+    if (typeof setSelectedItem === 'function') {
+      // If controlled, only reset tool if invalid under new project
+      if (typeof selectedItem !== 'undefined') {
+        if (selectedItem !== 'all' && !toolsForNewProject.includes(selectedItem)) {
+          setSelectedItem('all');
+        }
+      } else {
+        // Backwards compatibility (uncontrolled)
+        setSelectedItem('all');
+      }
+    }
+
+    setSelectedProject(newProject);
   };
 
+  const isControlled = typeof selectedProject !== 'undefined';
+
   return (
     <Form>
-      <FormGroup className={`${styles.selectInput}`}>
+      <FormGroup className={styles.selectInput}>
         <Label htmlFor="select-project">Project:</Label>
-        <Input
+        <select
           id="select-project"
           name="select-project"
-          type="select"
+          className={styles.filterSelect}
           onChange={handleChange}
           disabled={!items.length}
+          value={isControlled ? selectedProject : undefined}
         >
           {items.length ? (
             <>
               <option value="all">All</option>
-              {projectsSet.map(name => {
-                return (
-                  <option key={name} value={name}>
-                    {name}
-                  </option>
-                );
-              })}
+              {projectsSet.map(name => (
+                <option key={name} value={name}>
+                  {name}
+                </option>
+              ))}
             </>
           ) : (
             <option>No data</option>
           )}
-        </Input>
+        </select>
       </FormGroup>
     </Form>
   );

src/components/BMDashboard/ItemList/SelectItem.jsx

@@ -11,6 +11,7 @@ export default function SelectItem({
   selectedCondition,
   setSelectedCondition,
   label,
+  isDarkMode,
 }) {
   let itemSet = [];
   if (items?.length) {
@@ -43,15 +44,19 @@ export default function SelectItem({
     }
   }
 
+  const darkStyle = isDarkMode
+    ? { backgroundColor: '#1e293b', color: '#e5e7eb', borderColor: '#334155' }
+    : undefined;
+
   return (
     <Form>
       <FormGroup className={styles.selectInput}>
-        <Label htmlFor="select-material">{label ? `${label}:` : 'Material:'}</Label>
+        <Label htmlFor="select-item">{label}:</Label>
 
-        <Input
+        <select
           id="select-item"
           name="select-item"
-          type="select"
+          className={styles.filterSelect}
           value={
             label === 'Condition'
               ? selectedCondition
@@ -61,13 +66,9 @@ export default function SelectItem({
           }
           onChange={e => {
             const val = e.target.value;
-            if (label === 'Tool Status') {
-              setSelectedToolStatus(val);
-            } else if (label === 'Condition') {
-              setSelectedCondition(val);
-            } else {
-              setSelectedItem(val);
-            }
+            if (label === 'Tool Status') setSelectedToolStatus(val);
+            else if (label === 'Condition') setSelectedCondition(val);
+            else setSelectedItem(val);
           }}
           disabled={!itemSet.length}
         >
@@ -85,7 +86,7 @@ export default function SelectItem({
           ) : (
             <option key="no-data">No data</option>
           )}
-        </Input>
+        </select>
       </FormGroup>
     </Form>
   );