update active bg

src/Components/DataTable/NormalTable.jsx

@@ -40,7 +40,7 @@ const DataTable = ({
           <Thead backgroundColor="forestGreen.100">
             <Tr>
               {tableHeadRow.map((heading, index) => (
-                <Th
+                <Th 
                   textAlign={
                     tableHeadRow.length - 1 === index || centered
                       ? "center"
@@ -86,7 +86,7 @@ const DataTable = ({
               : data?.map((item, index) => (
                   <Tr bg={index % 2 === 0 ? "" : "forestGreen.50"} key={index}>
                     {tableHeadRow.map((heading, i) => (
-                      <Td
+                      <Td 
                         textAlign={
                           tableHeadRow?.length - 1 === i || centered
                             ? "center"

src/Pages/Admin/BankDetails/BankDetails.jsx

@@ -24,6 +24,7 @@ import CustomAlertDialog from "../../../Components/CustomAlertDialog";
 import ToastBox from "../../../Components/ToastBox";
 import { debounce } from "../../Master/Sponser/AddSponser";
 import { useGetBankQuery } from "../../../Services/bank.details.service";
+import NormalTable from '../../../Components/DataTable/NormalTable'
 
 const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
 
@@ -104,7 +105,7 @@ const BankDetails = () => {
   });
   
 
-  const extractedArray = filteredData?.map((item) => ({
+  const extractedArray = filteredData?.map((item,index) => ({
     id: item?.id,
     "Sr N/O": (
       <Text
@@ -145,7 +146,7 @@ const BankDetails = () => {
       </Box>
     ),
     Action: (
-      <Box display={"flex"} justifyContent={"space-between"} gap={2}>
+      <Box display={"flex"} justifyContent={"space-between"}>
         <Tooltip
           rounded={"sm"}
           fontSize={"xs"}
@@ -155,6 +156,7 @@ const BankDetails = () => {
           placement="top"
         >
           <Button
+            bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
             onClick={() => {
               navigate(`/bank-details/edit-bank-details/${item.id}`);
             }}
@@ -215,7 +217,7 @@ const BankDetails = () => {
         </HStack>
       </Box>
 
-      <DataTable
+      <NormalTable
         emptyMessage={`We don't have any Details`}
         tableHeadRow={tableHeadRow}
         data={extractedArray}

src/Pages/Master/InvestmentType/InvestmentType.jsx

@@ -144,7 +144,7 @@ const InvestmentType = () => {
     Status: (
       <Box isTruncated={true}>
         <Text as={"span"} fontWeight={"500"}>
-          <Badge
+          <Badge 
             fontWeight={"500"}
             textTransform={"none"}
             color={item.isActive ? "green" : "red"}

src/Pages/Master/Sponser/Sponsers.jsx

@@ -69,7 +69,7 @@ const Sponser = () => {
     "Action",
   ];
 
-  const extractedArray = filteredData?.map((item, idx) => ({
+  const extractedArray = filteredData?.map((item, index) => ({
     "Sr No": (
       <Text
       w={'24px'}
@@ -79,7 +79,7 @@ const Sponser = () => {
         className="d-flex align-items-center fw-bold web-text-small"
       >
         {/* {item.id} */}
-        {generateSerialNumber(idx,currentPage, pageSize )}
+        {generateSerialNumber(index,currentPage, pageSize )}
         
       </Text>),
     "Sponsor Name": (
@@ -95,15 +95,16 @@ const Sponser = () => {
     ),
 
     "Email Address": (
-      <Box w={"auto"} isTruncated={true}>
+      <Box isTruncated={true}>
         <Text as={"span"} color={"teal.900"} fontWeight={"500"}>
           {item.email}
         </Text>
       </Box>
     ),
     Status: (
-      <Box minW={24} isTruncated={true}>
+      <Box minW={24} isTruncated={true} >
         <Badge
+         bg={index % 2 === 0 ? "#6311cb14" : "#fff"}
           fontWeight={"500"}
           textTransform={"none"}
           color={item.isActive ? "green" : "red"}