fix: remove unused usePerComponent hook

Author: samshara

app/src/hooks/domain/usePerComponent.ts

@@ -17,15 +17,17 @@ import { type EntriesAsList } from '@togglecorp/toggle-form';
 
 import CountryMultiSelectInput, { type CountryOption } from '#components/domain/CountryMultiSelectInput';
 import RegionSelectInput, { type RegionOption } from '#components/domain/RegionSelectInput';
+import { type PerComponents } from '#contexts/domain';
 import { type components } from '#generated/types';
 import { type DisasterType } from '#hooks/domain/useDisasterType';
-import { type PerComponent } from '#hooks/domain/usePerComponent';
 import { type SecondarySector } from '#hooks/domain/useSecondarySector';
 import { getFormattedComponentName } from '#utils/domain/per';
 import { type GoApiResponse } from '#utils/restRequest';
 
 import i18n from './i18n.json';
 
+export type PerComponent = NonNullable<PerComponents['results']>[number];
+
 type OpsLearningOrganizationType = NonNullable<GoApiResponse<'/api/v2/ops-learning/organization-type/'>['results']>[number];
 export type PerLearningType = components<'read'>['schemas']['PerLearningTypeEnum'];
 

app/src/views/OperationalLearning/Filters/index.tsx

@@ -182,7 +182,11 @@ function Stats(props: Props) {
     return (
         <div className={styles.stats}>
             {learningStatsPending && <BlockLoading />}
-            <div className={styles.keyFigureList}>
+            <Container
+                contentViewType="grid"
+                numPreferredGridContentColumns={4}
+                spacing="compact"
+            >
                 <KeyFigure
                     className={styles.keyFigure}
                     value={learningStatsResponse?.operations_included}
@@ -207,7 +211,7 @@ function Stats(props: Props) {
                     label={strings.sectorsCovered}
                     labelClassName={styles.keyFigureDescription}
                 />
-            </div>
+            </Container>
             <div className={styles.learningOverview}>
                 <OperationalLearningMap
                     learningByCountry={learningStatsResponse?.learning_by_country}

app/src/views/OperationalLearning/Stats/index.tsx

@@ -3,18 +3,12 @@
     flex-direction: column;
     gap: var(--go-ui-spacing-md);
 
-    .key-figure-list {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-2xs);
-        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
-
-        .key-figure {
-            border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
-            border-radius: var(--go-ui-border-radius-lg);
-            background-color: var(--go-ui-color-white);
-            padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md);
-            height: 100%;
-        }
+    .key-figure {
+        border: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+        border-radius: var(--go-ui-border-radius-lg);
+        background-color: var(--go-ui-color-white);
+        padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md);
+        height: 100%;
     }
 
     .learning-overview {