From b74359487dc6e8dad569126cab9e29cf0db3a334 Mon Sep 17 00:00:00 2001
From: zuies <zurabichkhikvadze66@gmail.com>
Date: Thu, 14 Sep 2023 18:15:00 +0300
Subject: [PATCH] add property for fix filter issue on boxes

---
 .../pages/statistics/ActiveMembersComposition.tsx         | 1 +
 .../pages/statistics/DisengagedMembersComposition.tsx     | 1 +
 src/components/pages/statistics/Onboarding.tsx            | 1 +
 src/components/pages/statistics/StatisticalData.tsx       | 8 +++++++-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/statistics/ActiveMembersComposition.tsx b/src/components/pages/statistics/ActiveMembersComposition.tsx
index a5b1ac44..9cdd6adf 100644
--- a/src/components/pages/statistics/ActiveMembersComposition.tsx
+++ b/src/components/pages/statistics/ActiveMembersComposition.tsx
@@ -258,6 +258,7 @@ export default function ActiveMembersComposition({
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
         <StatisticalData
+          ableToFilter={true}
           overviewType="activeMemberComposition"
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
diff --git a/src/components/pages/statistics/DisengagedMembersComposition.tsx b/src/components/pages/statistics/DisengagedMembersComposition.tsx
index f30cc901..bd38ad00 100644
--- a/src/components/pages/statistics/DisengagedMembersComposition.tsx
+++ b/src/components/pages/statistics/DisengagedMembersComposition.tsx
@@ -242,6 +242,7 @@ export default function DisengagedMembersComposition({
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
         <StatisticalData
+          ableToFilter={true}
           overviewType="disengagedMemberComposition"
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
diff --git a/src/components/pages/statistics/Onboarding.tsx b/src/components/pages/statistics/Onboarding.tsx
index f7fc25d0..7f952a16 100644
--- a/src/components/pages/statistics/Onboarding.tsx
+++ b/src/components/pages/statistics/Onboarding.tsx
@@ -220,6 +220,7 @@ export default function Onboarding({
       </div>
       <div className="overflow-x-scroll overflow-y-hidden md:overflow-hidden">
         <StatisticalData
+          ableToFilter={true}
           overviewType="onboardingMemberComposition"
           statistics={[...statistics]}
           handleSelectedOption={handleSelectedOption}
diff --git a/src/components/pages/statistics/StatisticalData.tsx b/src/components/pages/statistics/StatisticalData.tsx
index 80c7fafe..db698baa 100644
--- a/src/components/pages/statistics/StatisticalData.tsx
+++ b/src/components/pages/statistics/StatisticalData.tsx
@@ -8,6 +8,7 @@ import router from 'next/router';
 
 type StatisticalDataProps = {
   statistics: StatisticsProps[];
+  ableToFilter?: boolean;
   overviewType?:
     | 'activeMemberComposition'
     | 'onboardingMemberComposition'
@@ -18,6 +19,7 @@ type StatisticalDataProps = {
 
 const StatisticalData: React.FC<StatisticalDataProps> = ({
   statistics,
+  ableToFilter,
   overviewType,
   hideInformationText,
   handleSelectedOption,
@@ -64,12 +66,15 @@ const StatisticalData: React.FC<StatisticalDataProps> = ({
         {statistics.map((stat, index) => (
           <div
             className={clsx(
-              'flex flex-col flex-1 text-center justify-center relative rounded-2xl hover:bg-gray-background ease-in delay-75 cursor-pointer',
+              'flex flex-col flex-1 text-center justify-center relative rounded-2xl',
               stat.description
                 ? 'min-w-full h-[200px] md:min-w-[100px] xl:min-w-[220px] md:max-w-[280px] md:h-[200px]'
                 : 'min-w-full h-[170px] md:min-w-[100px] xl:min-w-[280px] md:max-w-[280px] md:h-[180px]',
               stat.customBackground || stat.label === activeState
                 ? 'bg-gray-hover'
+                : '',
+              ableToFilter
+                ? 'hover:bg-gray-background ease-in delay-75 cursor-pointer'
                 : ''
             )}
             onClick={() => {
@@ -157,6 +162,7 @@ StatisticalData.defaultProps = {
       tooltipText: '',
     },
   ],
+  ableToFilter: false,
   hideInformationText: false,
 };