From 7b49445021ab7c5019cff65500090e4cf2d26ed9 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Sun, 15 Dec 2024 13:48:08 +0100
Subject: [PATCH 01/18] feat: redesign accordions of fcs and ipc

---
 src/components/Cards/Card.tsx                 |  43 ++--
 src/components/Map/FcsAccordion.tsx           | 199 ------------------
 src/components/Map/FcsMap/FcsAccordion.tsx    |  43 ++++
 .../Map/{ => FcsMap}/FcsChoropleth.tsx        |   2 +-
 .../Map/{ => FcsMap}/FcsCountryChoropleth.tsx |   0
 .../Map/FcsMap/FcsFoodSecurityAccordion.tsx   | 103 +++++++++
 .../Map/FcsMap/FcsMacroEconomicAccordion.tsx  |  90 ++++++++
 src/components/Map/IpcMap/IpcAccordion.tsx    |  64 +-----
 .../Map/IpcMap/IpcFoodSecurityAccordion.tsx   |  67 ++++++
 src/components/Map/Map.tsx                    |   4 +-
 .../{ => NutritionMap}/NutritionAccordion.tsx |   0
 .../NutritionChoropleth.tsx                   |   2 +-
 .../NutritionRegionTooltip.tsx                |   0
 .../NutritionStateChoropleth.tsx              |   0
 src/domain/entities/cards/CardContent.ts      |   8 +
 src/domain/props/CardProps.tsx                |   2 +-
 src/domain/props/FcsAccordionProps.tsx        |   2 +-
 .../props/IpcFoodSecurityAccordionProps.tsx   |   7 +
 .../NutritionStateChoroplethOperations.tsx    |   2 +-
 19 files changed, 365 insertions(+), 273 deletions(-)
 delete mode 100644 src/components/Map/FcsAccordion.tsx
 create mode 100644 src/components/Map/FcsMap/FcsAccordion.tsx
 rename src/components/Map/{ => FcsMap}/FcsChoropleth.tsx (98%)
 rename src/components/Map/{ => FcsMap}/FcsCountryChoropleth.tsx (100%)
 create mode 100644 src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
 create mode 100644 src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
 create mode 100644 src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
 rename src/components/Map/{ => NutritionMap}/NutritionAccordion.tsx (100%)
 rename src/components/Map/{ => NutritionMap}/NutritionChoropleth.tsx (98%)
 rename src/components/Map/{ => NutritionMap}/NutritionRegionTooltip.tsx (100%)
 rename src/components/Map/{ => NutritionMap}/NutritionStateChoropleth.tsx (100%)
 create mode 100644 src/domain/props/IpcFoodSecurityAccordionProps.tsx

diff --git a/src/components/Cards/Card.tsx b/src/components/Cards/Card.tsx
index 9f03a016..00f4223a 100644
--- a/src/components/Cards/Card.tsx
+++ b/src/components/Cards/Card.tsx
@@ -1,27 +1,46 @@
 'use client';
 
-import { Card, CardBody, CardHeader, Image } from '@nextui-org/react';
+import { Card, CardBody } from '@nextui-org/react';
+import React from 'react';
 import { v4 as uuid } from 'uuid';
 
 import { CardProps } from '@/domain/props/CardProps';
 
 export default function CustomCard({ title, content }: CardProps) {
   return (
-    <Card className="w-fit h-auto min-w-[210px] justify-evenly m-2.5 dark:primary white:bg-white">
-      <CardHeader className="flex flex-col items-center p-[5px] overflow-visible">
-        <h2 className="text-large break-words text-pretty"> {title} </h2>
-      </CardHeader>
+    <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white">
       <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
-        <div className="flex flex-row gap-6 overflow-y-auto">
+        <div className="flex flex-row flex-wrap gap-6 overflow-y-auto">
           {content.map((item) => (
-            <div key={uuid()} className="flex flex-col gap-1 items-center">
+            <div key={uuid()} className="flex flex-row gap-4 items-start">
               {item.svgIcon ? (
-                <div className="svg-icon w-[90px]">{item.svgIcon}</div>
-              ) : (
-                <Image alt={item.altText} className="w-[102px] h-[75px]" src={item.imageSrc} />
+                <div className="svg-icon w-[70px] h-[70px] object-contain">{item.svgIcon}</div>
+              ) : item.imageSrc ? (
+                <img alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} />
+              ) : null}
+              <div className="flex flex-col">
+                {title && <h2 className="text-lg text-center">{title}</h2>}
+                {item.text && <h2 className={`text-center ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
+                {item.value && (
+                  <p className="text-sm/[2rem] text-center">
+                    {typeof item.value === 'number' ? `${item.value.toFixed(2)} M` : item.value || 'N/A'}
+                  </p>
+                )}
+              </div>
+              {/* Additional Content (Time-based data) */}
+              {item.changeValues && (
+                <div className="flex flex-row space-x-3">
+                  {item.changeValues.map((delta) => (
+                    <div key={uuid()} className="flex flex-col items-center gap-2">
+                      <img src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" />
+                      <div className="text-center">
+                        <p className="text-sm font-medium whitespace-nowrap">{delta.text}</p>
+                        <p className="text-xs text-gray-600">{delta.timeText}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
               )}
-              <h1 className="text-base text-center mt-2">{item.text}</h1>
-              {item.timeText && <h1 className="text-xs text-[#888888] text-center break-words">{item.timeText}</h1>}
             </div>
           ))}
         </div>
diff --git a/src/components/Map/FcsAccordion.tsx b/src/components/Map/FcsAccordion.tsx
deleted file mode 100644
index 276f735a..00000000
--- a/src/components/Map/FcsAccordion.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { Spacer } from '@nextui-org/react';
-
-import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
-
-import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Import } from '../../../public/Images/Import.svg';
-import { ReactComponent as Population } from '../../../public/Images/Population.svg';
-import AccordionContainer from '../Accordions/AccordionContainer';
-import CustomCard from '../Cards/Card';
-import { LineChart } from '../Charts/LineChart';
-import CustomInfoCircle from '../CustomInfoCircle/CustomInfoCircle';
-
-export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
-  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
-  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
-  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
-  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
-  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
-  const headlineAndFoodInflationChartData =
-    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
-  return (
-    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
-      <AccordionContainer
-        loading={loading}
-        title={countryName ?? undefined}
-        accordionModalActive
-        maxWidth={600}
-        items={[
-          {
-            title: 'Food Security',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-            content: (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Population"
-                  content={[
-                    {
-                      svgIcon: <Population className="w-full h-full object-contain" />,
-                      text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
-                      altText: 'Population Icon',
-                    },
-                  ]}
-                />
-                <CustomCard
-                  title="People with insufficient food consumption"
-                  content={[
-                    {
-                      svgIcon: <FoodConsumption className="w-full h-full object-contain" />,
-                      text: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
-                      altText: 'Food Consumption Icon',
-                    },
-                    {
-                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '1 Month ago',
-                      altText: 'Icon',
-                    },
-                    {
-                      imageSrc:
-                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '3 Month ago',
-                      altText: 'Other Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ),
-          },
-          {
-            title: 'Food Security Trends',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
-            content: (
-              <div>
-                {fcsChartData ? (
-                  <LineChart
-                    title="Trend of the number of people with insufficient food consumption"
-                    data={fcsChartData}
-                    expandable
-                    xAxisSlider
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about insufficient food consumption</p>
-                )}
-                <Spacer y={6} />
-                {rcsiChartData ? (
-                  <LineChart
-                    title="Trend of the number of people using crisis or above crisis food-based coping"
-                    data={rcsiChartData}
-                    expandable
-                    xAxisSlider
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about crisis or above crisis food-based coping</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Macro-economic',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
-            content: (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Import Dependency"
-                  content={[
-                    {
-                      svgIcon: <Import className="w-full h-full object-contain" />,
-                      text: countryData?.importDependency
-                        ? `${countryData.importDependency.toFixed(1)}% of Cereals`
-                        : 'N/A',
-                      altText: 'Import Dependency Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ),
-          },
-          {
-            title: 'Currency Exchange',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
-            content: (
-              <div>
-                {currencyExchangeChartData ? (
-                  <LineChart
-                    data={currencyExchangeChartData}
-                    expandable
-                    xAxisSlider
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about currency exchange</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Balance of Trade',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
-            content: (
-              <div>
-                {balanceOfTradeChartData ? (
-                  <LineChart
-                    data={balanceOfTradeChartData}
-                    expandable
-                    xAxisSlider
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about balance of trade</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Headline and food inflation',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
-            content: (
-              <div>
-                {headlineAndFoodInflationChartData ? (
-                  <LineChart
-                    data={headlineAndFoodInflationChartData}
-                    expandable
-                    xAxisSlider
-                    barChartSwitch
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about headline and food inflation</p>
-                )}
-              </div>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-}
diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
new file mode 100644
index 00000000..ca04ee66
--- /dev/null
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -0,0 +1,43 @@
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { useMediaQuery } from '@/utils/resolution.ts';
+
+import AccordionContainer from '../../Accordions/AccordionContainer';
+import FcsFoodSecurityAccordion from './FcsFoodSecurityAccordion';
+import FcsMacroEconomicAccordion from './FcsMacroEconomicAccordion';
+
+export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
+  const isMobile = useMediaQuery('(max-width: 700px)');
+  const foodSecurityAccordion = FcsFoodSecurityAccordion({ countryData });
+  const macroEconomicAccordion = FcsMacroEconomicAccordion({ countryData, countryIso3Data });
+
+  return (
+    <>
+      {!isMobile ? (
+        <div className="absolute w-[370px] left-[108px] top-4 z-9999">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={foodSecurityAccordion}
+          />
+        </div>
+      ) : (
+        <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+          <AccordionContainer
+            loading={loading}
+            title={countryName ?? undefined}
+            accordionModalActive
+            maxWidth={600}
+            items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
+          />
+        </div>
+      )}
+      {!isMobile && (
+        <div className="absolute w-[370px] right-[1rem] inset-y-20 z-9999">
+          <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Map/FcsChoropleth.tsx b/src/components/Map/FcsMap/FcsChoropleth.tsx
similarity index 98%
rename from src/components/Map/FcsChoropleth.tsx
rename to src/components/Map/FcsMap/FcsChoropleth.tsx
index ffad7960..fd1ab3fa 100644
--- a/src/components/Map/FcsChoropleth.tsx
+++ b/src/components/Map/FcsMap/FcsChoropleth.tsx
@@ -11,7 +11,7 @@ import FcsChoroplethProps from '@/domain/props/FcsChoroplethProps';
 import FcsChoroplethOperations from '@/operations/map/FcsChoroplethOperations';
 import { MapOperations } from '@/operations/map/MapOperations';
 
-import CountryLoadingLayer from './CountryLoading';
+import CountryLoadingLayer from '../CountryLoading';
 import FscCountryChoropleth from './FcsCountryChoropleth';
 
 export default function FcsChoropleth({
diff --git a/src/components/Map/FcsCountryChoropleth.tsx b/src/components/Map/FcsMap/FcsCountryChoropleth.tsx
similarity index 100%
rename from src/components/Map/FcsCountryChoropleth.tsx
rename to src/components/Map/FcsMap/FcsCountryChoropleth.tsx
diff --git a/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx b/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
new file mode 100644
index 00000000..14fdb62f
--- /dev/null
+++ b/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
@@ -0,0 +1,103 @@
+import { Spacer } from '@nextui-org/react';
+
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
+import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
+import CustomCard from '../../Cards/Card';
+import { LineChart } from '../../Charts/LineChart';
+import CustomInfoCircle from '../../CustomInfoCircle/CustomInfoCircle';
+
+export default function FoodSecurityAccordion({ countryData }: FcsAccordionProps) {
+  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
+  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
+  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
+  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
+
+  const FcsFoodSecurityAccordion = [
+    {
+      title: 'Food Security',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+      content: (
+        <div className={cardsWrapperClass}>
+          <CustomCard
+            title="Population"
+            content={[
+              {
+                svgIcon: <Population />,
+                text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
+                altText: 'Population Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+          <CustomCard
+            content={[
+              {
+                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+                text: 'Population with insufficient food consumption',
+                value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
+                textClass: 'text-xs',
+                changeValues: [
+                  {
+                    imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '1 Month ago',
+                    altText: 'Delta Icon',
+                  },
+                  {
+                    imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '3 Month ago',
+                    altText: 'Delta Icon',
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: 'Food Security Trends',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
+      content: (
+        <div>
+          {fcsChartData ? (
+            <LineChart
+              title="Trend of the number of people with insufficient food consumption"
+              data={fcsChartData}
+              expandable
+              xAxisSlider
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about insufficient food consumption</p>
+          )}
+          <Spacer y={6} />
+          {rcsiChartData ? (
+            <LineChart
+              title="Trend of the number of people using crisis or above crisis food-based coping"
+              data={rcsiChartData}
+              expandable
+              xAxisSlider
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about crisis or above crisis food-based coping</p>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  return FcsFoodSecurityAccordion;
+}
diff --git a/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx b/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
new file mode 100644
index 00000000..139adbf9
--- /dev/null
+++ b/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
@@ -0,0 +1,90 @@
+import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as Import } from '../../../../public/Images/Import.svg';
+import CustomCard from '../../Cards/Card';
+import { LineChart } from '../../Charts/LineChart';
+import CustomInfoCircle from '../../CustomInfoCircle/CustomInfoCircle';
+
+export default function MacroEconomicAccordion({ countryData, countryIso3Data }: FcsAccordionProps) {
+  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
+  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
+  const headlineAndFoodInflationChartData =
+    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
+
+  const FcsMacroEconomicAccordion = [
+    {
+      title: 'Macroeconomic',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
+      content: (
+        <div className={cardsWrapperClass}>
+          <CustomCard
+            title="Import Dependency"
+            content={[
+              {
+                svgIcon: <Import />,
+                text: countryData?.importDependency ? `${countryData.importDependency.toFixed(1)}% of Cereals` : 'N/A',
+                altText: 'Import Dependency Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: 'Currency Exchange',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
+      content: (
+        <div>
+          {currencyExchangeChartData ? (
+            <LineChart data={currencyExchangeChartData} expandable xAxisSlider small noPadding transparentBackground />
+          ) : (
+            <p>No data about currency exchange</p>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'Balance of Trade',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
+      content: (
+        <div>
+          {balanceOfTradeChartData ? (
+            <LineChart data={balanceOfTradeChartData} expandable xAxisSlider small noPadding transparentBackground />
+          ) : (
+            <p>No data about balance of trade</p>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'Headline and food inflation',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
+      content: (
+        <div>
+          {headlineAndFoodInflationChartData ? (
+            <LineChart
+              data={headlineAndFoodInflationChartData}
+              expandable
+              xAxisSlider
+              barChartSwitch
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about headline and food inflation</p>
+          )}
+        </div>
+      ),
+    },
+  ];
+
+  return FcsMacroEconomicAccordion;
+}
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index 57ec55e6..47c41aee 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -1,71 +1,25 @@
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
-import CustomCard from '@/components/Cards/Card';
-import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
 import IpcAccordionProps from '@/domain/props/IpcAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
 
-import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
+import IpcFoodSecurityAccordion from './IpcFoodSecurityAccordion';
 
 export default function IpcAccordion({ countryData, countryName }: IpcAccordionProps) {
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const hasNoData: boolean =
-    !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
+
+  const ipcFoodSecurityAccordion = IpcFoodSecurityAccordion({
+    countryData,
+    deltaOneMonth,
+    deltaThreeMonth,
+  });
 
   return (
-    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+    <div className="absolute w-[370px] left-[108px] top-4 z-9999">
       <AccordionContainer
         title={countryName ?? undefined}
         accordionModalActive
         maxWidth={600}
-        items={[
-          {
-            title: 'Food Security',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-            content: !hasNoData ? (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Population"
-                  content={[
-                    {
-                      svgIcon: <Population className="w-full h-full object-contain" />,
-                      text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
-                      altText: 'Population Icon',
-                    },
-                  ]}
-                />
-                <CustomCard
-                  title="People with insufficient food consumption"
-                  content={[
-                    {
-                      svgIcon: <FoodConsumption className="w-full h-full object-contain" />,
-                      text: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
-                      altText: 'Food Consumption Icon',
-                    },
-                    {
-                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '1 Months ago',
-                      altText: 'Other Icon',
-                    },
-                    {
-                      imageSrc:
-                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '3 Month ago',
-                      altText: 'Other Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ) : (
-              <p>No data about food security</p>
-            ),
-          },
-        ]}
+        items={[ipcFoodSecurityAccordion]}
       />
     </div>
   );
diff --git a/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx b/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
new file mode 100644
index 00000000..601d2d7b
--- /dev/null
+++ b/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import CustomCard from '@/components/Cards/Card';
+import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
+import IpcFoodSecurityAccordionProps from '@/domain/props/IpcFoodSecurityAccordionProps';
+import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
+import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
+
+export default function IpcFoodSecurityAccordion({
+  countryData,
+  deltaOneMonth,
+  deltaThreeMonth,
+}: IpcFoodSecurityAccordionProps) {
+  const hasNoData: boolean =
+    !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
+
+  return {
+    title: 'Food Security',
+    infoIcon: <CustomInfoCircle />,
+    popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+    content: !hasNoData ? (
+      <div className={cardsWrapperClass}>
+        {/* Population Card */}
+        <CustomCard
+          title="Population"
+          content={[
+            {
+              svgIcon: <Population className="w-full h-full object-contain" />,
+              text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
+              altText: 'Population Icon',
+              textClass: 'text-base',
+            },
+          ]}
+        />
+        <CustomCard
+          content={[
+            {
+              svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+              text: 'Population with insufficient food consumption',
+              value: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
+              textClass: 'text-xs',
+              changeValues: [
+                {
+                  imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                  text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                  timeText: '1 Month ago',
+                  altText: 'Delta Icon',
+                },
+                {
+                  imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                  text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                  timeText: '3 Month ago',
+                  altText: 'Delta Icon',
+                },
+              ],
+            },
+          ]}
+        />
+      </div>
+    ) : (
+      <p>No data about food security</p>
+    ),
+  };
+}
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 195ebbed..01db6a9c 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -26,9 +26,9 @@ import { MapProps } from '@/domain/props/MapProps';
 import { MapOperations } from '@/operations/map/MapOperations';
 
 import { AlertContainer } from './Alerts/AlertContainer';
-import FcsChoropleth from './FcsChoropleth';
+import FcsChoropleth from './FcsMap/FcsChoropleth';
 import IpcChoropleth from './IpcMap/IpcChoropleth';
-import NutritionChoropleth from './NutritionChoropleth';
+import NutritionChoropleth from './NutritionMap/NutritionChoropleth';
 import ZoomControl from './ZoomControl';
 
 export default function Map({ countries, disputedAreas, fcsData, alertData }: MapProps) {
diff --git a/src/components/Map/NutritionAccordion.tsx b/src/components/Map/NutritionMap/NutritionAccordion.tsx
similarity index 100%
rename from src/components/Map/NutritionAccordion.tsx
rename to src/components/Map/NutritionMap/NutritionAccordion.tsx
diff --git a/src/components/Map/NutritionChoropleth.tsx b/src/components/Map/NutritionMap/NutritionChoropleth.tsx
similarity index 98%
rename from src/components/Map/NutritionChoropleth.tsx
rename to src/components/Map/NutritionMap/NutritionChoropleth.tsx
index 3dd4d627..3e9b0ff8 100644
--- a/src/components/Map/NutritionChoropleth.tsx
+++ b/src/components/Map/NutritionMap/NutritionChoropleth.tsx
@@ -12,7 +12,7 @@ import NutritionChoroplethProps from '@/domain/props/NutritionChoroplethProps';
 import { MapOperations } from '@/operations/map/MapOperations';
 import NutritionChoroplethOperations from '@/operations/map/NutritionChoroplethOperations';
 
-import CountryLoadingLayer from './CountryLoading';
+import CountryLoadingLayer from '../CountryLoading';
 import NutritionStateChoropleth from './NutritionStateChoropleth';
 
 export default function NutritionChoropleth({
diff --git a/src/components/Map/NutritionRegionTooltip.tsx b/src/components/Map/NutritionMap/NutritionRegionTooltip.tsx
similarity index 100%
rename from src/components/Map/NutritionRegionTooltip.tsx
rename to src/components/Map/NutritionMap/NutritionRegionTooltip.tsx
diff --git a/src/components/Map/NutritionStateChoropleth.tsx b/src/components/Map/NutritionMap/NutritionStateChoropleth.tsx
similarity index 100%
rename from src/components/Map/NutritionStateChoropleth.tsx
rename to src/components/Map/NutritionMap/NutritionStateChoropleth.tsx
diff --git a/src/domain/entities/cards/CardContent.ts b/src/domain/entities/cards/CardContent.ts
index 091f7fce..62dd7462 100644
--- a/src/domain/entities/cards/CardContent.ts
+++ b/src/domain/entities/cards/CardContent.ts
@@ -2,7 +2,15 @@ export interface CardContent {
   imageSrc?: string;
   svgIcon?: React.ReactNode;
   text?: string;
+  value?: string | number;
   content?: React.ReactNode;
   timeText?: string;
   altText?: string;
+  changeValues?: {
+    imageSrc: string;
+    text: string;
+    timeText: string;
+    altText: string;
+  }[];
+  textClass?: string;
 }
diff --git a/src/domain/props/CardProps.tsx b/src/domain/props/CardProps.tsx
index 395c2dbf..7c3915a2 100644
--- a/src/domain/props/CardProps.tsx
+++ b/src/domain/props/CardProps.tsx
@@ -1,6 +1,6 @@
 import { CardContent } from '../entities/cards/CardContent';
 
 export interface CardProps {
-  title: string;
+  title?: string;
   content: CardContent[];
 }
diff --git a/src/domain/props/FcsAccordionProps.tsx b/src/domain/props/FcsAccordionProps.tsx
index d17756bf..fa9e49c8 100644
--- a/src/domain/props/FcsAccordionProps.tsx
+++ b/src/domain/props/FcsAccordionProps.tsx
@@ -4,6 +4,6 @@ import { CountryIso3Data } from '../entities/country/CountryIso3Data';
 export default interface FcsAccordionProps {
   countryData?: CountryData;
   countryIso3Data?: CountryIso3Data;
-  loading: boolean;
+  loading?: boolean;
   countryName?: string;
 }
diff --git a/src/domain/props/IpcFoodSecurityAccordionProps.tsx b/src/domain/props/IpcFoodSecurityAccordionProps.tsx
new file mode 100644
index 00000000..debee2c0
--- /dev/null
+++ b/src/domain/props/IpcFoodSecurityAccordionProps.tsx
@@ -0,0 +1,7 @@
+import { CountryData } from '../entities/country/CountryData';
+
+export default interface IpcFoodSecurityAccordionProps {
+  countryData: CountryData | undefined;
+  deltaOneMonth: number | null;
+  deltaThreeMonth: number | null;
+}
diff --git a/src/operations/map/NutritionStateChoroplethOperations.tsx b/src/operations/map/NutritionStateChoroplethOperations.tsx
index 7b34d87a..87db874d 100644
--- a/src/operations/map/NutritionStateChoroplethOperations.tsx
+++ b/src/operations/map/NutritionStateChoroplethOperations.tsx
@@ -2,7 +2,7 @@ import { Feature } from 'geojson';
 import { PathOptions } from 'leaflet';
 import { createRoot } from 'react-dom/client';
 
-import NutritionRegionTooltip from '@/components/Map/NutritionRegionTooltip';
+import NutritionRegionTooltip from '@/components/Map/NutritionMap/NutritionRegionTooltip';
 import { NUTRIENT_LABELS } from '@/domain/constant/map/NutritionChoropleth.ts';
 import { LayerWithFeature } from '@/domain/entities/map/LayerWithFeature.ts';
 import { Nutrition } from '@/domain/entities/region/RegionNutritionProperties.ts';

From a2d5221f66c67fbe75fa131fd1a2575d19dc7b83 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Mon, 16 Dec 2024 10:19:38 +0100
Subject: [PATCH 02/18] feat: add nutrition accordion in ipc and fcs

---
 public/Images/Nutrition.svg                   |   5 +
 src/components/Cards/Card.tsx                 |  15 +-
 src/components/Map/FcsMap/FcsAccordion.tsx    |   8 +-
 .../Map/FcsMap/FcsFoodSecurityAccordion.tsx   | 102 +-----------
 .../Map/FcsMap/FcsMacroEconomicAccordion.tsx  |  87 +---------
 src/components/Map/IpcMap/IpcAccordion.tsx    |   7 +-
 src/components/Map/IpcMap/IpcChoropleth.tsx   |   9 +-
 .../Map/IpcMap/IpcCountryChoropleth.tsx       |   4 +-
 .../Map/IpcMap/IpcFoodSecurityAccordion.tsx   |  66 +-------
 .../Map/IpcMap/IpcNutritionAccordion.tsx      |   7 +
 src/components/Map/Map.tsx                    |   1 +
 src/domain/entities/cards/CardContent.ts      |   2 +-
 src/domain/props/IpcAccordionProps.tsx        |   2 +
 src/domain/props/IpcChoroplethProps.tsx       |   3 +
 .../props/IpcCountryChoroplethProps.tsx       |   2 +
 .../props/IpcNutritionAccordionProps.tsx      |   5 +
 src/operations/map/FcsAccordionOperations.tsx |  12 ++
 .../map/FcsFoodSecurityOperations.tsx         | 151 ++++++++++++++++++
 .../map/FcsMacroEconomicOperations.tsx        |  93 +++++++++++
 .../map/IpcFoodSecurityOperations.tsx         | 119 ++++++++++++++
 src/operations/map/MapOperations.tsx          |   2 +-
 src/utils/primitives.ts                       |   2 +-
 22 files changed, 444 insertions(+), 260 deletions(-)
 create mode 100644 public/Images/Nutrition.svg
 create mode 100644 src/components/Map/IpcMap/IpcNutritionAccordion.tsx
 create mode 100644 src/domain/props/IpcNutritionAccordionProps.tsx
 create mode 100644 src/operations/map/FcsFoodSecurityOperations.tsx
 create mode 100644 src/operations/map/FcsMacroEconomicOperations.tsx
 create mode 100644 src/operations/map/IpcFoodSecurityOperations.tsx

diff --git a/public/Images/Nutrition.svg b/public/Images/Nutrition.svg
new file mode 100644
index 00000000..1dc24e38
--- /dev/null
+++ b/public/Images/Nutrition.svg
@@ -0,0 +1,5 @@
+<svg width="80" height="100" viewBox="0 0 80 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M58.096 17.0722C61.0596 17.0722 63.3986 14.5702 63.3986 11.4766C63.3986 8.40965 61.0596 5.91211 58.096 5.91211C55.1582 5.91211 52.7638 8.40965 52.7638 11.4766C52.7638 14.5702 55.1582 17.0722 58.096 17.0722ZM55.112 64.0011C56.4025 64.0011 57.4236 62.9351 57.4236 61.6168V42.7591C57.4236 42.3782 57.7289 42.0592 58.096 42.0592C58.4889 42.0592 58.7668 42.3782 58.7668 42.7591V61.6168C58.7668 62.9351 59.7876 64.0011 61.0802 64.0011C62.3434 64.0011 63.3919 62.9351 63.3919 61.6168V30.8654C63.3919 30.4822 63.6954 30.1675 64.0603 30.1675C64.4529 30.1675 64.7564 30.4822 64.7564 30.8654V40.9156C64.7564 42.1408 65.6606 43.0848 66.8343 43.0848C67.9762 43.0848 68.9082 42.1408 68.9082 40.9156V29.7086C68.9082 24.0799 64.9536 20.2704 59.6412 20.2704H56.5489C51.2365 20.2704 47.2819 24.0799 47.2819 29.7086V40.9156C47.2819 42.1408 48.2415 43.0848 49.3576 43.0848C50.4996 43.0848 51.4593 42.1408 51.4593 40.9156V30.8654C51.4593 30.4822 51.735 30.1675 52.1277 30.1675C52.4947 30.1675 52.7982 30.4822 52.7982 30.8654V61.6168C52.7982 62.9351 53.8214 64.0011 55.112 64.0011Z" fill="white"/>
+<path d="M37.4445 69.9399C37.8697 69.9399 38.1914 69.6085 38.1914 69.1936V0.775438C38.1914 0.360258 37.8697 0 37.4445 0C37.0467 0 36.7253 0.360258 36.7253 0.775438V69.1936C36.7253 69.6085 37.0467 69.9399 37.4445 69.9399Z" fill="white"/>
+<path d="M14.9134 17.0722C17.8512 17.0722 20.2437 14.5702 20.2437 11.4766C20.2437 8.40965 17.8512 5.91211 14.9134 5.91211C11.95 5.91211 9.61078 8.40965 9.61078 11.4766C9.61078 14.5702 11.95 17.0722 14.9134 17.0722ZM11.9313 64.0011C13.2218 64.0011 14.2408 62.9351 14.2408 61.6168V50.8984C14.2408 50.5152 14.5207 50.1981 14.9134 50.1981C15.2784 50.1981 15.5839 50.5152 15.5839 50.8984V61.6168C15.5839 62.9351 16.6049 64.0011 17.8955 64.0011C19.1585 64.0011 20.2092 62.9351 20.2092 61.6168V50.8984H24.7476C25.5959 50.8984 26.0563 50.0856 25.7466 49.0002L20.4475 31.2666C20.0867 30.1632 21.4492 29.7222 21.8121 30.8567L24.9518 41.3887C25.9686 44.8063 30.7028 43.4699 29.684 40.0189L26.7566 30.2383C24.8632 23.8158 22.4509 20.1239 15.5839 20.1239H14.2408C7.37382 20.1239 4.93592 23.8158 3.04255 30.2383L0.14276 40.0189C-0.876149 43.4699 3.85816 44.8063 4.87498 41.3887L8.01463 30.8567C8.34992 29.7222 9.71034 30.1632 9.37922 31.2666L4.07809 49.0002C3.77047 50.0856 4.22882 50.8984 5.07918 50.8984H9.6176V61.6168C9.6176 62.9351 10.6386 64.0011 11.9313 64.0011Z" fill="white"/>
+</svg>
diff --git a/src/components/Cards/Card.tsx b/src/components/Cards/Card.tsx
index 00f4223a..b21be237 100644
--- a/src/components/Cards/Card.tsx
+++ b/src/components/Cards/Card.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Card, CardBody } from '@nextui-org/react';
+import Image from 'next/image';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
@@ -9,20 +10,20 @@ import { CardProps } from '@/domain/props/CardProps';
 export default function CustomCard({ title, content }: CardProps) {
   return (
     <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white">
-      <CardBody className="flex flex-col items-center justify-center overflow-visible overflow-y-auto max-h-[300px] py-2">
-        <div className="flex flex-row flex-wrap gap-6 overflow-y-auto">
+      <CardBody className="flex flex-col items-center justify-center overflow-hidden max-h-[300px] py-2">
+        <div className="flex flex-row flex-wrap gap-6 ">
           {content.map((item) => (
             <div key={uuid()} className="flex flex-row gap-4 items-start">
               {item.svgIcon ? (
                 <div className="svg-icon w-[70px] h-[70px] object-contain">{item.svgIcon}</div>
               ) : item.imageSrc ? (
-                <img alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} />
+                <Image alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} />
               ) : null}
               <div className="flex flex-col">
-                {title && <h2 className="text-lg text-center">{title}</h2>}
-                {item.text && <h2 className={`text-center ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
+                {title && <h2 className="text-lg text-left">{title}</h2>}
+                {item.text && <h2 className={`text-left ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
                 {item.value && (
-                  <p className="text-sm/[2rem] text-center">
+                  <p className="text-sm text-left">
                     {typeof item.value === 'number' ? `${item.value.toFixed(2)} M` : item.value || 'N/A'}
                   </p>
                 )}
@@ -32,7 +33,7 @@ export default function CustomCard({ title, content }: CardProps) {
                 <div className="flex flex-row space-x-3">
                   {item.changeValues.map((delta) => (
                     <div key={uuid()} className="flex flex-col items-center gap-2">
-                      <img src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" />
+                      <Image src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" width={24} height={24} />
                       <div className="text-center">
                         <p className="text-sm font-medium whitespace-nowrap">{delta.text}</p>
                         <p className="text-xs text-gray-600">{delta.timeText}</p>
diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index ca04ee66..809b6595 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -7,19 +7,23 @@ import FcsMacroEconomicAccordion from './FcsMacroEconomicAccordion';
 
 export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
   const isMobile = useMediaQuery('(max-width: 700px)');
-  const foodSecurityAccordion = FcsFoodSecurityAccordion({ countryData });
+  const foodSecurityAccordion = FcsFoodSecurityAccordion({ countryData, countryIso3Data });
   const macroEconomicAccordion = FcsMacroEconomicAccordion({ countryData, countryIso3Data });
 
   return (
     <>
       {!isMobile ? (
-        <div className="absolute w-[370px] left-[108px] top-4 z-9999">
+        <div
+          className="absolute w-[370px] left-[108px] top-4 z-9999 overflow-y-auto max-h-[400px]"
+          style={{ maxHeight: '900px' }} // Adjust height as needed
+        >
           <AccordionContainer
             loading={loading}
             title={countryName ?? undefined}
             accordionModalActive
             maxWidth={600}
             items={foodSecurityAccordion}
+            expandAll
           />
         </div>
       ) : (
diff --git a/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx b/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
index 14fdb62f..f093297f 100644
--- a/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
@@ -1,103 +1,7 @@
-import { Spacer } from '@nextui-org/react';
-
 import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
-
-import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
-import CustomCard from '../../Cards/Card';
-import { LineChart } from '../../Charts/LineChart';
-import CustomInfoCircle from '../../CustomInfoCircle/CustomInfoCircle';
-
-export default function FoodSecurityAccordion({ countryData }: FcsAccordionProps) {
-  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
-  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
-  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
-
-  const FcsFoodSecurityAccordion = [
-    {
-      title: 'Food Security',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-      content: (
-        <div className={cardsWrapperClass}>
-          <CustomCard
-            title="Population"
-            content={[
-              {
-                svgIcon: <Population />,
-                text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
-                altText: 'Population Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-          <CustomCard
-            content={[
-              {
-                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
-                text: 'Population with insufficient food consumption',
-                value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
-                textClass: 'text-xs',
-                changeValues: [
-                  {
-                    imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                    text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                    timeText: '1 Month ago',
-                    altText: 'Delta Icon',
-                  },
-                  {
-                    imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                    text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                    timeText: '3 Month ago',
-                    altText: 'Delta Icon',
-                  },
-                ],
-              },
-            ]}
-          />
-        </div>
-      ),
-    },
-    {
-      title: 'Food Security Trends',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
-      content: (
-        <div>
-          {fcsChartData ? (
-            <LineChart
-              title="Trend of the number of people with insufficient food consumption"
-              data={fcsChartData}
-              expandable
-              xAxisSlider
-              small
-              noPadding
-              transparentBackground
-            />
-          ) : (
-            <p>No data about insufficient food consumption</p>
-          )}
-          <Spacer y={6} />
-          {rcsiChartData ? (
-            <LineChart
-              title="Trend of the number of people using crisis or above crisis food-based coping"
-              data={rcsiChartData}
-              expandable
-              xAxisSlider
-              small
-              noPadding
-              transparentBackground
-            />
-          ) : (
-            <p>No data about crisis or above crisis food-based coping</p>
-          )}
-        </div>
-      ),
-    },
-  ];
+import { getFcsFoodSecurityAccordionItems } from '@/operations/map/FcsFoodSecurityOperations';
 
+export default function FoodSecurityAccordion({ countryData, countryIso3Data }: FcsAccordionProps) {
+  const FcsFoodSecurityAccordion = getFcsFoodSecurityAccordionItems(countryData, countryIso3Data);
   return FcsFoodSecurityAccordion;
 }
diff --git a/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx b/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
index 139adbf9..253855ef 100644
--- a/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
@@ -1,90 +1,7 @@
 import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
-
-import { ReactComponent as Import } from '../../../../public/Images/Import.svg';
-import CustomCard from '../../Cards/Card';
-import { LineChart } from '../../Charts/LineChart';
-import CustomInfoCircle from '../../CustomInfoCircle/CustomInfoCircle';
+import { getMacroEconomicAccordionOperations } from '@/operations/map/FcsMacroEconomicOperations';
 
 export default function MacroEconomicAccordion({ countryData, countryIso3Data }: FcsAccordionProps) {
-  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
-  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
-  const headlineAndFoodInflationChartData =
-    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
-
-  const FcsMacroEconomicAccordion = [
-    {
-      title: 'Macroeconomic',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
-      content: (
-        <div className={cardsWrapperClass}>
-          <CustomCard
-            title="Import Dependency"
-            content={[
-              {
-                svgIcon: <Import />,
-                text: countryData?.importDependency ? `${countryData.importDependency.toFixed(1)}% of Cereals` : 'N/A',
-                altText: 'Import Dependency Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-        </div>
-      ),
-    },
-    {
-      title: 'Currency Exchange',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
-      content: (
-        <div>
-          {currencyExchangeChartData ? (
-            <LineChart data={currencyExchangeChartData} expandable xAxisSlider small noPadding transparentBackground />
-          ) : (
-            <p>No data about currency exchange</p>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: 'Balance of Trade',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
-      content: (
-        <div>
-          {balanceOfTradeChartData ? (
-            <LineChart data={balanceOfTradeChartData} expandable xAxisSlider small noPadding transparentBackground />
-          ) : (
-            <p>No data about balance of trade</p>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: 'Headline and food inflation',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
-      content: (
-        <div>
-          {headlineAndFoodInflationChartData ? (
-            <LineChart
-              data={headlineAndFoodInflationChartData}
-              expandable
-              xAxisSlider
-              barChartSwitch
-              small
-              noPadding
-              transparentBackground
-            />
-          ) : (
-            <p>No data about headline and food inflation</p>
-          )}
-        </div>
-      ),
-    },
-  ];
-
+  const FcsMacroEconomicAccordion = getMacroEconomicAccordionOperations(countryData, countryIso3Data);
   return FcsMacroEconomicAccordion;
 }
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index 47c41aee..e36bbb75 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -2,8 +2,9 @@ import AccordionContainer from '@/components/Accordions/AccordionContainer';
 import IpcAccordionProps from '@/domain/props/IpcAccordionProps';
 
 import IpcFoodSecurityAccordion from './IpcFoodSecurityAccordion';
+import IpcNutritionAccordion from './IpcNutritionAccordion';
 
-export default function IpcAccordion({ countryData, countryName }: IpcAccordionProps) {
+export default function IpcAccordion({ countryData, countryName, countryIso3Data }: IpcAccordionProps) {
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
 
@@ -12,6 +13,7 @@ export default function IpcAccordion({ countryData, countryName }: IpcAccordionP
     deltaOneMonth,
     deltaThreeMonth,
   });
+  const ipcNutrititonAccordion = IpcNutritionAccordion({ countryIso3Data });
 
   return (
     <div className="absolute w-[370px] left-[108px] top-4 z-9999">
@@ -19,7 +21,8 @@ export default function IpcAccordion({ countryData, countryName }: IpcAccordionP
         title={countryName ?? undefined}
         accordionModalActive
         maxWidth={600}
-        items={[ipcFoodSecurityAccordion]}
+        items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
+        expandAll
       />
     </div>
   );
diff --git a/src/components/Map/IpcMap/IpcChoropleth.tsx b/src/components/Map/IpcMap/IpcChoropleth.tsx
index 5dcb627a..431975c1 100644
--- a/src/components/Map/IpcMap/IpcChoropleth.tsx
+++ b/src/components/Map/IpcMap/IpcChoropleth.tsx
@@ -9,7 +9,13 @@ import { IpcChoroplethProps } from '@/domain/props/IpcChoroplethProps';
 import IpcCountryChoropleth from './IpcCountryChoropleth';
 import IpcGlobalChoropleth from './IpcGlobalChoropleth';
 
-function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryName }: IpcChoroplethProps) {
+function IpcChoropleth({
+  countries,
+  countryData,
+  ipcRegionData,
+  selectedCountryName,
+  countryIso3Data,
+}: IpcChoroplethProps) {
   const { data: ipcData } = useIpcQuery(true);
   const { selectedCountryId, setSelectedCountryId } = useSelectedCountryId();
 
@@ -41,6 +47,7 @@ function IpcChoropleth({ countries, countryData, ipcRegionData, selectedCountryN
           regionIpcData={ipcRegionData}
           countryData={countryData}
           countryName={selectedCountryName}
+          countryIso3Data={countryIso3Data}
         />
       )}
     </>
diff --git a/src/components/Map/IpcMap/IpcCountryChoropleth.tsx b/src/components/Map/IpcMap/IpcCountryChoropleth.tsx
index 77284d9b..f342ce09 100644
--- a/src/components/Map/IpcMap/IpcCountryChoropleth.tsx
+++ b/src/components/Map/IpcMap/IpcCountryChoropleth.tsx
@@ -7,13 +7,13 @@ import { IpcChoroplethOperations } from '@/operations/map/IpcChoroplethOperation
 
 import IpcAccordion from './IpcAccordion';
 
-function IpcCountryChoropleth({ regionIpcData, countryData, countryName }: IpcCountryChoroplethProps) {
+function IpcCountryChoropleth({ regionIpcData, countryData, countryName, countryIso3Data }: IpcCountryChoroplethProps) {
   const handleCountryFeature = (feature: Feature<Geometry, GeoJsonProperties>, layer: L.Layer) => {
     IpcChoroplethOperations.attachEventsRegion(feature, layer);
   };
   return (
     <>
-      <IpcAccordion countryData={countryData} countryName={countryName} />
+      <IpcAccordion countryData={countryData} countryName={countryName} countryIso3Data={countryIso3Data} />
       <GeoJSON
         style={IpcChoroplethOperations.ipcCountryStyle}
         data={regionIpcData}
diff --git a/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx b/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
index 601d2d7b..2185b65a 100644
--- a/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
@@ -1,67 +1,15 @@
-import React from 'react';
-
-import CustomCard from '@/components/Cards/Card';
-import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
 import IpcFoodSecurityAccordionProps from '@/domain/props/IpcFoodSecurityAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
-
-import { ReactComponent as FoodConsumption } from '../../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Population } from '../../../../public/Images/Population.svg';
+import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
 
 export default function IpcFoodSecurityAccordion({
   countryData,
   deltaOneMonth,
   deltaThreeMonth,
 }: IpcFoodSecurityAccordionProps) {
-  const hasNoData: boolean =
-    !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
-
-  return {
-    title: 'Food Security',
-    infoIcon: <CustomInfoCircle />,
-    popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-    content: !hasNoData ? (
-      <div className={cardsWrapperClass}>
-        {/* Population Card */}
-        <CustomCard
-          title="Population"
-          content={[
-            {
-              svgIcon: <Population className="w-full h-full object-contain" />,
-              text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
-              altText: 'Population Icon',
-              textClass: 'text-base',
-            },
-          ]}
-        />
-        <CustomCard
-          content={[
-            {
-              svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
-              text: 'Population with insufficient food consumption',
-              value: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
-              textClass: 'text-xs',
-              changeValues: [
-                {
-                  imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                  text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                  timeText: '1 Month ago',
-                  altText: 'Delta Icon',
-                },
-                {
-                  imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                  text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                  timeText: '3 Month ago',
-                  altText: 'Delta Icon',
-                },
-              ],
-            },
-          ]}
-        />
-      </div>
-    ) : (
-      <p>No data about food security</p>
-    ),
-  };
+  const foodSecurityAccordion = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
+    countryData,
+    deltaOneMonth,
+    deltaThreeMonth
+  );
+  return foodSecurityAccordion;
 }
diff --git a/src/components/Map/IpcMap/IpcNutritionAccordion.tsx b/src/components/Map/IpcMap/IpcNutritionAccordion.tsx
new file mode 100644
index 00000000..7efa4e2d
--- /dev/null
+++ b/src/components/Map/IpcMap/IpcNutritionAccordion.tsx
@@ -0,0 +1,7 @@
+import IpcNutritionAccordionProps from '@/domain/props/IpcNutritionAccordionProps';
+import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
+
+export default function IpcNutritionAccordion({ countryIso3Data }: IpcNutritionAccordionProps) {
+  const nutritionAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordion(countryIso3Data);
+  return nutritionAccordion;
+}
diff --git a/src/components/Map/Map.tsx b/src/components/Map/Map.tsx
index 01db6a9c..2ea3c0c3 100644
--- a/src/components/Map/Map.tsx
+++ b/src/components/Map/Map.tsx
@@ -173,6 +173,7 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           countryData={countryData}
           ipcRegionData={ipcRegionData}
           selectedCountryName={selectedCountryName}
+          countryIso3Data={countryIso3Data}
         />
       )}
 
diff --git a/src/domain/entities/cards/CardContent.ts b/src/domain/entities/cards/CardContent.ts
index 62dd7462..a593d4a9 100644
--- a/src/domain/entities/cards/CardContent.ts
+++ b/src/domain/entities/cards/CardContent.ts
@@ -1,7 +1,7 @@
 export interface CardContent {
   imageSrc?: string;
   svgIcon?: React.ReactNode;
-  text?: string;
+  text?: React.ReactNode;
   value?: string | number;
   content?: React.ReactNode;
   timeText?: string;
diff --git a/src/domain/props/IpcAccordionProps.tsx b/src/domain/props/IpcAccordionProps.tsx
index e60f69a7..78e96cf9 100644
--- a/src/domain/props/IpcAccordionProps.tsx
+++ b/src/domain/props/IpcAccordionProps.tsx
@@ -1,6 +1,8 @@
 import { CountryData } from '../entities/country/CountryData';
+import { CountryIso3Data } from '../entities/country/CountryIso3Data';
 
 export default interface IpcAccordionProps {
   countryData: CountryData | undefined;
   countryName?: string;
+  countryIso3Data: CountryIso3Data | undefined;
 }
diff --git a/src/domain/props/IpcChoroplethProps.tsx b/src/domain/props/IpcChoroplethProps.tsx
index 28728fa1..8f87d388 100644
--- a/src/domain/props/IpcChoroplethProps.tsx
+++ b/src/domain/props/IpcChoroplethProps.tsx
@@ -3,10 +3,13 @@ import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 import { CountryData } from '@/domain/entities/country/CountryData.ts';
 import { CountryMapDataWrapper } from '@/domain/entities/country/CountryMapData';
 
+import { CountryIso3Data } from '../entities/country/CountryIso3Data';
+
 export interface IpcChoroplethProps {
   countries: CountryMapDataWrapper;
   handleBackButtonClick?: () => void;
   countryData?: CountryData;
   ipcRegionData?: FeatureCollection<Geometry, GeoJsonProperties>;
   selectedCountryName?: string;
+  countryIso3Data: CountryIso3Data | undefined;
 }
diff --git a/src/domain/props/IpcCountryChoroplethProps.tsx b/src/domain/props/IpcCountryChoroplethProps.tsx
index 4ecd7366..9b66d19b 100644
--- a/src/domain/props/IpcCountryChoroplethProps.tsx
+++ b/src/domain/props/IpcCountryChoroplethProps.tsx
@@ -1,9 +1,11 @@
 import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
 
 import { CountryData } from '../entities/country/CountryData';
+import { CountryIso3Data } from '../entities/country/CountryIso3Data';
 
 export default interface IpcCountryChoroplethProps {
   regionIpcData: FeatureCollection<Geometry, GeoJsonProperties>;
   countryData: CountryData | undefined;
   countryName?: string;
+  countryIso3Data: CountryIso3Data | undefined;
 }
diff --git a/src/domain/props/IpcNutritionAccordionProps.tsx b/src/domain/props/IpcNutritionAccordionProps.tsx
new file mode 100644
index 00000000..a3febeae
--- /dev/null
+++ b/src/domain/props/IpcNutritionAccordionProps.tsx
@@ -0,0 +1,5 @@
+import { CountryIso3Data } from '../entities/country/CountryIso3Data';
+
+export default interface IpcFoodSecurityAccordionProps {
+  countryIso3Data: CountryIso3Data | undefined;
+}
diff --git a/src/operations/map/FcsAccordionOperations.tsx b/src/operations/map/FcsAccordionOperations.tsx
index 7a86f439..fb5c837d 100644
--- a/src/operations/map/FcsAccordionOperations.tsx
+++ b/src/operations/map/FcsAccordionOperations.tsx
@@ -104,6 +104,18 @@ export class FcsAccordionOperations {
     };
   }
 
+  static getNutritionData(countryIso3Data?: CountryIso3Data) {
+    if (!countryIso3Data?.nutrition) {
+      return null;
+    }
+
+    const { wasting, stunting } = countryIso3Data.nutrition;
+    return {
+      Acute: wasting || null,
+      Chronic: stunting || null,
+    };
+  }
+
   static getFoodSecutriyPopoverInfo(): ReactNode {
     return (
       <div>
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
new file mode 100644
index 00000000..3e1f0dad
--- /dev/null
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -0,0 +1,151 @@
+// FcsAccordionOperations.js
+import { Spacer } from '@nextui-org/react';
+
+import CustomCard from '@/components/Cards/Card';
+import { LineChart } from '@/components/Charts/LineChart';
+import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
+import { CountryData } from '@/domain/entities/country/CountryData';
+import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodConsumption.svg';
+import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
+import { ReactComponent as Population } from '../../../public/Images/Population.svg';
+import { FcsAccordionOperations } from './FcsAccordionOperations';
+
+export function getFcsFoodSecurityAccordionItems(
+  countryData: CountryData | undefined,
+  countryIso3Data: CountryIso3Data | undefined
+) {
+  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
+  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
+  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
+  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
+  const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
+  return [
+    {
+      title: 'Food Security',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+      content: (
+        <div className={cardsWrapperClass}>
+          <CustomCard
+            title="Population"
+            content={[
+              {
+                svgIcon: <Population />,
+                text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
+                altText: 'Population Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+          <CustomCard
+            content={[
+              {
+                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+                text: 'Population with insufficient food consumption',
+                value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
+                textClass: 'text-xs',
+                changeValues: [
+                  {
+                    imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '1 Month ago',
+                    altText: 'Delta Icon',
+                  },
+                  {
+                    imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '3 Months ago',
+                    altText: 'Delta Icon',
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: 'Nutrition',
+      infoIcon: <CustomInfoCircle />,
+      content: (
+        <div className={cardsWrapperClass}>
+          <CustomCard
+            title="Acute Nutrition"
+            content={[
+              {
+                svgIcon: <Nutrition />,
+                text: nutritionData?.Acute ? (
+                  <>
+                    <span className="text-xl">{`${nutritionData.Acute} %`}</span>
+                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
+                  </>
+                ) : (
+                  'N/A'
+                ),
+                altText: 'Population Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+          <CustomCard
+            title="Chronic Nutrition"
+            content={[
+              {
+                svgIcon: <Nutrition className="w-[70px] h-[60px] object-contain" />,
+                text: nutritionData?.Chronic ? (
+                  <>
+                    <span className="text-xl">{`${nutritionData.Chronic} %`}</span>
+                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
+                  </>
+                ) : (
+                  'N/A'
+                ),
+                altText: 'Population Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: 'Food Security Trends',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
+      content: (
+        <div>
+          {fcsChartData ? (
+            <LineChart
+              title="Trend of the number of people with insufficient food consumption"
+              data={fcsChartData}
+              expandable
+              xAxisSlider
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about insufficient food consumption</p>
+          )}
+          <Spacer y={6} />
+          {rcsiChartData ? (
+            <LineChart
+              title="Trend of the number of people using crisis or above crisis food-based coping"
+              data={rcsiChartData}
+              expandable
+              xAxisSlider
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about crisis or above crisis food-based coping</p>
+          )}
+        </div>
+      ),
+    },
+  ];
+}
diff --git a/src/operations/map/FcsMacroEconomicOperations.tsx b/src/operations/map/FcsMacroEconomicOperations.tsx
new file mode 100644
index 00000000..80f6f505
--- /dev/null
+++ b/src/operations/map/FcsMacroEconomicOperations.tsx
@@ -0,0 +1,93 @@
+// FcsAccordionOperations.js
+import CustomCard from '@/components/Cards/Card';
+import { LineChart } from '@/components/Charts/LineChart';
+import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
+import { CountryData } from '@/domain/entities/country/CountryData';
+import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as Import } from '../../../public/Images/Import.svg';
+import { FcsAccordionOperations } from './FcsAccordionOperations';
+
+export function getMacroEconomicAccordionOperations(
+  countryData: CountryData | undefined,
+  countryIso3Data: CountryIso3Data | undefined
+) {
+  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
+  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
+  const headlineAndFoodInflationChartData =
+    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
+
+  return [
+    {
+      title: 'Macroeconomic',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
+      content: (
+        <div className={cardsWrapperClass}>
+          <CustomCard
+            title="Import Dependency"
+            content={[
+              {
+                svgIcon: <Import />,
+                text: countryData?.importDependency ? `${countryData.importDependency.toFixed(1)}% of Cereals` : 'N/A',
+                altText: 'Import Dependency Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+        </div>
+      ),
+    },
+    {
+      title: 'Currency Exchange',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
+      content: (
+        <div>
+          {currencyExchangeChartData ? (
+            <LineChart data={currencyExchangeChartData} expandable xAxisSlider small noPadding transparentBackground />
+          ) : (
+            <p>No data about currency exchange</p>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'Balance of Trade',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
+      content: (
+        <div>
+          {balanceOfTradeChartData ? (
+            <LineChart data={balanceOfTradeChartData} expandable xAxisSlider small noPadding transparentBackground />
+          ) : (
+            <p>No data about balance of trade</p>
+          )}
+        </div>
+      ),
+    },
+    {
+      title: 'Headline and food inflation',
+      infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
+      content: (
+        <div>
+          {headlineAndFoodInflationChartData ? (
+            <LineChart
+              data={headlineAndFoodInflationChartData}
+              expandable
+              xAxisSlider
+              barChartSwitch
+              small
+              noPadding
+              transparentBackground
+            />
+          ) : (
+            <p>No data about headline and food inflation</p>
+          )}
+        </div>
+      ),
+    },
+  ];
+}
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
new file mode 100644
index 00000000..fce7ca3d
--- /dev/null
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+
+import CustomCard from '@/components/Cards/Card';
+import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
+import { CountryData } from '@/domain/entities/country/CountryData';
+import { CountryIso3Data } from '@/domain/entities/country/CountryIso3Data';
+import { cardsWrapperClass } from '@/utils/primitives';
+
+import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodConsumption.svg';
+import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
+import { ReactComponent as Population } from '../../../public/Images/Population.svg';
+import { FcsAccordionOperations } from './FcsAccordionOperations';
+
+export const IpcFoodSecurityAccordionOperations = {
+  getFoodSecurityAccordionItems: (
+    countryData: CountryData | undefined,
+    deltaOneMonth: number | null,
+    deltaThreeMonth: number | null
+  ) => {
+    const hasNoData: boolean =
+      !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
+
+    return {
+      title: 'Food Security',
+      infoIcon: <CustomInfoCircle />,
+      content: !hasNoData ? (
+        <div className={cardsWrapperClass}>
+          {/* Population Card */}
+          <CustomCard
+            title="Population"
+            content={[
+              {
+                svgIcon: <Population className="w-full h-full object-contain" />,
+                text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
+                altText: 'Population Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+          {/* Food Consumption Card */}
+          <CustomCard
+            content={[
+              {
+                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+                text: 'Population with insufficient food consumption',
+                value: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
+                textClass: 'text-xs',
+                changeValues: [
+                  {
+                    imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '1 Month ago',
+                    altText: 'Delta Icon',
+                  },
+                  {
+                    imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                    text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                    timeText: '3 Months ago',
+                    altText: 'Delta Icon',
+                  },
+                ],
+              },
+            ]}
+          />
+        </div>
+      ) : (
+        <p>No data about food security</p>
+      ),
+    };
+  },
+  getNutritionAccordion: (countryIso3Data: CountryIso3Data | undefined) => {
+    return {
+      title: 'Nutrition',
+      infoIcon: <CustomInfoCircle />,
+      content: (
+        <div className={cardsWrapperClass}>
+          {/* Acute Nutrition Card */}
+          <CustomCard
+            title="Acute Nutrition"
+            content={[
+              {
+                svgIcon: <Nutrition />,
+                text: FcsAccordionOperations.getNutritionData(countryIso3Data)?.Acute ? (
+                  <>
+                    <span className="text-xl">{`${FcsAccordionOperations.getNutritionData(countryIso3Data)?.Acute} %`}</span>
+                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
+                  </>
+                ) : (
+                  'N/A'
+                ),
+                altText: 'Acute Nutrition Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+          {/* Chronic Nutrition Card */}
+          <CustomCard
+            title="Chronic Nutrition"
+            content={[
+              {
+                svgIcon: <Nutrition className="w-[70px] h-[60px] object-contain" />,
+                text: FcsAccordionOperations.getNutritionData(countryIso3Data)?.Chronic ? (
+                  <>
+                    <span className="text-xl">{`${FcsAccordionOperations.getNutritionData(countryIso3Data)?.Chronic} %`}</span>
+                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
+                  </>
+                ) : (
+                  'N/A'
+                ),
+                altText: 'Chronic Nutrition Icon',
+                textClass: 'text-base',
+              },
+            ]}
+          />
+        </div>
+      ),
+    };
+  },
+};
diff --git a/src/operations/map/MapOperations.tsx b/src/operations/map/MapOperations.tsx
index cba69e42..1fd1eaa2 100644
--- a/src/operations/map/MapOperations.tsx
+++ b/src/operations/map/MapOperations.tsx
@@ -51,7 +51,7 @@ export class MapOperations {
         setCountryData(newCountryData);
       }
 
-      if (selectedMapType === GlobalInsight.FOOD) {
+      if (selectedMapType === GlobalInsight.FOOD || selectedMapType === GlobalInsight.IPC) {
         const newCountryIso3Data = await countryRepository.getCountryIso3Data(selectedCountryData.properties.iso3);
         setCountryIso3Data(newCountryIso3Data);
       }
diff --git a/src/utils/primitives.ts b/src/utils/primitives.ts
index 48ed96a9..95e98dcc 100644
--- a/src/utils/primitives.ts
+++ b/src/utils/primitives.ts
@@ -44,4 +44,4 @@ export const subtitle = tv({
   },
 });
 
-export const cardsWrapperClass = 'cards-wrapper flex flex-row gap-4 justify-center flex-wrap';
+export const cardsWrapperClass = 'cards-wrapper flex flex-row gap-1 justify-center flex-wrap';

From de66d732887c19a585caa69c6d02407ec182830b Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 08:07:29 +0100
Subject: [PATCH 03/18] feat: downsize the accordions, add flex to population
 card

---
 public/Images/Nutrition.svg                   | 16 +++-
 src/components/Cards/Card.tsx                 | 24 +++---
 src/components/Map/FcsMap/FcsAccordion.tsx    |  7 +-
 src/components/Map/IpcMap/IpcAccordion.tsx    |  6 +-
 .../map/FcsFoodSecurityOperations.tsx         | 82 +++++++++---------
 .../map/IpcFoodSecurityOperations.tsx         | 86 +++++++++----------
 6 files changed, 113 insertions(+), 108 deletions(-)

diff --git a/public/Images/Nutrition.svg b/public/Images/Nutrition.svg
index 1dc24e38..e84cd80d 100644
--- a/public/Images/Nutrition.svg
+++ b/public/Images/Nutrition.svg
@@ -1,5 +1,13 @@
-<svg width="80" height="100" viewBox="0 0 80 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M58.096 17.0722C61.0596 17.0722 63.3986 14.5702 63.3986 11.4766C63.3986 8.40965 61.0596 5.91211 58.096 5.91211C55.1582 5.91211 52.7638 8.40965 52.7638 11.4766C52.7638 14.5702 55.1582 17.0722 58.096 17.0722ZM55.112 64.0011C56.4025 64.0011 57.4236 62.9351 57.4236 61.6168V42.7591C57.4236 42.3782 57.7289 42.0592 58.096 42.0592C58.4889 42.0592 58.7668 42.3782 58.7668 42.7591V61.6168C58.7668 62.9351 59.7876 64.0011 61.0802 64.0011C62.3434 64.0011 63.3919 62.9351 63.3919 61.6168V30.8654C63.3919 30.4822 63.6954 30.1675 64.0603 30.1675C64.4529 30.1675 64.7564 30.4822 64.7564 30.8654V40.9156C64.7564 42.1408 65.6606 43.0848 66.8343 43.0848C67.9762 43.0848 68.9082 42.1408 68.9082 40.9156V29.7086C68.9082 24.0799 64.9536 20.2704 59.6412 20.2704H56.5489C51.2365 20.2704 47.2819 24.0799 47.2819 29.7086V40.9156C47.2819 42.1408 48.2415 43.0848 49.3576 43.0848C50.4996 43.0848 51.4593 42.1408 51.4593 40.9156V30.8654C51.4593 30.4822 51.735 30.1675 52.1277 30.1675C52.4947 30.1675 52.7982 30.4822 52.7982 30.8654V61.6168C52.7982 62.9351 53.8214 64.0011 55.112 64.0011Z" fill="white"/>
-<path d="M37.4445 69.9399C37.8697 69.9399 38.1914 69.6085 38.1914 69.1936V0.775438C38.1914 0.360258 37.8697 0 37.4445 0C37.0467 0 36.7253 0.360258 36.7253 0.775438V69.1936C36.7253 69.6085 37.0467 69.9399 37.4445 69.9399Z" fill="white"/>
-<path d="M14.9134 17.0722C17.8512 17.0722 20.2437 14.5702 20.2437 11.4766C20.2437 8.40965 17.8512 5.91211 14.9134 5.91211C11.95 5.91211 9.61078 8.40965 9.61078 11.4766C9.61078 14.5702 11.95 17.0722 14.9134 17.0722ZM11.9313 64.0011C13.2218 64.0011 14.2408 62.9351 14.2408 61.6168V50.8984C14.2408 50.5152 14.5207 50.1981 14.9134 50.1981C15.2784 50.1981 15.5839 50.5152 15.5839 50.8984V61.6168C15.5839 62.9351 16.6049 64.0011 17.8955 64.0011C19.1585 64.0011 20.2092 62.9351 20.2092 61.6168V50.8984H24.7476C25.5959 50.8984 26.0563 50.0856 25.7466 49.0002L20.4475 31.2666C20.0867 30.1632 21.4492 29.7222 21.8121 30.8567L24.9518 41.3887C25.9686 44.8063 30.7028 43.4699 29.684 40.0189L26.7566 30.2383C24.8632 23.8158 22.4509 20.1239 15.5839 20.1239H14.2408C7.37382 20.1239 4.93592 23.8158 3.04255 30.2383L0.14276 40.0189C-0.876149 43.4699 3.85816 44.8063 4.87498 41.3887L8.01463 30.8567C8.34992 29.7222 9.71034 30.1632 9.37922 31.2666L4.07809 49.0002C3.77047 50.0856 4.22882 50.8984 5.07918 50.8984H9.6176V61.6168C9.6176 62.9351 10.6386 64.0011 11.9313 64.0011Z" fill="white"/>
+<?xml version="1.0" encoding="UTF-8"?>
+<!--Generator: Apple Native CoreSVG 326-->
+<!DOCTYPE svg
+PUBLIC "-//W3C//DTD SVG 1.1//EN"
+       "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18.3025 17.332">
+ <g>
+  <rect height="17.332" opacity="0" width="18.3025" x="0" y="0"/>
+  <path d="M15.1284 4.21836C15.8963 4.21836 16.4981 3.59834 16.4981 2.82979C16.4981 2.06191 15.8963 1.45098 15.1284 1.45098C14.3599 1.45098 13.7392 2.06191 13.7392 2.82979C13.7392 3.59834 14.3599 4.21836 15.1284 4.21836ZM14.3446 15.8631C14.6808 15.8631 14.9472 15.5967 14.9472 15.2606L14.9472 10.598C14.9472 10.4976 15.028 10.4174 15.1284 10.4174C15.2274 10.4174 15.3083 10.4976 15.3083 10.598L15.3083 15.2606C15.3083 15.5967 15.5754 15.8631 15.9024 15.8631C16.2288 15.8631 16.5043 15.5967 16.5043 15.2606L16.5043 7.63936C16.5043 7.53897 16.5845 7.45948 16.6849 7.45948C16.7846 7.45948 16.8641 7.53897 16.8641 7.63936L16.8641 10.1356C16.8641 10.4424 17.1019 10.6711 17.4087 10.6711C17.7051 10.6711 17.9429 10.4424 17.9429 10.1356L17.9429 7.35342C17.9429 5.9544 16.9184 5.01006 15.537 5.01006L14.7185 5.01006C13.328 5.01006 12.3035 5.9544 12.3035 7.35342L12.3035 10.1356C12.3035 10.4424 12.5504 10.6711 12.8475 10.6711C13.1445 10.6711 13.3914 10.4424 13.3914 10.1356L13.3914 7.63936C13.3914 7.53897 13.4716 7.45948 13.5706 7.45948C13.6619 7.45948 13.7421 7.53897 13.7421 7.63936L13.7421 15.2606C13.7421 15.5967 14.0092 15.8631 14.3446 15.8631Z" fill="white"/>
+  <path d="M9.73114 17.3223C9.85907 17.3223 9.95292 17.2291 9.95292 17.1109L9.95292 0.211332C9.95292 0.0931656 9.85907 0 9.73114 0C9.61297 0 9.51844 0.0931656 9.51844 0.211332L9.51844 17.1109C9.51844 17.2291 9.61297 17.3223 9.73114 17.3223Z" fill="white"/>
+  <path d="M3.86219 4.21836C4.63074 4.21836 5.25076 3.59834 5.25076 2.82979C5.25076 2.06191 4.63074 1.45098 3.86219 1.45098C3.09432 1.45098 2.48269 2.06191 2.48269 2.82979C2.48269 3.59834 3.09432 4.21836 3.86219 4.21836ZM3.07908 15.8631C3.41521 15.8631 3.68162 15.5967 3.68162 15.2606L3.68162 12.5938C3.68162 12.494 3.76248 12.4139 3.86219 12.4139C3.96189 12.4139 4.04275 12.494 4.04275 12.5938L4.04275 15.2606C4.04275 15.5967 4.30916 15.8631 4.64529 15.8631C4.96258 15.8631 5.23875 15.5967 5.23875 15.2606L5.23875 12.5938L6.3908 12.5938C6.62772 12.5938 6.73992 12.3791 6.66746 12.1065L5.29822 7.73633C5.20897 7.45811 5.55828 7.34864 5.64822 7.63663L6.46424 10.237C6.72928 11.0789 7.95203 10.7462 7.68631 9.89522L6.93026 7.48106C6.43582 5.89922 5.81903 4.97373 4.04275 4.97373L3.68162 4.97373C1.90535 4.97373 1.27947 5.89922 0.794119 7.48106L0.03738 9.89522C-0.227659 10.7462 0.994411 11.0789 1.26013 10.237L2.07615 7.63663C2.15701 7.34864 2.51541 7.45811 2.42615 7.73633L1.05623 12.1065C0.975369 12.3791 1.09598 12.5938 1.33357 12.5938L2.48562 12.5938L2.48562 15.2606C2.48562 15.5967 2.74363 15.8631 3.07908 15.8631Z" fill="white"/>
+ </g>
 </svg>
diff --git a/src/components/Cards/Card.tsx b/src/components/Cards/Card.tsx
index b21be237..d316120e 100644
--- a/src/components/Cards/Card.tsx
+++ b/src/components/Cards/Card.tsx
@@ -9,18 +9,17 @@ import { CardProps } from '@/domain/props/CardProps';
 
 export default function CustomCard({ title, content }: CardProps) {
   return (
-    <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white">
-      <CardBody className="flex flex-col items-center justify-center overflow-hidden max-h-[300px] py-2">
+    <Card className="w-fit h-auto min-w-[200px] justify-evenly m-2.5 dark:primary white:bg-white flex-grow">
+      <CardBody className="flex flex-col items-left justify-center overflow-hidden max-h-[300px] py-2">
         <div className="flex flex-row flex-wrap gap-6 ">
           {content.map((item) => (
-            <div key={uuid()} className="flex flex-row gap-4 items-start">
-              {item.svgIcon ? (
-                <div className="svg-icon w-[70px] h-[70px] object-contain">{item.svgIcon}</div>
-              ) : item.imageSrc ? (
-                <Image alt={item.altText || ''} className="w-[70px] h-[70px] -mt-4" src={item.imageSrc} />
-              ) : null}
+            <div key={uuid()} className="flex flex-row gap-2 items-start">
+              {item.svgIcon && <div className="svg-icon w-[50px] h-[50px]">{item.svgIcon}</div>}
+              {!item.svgIcon && item.imageSrc && (
+                <Image alt={item.altText || ''} className="w-[50px] h-[50px] -mt-4" src={item.imageSrc} />
+              )}
               <div className="flex flex-col">
-                {title && <h2 className="text-lg text-left">{title}</h2>}
+                {title && <h2 className="text-sm text-left">{title}</h2>}
                 {item.text && <h2 className={`text-left ${item.textClass || 'text-xs'}`}>{item.text}</h2>}
                 {item.value && (
                   <p className="text-sm text-left">
@@ -28,14 +27,13 @@ export default function CustomCard({ title, content }: CardProps) {
                   </p>
                 )}
               </div>
-              {/* Additional Content (Time-based data) */}
               {item.changeValues && (
-                <div className="flex flex-row space-x-3">
+                <div className="flex flex-row space-x-1">
                   {item.changeValues.map((delta) => (
-                    <div key={uuid()} className="flex flex-col items-center gap-2">
+                    <div key={uuid()} className="flex flex-col items-center gap-1">
                       <Image src={delta.imageSrc} alt={delta.altText} className="w-6 h-6" width={24} height={24} />
                       <div className="text-center">
-                        <p className="text-sm font-medium whitespace-nowrap">{delta.text}</p>
+                        <p className="text-xs font-medium whitespace-nowrap">{delta.text}</p>
                         <p className="text-xs text-gray-600">{delta.timeText}</p>
                       </div>
                     </div>
diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 809b6595..aed7b178 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -13,10 +13,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
   return (
     <>
       {!isMobile ? (
-        <div
-          className="absolute w-[370px] left-[108px] top-4 z-9999 overflow-y-auto max-h-[400px]"
-          style={{ maxHeight: '900px' }} // Adjust height as needed
-        >
+        <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
           <AccordionContainer
             loading={loading}
             title={countryName ?? undefined}
@@ -38,7 +35,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
         </div>
       )}
       {!isMobile && (
-        <div className="absolute w-[370px] right-[1rem] inset-y-20 z-9999">
+        <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
           <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
         </div>
       )}
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index e36bbb75..62fdbb8e 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -1,5 +1,6 @@
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
 import IpcAccordionProps from '@/domain/props/IpcAccordionProps';
+import { useMediaQuery } from '@/utils/resolution.ts';
 
 import IpcFoodSecurityAccordion from './IpcFoodSecurityAccordion';
 import IpcNutritionAccordion from './IpcNutritionAccordion';
@@ -14,15 +15,16 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
     deltaThreeMonth,
   });
   const ipcNutrititonAccordion = IpcNutritionAccordion({ countryIso3Data });
+  const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
-    <div className="absolute w-[370px] left-[108px] top-4 z-9999">
+    <div className="absolute w-[300px] left-[108px] top-4 z-9999">
       <AccordionContainer
         title={countryName ?? undefined}
         accordionModalActive
         maxWidth={600}
         items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
-        expandAll
+        expandAll={!isMobile}
       />
     </div>
   );
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index 3e1f0dad..4b27a86e 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -43,7 +43,7 @@ export function getFcsFoodSecurityAccordionItems(
           <CustomCard
             content={[
               {
-                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+                svgIcon: <FoodConsumption className="w-[50px] h-[50px] object-contain" />,
                 text: 'Population with insufficient food consumption',
                 value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
                 textClass: 'text-xs',
@@ -70,46 +70,46 @@ export function getFcsFoodSecurityAccordionItems(
     {
       title: 'Nutrition',
       infoIcon: <CustomInfoCircle />,
-      content: (
-        <div className={cardsWrapperClass}>
-          <CustomCard
-            title="Acute Nutrition"
-            content={[
-              {
-                svgIcon: <Nutrition />,
-                text: nutritionData?.Acute ? (
-                  <>
-                    <span className="text-xl">{`${nutritionData.Acute} %`}</span>
-                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
-                  </>
-                ) : (
-                  'N/A'
-                ),
-                altText: 'Population Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-          <CustomCard
-            title="Chronic Nutrition"
-            content={[
-              {
-                svgIcon: <Nutrition className="w-[70px] h-[60px] object-contain" />,
-                text: nutritionData?.Chronic ? (
-                  <>
-                    <span className="text-xl">{`${nutritionData.Chronic} %`}</span>
-                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
-                  </>
-                ) : (
-                  'N/A'
-                ),
-                altText: 'Population Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-        </div>
-      ),
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+      content:
+        nutritionData && (nutritionData.Acute != null || nutritionData.Chronic != null) ? (
+          <div className={cardsWrapperClass}>
+            {nutritionData.Acute != null && (
+              <CustomCard
+                title="Acute Nutrition"
+                content={[
+                  {
+                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    text: (
+                      <>
+                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
+                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
+                      </>
+                    ),
+                  },
+                ]}
+              />
+            )}
+            {nutritionData.Chronic != null && (
+              <CustomCard
+                title="Chronic Nutrition"
+                content={[
+                  {
+                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    text: (
+                      <>
+                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
+                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
+                      </>
+                    ),
+                  },
+                ]}
+              />
+            )}
+          </div>
+        ) : (
+          <p>No data about Nutrition is available</p>
+        ),
     },
     {
       title: 'Food Security Trends',
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index fce7ca3d..58000c4a 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -23,6 +23,7 @@ export const IpcFoodSecurityAccordionOperations = {
     return {
       title: 'Food Security',
       infoIcon: <CustomInfoCircle />,
+      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
       content: !hasNoData ? (
         <div className={cardsWrapperClass}>
           {/* Population Card */}
@@ -41,7 +42,7 @@ export const IpcFoodSecurityAccordionOperations = {
           <CustomCard
             content={[
               {
-                svgIcon: <FoodConsumption className="w-[70px] h-[70px] object-contain" />,
+                svgIcon: <FoodConsumption className="w-[50px] h-[50px] object-contain" />,
                 text: 'Population with insufficient food consumption',
                 value: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
                 textClass: 'text-xs',
@@ -69,51 +70,50 @@ export const IpcFoodSecurityAccordionOperations = {
     };
   },
   getNutritionAccordion: (countryIso3Data: CountryIso3Data | undefined) => {
+    const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
+
     return {
       title: 'Nutrition',
       infoIcon: <CustomInfoCircle />,
-      content: (
-        <div className={cardsWrapperClass}>
-          {/* Acute Nutrition Card */}
-          <CustomCard
-            title="Acute Nutrition"
-            content={[
-              {
-                svgIcon: <Nutrition />,
-                text: FcsAccordionOperations.getNutritionData(countryIso3Data)?.Acute ? (
-                  <>
-                    <span className="text-xl">{`${FcsAccordionOperations.getNutritionData(countryIso3Data)?.Acute} %`}</span>
-                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
-                  </>
-                ) : (
-                  'N/A'
-                ),
-                altText: 'Acute Nutrition Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-          {/* Chronic Nutrition Card */}
-          <CustomCard
-            title="Chronic Nutrition"
-            content={[
-              {
-                svgIcon: <Nutrition className="w-[70px] h-[60px] object-contain" />,
-                text: FcsAccordionOperations.getNutritionData(countryIso3Data)?.Chronic ? (
-                  <>
-                    <span className="text-xl">{`${FcsAccordionOperations.getNutritionData(countryIso3Data)?.Chronic} %`}</span>
-                    <span className="text-sm text-gray-400 ml-1">of children (under 5)</span>
-                  </>
-                ) : (
-                  'N/A'
-                ),
-                altText: 'Chronic Nutrition Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-        </div>
-      ),
+      content:
+        nutritionData && (nutritionData.Acute != null || nutritionData.Chronic != null) ? (
+          <div className={cardsWrapperClass}>
+            {nutritionData.Acute != null && (
+              <CustomCard
+                title="Acute Nutrition"
+                content={[
+                  {
+                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    text: (
+                      <>
+                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
+                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
+                      </>
+                    ),
+                  },
+                ]}
+              />
+            )}
+            {nutritionData.Chronic != null && (
+              <CustomCard
+                title="Chronic Nutrition"
+                content={[
+                  {
+                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    text: (
+                      <>
+                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
+                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
+                      </>
+                    ),
+                  },
+                ]}
+              />
+            )}
+          </div>
+        ) : (
+          <p>No data about Nutrition is available</p>
+        ),
     };
   },
 };

From ab1fa4a947ff9159d4337f91140f98f754d7241b Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 08:18:34 +0100
Subject: [PATCH 04/18] fix: reduce the size of nutrition svg

---
 src/operations/map/FcsFoodSecurityOperations.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index 4b27a86e..fcbde7ef 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -95,7 +95,7 @@ export function getFcsFoodSecurityAccordionItems(
                 title="Chronic Nutrition"
                 content={[
                   {
-                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    svgIcon: <Nutrition className="w-[30px] h-[30px] object-contain" />,
                     text: (
                       <>
                         <span className="text-base">{`${nutritionData.Chronic} %`}</span>

From 38749c527d135be44c9b64de28da1a9e66983de4 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 08:54:00 +0100
Subject: [PATCH 05/18] fix: fix macroAccordion lineChart

---
 src/operations/map/FcsMacroEconomicOperations.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/operations/map/FcsMacroEconomicOperations.tsx b/src/operations/map/FcsMacroEconomicOperations.tsx
index 80f6f505..d246268e 100644
--- a/src/operations/map/FcsMacroEconomicOperations.tsx
+++ b/src/operations/map/FcsMacroEconomicOperations.tsx
@@ -46,7 +46,7 @@ export function getMacroEconomicAccordionOperations(
       content: (
         <div>
           {currencyExchangeChartData ? (
-            <LineChart data={currencyExchangeChartData} expandable xAxisSlider small noPadding transparentBackground />
+            <LineChart data={currencyExchangeChartData} small noPadding transparentBackground />
           ) : (
             <p>No data about currency exchange</p>
           )}
@@ -60,7 +60,7 @@ export function getMacroEconomicAccordionOperations(
       content: (
         <div>
           {balanceOfTradeChartData ? (
-            <LineChart data={balanceOfTradeChartData} expandable xAxisSlider small noPadding transparentBackground />
+            <LineChart data={balanceOfTradeChartData} small noPadding transparentBackground />
           ) : (
             <p>No data about balance of trade</p>
           )}
@@ -74,15 +74,7 @@ export function getMacroEconomicAccordionOperations(
       content: (
         <div>
           {headlineAndFoodInflationChartData ? (
-            <LineChart
-              data={headlineAndFoodInflationChartData}
-              expandable
-              xAxisSlider
-              barChartSwitch
-              small
-              noPadding
-              transparentBackground
-            />
+            <LineChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
           ) : (
             <p>No data about headline and food inflation</p>
           )}

From 1b4750ac0f2b4e33507dd45f5dfc3303d9bb0e67 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 09:18:21 +0100
Subject: [PATCH 06/18] fix: fix after merge

---
 src/components/Map/FcsAccordion.tsx           | 173 ------------------
 .../Map/{ => FcsMap}/FcsRegionTooltip.tsx     |   2 +-
 .../map/FcsCountryChoroplethOperations.tsx    |   2 +-
 3 files changed, 2 insertions(+), 175 deletions(-)
 delete mode 100644 src/components/Map/FcsAccordion.tsx
 rename src/components/Map/{ => FcsMap}/FcsRegionTooltip.tsx (97%)

diff --git a/src/components/Map/FcsAccordion.tsx b/src/components/Map/FcsAccordion.tsx
deleted file mode 100644
index b7a32e8a..00000000
--- a/src/components/Map/FcsAccordion.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { Spacer } from '@nextui-org/react';
-
-import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { FcsAccordionOperations } from '@/operations/map/FcsAccordionOperations';
-import { cardsWrapperClass } from '@/utils/primitives';
-
-import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodConsumption.svg';
-import { ReactComponent as Import } from '../../../public/Images/Import.svg';
-import { ReactComponent as Population } from '../../../public/Images/Population.svg';
-import AccordionContainer from '../Accordions/AccordionContainer';
-import CustomCard from '../Cards/Card';
-import { LineChart } from '../Charts/LineChart';
-import CustomInfoCircle from '../CustomInfoCircle/CustomInfoCircle';
-
-export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
-  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
-  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
-  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
-  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
-  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
-  const headlineAndFoodInflationChartData =
-    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
-  return (
-    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
-      <AccordionContainer
-        loading={loading}
-        title={countryName ?? undefined}
-        accordionModalActive
-        maxWidth={600}
-        items={[
-          {
-            title: 'Food Security',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-            content: (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Population"
-                  content={[
-                    {
-                      svgIcon: <Population className="w-full h-full object-contain" />,
-                      text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
-                      altText: 'Population Icon',
-                    },
-                  ]}
-                />
-                <CustomCard
-                  title="People with insufficient food consumption"
-                  content={[
-                    {
-                      svgIcon: <FoodConsumption className="w-full h-full object-contain" />,
-                      text: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
-                      altText: 'Food Consumption Icon',
-                    },
-                    {
-                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '1 Month ago',
-                      altText: 'Icon',
-                    },
-                    {
-                      imageSrc:
-                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                      timeText: '3 Month ago',
-                      altText: 'Other Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ),
-          },
-          {
-            title: 'Food Security Trends',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
-            content: (
-              <div>
-                {fcsChartData ? (
-                  <LineChart
-                    title="Trend of the number of people with insufficient food consumption"
-                    data={fcsChartData}
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about insufficient food consumption</p>
-                )}
-                <Spacer y={6} />
-                {rcsiChartData ? (
-                  <LineChart
-                    title="Trend of the number of people using crisis or above crisis food-based coping"
-                    data={rcsiChartData}
-                    small
-                    noPadding
-                    transparentBackground
-                  />
-                ) : (
-                  <p>No data about crisis or above crisis food-based coping</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Macro-economic',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
-            content: (
-              <div className={cardsWrapperClass}>
-                <CustomCard
-                  title="Import Dependency"
-                  content={[
-                    {
-                      svgIcon: <Import className="w-full h-full object-contain" />,
-                      text: countryData?.importDependency
-                        ? `${countryData.importDependency.toFixed(1)}% of Cereals`
-                        : 'N/A',
-                      altText: 'Import Dependency Icon',
-                    },
-                  ]}
-                />
-              </div>
-            ),
-          },
-          {
-            title: 'Currency Exchange',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
-            content: (
-              <div>
-                {currencyExchangeChartData ? (
-                  <LineChart data={currencyExchangeChartData} small noPadding transparentBackground />
-                ) : (
-                  <p>No data about currency exchange</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Balance of Trade',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
-            content: (
-              <div>
-                {balanceOfTradeChartData ? (
-                  <LineChart data={balanceOfTradeChartData} small noPadding transparentBackground />
-                ) : (
-                  <p>No data about balance of trade</p>
-                )}
-              </div>
-            ),
-          },
-          {
-            title: 'Headline and food inflation',
-            infoIcon: <CustomInfoCircle />,
-            popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
-            content: (
-              <div>
-                {headlineAndFoodInflationChartData ? (
-                  <LineChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
-                ) : (
-                  <p>No data about headline and food inflation</p>
-                )}
-              </div>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-}
diff --git a/src/components/Map/FcsRegionTooltip.tsx b/src/components/Map/FcsMap/FcsRegionTooltip.tsx
similarity index 97%
rename from src/components/Map/FcsRegionTooltip.tsx
rename to src/components/Map/FcsMap/FcsRegionTooltip.tsx
index 3ad1ad99..67017b26 100644
--- a/src/components/Map/FcsRegionTooltip.tsx
+++ b/src/components/Map/FcsMap/FcsRegionTooltip.tsx
@@ -3,7 +3,7 @@ import { Feature, GeoJsonProperties, Geometry } from 'geojson';
 import { FcsRegionTooltipOperations } from '@/operations/map/FcsRegionTooltipOperations';
 import { formatToMillion } from '@/utils/formatting';
 
-import { LineChart } from '../Charts/LineChart';
+import { LineChart } from '../../Charts/LineChart';
 
 interface FcsRegionTooltipProps {
   feature: Feature<Geometry, GeoJsonProperties>;
diff --git a/src/operations/map/FcsCountryChoroplethOperations.tsx b/src/operations/map/FcsCountryChoroplethOperations.tsx
index fc0c22e0..dbb20ed3 100644
--- a/src/operations/map/FcsCountryChoroplethOperations.tsx
+++ b/src/operations/map/FcsCountryChoroplethOperations.tsx
@@ -3,7 +3,7 @@ import L from 'leaflet';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import FcsRegionTooltip from '@/components/Map/FcsRegionTooltip';
+import FcsRegionTooltip from '@/components/Map/FcsMap/FcsRegionTooltip';
 import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts';
 import { MapOperations } from '@/operations/map/MapOperations';
 

From be3ca0d70f66365969adb4c902b933f9a2b2e7e1 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 09:51:50 +0100
Subject: [PATCH 07/18] fix: restyle the nutrition accordion text

---
 src/components/Cards/Card.tsx                   |  3 +--
 .../props/NutritionAccordionTextProps.tsx       |  4 ++++
 .../map/FcsFoodSecurityOperations.tsx           | 17 +++++++++--------
 .../map/IpcFoodSecurityOperations.tsx           | 17 +++++++++--------
 src/operations/map/NutritionAccordionText.tsx   | 11 +++++++++++
 5 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 src/domain/props/NutritionAccordionTextProps.tsx
 create mode 100644 src/operations/map/NutritionAccordionText.tsx

diff --git a/src/components/Cards/Card.tsx b/src/components/Cards/Card.tsx
index d316120e..d56c3704 100644
--- a/src/components/Cards/Card.tsx
+++ b/src/components/Cards/Card.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { Card, CardBody } from '@nextui-org/react';
-import Image from 'next/image';
+import { Card, CardBody, Image } from '@nextui-org/react';
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
diff --git a/src/domain/props/NutritionAccordionTextProps.tsx b/src/domain/props/NutritionAccordionTextProps.tsx
new file mode 100644
index 00000000..29665514
--- /dev/null
+++ b/src/domain/props/NutritionAccordionTextProps.tsx
@@ -0,0 +1,4 @@
+export default interface NutritionAccordionTextProps {
+  nutritionValue: string;
+  text: string;
+}
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index 79aebaab..b55f64b1 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -12,6 +12,7 @@ import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodCo
 import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
 import { ReactComponent as Population } from '../../../public/Images/Population.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
+import NutritionAccordionText from './NutritionAccordionText';
 
 export function getFcsFoodSecurityAccordionItems(
   countryData: CountryData | undefined,
@@ -81,10 +82,10 @@ export function getFcsFoodSecurityAccordionItems(
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Acute} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
@@ -97,10 +98,10 @@ export function getFcsFoodSecurityAccordionItems(
                   {
                     svgIcon: <Nutrition className="w-[30px] h-[30px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Chronic} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index 58000c4a..295446c2 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -10,6 +10,7 @@ import { ReactComponent as FoodConsumption } from '../../../public/Images/FoodCo
 import { ReactComponent as Nutrition } from '../../../public/Images/Nutrition.svg';
 import { ReactComponent as Population } from '../../../public/Images/Population.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
+import NutritionAccordionText from './NutritionAccordionText';
 
 export const IpcFoodSecurityAccordionOperations = {
   getFoodSecurityAccordionItems: (
@@ -85,10 +86,10 @@ export const IpcFoodSecurityAccordionOperations = {
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Acute} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Acute} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
@@ -101,10 +102,10 @@ export const IpcFoodSecurityAccordionOperations = {
                   {
                     svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
                     text: (
-                      <>
-                        <span className="text-base">{`${nutritionData.Chronic} %`}</span>
-                        <span className="text-xs text-gray-400 ml-1">of children (under 5)</span>
-                      </>
+                      <NutritionAccordionText
+                        nutritionValue={`${nutritionData.Chronic} %`}
+                        text="of children (under 5)"
+                      />
                     ),
                   },
                 ]}
diff --git a/src/operations/map/NutritionAccordionText.tsx b/src/operations/map/NutritionAccordionText.tsx
new file mode 100644
index 00000000..59550e6d
--- /dev/null
+++ b/src/operations/map/NutritionAccordionText.tsx
@@ -0,0 +1,11 @@
+import NutritionAccordionTextProps from '@/domain/props/NutritionAccordionTextProps';
+
+function NutritionAccordionText({ nutritionValue, text }: NutritionAccordionTextProps) {
+  return (
+    <>
+      <span className="text-base">{nutritionValue}</span>
+      <span className="text-xs text-gray-400 ml-1">{text}</span>
+    </>
+  );
+}
+export default NutritionAccordionText;

From 1f5b2adf5395b4399d9ea655304ddeac2ef2c8f6 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 13:06:56 +0100
Subject: [PATCH 08/18] fix: remove the extra accordion files and fix chronic
 nutrition svg

---
 src/components/Map/FcsMap/FcsAccordion.tsx        |  8 ++++----
 .../Map/FcsMap/FcsFoodSecurityAccordion.tsx       |  7 -------
 .../Map/FcsMap/FcsMacroEconomicAccordion.tsx      |  7 -------
 src/components/Map/IpcMap/IpcAccordion.tsx        | 12 +++++-------
 .../Map/IpcMap/IpcFoodSecurityAccordion.tsx       | 15 ---------------
 .../Map/IpcMap/IpcNutritionAccordion.tsx          |  7 -------
 src/operations/map/FcsFoodSecurityOperations.tsx  |  2 +-
 src/operations/map/IpcFoodSecurityOperations.tsx  |  2 +-
 8 files changed, 11 insertions(+), 49 deletions(-)
 delete mode 100644 src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
 delete mode 100644 src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
 delete mode 100644 src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
 delete mode 100644 src/components/Map/IpcMap/IpcNutritionAccordion.tsx

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index aed7b178..37cd601e 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -1,14 +1,14 @@
 import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
+import { getFcsFoodSecurityAccordionItems } from '@/operations/map/FcsFoodSecurityOperations';
+import { getMacroEconomicAccordionOperations } from '@/operations/map/FcsMacroEconomicOperations';
 import { useMediaQuery } from '@/utils/resolution.ts';
 
 import AccordionContainer from '../../Accordions/AccordionContainer';
-import FcsFoodSecurityAccordion from './FcsFoodSecurityAccordion';
-import FcsMacroEconomicAccordion from './FcsMacroEconomicAccordion';
 
 export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
   const isMobile = useMediaQuery('(max-width: 700px)');
-  const foodSecurityAccordion = FcsFoodSecurityAccordion({ countryData, countryIso3Data });
-  const macroEconomicAccordion = FcsMacroEconomicAccordion({ countryData, countryIso3Data });
+  const foodSecurityAccordion = getFcsFoodSecurityAccordionItems(countryData, countryIso3Data);
+  const macroEconomicAccordion = getMacroEconomicAccordionOperations(countryData, countryIso3Data);
 
   return (
     <>
diff --git a/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx b/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
deleted file mode 100644
index f093297f..00000000
--- a/src/components/Map/FcsMap/FcsFoodSecurityAccordion.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { getFcsFoodSecurityAccordionItems } from '@/operations/map/FcsFoodSecurityOperations';
-
-export default function FoodSecurityAccordion({ countryData, countryIso3Data }: FcsAccordionProps) {
-  const FcsFoodSecurityAccordion = getFcsFoodSecurityAccordionItems(countryData, countryIso3Data);
-  return FcsFoodSecurityAccordion;
-}
diff --git a/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx b/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
deleted file mode 100644
index 253855ef..00000000
--- a/src/components/Map/FcsMap/FcsMacroEconomicAccordion.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { getMacroEconomicAccordionOperations } from '@/operations/map/FcsMacroEconomicOperations';
-
-export default function MacroEconomicAccordion({ countryData, countryIso3Data }: FcsAccordionProps) {
-  const FcsMacroEconomicAccordion = getMacroEconomicAccordionOperations(countryData, countryIso3Data);
-  return FcsMacroEconomicAccordion;
-}
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index 62fdbb8e..eb4d4def 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -1,20 +1,18 @@
 import AccordionContainer from '@/components/Accordions/AccordionContainer';
 import IpcAccordionProps from '@/domain/props/IpcAccordionProps';
+import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
 import { useMediaQuery } from '@/utils/resolution.ts';
 
-import IpcFoodSecurityAccordion from './IpcFoodSecurityAccordion';
-import IpcNutritionAccordion from './IpcNutritionAccordion';
-
 export default function IpcAccordion({ countryData, countryName, countryIso3Data }: IpcAccordionProps) {
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
 
-  const ipcFoodSecurityAccordion = IpcFoodSecurityAccordion({
+  const ipcFoodSecurityAccordion = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
     countryData,
     deltaOneMonth,
-    deltaThreeMonth,
-  });
-  const ipcNutrititonAccordion = IpcNutritionAccordion({ countryIso3Data });
+    deltaThreeMonth
+  );
+  const ipcNutrititonAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordion(countryIso3Data);
   const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
diff --git a/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx b/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
deleted file mode 100644
index 2185b65a..00000000
--- a/src/components/Map/IpcMap/IpcFoodSecurityAccordion.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import IpcFoodSecurityAccordionProps from '@/domain/props/IpcFoodSecurityAccordionProps';
-import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
-
-export default function IpcFoodSecurityAccordion({
-  countryData,
-  deltaOneMonth,
-  deltaThreeMonth,
-}: IpcFoodSecurityAccordionProps) {
-  const foodSecurityAccordion = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
-    countryData,
-    deltaOneMonth,
-    deltaThreeMonth
-  );
-  return foodSecurityAccordion;
-}
diff --git a/src/components/Map/IpcMap/IpcNutritionAccordion.tsx b/src/components/Map/IpcMap/IpcNutritionAccordion.tsx
deleted file mode 100644
index 7efa4e2d..00000000
--- a/src/components/Map/IpcMap/IpcNutritionAccordion.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import IpcNutritionAccordionProps from '@/domain/props/IpcNutritionAccordionProps';
-import { IpcFoodSecurityAccordionOperations } from '@/operations/map/IpcFoodSecurityOperations';
-
-export default function IpcNutritionAccordion({ countryIso3Data }: IpcNutritionAccordionProps) {
-  const nutritionAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordion(countryIso3Data);
-  return nutritionAccordion;
-}
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index b55f64b1..9dd8241b 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -96,7 +96,7 @@ export function getFcsFoodSecurityAccordionItems(
                 title="Chronic Nutrition"
                 content={[
                   {
-                    svgIcon: <Nutrition className="w-[30px] h-[30px] object-contain" />,
+                    svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
                     text: (
                       <NutritionAccordionText
                         nutritionValue={`${nutritionData.Chronic} %`}
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index 295446c2..152c56f2 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -100,7 +100,7 @@ export const IpcFoodSecurityAccordionOperations = {
                 title="Chronic Nutrition"
                 content={[
                   {
-                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                    svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
                     text: (
                       <NutritionAccordionText
                         nutritionValue={`${nutritionData.Chronic} %`}

From 5033db4b4ddf3e9604255fbacd5d0c3757d62c06 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 13:42:17 +0100
Subject: [PATCH 09/18] fix: remove unwanted props file

---
 src/domain/props/IpcFoodSecurityAccordionProps.tsx | 7 -------
 src/domain/props/IpcNutritionAccordionProps.tsx    | 5 -----
 2 files changed, 12 deletions(-)
 delete mode 100644 src/domain/props/IpcFoodSecurityAccordionProps.tsx
 delete mode 100644 src/domain/props/IpcNutritionAccordionProps.tsx

diff --git a/src/domain/props/IpcFoodSecurityAccordionProps.tsx b/src/domain/props/IpcFoodSecurityAccordionProps.tsx
deleted file mode 100644
index debee2c0..00000000
--- a/src/domain/props/IpcFoodSecurityAccordionProps.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CountryData } from '../entities/country/CountryData';
-
-export default interface IpcFoodSecurityAccordionProps {
-  countryData: CountryData | undefined;
-  deltaOneMonth: number | null;
-  deltaThreeMonth: number | null;
-}
diff --git a/src/domain/props/IpcNutritionAccordionProps.tsx b/src/domain/props/IpcNutritionAccordionProps.tsx
deleted file mode 100644
index a3febeae..00000000
--- a/src/domain/props/IpcNutritionAccordionProps.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CountryIso3Data } from '../entities/country/CountryIso3Data';
-
-export default interface IpcFoodSecurityAccordionProps {
-  countryIso3Data: CountryIso3Data | undefined;
-}

From 4698e216073116e75ac6b110e350caca526c10c7 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 16:35:06 +0100
Subject: [PATCH 10/18] fix: fix accordion operations of fcs and ipc

---
 src/components/Map/FcsMap/FcsAccordion.tsx    |  42 +--
 src/components/Map/IpcMap/IpcAccordion.tsx    |   2 +-
 .../map/FcsFoodSecurityOperations.tsx         | 252 +++++++++---------
 .../map/FcsMacroEconomicOperations.tsx        | 149 ++++++-----
 .../map/IpcFoodSecurityOperations.tsx         | 118 ++++----
 5 files changed, 292 insertions(+), 271 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 37cd601e..22a3b1ff 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -1,29 +1,24 @@
 import FcsAccordionProps from '@/domain/props/FcsAccordionProps';
-import { getFcsFoodSecurityAccordionItems } from '@/operations/map/FcsFoodSecurityOperations';
-import { getMacroEconomicAccordionOperations } from '@/operations/map/FcsMacroEconomicOperations';
+import { FcsFoodSecurityOperations } from '@/operations/map/FcsFoodSecurityOperations';
+import { FcsMacroEconomicOperations } from '@/operations/map/FcsMacroEconomicOperations';
 import { useMediaQuery } from '@/utils/resolution.ts';
 
 import AccordionContainer from '../../Accordions/AccordionContainer';
 
 export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
   const isMobile = useMediaQuery('(max-width: 700px)');
-  const foodSecurityAccordion = getFcsFoodSecurityAccordionItems(countryData, countryIso3Data);
-  const macroEconomicAccordion = getMacroEconomicAccordionOperations(countryData, countryIso3Data);
+  const foodSecurityAccordion = FcsFoodSecurityOperations.getFcsFoodSecurityAccordionItems(
+    countryData,
+    countryIso3Data
+  );
+  const macroEconomicAccordion = FcsMacroEconomicOperations.getMacroEconomicAccordionOperations(
+    countryData,
+    countryIso3Data
+  );
 
   return (
     <>
-      {!isMobile ? (
-        <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
-          <AccordionContainer
-            loading={loading}
-            title={countryName ?? undefined}
-            accordionModalActive
-            maxWidth={600}
-            items={foodSecurityAccordion}
-            expandAll
-          />
-        </div>
-      ) : (
+      {isMobile && (
         <div className="absolute w-[350px] left-[108px] top-4 z-9999">
           <AccordionContainer
             loading={loading}
@@ -33,7 +28,20 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
             items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
           />
         </div>
-      )}
+      )}{' '}
+      : (
+      <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
+        <AccordionContainer
+          loading={loading}
+          title={countryName}
+          multipleSelectionMode
+          accordionModalActive
+          maxWidth={600}
+          items={foodSecurityAccordion}
+          expandAll
+        />
+      </div>
+      )
       {!isMobile && (
         <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
           <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index eb4d4def..f440d688 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -18,7 +18,7 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
   return (
     <div className="absolute w-[300px] left-[108px] top-4 z-9999">
       <AccordionContainer
-        title={countryName ?? undefined}
+        title={countryName}
         accordionModalActive
         maxWidth={600}
         items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
diff --git a/src/operations/map/FcsFoodSecurityOperations.tsx b/src/operations/map/FcsFoodSecurityOperations.tsx
index 9dd8241b..020b9c8a 100644
--- a/src/operations/map/FcsFoodSecurityOperations.tsx
+++ b/src/operations/map/FcsFoodSecurityOperations.tsx
@@ -1,4 +1,3 @@
-// FcsAccordionOperations.js
 import { Spacer } from '@nextui-org/react';
 
 import CustomCard from '@/components/Cards/Card';
@@ -14,135 +13,138 @@ import { ReactComponent as Population } from '../../../public/Images/Population.
 import { FcsAccordionOperations } from './FcsAccordionOperations';
 import NutritionAccordionText from './NutritionAccordionText';
 
-export function getFcsFoodSecurityAccordionItems(
-  countryData: CountryData | undefined,
-  countryIso3Data: CountryIso3Data | undefined
-) {
-  const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
-  const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
-  const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
-  const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
-  const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
-  return [
-    {
-      title: 'Food Security',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-      content: (
-        <div className={cardsWrapperClass}>
-          <CustomCard
-            title="Population"
-            content={[
-              {
-                svgIcon: <Population />,
-                text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
-                altText: 'Population Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-          <CustomCard
-            content={[
-              {
-                svgIcon: <FoodConsumption className="w-[50px] h-[50px] object-contain" />,
-                text: 'Population with insufficient food consumption',
-                value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
-                textClass: 'text-xs',
-                changeValues: [
-                  {
-                    imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                    text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
-                    timeText: '1 Month ago',
-                    altText: 'Delta Icon',
-                  },
-                  {
-                    imageSrc: deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
-                    text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
-                    timeText: '3 Months ago',
-                    altText: 'Delta Icon',
-                  },
-                ],
-              },
-            ]}
-          />
-        </div>
-      ),
-    },
-    {
-      title: 'Nutrition',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-      content:
-        nutritionData && (nutritionData.Acute != null || nutritionData.Chronic != null) ? (
+export class FcsFoodSecurityOperations {
+  static getFcsFoodSecurityAccordionItems(
+    countryData: CountryData | undefined,
+    countryIso3Data: CountryIso3Data | undefined
+  ) {
+    const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
+    const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
+    const fcsChartData = FcsAccordionOperations.getFcsChartData(countryData);
+    const rcsiChartData = FcsAccordionOperations.getRcsiChartData(countryData);
+    const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
+    return [
+      {
+        title: 'Food Security',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+        content: (
           <div className={cardsWrapperClass}>
-            {nutritionData.Acute != null && (
-              <CustomCard
-                title="Acute Nutrition"
-                content={[
-                  {
-                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
-                    text: (
-                      <NutritionAccordionText
-                        nutritionValue={`${nutritionData.Acute} %`}
-                        text="of children (under 5)"
-                      />
-                    ),
-                  },
-                ]}
+            <CustomCard
+              title="Population"
+              content={[
+                {
+                  svgIcon: <Population />,
+                  text: countryData?.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
+                  altText: 'Population Icon',
+                  textClass: 'text-base',
+                },
+              ]}
+            />
+            <CustomCard
+              content={[
+                {
+                  svgIcon: <FoodConsumption className="w-[50px] h-[50px] object-contain" />,
+                  text: 'Population with insufficient food consumption',
+                  value: countryData?.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
+                  textClass: 'text-xs',
+                  changeValues: [
+                    {
+                      imageSrc: deltaOneMonth && deltaOneMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                      text: deltaOneMonth ? `${deltaOneMonth.toFixed(2)} M` : 'N/A',
+                      timeText: '1 Month ago',
+                      altText: 'Delta Icon',
+                    },
+                    {
+                      imageSrc:
+                        deltaThreeMonth && deltaThreeMonth > 0 ? '/Images/ArrowUp.svg' : '/Images/ArrowDown.svg',
+                      text: deltaThreeMonth ? `${deltaThreeMonth.toFixed(2)} M` : 'N/A',
+                      timeText: '3 Months ago',
+                      altText: 'Delta Icon',
+                    },
+                  ],
+                },
+              ]}
+            />
+          </div>
+        ),
+      },
+      {
+        title: 'Nutrition',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+        content:
+          nutritionData && (nutritionData.Acute != null || nutritionData.Chronic != null) ? (
+            <div className={cardsWrapperClass}>
+              {nutritionData.Acute != null && (
+                <CustomCard
+                  title="Acute Nutrition"
+                  content={[
+                    {
+                      svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                      text: (
+                        <NutritionAccordionText
+                          nutritionValue={`${nutritionData.Acute} %`}
+                          text="of children (under 5)"
+                        />
+                      ),
+                    },
+                  ]}
+                />
+              )}
+              {nutritionData.Chronic != null && (
+                <CustomCard
+                  title="Chronic Nutrition"
+                  content={[
+                    {
+                      svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
+                      text: (
+                        <NutritionAccordionText
+                          nutritionValue={`${nutritionData.Chronic} %`}
+                          text="of children (under 5)"
+                        />
+                      ),
+                    },
+                  ]}
+                />
+              )}
+            </div>
+          ) : (
+            <p>No data about Nutrition is available</p>
+          ),
+      },
+      {
+        title: 'Food Security Trends',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
+        content: (
+          <div>
+            {fcsChartData ? (
+              <LineChart
+                title="Trend of the number of people with insufficient food consumption"
+                data={fcsChartData}
+                small
+                noPadding
+                transparentBackground
               />
+            ) : (
+              <p>No data about insufficient food consumption</p>
             )}
-            {nutritionData.Chronic != null && (
-              <CustomCard
-                title="Chronic Nutrition"
-                content={[
-                  {
-                    svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
-                    text: (
-                      <NutritionAccordionText
-                        nutritionValue={`${nutritionData.Chronic} %`}
-                        text="of children (under 5)"
-                      />
-                    ),
-                  },
-                ]}
+            <Spacer y={6} />
+            {rcsiChartData ? (
+              <LineChart
+                title="Trend of the number of people using crisis or above crisis food-based coping"
+                data={rcsiChartData}
+                small
+                noPadding
+                transparentBackground
               />
+            ) : (
+              <p>No data about crisis or above crisis food-based coping</p>
             )}
           </div>
-        ) : (
-          <p>No data about Nutrition is available</p>
         ),
-    },
-    {
-      title: 'Food Security Trends',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getFoodSecutriyTrendsPopoverInfo(),
-      content: (
-        <div>
-          {fcsChartData ? (
-            <LineChart
-              title="Trend of the number of people with insufficient food consumption"
-              data={fcsChartData}
-              small
-              noPadding
-              transparentBackground
-            />
-          ) : (
-            <p>No data about insufficient food consumption</p>
-          )}
-          <Spacer y={6} />
-          {rcsiChartData ? (
-            <LineChart
-              title="Trend of the number of people using crisis or above crisis food-based coping"
-              data={rcsiChartData}
-              small
-              noPadding
-              transparentBackground
-            />
-          ) : (
-            <p>No data about crisis or above crisis food-based coping</p>
-          )}
-        </div>
-      ),
-    },
-  ];
+      },
+    ];
+  }
 }
diff --git a/src/operations/map/FcsMacroEconomicOperations.tsx b/src/operations/map/FcsMacroEconomicOperations.tsx
index d246268e..ac92b7a5 100644
--- a/src/operations/map/FcsMacroEconomicOperations.tsx
+++ b/src/operations/map/FcsMacroEconomicOperations.tsx
@@ -1,4 +1,3 @@
-// FcsAccordionOperations.js
 import CustomCard from '@/components/Cards/Card';
 import { LineChart } from '@/components/Charts/LineChart';
 import CustomInfoCircle from '@/components/CustomInfoCircle/CustomInfoCircle';
@@ -9,77 +8,81 @@ import { cardsWrapperClass } from '@/utils/primitives';
 import { ReactComponent as Import } from '../../../public/Images/Import.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
 
-export function getMacroEconomicAccordionOperations(
-  countryData: CountryData | undefined,
-  countryIso3Data: CountryIso3Data | undefined
-) {
-  const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
-  const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
-  const headlineAndFoodInflationChartData =
-    FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
+export class FcsMacroEconomicOperations {
+  static getMacroEconomicAccordionOperations(
+    countryData: CountryData | undefined,
+    countryIso3Data: CountryIso3Data | undefined
+  ) {
+    const currencyExchangeChartData = FcsAccordionOperations.getCurrencyExchangeChartData(countryIso3Data);
+    const balanceOfTradeChartData = FcsAccordionOperations.getBalanceOfTradeChartData(countryIso3Data);
+    const headlineAndFoodInflationChartData =
+      FcsAccordionOperations.getHeadlineAndFoodInflationChartData(countryIso3Data);
 
-  return [
-    {
-      title: 'Macroeconomic',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
-      content: (
-        <div className={cardsWrapperClass}>
-          <CustomCard
-            title="Import Dependency"
-            content={[
-              {
-                svgIcon: <Import />,
-                text: countryData?.importDependency ? `${countryData.importDependency.toFixed(1)}% of Cereals` : 'N/A',
-                altText: 'Import Dependency Icon',
-                textClass: 'text-base',
-              },
-            ]}
-          />
-        </div>
-      ),
-    },
-    {
-      title: 'Currency Exchange',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
-      content: (
-        <div>
-          {currencyExchangeChartData ? (
-            <LineChart data={currencyExchangeChartData} small noPadding transparentBackground />
-          ) : (
-            <p>No data about currency exchange</p>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: 'Balance of Trade',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
-      content: (
-        <div>
-          {balanceOfTradeChartData ? (
-            <LineChart data={balanceOfTradeChartData} small noPadding transparentBackground />
-          ) : (
-            <p>No data about balance of trade</p>
-          )}
-        </div>
-      ),
-    },
-    {
-      title: 'Headline and food inflation',
-      infoIcon: <CustomInfoCircle />,
-      popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
-      content: (
-        <div>
-          {headlineAndFoodInflationChartData ? (
-            <LineChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
-          ) : (
-            <p>No data about headline and food inflation</p>
-          )}
-        </div>
-      ),
-    },
-  ];
+    return [
+      {
+        title: 'Macroeconomic',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getMacroEconomicPopoverInfo(),
+        content: (
+          <div className={cardsWrapperClass}>
+            <CustomCard
+              title="Import Dependency"
+              content={[
+                {
+                  svgIcon: <Import />,
+                  text: countryData?.importDependency
+                    ? `${countryData.importDependency.toFixed(1)}% of Cereals`
+                    : 'N/A',
+                  altText: 'Import Dependency Icon',
+                  textClass: 'text-base',
+                },
+              ]}
+            />
+          </div>
+        ),
+      },
+      {
+        title: 'Currency Exchange',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getCurrencyExchangePopoverInfo(),
+        content: (
+          <div>
+            {currencyExchangeChartData ? (
+              <LineChart data={currencyExchangeChartData} small noPadding transparentBackground />
+            ) : (
+              <p>No data about currency exchange</p>
+            )}
+          </div>
+        ),
+      },
+      {
+        title: 'Balance of Trade',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getBalanceOfTradePopoverInfo(),
+        content: (
+          <div>
+            {balanceOfTradeChartData ? (
+              <LineChart data={balanceOfTradeChartData} small noPadding transparentBackground />
+            ) : (
+              <p>No data about balance of trade</p>
+            )}
+          </div>
+        ),
+      },
+      {
+        title: 'Headline and food inflation',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getHeadlineAndFoodInflationPopoverInfo(),
+        content: (
+          <div>
+            {headlineAndFoodInflationChartData ? (
+              <LineChart data={headlineAndFoodInflationChartData} small noPadding transparentBackground />
+            ) : (
+              <p>No data about headline and food inflation</p>
+            )}
+          </div>
+        ),
+      },
+    ];
+  }
 }
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index 152c56f2..2a6d072f 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -12,40 +12,47 @@ import { ReactComponent as Population } from '../../../public/Images/Population.
 import { FcsAccordionOperations } from './FcsAccordionOperations';
 import NutritionAccordionText from './NutritionAccordionText';
 
-export const IpcFoodSecurityAccordionOperations = {
-  getFoodSecurityAccordionItems: (
+export class IpcFoodSecurityAccordionOperations {
+  static getFoodSecurityAccordionItems(
     countryData: CountryData | undefined,
     deltaOneMonth: number | null,
     deltaThreeMonth: number | null
-  ) => {
-    const hasNoData: boolean =
-      !countryData || !countryData.population || !countryData.fcs || !deltaOneMonth || !deltaThreeMonth;
+  ) {
+    const hasNoData =
+      !countryData || !countryData.population || !countryData.fcs || deltaOneMonth === null || deltaThreeMonth === null;
+
+    if (hasNoData) {
+      return {
+        title: 'Food Security',
+        infoIcon: <CustomInfoCircle />,
+        popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
+        content: <p>No data about food security</p>,
+      };
+    }
 
     return {
       title: 'Food Security',
       infoIcon: <CustomInfoCircle />,
       popoverInfo: FcsAccordionOperations.getFoodSecutriyPopoverInfo(),
-      content: !hasNoData ? (
+      content: (
         <div className={cardsWrapperClass}>
-          {/* Population Card */}
           <CustomCard
             title="Population"
             content={[
               {
                 svgIcon: <Population className="w-full h-full object-contain" />,
-                text: countryData?.population ? `${countryData?.population.toFixed(2)} M` : 'N/A',
+                text: countryData.population ? `${countryData.population.toFixed(2)} M` : 'N/A',
                 altText: 'Population Icon',
                 textClass: 'text-base',
               },
             ]}
           />
-          {/* Food Consumption Card */}
           <CustomCard
             content={[
               {
                 svgIcon: <FoodConsumption className="w-[50px] h-[50px] object-contain" />,
                 text: 'Population with insufficient food consumption',
-                value: countryData?.fcs ? `${countryData?.fcs.toFixed(2)} M` : 'N/A',
+                value: countryData.fcs ? `${countryData.fcs.toFixed(2)} M` : 'N/A',
                 textClass: 'text-xs',
                 changeValues: [
                   {
@@ -65,56 +72,57 @@ export const IpcFoodSecurityAccordionOperations = {
             ]}
           />
         </div>
-      ) : (
-        <p>No data about food security</p>
       ),
     };
-  },
-  getNutritionAccordion: (countryIso3Data: CountryIso3Data | undefined) => {
+  }
+
+  static getNutritionAccordion(countryIso3Data: CountryIso3Data | undefined) {
     const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
 
+    if (!nutritionData || (nutritionData.Acute == null && nutritionData.Chronic == null)) {
+      return {
+        title: 'Nutrition',
+        infoIcon: <CustomInfoCircle />,
+        content: <p>No data about Nutrition is available</p>,
+      };
+    }
+
     return {
       title: 'Nutrition',
       infoIcon: <CustomInfoCircle />,
-      content:
-        nutritionData && (nutritionData.Acute != null || nutritionData.Chronic != null) ? (
-          <div className={cardsWrapperClass}>
-            {nutritionData.Acute != null && (
-              <CustomCard
-                title="Acute Nutrition"
-                content={[
-                  {
-                    svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
-                    text: (
-                      <NutritionAccordionText
-                        nutritionValue={`${nutritionData.Acute} %`}
-                        text="of children (under 5)"
-                      />
-                    ),
-                  },
-                ]}
-              />
-            )}
-            {nutritionData.Chronic != null && (
-              <CustomCard
-                title="Chronic Nutrition"
-                content={[
-                  {
-                    svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
-                    text: (
-                      <NutritionAccordionText
-                        nutritionValue={`${nutritionData.Chronic} %`}
-                        text="of children (under 5)"
-                      />
-                    ),
-                  },
-                ]}
-              />
-            )}
-          </div>
-        ) : (
-          <p>No data about Nutrition is available</p>
-        ),
+      content: (
+        <div className={cardsWrapperClass}>
+          {nutritionData.Acute != null && (
+            <CustomCard
+              title="Acute Nutrition"
+              content={[
+                {
+                  svgIcon: <Nutrition className="w-[50px] h-[50px] object-contain" />,
+                  text: (
+                    <NutritionAccordionText nutritionValue={`${nutritionData.Acute} %`} text="of children (under 5)" />
+                  ),
+                },
+              ]}
+            />
+          )}
+          {nutritionData.Chronic != null && (
+            <CustomCard
+              title="Chronic Nutrition"
+              content={[
+                {
+                  svgIcon: <Nutrition className="w-[40px] h-[40px] object-contain" />,
+                  text: (
+                    <NutritionAccordionText
+                      nutritionValue={`${nutritionData.Chronic} %`}
+                      text="of children (under 5)"
+                    />
+                  ),
+                },
+              ]}
+            />
+          )}
+        </div>
+      ),
     };
-  },
-};
+  }
+}

From 5b0d741819ed2bb44049ec26b967cb9280bf5ab6 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 17:31:43 +0100
Subject: [PATCH 11/18] fix: remove null and add multiple selection mode to
 accordions

---
 src/components/Map/FcsMap/FcsAccordion.tsx    | 4 ++--
 src/components/Map/IpcMap/IpcAccordion.tsx    | 1 +
 src/operations/map/FcsAccordionOperations.tsx | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 22a3b1ff..5a4f374b 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -22,13 +22,13 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
         <div className="absolute w-[350px] left-[108px] top-4 z-9999">
           <AccordionContainer
             loading={loading}
-            title={countryName ?? undefined}
+            title={countryName}
             accordionModalActive
             maxWidth={600}
             items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
           />
         </div>
-      )}{' '}
+      )}
       : (
       <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
         <AccordionContainer
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index f440d688..d2c6b227 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -22,6 +22,7 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
         accordionModalActive
         maxWidth={600}
         items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
+        multipleSelectionMode={!isMobile}
         expandAll={!isMobile}
       />
     </div>
diff --git a/src/operations/map/FcsAccordionOperations.tsx b/src/operations/map/FcsAccordionOperations.tsx
index fb5c837d..2acf5392 100644
--- a/src/operations/map/FcsAccordionOperations.tsx
+++ b/src/operations/map/FcsAccordionOperations.tsx
@@ -111,8 +111,8 @@ export class FcsAccordionOperations {
 
     const { wasting, stunting } = countryIso3Data.nutrition;
     return {
-      Acute: wasting || null,
-      Chronic: stunting || null,
+      Acute: wasting,
+      Chronic: stunting,
     };
   }
 

From 49ab8a97b4764c37ede358c99d6e781a8729cce8 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 18:00:15 +0100
Subject: [PATCH 12/18] fix: rename methods of fcs and ipc

---
 src/components/Map/FcsMap/FcsAccordion.tsx        | 2 +-
 src/components/Map/IpcMap/IpcAccordion.tsx        | 2 +-
 src/operations/map/FcsMacroEconomicOperations.tsx | 2 +-
 src/operations/map/IpcFoodSecurityOperations.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 5a4f374b..aa91dc54 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -11,7 +11,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
     countryData,
     countryIso3Data
   );
-  const macroEconomicAccordion = FcsMacroEconomicOperations.getMacroEconomicAccordionOperations(
+  const macroEconomicAccordion = FcsMacroEconomicOperations.getMacroEconomicAccordionItems(
     countryData,
     countryIso3Data
   );
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index d2c6b227..2dc0da52 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -12,7 +12,7 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
     deltaOneMonth,
     deltaThreeMonth
   );
-  const ipcNutrititonAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordion(countryIso3Data);
+  const ipcNutrititonAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordionItems(countryIso3Data);
   const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
diff --git a/src/operations/map/FcsMacroEconomicOperations.tsx b/src/operations/map/FcsMacroEconomicOperations.tsx
index ac92b7a5..bd4bc438 100644
--- a/src/operations/map/FcsMacroEconomicOperations.tsx
+++ b/src/operations/map/FcsMacroEconomicOperations.tsx
@@ -9,7 +9,7 @@ import { ReactComponent as Import } from '../../../public/Images/Import.svg';
 import { FcsAccordionOperations } from './FcsAccordionOperations';
 
 export class FcsMacroEconomicOperations {
-  static getMacroEconomicAccordionOperations(
+  static getMacroEconomicAccordionItems(
     countryData: CountryData | undefined,
     countryIso3Data: CountryIso3Data | undefined
   ) {
diff --git a/src/operations/map/IpcFoodSecurityOperations.tsx b/src/operations/map/IpcFoodSecurityOperations.tsx
index 2a6d072f..066b5aa0 100644
--- a/src/operations/map/IpcFoodSecurityOperations.tsx
+++ b/src/operations/map/IpcFoodSecurityOperations.tsx
@@ -76,7 +76,7 @@ export class IpcFoodSecurityAccordionOperations {
     };
   }
 
-  static getNutritionAccordion(countryIso3Data: CountryIso3Data | undefined) {
+  static getNutritionAccordionItems(countryIso3Data: CountryIso3Data | undefined) {
     const nutritionData = FcsAccordionOperations.getNutritionData(countryIso3Data);
 
     if (!nutritionData || (nutritionData.Acute == null && nutritionData.Chronic == null)) {

From a37249bacc7e6904af2be24700a94e79aa8b2562 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 18:27:55 +0100
Subject: [PATCH 13/18] fix: fix scrollbar

---
 src/components/Map/FcsMap/FcsAccordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index aa91dc54..24bde0b8 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -30,7 +30,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
         </div>
       )}
       : (
-      <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-visible overflow-y-auto h-screen">
+      <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
         <AccordionContainer
           loading={loading}
           title={countryName}

From 2af98d6366382e885d87b05fbaddce9c0c859c9a Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 19:19:04 +0100
Subject: [PATCH 14/18] fix: fix width of ofcs because of the scrollbar

---
 src/components/Map/FcsMap/FcsAccordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 24bde0b8..8736def6 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -30,7 +30,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
         </div>
       )}
       : (
-      <div className="absolute w-[300px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
+      <div className="absolute w-[310px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
         <AccordionContainer
           loading={loading}
           title={countryName}

From a1261550e91a984eac23eefafb149c3c8a5f3323 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Thu, 19 Dec 2024 21:36:33 +0100
Subject: [PATCH 15/18] fix: fix mobile version of fcs

---
 src/components/Map/FcsMap/FcsAccordion.tsx | 33 +++++++++-------------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 8736def6..79227ae0 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -16,20 +16,18 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
     countryIso3Data
   );
 
-  return (
+  return isMobile ? (
+    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
+      <AccordionContainer
+        loading={loading}
+        title={countryName}
+        accordionModalActive
+        maxWidth={600}
+        items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
+      />
+    </div>
+  ) : (
     <>
-      {isMobile && (
-        <div className="absolute w-[350px] left-[108px] top-4 z-9999">
-          <AccordionContainer
-            loading={loading}
-            title={countryName}
-            accordionModalActive
-            maxWidth={600}
-            items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
-          />
-        </div>
-      )}
-      : (
       <div className="absolute w-[310px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
         <AccordionContainer
           loading={loading}
@@ -41,12 +39,9 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
           expandAll
         />
       </div>
-      )
-      {!isMobile && (
-        <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
-          <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
-        </div>
-      )}
+      <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
+        <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
+      </div>
     </>
   );
 }

From c70a61e13f4448ce459059704f5b0f9cc5570e97 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Fri, 20 Dec 2024 13:40:13 +0100
Subject: [PATCH 16/18] fix: rename foodAccordion, nutritionAccordion,
 macroEconomicAccoridon

---
 src/components/Map/FcsMap/FcsAccordion.tsx | 10 +++++-----
 src/components/Map/IpcMap/IpcAccordion.tsx |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 79227ae0..f19db817 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -7,11 +7,11 @@ import AccordionContainer from '../../Accordions/AccordionContainer';
 
 export default function FcsAccordion({ countryData, loading, countryIso3Data, countryName }: FcsAccordionProps) {
   const isMobile = useMediaQuery('(max-width: 700px)');
-  const foodSecurityAccordion = FcsFoodSecurityOperations.getFcsFoodSecurityAccordionItems(
+  const foodSecurityAccordionItems = FcsFoodSecurityOperations.getFcsFoodSecurityAccordionItems(
     countryData,
     countryIso3Data
   );
-  const macroEconomicAccordion = FcsMacroEconomicOperations.getMacroEconomicAccordionItems(
+  const macroEconomicAccordionItems = FcsMacroEconomicOperations.getMacroEconomicAccordionItems(
     countryData,
     countryIso3Data
   );
@@ -23,7 +23,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
         title={countryName}
         accordionModalActive
         maxWidth={600}
-        items={[...foodSecurityAccordion, ...macroEconomicAccordion]}
+        items={[...foodSecurityAccordionItems, ...macroEconomicAccordionItems]}
       />
     </div>
   ) : (
@@ -35,12 +35,12 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
           multipleSelectionMode
           accordionModalActive
           maxWidth={600}
-          items={foodSecurityAccordion}
+          items={foodSecurityAccordionItems}
           expandAll
         />
       </div>
       <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
-        <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordion} />
+        <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordionItems} />
       </div>
     </>
   );
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index 2dc0da52..07b66843 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -7,12 +7,12 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
   const deltaOneMonth = countryData?.fcsMinus1 ? countryData.fcs - countryData.fcsMinus1 : null;
   const deltaThreeMonth = countryData?.fcsMinus3 ? countryData.fcs - countryData.fcsMinus3 : null;
 
-  const ipcFoodSecurityAccordion = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
+  const foodSecurityAccordionItems = IpcFoodSecurityAccordionOperations.getFoodSecurityAccordionItems(
     countryData,
     deltaOneMonth,
     deltaThreeMonth
   );
-  const ipcNutrititonAccordion = IpcFoodSecurityAccordionOperations.getNutritionAccordionItems(countryIso3Data);
+  const nutrititonAccordionItems = IpcFoodSecurityAccordionOperations.getNutritionAccordionItems(countryIso3Data);
   const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
@@ -21,7 +21,7 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
         title={countryName}
         accordionModalActive
         maxWidth={600}
-        items={[ipcFoodSecurityAccordion, ipcNutrititonAccordion]}
+        items={[foodSecurityAccordionItems, nutrititonAccordionItems]}
         multipleSelectionMode={!isMobile}
         expandAll={!isMobile}
       />

From 7a6e314d89dcdddfc2f8db22bea569d914939c8e Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Fri, 20 Dec 2024 14:15:55 +0100
Subject: [PATCH 17/18] fix: change the width of accordions and text size of
 nutrition accordion

---
 src/components/Map/FcsMap/FcsAccordion.tsx    | 4 ++--
 src/components/Map/IpcMap/IpcAccordion.tsx    | 2 +-
 src/operations/map/NutritionAccordionText.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index f19db817..42fe945b 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -28,7 +28,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
     </div>
   ) : (
     <>
-      <div className="absolute w-[310px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
+      <div className="absolute w-[360px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
         <AccordionContainer
           loading={loading}
           title={countryName}
@@ -39,7 +39,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
           expandAll
         />
       </div>
-      <div className="absolute w-[300px] right-[1rem] inset-y-24 z-9999">
+      <div className="absolute w-[350px] right-[1rem] inset-y-24 z-9999">
         <AccordionContainer loading={loading} accordionModalActive maxWidth={600} items={macroEconomicAccordionItems} />
       </div>
     </>
diff --git a/src/components/Map/IpcMap/IpcAccordion.tsx b/src/components/Map/IpcMap/IpcAccordion.tsx
index 07b66843..f1e8a121 100644
--- a/src/components/Map/IpcMap/IpcAccordion.tsx
+++ b/src/components/Map/IpcMap/IpcAccordion.tsx
@@ -16,7 +16,7 @@ export default function IpcAccordion({ countryData, countryName, countryIso3Data
   const isMobile = useMediaQuery('(max-width: 700px)');
 
   return (
-    <div className="absolute w-[300px] left-[108px] top-4 z-9999">
+    <div className="absolute w-[350px] left-[108px] top-4 z-9999">
       <AccordionContainer
         title={countryName}
         accordionModalActive
diff --git a/src/operations/map/NutritionAccordionText.tsx b/src/operations/map/NutritionAccordionText.tsx
index 59550e6d..ad6a6396 100644
--- a/src/operations/map/NutritionAccordionText.tsx
+++ b/src/operations/map/NutritionAccordionText.tsx
@@ -3,8 +3,8 @@ import NutritionAccordionTextProps from '@/domain/props/NutritionAccordionTextPr
 function NutritionAccordionText({ nutritionValue, text }: NutritionAccordionTextProps) {
   return (
     <>
-      <span className="text-base">{nutritionValue}</span>
-      <span className="text-xs text-gray-400 ml-1">{text}</span>
+      <span className="text-lg">{nutritionValue}</span>
+      <span className="text-sm text-gray-400 ml-1">{text}</span>
     </>
   );
 }

From 0901ddbb8bcf8cfb8e0c267ec14e2efa21b78581 Mon Sep 17 00:00:00 2001
From: Armanpreet Ghotra <arman.ghotra@tum.de>
Date: Fri, 20 Dec 2024 14:19:39 +0100
Subject: [PATCH 18/18] fix: fix fcs food security width

---
 src/components/Map/FcsMap/FcsAccordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Map/FcsMap/FcsAccordion.tsx b/src/components/Map/FcsMap/FcsAccordion.tsx
index 42fe945b..a36cfce5 100644
--- a/src/components/Map/FcsMap/FcsAccordion.tsx
+++ b/src/components/Map/FcsMap/FcsAccordion.tsx
@@ -28,7 +28,7 @@ export default function FcsAccordion({ countryData, loading, countryIso3Data, co
     </div>
   ) : (
     <>
-      <div className="absolute w-[360px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
+      <div className="absolute w-[350px] left-[108px] top-4 z-9999 overflow-y-scroll max-h-screen">
         <AccordionContainer
           loading={loading}
           title={countryName}