Venkataramanan 🔥 all sonarqube reliability issues

src/components/BMDashboard/AddConsumable/AddConsumable.jsx

@@ -288,7 +288,7 @@ function AddConsumable() {
                 )}
                 <FormGroup row className="d-flex justify-content-right">
                   <Button
-                    onClick={event => submitHandler(event)}
+                    onClick={submitHandler}
                     className={`${styles.consumableButtonBg}`}
                     disabled={disableSubmit}
                   >

src/components/JobCCDashboard/JobCCDashboard.jsx

@@ -33,8 +33,10 @@ function JobCCDashboard() {
   }, []);
 
   useEffect(() => {
-    // Extract unique categories whenever jobs data changes
-    const uniqueCategories = [...new Set(jobs.map(job => job.category))].sort();
+    const uniqueCategories = [
+      ...new Set(jobs.map(job => job.category).filter(Boolean)),
+    ].sort((a, b) => a.localeCompare(b));
+
     setCategories(uniqueCategories);
   }, [jobs]);
 

src/components/LBDashboard/Home/data.jsx

@@ -77,7 +77,7 @@ export const fetchVillages = async () => {
 
     const allVillages = [...new Set([...FIXED_VILLAGES, ...apiVillages])];
 
-    return allVillages.sort();
+    return allVillages.sort((a, b) => String(a).localeCompare(String(b)));
   } catch (error) {
     // console.error('Error fetching villages:', error);
 

src/components/LBDashboard/Messaging/LBMessaging.module.css

@@ -4,12 +4,13 @@
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  margin: 20px 40px 30px 40px;
+  margin: 20px 40px 30px;
   padding: 0;
   width: auto;
   min-height: 560px;
   height: auto;
 }
+
 .mainContainer {
   display: flex;
   flex-direction: column;
@@ -43,7 +44,7 @@
   border: 1px solid #ccc;
   border-radius: 8px;
   width: 85%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
   height: max-content;
 }
 
@@ -118,7 +119,7 @@
 
 .lbMessagingSearchIconsMobile {
   height: 33px;
-  aspect-ratio: 1/1;
+  aspect-ratio: 1 / 1;
 }
 
 .lbMsgIconMobile {
@@ -178,7 +179,7 @@
 .lbMessagingMessageWindowBody {
   flex: 1;
   height: 75.5%;
-  padding: 10px 0 0 0;
+  padding: 10px 0 0;
   min-height: 450px;
 }
 
@@ -198,7 +199,6 @@
 .lbMessagingTextarea {
   height: 40px;
   width: 80%;
-  padding-left: 1%;
   border: 1px solid black;
   border-radius: 12px;
   outline: none;
@@ -260,20 +260,20 @@
 .lbSearchInput {
   width: 75%;
   background-color: #8b8888;
-  color: #000000;
+  color: #000;
   outline: none;
-  border: 1px solid #000000;
+  border: 1px solid #000;
   border-radius: 5px;
   padding: 1px 0 1px 5px;
 }
 
 .lbSearchInput::placeholder {
-  color: #000000;
+  color: #000;
 }
 
 .lbMessagingSearchIcons {
   height: 33px;
-  aspect-ratio: 1/1;
+  aspect-ratio: 1 / 1;
 }
 
 .lbMessagingHeaderIcons {
@@ -283,11 +283,11 @@
 .lgMessagingNotificationBell {
   font-size: 30px;
   cursor: pointer;
-  margin: 0px 15px;
+  margin: 0 15px;
 }
 
 .lbContactMsgs {
-  color: #000000;
+  color: #000;
   margin: 0;
 }
 
@@ -304,7 +304,7 @@
   background-color: white;
   border: 1px solid #ddd;
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
   display: none;
   flex-direction: column;
   justify-content: center;
@@ -394,7 +394,7 @@
 
 .lbMessagingMobileSearchIcons {
   height: 35px;
-  aspect-ratio: 1/1;
+  aspect-ratio: 1 / 1;
   margin-left: 10px;
 }
 
@@ -413,7 +413,7 @@
 .lbMobileContactsPanel {
   background-color: #fff;
   border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
   margin-top: 10px;
   padding: 10px;
 }
@@ -436,4 +436,4 @@
 .lbMessagingContactName {
   font-size: 15px;
   font-weight: 500;
-}
+}

src/components/PermissionsManagement/PermissionListItem.jsx

@@ -206,9 +206,7 @@ function PermissionListItem(props) {
               title="Click for more information"
               aria-hidden="true"
               className="fa fa-info-circle"
-              onClick={() => {
-                handleModalOpen(description);
-              }}
+              onClick={handleModalOpen}
               style={{ color: darkMode ? 'white' : 'black' }}
             />
           </div>

src/components/Projects/WBS/WBSDetail/ControllerRow/ControllerRow.jsx

@@ -141,7 +141,7 @@ function ControllerRow(props) {
             color="secondary"
             size="sm"
             className={styles["controlBtn"]}
-            onClick={() => onCopy(props.taskId)}
+            onClick={onCopy}
             style={darkMode ? boxStyleDark : boxStyle}
           >
             {isCopied ? 'Copied' : 'Copy'}

src/components/Reports/TasksTable/TasksTable.jsx

@@ -47,14 +47,20 @@ export function TasksTable({ darkMode, tasks, projectId }) {
   };
 
   const getOptions = (filterName) => {
-    const options = [...Array.from(new Set(tasks.map(item => item[filterName]))).sort()];
+    const options = Array.from(
+      new Set(tasks.map(item => item[filterName]).filter(Boolean)),
+    ).sort((a, b) => String(a).localeCompare(String(b)));
+
     return options.map(option => ({ value: option, label: option }));
   };
 
   const getUserOptions = () => {
-    let users = [];
-    tasks.forEach(task => task.resources?.forEach(resource => users.push(resource.name)));
-    users = Array.from(new Set(users)).sort();
+    const users = Array.from(
+      new Set(
+        tasks.flatMap(task => task.resources?.map(r => r.name) ?? []).filter(Boolean),
+      ),
+    ).sort((a, b) => a.localeCompare(b));
+
     return users.map(user => ({ value: user, label: user }));
   };
 

src/components/Timer/Timer.module.css

@@ -5,8 +5,8 @@
   gap: 0.5rem;
   z-index: 30;
   user-select: none;
-  -moz-user-select: none;
 }
+
 .btnDiv {
   border: none;
   padding: 0;
@@ -21,21 +21,21 @@
   font-size: 1.2rem;
   font-weight: bold;
   width: fit-content;
-  background-color: rgba(82, 92, 102, 1);
-  color: rgb(238, 10, 10);
+  background-color: rgb(82 92 102 / 100%);
+  color: rgb(238 10 10);
   border-radius: 0 0 0.5rem 0.5rem;
-  padding: 0.25rem 0.25rem;
+  padding: 0.25rem;
 }
 
 .preview {
   font-size: 1.2rem;
   font-weight: bold;
   width: 100px;
-  background-color: rgba(82, 92, 102, 1);
+  background-color: rgb(82 92 102 / 100%);
   color: white;
   border-radius: 0 0 0.5rem 0.5rem;
-  border-color: rgba(82, 92, 102, 1);
-  padding: 0.25rem 0.25rem;
+  border-color: rgb(82 92 102 / 100%);
+  padding: 0.25rem;
 }
 
 .btns {
@@ -66,39 +66,18 @@
   color: white;
 }
 
-.timer .btnNormal {
-  color: rgba(237, 104, 138, 1);
-  cursor: pointer;
-}
-
-.timer .btnDisabled {
-  color: gray;
-  cursor: not-allowed;
-}
-
 .hideTimer {
   display: none;
 }
 
-.btnNormal:hover {
-  color: #fda4af;
-  background-color: #881337;
-}
-
+/* Base buttons (must come before hover to satisfy no-descending-specificity) */
 .btn {
   cursor: pointer;
   color: white;
   background-color: #343a40;
   border-color: #343a40;
   margin: 0;
-  border: none;
-}
-
-.timerContainer .disabled {
-  cursor: not-allowed;
-  color: gray;
-  background: transparent;
-  border: none;
+  outline: none;
 }
 
 .btn:hover {
@@ -109,16 +88,48 @@
   cursor: not-allowed;
   color: #837175;
   border: none;
+  outline: none;
 }
 
 .transitionColor {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 300ms;
   border: none;
+  outline: none;
+}
+
+/* Specific versions inside timer */
+.timer .btnNormal {
+  color: rgb(237 104 138 / 100%);
+  cursor: pointer;
+}
+
+.timer .btnDisabled {
+  color: gray;
+  cursor: not-allowed;
+}
+
+.btnNormal:hover {
+  color: #fda4af;
+  background-color: #881337;
+}
+
+.timerContainer .disabled {
+  cursor: not-allowed;
+  color: gray;
+  background: transparent;
+  border: none;
 }
 
-@media (max-width: 460px) {
+/* Use "context/range" media queries (what stylelint is asking for) */
+@media (width <= 530px) {
+  .btnDiv {
+    display: none;
+  }
+}
+
+@media (width <= 460px) {
   .btns {
     display: grid;
     grid-template-columns: auto auto auto auto;
@@ -129,7 +140,7 @@
   }
 }
 
-@media (max-width: 410px) {
+@media (width <= 410px) {
   .btns {
     display: grid;
     grid-template-columns: auto auto auto;
@@ -140,29 +151,17 @@
   }
 }
 
-@media (max-width: 360px) {
+@media (width <= 360px) {
   .btns {
     display: grid;
     grid-template-columns: auto auto;
   }
 
   .btns button {
-    padding: 1px 1px;
+    padding: 1px;
   }
 }
 
-@media (max-width: 530px) {
-  .btnDiv {
-    display: none;
-  }
-}
-.btn,
-.btnDisabled,
-.transitionColor {
-  border: none;
-  outline: none;
-}
-
 .iconWrapper {
   display: flex;
   align-items: center;
@@ -200,4 +199,4 @@
     -webkit-print-color-adjust: exact !important;
     print-color-adjust: exact !important;
   }
-}
+}