Add NS directory initiatives list

src/views/CountryNsOverviewContextAndStructure/NationalSocietyDirectory/index.tsx

@@ -13,6 +13,7 @@ import i18n from './i18n.json';
 interface Props {
     className?: string;
 }
+
 function NationalSocietyDirectory(props: Props) {
     const { className } = props;
     const strings = useTranslation(i18n);

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "nationalSocietyKeyDocuments",
+    "strings": {
+        "nSSocietyKeyDocumentsTitle": "Key Documents"
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/index.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import { Link, useOutletContext } from 'react-router-dom';
+import { listToGroupList, mapToList } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import KeyFigure from '#components/KeyFigure';
+import Image from '#components/printable/Image';
+import useDebouncedValue from '#hooks/useDebouncedValue';
+import useTranslation from '#hooks/useTranslation';
+import { GoApiResponse, useRequest } from '#utils/restRequest';
+import { CountryOutletContext } from '#utils/outletContext';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GetKeyDocumentResponse = GoApiResponse<'/api/v2/country-document/'>;
+export type KeyDocumentItem = NonNullable<GetKeyDocumentResponse['results']>[number];
+
+function NationalSocietyKeyDocuments() {
+    const strings = useTranslation(i18n);
+
+    const { countryId } = useOutletContext<CountryOutletContext>();
+    const [searchText, setSearchText] = useState<string | undefined>('');
+    const debouncedSearchText = useDebouncedValue(searchText);
+
+    const {
+        pending: documentPending,
+        response: documentResponse,
+    } = useRequest({
+        url: '/api/v2/country-document/',
+        query: {
+            country: Number(countryId),
+            search: debouncedSearchText,
+            limit: 20,
+        },
+    });
+
+    const documents = documentResponse?.results ?? [];
+
+    const groupedDocumentsByType = (
+        listToGroupList(
+            documents,
+            (item) => item.document_type,
+            (item) => item,
+        ) ?? {}
+    );
+    const documentsMap = mapToList(
+        groupedDocumentsByType,
+        (d, k) => ({ label: k, value: d }),
+    );
+
+    return (
+        <Container
+            heading={strings.nSSocietyKeyDocumentsTitle}
+            childrenContainerClassName={styles.nsKey}
+        >
+            {documentsMap.map((doc) => (
+                <Container
+                    className={styles.nsKeyDocuments}
+                    childrenContainerClassName={styles.nsDocuments}
+                    key={doc.label}
+                    heading={doc.label}
+                    headingLevel={4}
+                    withHeaderBorder
+                    withInternalPadding
+                    withoutWrapInHeading
+                >
+                    {doc.value.map((document) => (
+                        <div className={styles.document}>
+                            <KeyFigure
+                                value={1}
+                                label={(
+                                    <Link
+                                        variant="secondary"
+                                        href={document?.url}
+                                        external
+                                    >
+                                        {document?.name}
+                                    </Link>
+                                )}
+                                compactValue
+                            />
+                            <Image
+                                src={document?.thumbnail}
+                            />
+                        </div>
+                    ))}
+                </Container>
+            ))}
+        </Container>
+    );
+}
+
+export default NationalSocietyKeyDocuments;

src/views/CountryNsOverviewContextAndStructure/NationalSocietyKeyDocuments/styles.module.css

@@ -0,0 +1,23 @@
+.ns-key {
+    display: grid;
+    grid-gap: var(--go-ui-spacing-lg);
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+
+    .ns-key-documents {
+        border-radius: var(--go-ui-border-radius-lg);
+        box-shadow: var(--go-ui-box-shadow-md);
+        padding: var(--go-ui-spacing-lg);
+
+        .ns-key {
+            display: flex;
+            flex-grow: 1;
+            gap: var(--go-ui-spacing-lg);
+
+            .document {
+                flex-basis: 0;
+                flex-grow: 1;
+                padding: 0;
+            }
+        }
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/i18n.json

@@ -0,0 +1,13 @@
+{
+    "namespace": "initiativeListItem",
+    "strings": {
+        "initiativeFundNameTitle": "Fund Name",
+        "initiativeYearApprovedTitle": "Year Approved",
+        "initiativeTitle": "Initiative Title",
+        "initiativeFundingTypeTitle": "Funding Type",
+        "initiativeCategoriesTitle": "Categories",
+        "initiativeAllocationTitle": "Allocation CHF",
+        "initiativeFundingPeriodTitle": "Funding Period",
+        "initiativeMonthsSuffix": "months"
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/index.tsx

@@ -0,0 +1,99 @@
+import { _cs } from '@togglecorp/fujs';
+
+import Container from '#components/Container';
+import TextOutput from '#components/TextOutput';
+import useTranslation from '#hooks/useTranslation';
+
+import styles from './styles.module.css';
+import i18n from './i18n.json';
+
+interface Props {
+    className?: string;
+    id: number;
+    allocation: number | null | undefined;
+    categories: string[] | null | undefined;
+    fund_type: string | null | undefined;
+    funding_period: number | null | undefined;
+    title: string | null | undefined;
+    year: string | null | undefined;
+}
+
+function InitiativeListItem(props: Props) {
+    const {
+        className,
+        id,
+        allocation,
+        categories,
+        fund_type,
+        funding_period,
+        title,
+        year,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const categoriesItem = categories?.join(', ');
+
+    return (
+        <Container
+            className={_cs(styles.initiativeCard, className)}
+            childrenContainerClassName={styles.figures}
+            headingLevel={4}
+            withInternalPadding
+            withHeaderBorder
+            withoutWrapInHeading
+            // TODO: Verify Fund Name and and Fund Type
+            headerDescription={(
+                <TextOutput
+                    label={strings.initiativeFundNameTitle}
+                    value={fund_type}
+                    valueType="text"
+                    strongLabel
+                />
+            )}
+        >
+            <div
+                className={styles.figure}
+                key={id}
+            >
+                <TextOutput
+                    label={strings.initiativeYearApprovedTitle}
+                    value={year}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeTitle}
+                    value={title}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeFundingTypeTitle}
+                    value={fund_type}
+                    valueType="text"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeCategoriesTitle}
+                    value={categoriesItem}
+                    strongValue
+                />
+                <div className={styles.separator} />
+                <TextOutput
+                    label={strings.initiativeAllocationTitle}
+                    value={allocation}
+                    valueType="number"
+                    strongValue
+                />
+                <TextOutput
+                    label={strings.initiativeFundingPeriodTitle}
+                    value={`${funding_period} ${strings.initiativeMonthsSuffix}`}
+                    valueType="text"
+                    strongValue
+                />
+            </div>
+        </Container>
+    );
+}
+
+export default InitiativeListItem;

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/InitiativeCard/styles.module.css

@@ -0,0 +1,18 @@
+.initiative-card {
+    border-radius: var(--go-ui-border-radius-lg);
+    box-shadow: var(--go-ui-box-shadow-md);
+    padding: var(--go-ui-spacing-lg);
+
+    .figures {
+        display: flex;
+        flex-grow: 1;
+        gap: var(--go-ui-spacing-lg);
+
+        .separator {
+            flex-shrink: 0;
+            margin: var(--go-ui-spacing-md) 0;
+            background-color: var(--go-ui-color-separator);
+            height: var(--go-ui-width-separator-sm);
+        }
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "countryNSDirectoryInitiatives",
+    "strings": {
+        "countryNSDirectoryInitiativesTitle": "NSD Initiatives",
+        "countryNSDirectoryInitiativesDescription": "The following data displays ongoing and implemented/closed Initiatives funded  by the different NSD funding mechanisms within the country, which are reported by the respective fund office. Contacts: CBF Office, NSIA Office, ESF Secretariat."
+    }
+}

src/views/CountryNsOverviewContextAndStructure/NsDirectoryInitiatives/index.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import { useOutletContext } from 'react-router-dom';
+
+import Container from '#components/Container';
+import Grid from '#components/Grid';
+import useTranslation from '#hooks/useTranslation';
+import { type CountryOutletContext } from '#utils/outletContext';
+
+import InitiativeListItem from './InitiativeCard';
+import i18n from './i18n.json';
+
+interface Props {
+    className?: string;
+}
+
+type CountryListItem = NonNullable<NonNullable<CountryOutletContext['countryResponse']>['initiatives']>[number];
+
+const keySelector = (country: CountryListItem) => country.id;
+
+function NationalSocietyDirectoryInitiatives(props: Props) {
+    const { className } = props;
+    const strings = useTranslation(i18n);
+
+    const { countryResponse } = useOutletContext<CountryOutletContext>();
+
+    const rendererParams = useCallback(
+        (_: number, data: CountryListItem) => ({
+            id: data.id,
+            allocation: data?.allocation,
+            categories: data?.categories,
+            fund_type: data?.fund_type,
+            funding_period: data?.funding_period,
+            title: data?.title,
+            year: data?.year,
+        }),
+        [],
+    );
+
+    return (
+        <Container
+            heading={strings.countryNSDirectoryInitiativesTitle}
+            // TODO: Add Contacts link in description
+            headerDescription={strings.countryNSDirectoryInitiativesDescription}
+            withHeaderBorder
+            withInternalPadding
+        >
+            <Grid
+                className={className}
+                data={countryResponse?.initiatives}
+                pending={false}
+                errored={false}
+                filtered={false}
+                keySelector={keySelector}
+                renderer={InitiativeListItem}
+                rendererParams={rendererParams}
+                numPreferredColumns={3}
+            />
+        </Container>
+    );
+}
+
+export default NationalSocietyDirectoryInitiatives;

src/views/CountryNsOverviewContextAndStructure/index.tsx

@@ -11,6 +11,7 @@ import NationalSocietyContacts from './NationalSocietyContacts';
 import NationalSocietyDirectory from './NationalSocietyDirectory';
 import NationalSocietyLocalUnitsMap from './NationalSocietyLocalUnitsMap';
 
+import NationalSocietyDirectoryInitiatives from './NsDirectoryInitiatives';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
@@ -80,6 +81,7 @@ export function Component() {
                     )}
                 </Container>
             )}
+            <NationalSocietyDirectoryInitiatives />
         </div>
     );
 }