src/components/FamilyAcc/FamilyTableNew.jsx

@@ -58,9 +58,9 @@ export default function FamilyTableNew() {
 
   // Array of tab names
   const tabs = [
-    { id: 1, name: "tasks" },
-    { id: 2, name: "waiting" },
-    { id: 3, name: "pending" },
+    { id: 1, name: "Tasks" },
+    { id: 2, name: "Waiting" },
+    { id: 3, name: "Pending" },
   ];
 
   // State for the currently selected tab
@@ -68,7 +68,7 @@ export default function FamilyTableNew() {
 
   // Function to handle tab changes
   const tabHandler = (value) => {
-    setTab(value);
+    setTab(value.toLowerCase());
   };
 
   // Object that maps tab names to their corresponding components
@@ -213,7 +213,7 @@ export default function FamilyTableNew() {
                       <li
                         onClick={() => tabHandler(name)}
                         className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                          tab === name
+                          tab.toLowerCase() === name.toLowerCase()
                             ? "text-purple border-r"
                             : "text-thin-light-gray"
                         }`}