Merge pull request #185 from TogetherCrew/fix/overview-member-breakdo…

…wn-filter add property for fix filter issue on boxes
TogetherCrew · Sep 14, 2023 · 2ab1815 · 2ab1815
2 parents 9c1eb91 + b743594
commit 2ab1815
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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,
 };