feat(validate_image): add validate image swipes count in stats group

Author: AdityaKhatri

community-dashboard/app/resources/icons/validate-image.svg

@@ -43,6 +43,7 @@ import InformationCard from '#components/InformationCard';
 import areaSvg from '#resources/icons/area.svg';
 import sceneSvg from '#resources/icons/scene.svg';
 import featureSvg from '#resources/icons/feature.svg';
+import validateImageSvg from '#resources/icons/validate-image.svg';
 import {
     ContributorTimeStatType,
     OrganizationSwipeStatsType,
@@ -467,6 +468,10 @@ function StatsBoard(props: Props) {
         (project) => project.projectType === FOOTPRINT,
     )?.totalSwipes;
 
+    const validateImageTotalSwipes = swipeByProjectType?.find(
+        (project) => project.projectType === VALIDATE_IMAGE,
+    )?.totalSwipes;
+
     const organizationColors = scaleOrdinal<string, string | undefined>()
         .domain(totalSwipesByOrganizationStats?.map(
             (organization) => (organization.organizationName),
@@ -717,6 +722,29 @@ function StatsBoard(props: Props) {
                         subHeading="Compare"
                         variant="stat"
                     />
+                    <InformationCard
+                        icon={(
+                            <img
+                                src={validateImageSvg}
+                                alt="group icon"
+                            />
+                        )}
+                        value={(
+                            <NumberOutput
+                                className={styles.numberOutput}
+                                value={validateImageTotalSwipes}
+                                normal
+                                invalidText={0}
+                            />
+                        )}
+                        label={(
+                            <div className={styles.infoLabel}>
+                                Images Validated
+                            </div>
+                        )}
+                        subHeading="Validate Image"
+                        variant="stat"
+                    />
                 </div>
                 <div className={styles.overallStatsContainer}>
                     <InformationCard

community-dashboard/app/views/StatsBoard/index.tsx

@@ -67,7 +67,7 @@
             >* {
                 flex-basis: 0;
                 flex-grow: 1;
-                min-width: 12rem;
+                min-width: 24rem;
 
                 @media (max-width: 48rem) {
                     min-width: 100%;