Add provider filter to superadmin

src/pages/superadmin/index.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
 import styled from 'styled-components';
-import { BountyMetrics, defaultSuperAdminBountyStatus } from 'store/main';
+import { BountyMetrics, defaultSuperAdminBountyStatus, Person } from 'store/main';
 import { useStores } from 'store';
 import moment from 'moment';
 import { useInViewPort } from 'hooks';
@@ -47,6 +47,10 @@ export const SuperAdmin = () => {
   const [activeTabs, setActiveTabs] = useState<number[]>([]);
   const [totalBounties, setTotalBounties] = useState(0);
   const [search, setSearch] = useState(false);
+  const [providers, setProviders] = useState<any[]>([]);
+  const [providersCurrentPage, setProvidersCurrentPage] = useState(1);
+  const [providersCheckboxSelected, setProvidersCheckboxSelected] = useState<Person[]>([]);
+  const [selectedProviders, setSelectedProviders] = useState<string>('');
 
   /**
    * Todo use the same date range,
@@ -85,7 +89,8 @@ export const SuperAdmin = () => {
             page: currentPage,
             resetPage: true,
             ...checkboxIdToSelectedMap,
-            direction: sortOrder
+            direction: sortOrder,
+            provider: selectedProviders
           }
         );
         setBounties(bounties);
@@ -97,17 +102,71 @@ export const SuperAdmin = () => {
         setLoading(false);
       }
     }
-  }, [main, startDate, endDate, checkboxIdToSelectedMap, sortOrder, currentPage]);
+  }, [
+    main,
+    startDate,
+    endDate,
+    checkboxIdToSelectedMap,
+    sortOrder,
+    currentPage,
+    selectedProviders
+  ]);
+
+  const getProviders = useCallback(
+    async (curPage?: number) => {
+      try {
+        const providersData = await main.getProviderList(
+          {
+            start_date: String(startDate),
+            end_date: String(endDate)
+          },
+          {
+            page: curPage ? curPage : 1,
+            ...checkboxIdToSelectedMap,
+            direction: sortOrder
+          }
+        );
+
+        if (curPage && curPage > 1) {
+          setProvidersCurrentPage(curPage);
+          setProviders((prev: Person[]) => {
+            // Create a new array combining previous and new providers
+            const combinedProviders = [...prev, ...providersData];
+            // Filter out duplicates based on 'owner_pubkey'
+            const uniqueProviders = combinedProviders.reduce((acc: Person[], current: Person) => {
+              const x = acc.find((item: Person) => item.owner_pubkey === current.owner_pubkey);
+              if (!x) {
+                return acc.concat([current]);
+              } else {
+                return acc;
+              }
+            }, []);
+            return uniqueProviders;
+          });
+        } else {
+          setProviders(providersData);
+        }
+      } catch (error) {
+        // Handle errors if any
+        console.error('Error fetching providers:', error);
+      }
+    },
+    [main, startDate, endDate, checkboxIdToSelectedMap, sortOrder]
+  );
 
   useEffect(() => {
     getBounties();
     setSearch(false);
-  }, [search, currentPage, sortOrder]);
+  }, [search, currentPage, sortOrder, selectedProviders, startDate, endDate]);
 
   useEffect(() => {
     getBounties();
   }, []);
 
+  useEffect(() => {
+    getProviders();
+  }, [getProviders]);
+
   const onClickApply = () => {
     setSearch(true);
   };
@@ -123,6 +182,35 @@ export const SuperAdmin = () => {
     setCheckboxIdToSelectedMap(newCheckboxIdToSelectedMap);
   };
 
+  const handleProviderSelection = (provider: Person) => {
+    if (providersCheckboxSelected.some((p: Person) => p.owner_pubkey === provider.owner_pubkey)) {
+      setProvidersCheckboxSelected(
+        providersCheckboxSelected.filter((p: Person) => p.owner_pubkey !== provider.owner_pubkey)
+      );
+    } else {
+      setProvidersCheckboxSelected([...providersCheckboxSelected, provider]);
+    }
+  };
+
+  const handleClearButtonClick = () => {
+    setSelectedProviders('');
+    setProvidersCheckboxSelected([]);
+  };
+
+  const handleApplyButtonClick = () => {
+    const selectedProviders: string = providers
+      .filter((provider: Person) =>
+        providersCheckboxSelected.find(
+          (providersCheckboxSelected: Person) =>
+            providersCheckboxSelected.owner_pubkey === provider.owner_pubkey
+        )
+      )
+      .map((provider: Person) => provider.owner_pubkey)
+      .join(',');
+
+    setSelectedProviders(selectedProviders);
+  };
+
   const getMetrics = useCallback(async () => {
     if (startDate && endDate) {
       try {
@@ -149,19 +237,23 @@ export const SuperAdmin = () => {
           String(endDate),
           {
             ...checkboxIdToSelectedMap,
-            direction: sortOrder
+            direction: sortOrder,
+            provider: selectedProviders
           }
         );
         setTotalBounties(totalBounties);
       } else {
         const totalBounties = await main.getBountiesCountByRange(
           String(startDate),
-          String(endDate)
+          String(endDate),
+          {
+            provider: selectedProviders
+          }
         );
         setTotalBounties(totalBounties);
       }
     }
-  }, [main, startDate, endDate, checkboxIdToSelectedMap]);
+  }, [main, startDate, endDate, checkboxIdToSelectedMap, selectedProviders]);
 
   useEffect(() => {
     getTotalBounties();
@@ -215,6 +307,13 @@ export const SuperAdmin = () => {
               setCurrentPage={setCurrentPage}
               activeTabs={activeTabs}
               setActiveTabs={setActiveTabs}
+              providers={providers}
+              providersCheckboxSelected={providersCheckboxSelected}
+              handleProviderSelection={handleProviderSelection}
+              handleClearButtonClick={handleClearButtonClick}
+              handleApplyButtonClick={handleApplyButtonClick}
+              getProviders={getProviders}
+              providersCurrentPage={providersCurrentPage}
             />
           )}
         </Container>

src/pages/superadmin/tableComponent/TableStyle.tsx

@@ -239,7 +239,6 @@ export const DateFilterWrapper = styled.div<styledProps>`
   flex-direction: row;
   justify-content: center;
   align-items: center !important;
-  margin-left: 19px;
   user-select: none;
   .image {
     display: flex;
@@ -402,3 +401,115 @@ export const Paragraph = styled.div`
 export const PaginationImg = styled.img`
   cursor: pointer;
 `;
+
+export const ProviderContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+export const ProvidersListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1.875rem;
+  max-height: 16rem;
+  overflow-y: auto;
+`;
+
+export const ProviderContianer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+`;
+
+export const ProviderInfo = styled.div`
+  display: flex;
+  align-items: center;
+  opacity: 1;
+`;
+
+export const ProviderImg = styled.img`
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  margin-right: 0.63rem;
+  object-fit: cover;
+`;
+
+export const Providername = styled.p`
+  color: #3c3f41;
+  font-family: 'Barlow';
+  font-size: 0.8125rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1rem;
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px;
+`;
+
+export const Checkbox = styled.input.attrs({ type: 'checkbox' })`
+  width: 1rem;
+  height: 1rem;
+`;
+
+export const HorizontalGrayLine = styled.div`
+  width: 100%;
+  height: 2px;
+  background-color: #edecec;
+  content: '';
+  margin: auto;
+`;
+
+export const FooterContainer = styled.div`
+  display: flex;
+  padding: 1.125rem 1.875rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ClearButton = styled.button`
+  width: 112px;
+  padding: 8px 16px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+  border: 1px solid var(--Input-Outline-1, #d0d5d8);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
+  margin-right: 10px;
+`;
+
+export const ClearText = styled.p`
+  color: var(--Main-bottom-icons, #5f6368);
+  text-align: center;
+  font-family: 'Barlow', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 0px; /* 0% */
+  letter-spacing: 0.14px;
+  margin-top: 10px;
+`;
+
+export const ApplyButton = styled.button`
+  display: flex;
+  width: 112px;
+  height: 40px;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border: none;
+  outline: none;
+  border-radius: 6px;
+  background: var(--Primary-blue, #618aff);
+  box-shadow: 0px 2px 10px 0px rgba(97, 138, 255, 0.5);
+  color: white;
+`;