From e7182fb94b91accded9af40f842fdd19c7f99c2e Mon Sep 17 00:00:00 2001
From: mluena <maluenarod@gmail.com>
Date: Tue, 2 Apr 2024 10:00:34 +0200
Subject: [PATCH 1/5] units api

---
 .../containers/countries/detail/constants.tsx |   6 +-
 .../src/containers/countries/detail/panel.tsx | 117 ++++++++++--------
 2 files changed, 68 insertions(+), 55 deletions(-)

diff --git a/client/src/containers/countries/detail/constants.tsx b/client/src/containers/countries/detail/constants.tsx
index efefc907..219e758b 100644
--- a/client/src/containers/countries/detail/constants.tsx
+++ b/client/src/containers/countries/detail/constants.tsx
@@ -7,14 +7,15 @@ export const PANEL_OVERVIEW_ITEMS = [
   {
     title: 'National Forest Area',
     value: 'tree_cover_extent_2010_ha',
-    unit: 'ha',
     percentage: 'forest_area_pct',
     note: 'of land)',
+    unit: true,
   },
   {
     title: 'Net carbon 2001 - 2022 (MtCO₂e/year)',
     value: 'net_flux_co2e_year',
     note: '(emission)',
+    unit: false,
   },
 ];
 
@@ -23,19 +24,16 @@ export const RESUME_ITEMS = [
   {
     title: 'Completed',
     value: 'projects_completed',
-    unit: null,
     icon: CHECK_SVG,
   },
   {
     title: 'Planted area',
     value: 'area_plantation_total',
-    unit: 'ha',
     icon: AREA_SVG,
   },
   {
     title: 'Trees planted',
     value: 'trees_planted_total',
-    unit: null,
     icon: SEEDS_SVG,
   },
 ];
diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index cc8f4ddb..6d671e3a 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -50,8 +50,10 @@ export default function CountryDetailPanel() {
           return Object.assign(
             {},
             ...(response.data ?? []).map((item) => ({
-              [item.attributes?.indicator_name as string]: item.attributes?.value,
-              [`${item.attributes?.indicator_name}_unit` as string]: item.attributes?.unit,
+              [item.attributes?.indicator_name as string]: {
+                value: item.attributes?.value,
+                unit: item.attributes?.unit,
+              },
             }))
           );
         },
@@ -59,7 +61,6 @@ export default function CountryDetailPanel() {
     }
   );
   const queryParams = useSyncQueryParams();
-
   const jsonToCsv = (json: CountryCountryIndicatorFieldsDataItem['attributes'] & Country) => {
     let csv = '';
 
@@ -185,47 +186,58 @@ export default function CountryDetailPanel() {
 
       {indicators && (
         <div className="flex flex-col justify-center">
-          {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage, unit }) => (
-            <div
-              key={title}
-              className="flex h-10 items-center justify-between border-b-2 border-dotted border-green-50 py-4 first:border-t-2"
-            >
-              <p className="text-xs font-medium uppercase text-gray-500">{title}</p>
-              <div className="flex items-end space-x-1">
-                <p className="text-sm text-yellow-900">
-                  {formatCompactNumber(Math.round(indicators[value]))} {unit}
-                </p>
-
-                <p className="text-2xs flex text-gray-500">
-                  {percentage && <span>({Math.round(indicators[percentage])}%</span>}
-                  <span>{note}</span>
-                </p>
-              </div>
-            </div>
-          ))}
-          <div className="grid grid-cols-2 grid-rows-2 gap-2 py-4">
-            {RESUME_ITEMS.map(({ title, icon, value, unit }) => (
+          {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage, unit }) => {
+            const unitValue = indicators[value]['unit'];
+            return (
               <div
                 key={title}
-                className="relative flex items-center space-x-6 rounded-xl bg-white p-4 text-sm text-green-800 shadow-sm"
+                className="flex h-10 items-center justify-between border-b-2 border-dotted border-green-50 py-4 first:border-t-2"
               >
-                <div className="flex flex-col">
-                  <div className="flex items-end space-x-0.5">
-                    <p className="text-2xl font-extrabold text-green-400">{indicators[value]}</p>
+                <p className="text-xs font-medium uppercase text-gray-500">{title}</p>
+                <div className="flex items-end space-x-1">
+                  <p className="text-sm text-yellow-900">
+                    {formatCompactNumber(Math.round(indicators[value]['value']))}{' '}
+                    {unit && unitValue}
+                  </p>
+
+                  <p className="text-2xs flex text-gray-500">
+                    {percentage && <span>({Math.round(indicators[percentage]['value'])}%</span>}
+                    <span>{note}</span>
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+          <div className="grid grid-cols-2 grid-rows-2 gap-2 py-4">
+            {RESUME_ITEMS.map(({ title, icon, value }) => {
+              const unit = indicators[value]['unit'];
+              return (
+                <div
+                  key={title}
+                  className="relative flex items-center space-x-6 rounded-xl bg-white p-4 text-sm text-green-800 shadow-sm"
+                >
+                  <div className="flex flex-col">
+                    <div className="flex items-end space-x-0.5">
+                      <p className="text-2xl font-extrabold text-green-400">
+                        {indicators[value]['value']}
+                      </p>
 
-                    {unit && <p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>}
+                      {unit && (
+                        <p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>
+                      )}
+                    </div>
+                    <p>{title}</p>
                   </div>
-                  <p>{title}</p>
+                  <Image
+                    src={icon}
+                    alt={title}
+                    width={24}
+                    height={34}
+                    className="absolute right-4 top-4"
+                  />
                 </div>
-                <Image
-                  src={icon}
-                  alt={title}
-                  width={24}
-                  height={34}
-                  className="absolute right-4 top-4"
-                />
-              </div>
-            ))}
+              );
+            })}
           </div>
 
           <div className="flex flex-col space-y-2">
@@ -299,11 +311,12 @@ export default function CountryDetailPanel() {
               <p className="py-4 text-3xl font-extrabold">
                 {/* //!TODO: This value should come from API. */}
                 {formatCompactNumber(
-                  indicators.area_plantation_total +
-                    indicators.area_protected_total +
-                    indicators.area_reforested_total
+                  indicators.area_plantation_total['value'] +
+                    indicators.area_protected_total['value'] +
+                    indicators.area_reforested_total['value']
                 )}{' '}
-                ha
+                {/* //!TODO: This value should come from API. */}
+                {indicators.area_plantation_total['unit']}
               </p>
 
               <div className="space-y-4">
@@ -318,20 +331,22 @@ export default function CountryDetailPanel() {
                           width: !!indicators[value]
                             ? `${
                                 (indicators[value] * 100) /
-                                (indicators.area_plantation_total +
-                                  indicators.area_protected_total +
-                                  indicators.area_reforested_total)
+                                (indicators.area_plantation_total['value'] +
+                                  indicators.area_protected_total['value'] +
+                                  indicators.area_reforested_total['value'])
                               }%`
                             : '0%',
                         }}
                       />
                     </div>
 
-                    <p className="w-10 text-right font-extrabold">{indicators[value]}</p>
+                    <p className="w-10 text-right font-extrabold">{indicators[value]['value']}</p>
                   </div>
                 ))}
                 <div>
-                  <p className="text-right text-xs text-gray-500">ha</p>
+                  <p className="text-right text-xs text-gray-500">
+                    {indicators.area_plantation_total['unit']}
+                  </p>
                 </div>
               </div>
             </div>
@@ -368,12 +383,12 @@ export default function CountryDetailPanel() {
               </div>
 
               <p className="py-4 text-3xl font-extrabold">
-                {formatCompactNumber(indicators.beneficiaries_total)}
+                {formatCompactNumber(indicators.beneficiaries_total['value'])}
               </p>
               {indicators.beneficiaries && (
                 <div className="h-44">
                   <BarsChart
-                    data={Object.entries(indicators.beneficiaries).map(([year, uv]) => ({
+                    data={Object.entries(indicators.beneficiaries['value']).map(([year, uv]) => ({
                       year,
                       uv,
                     }))}
@@ -421,12 +436,12 @@ export default function CountryDetailPanel() {
               </div>
 
               <p className="py-4 text-3xl font-extrabold">
-                {formatCompactNumber(indicators.jobs_total)}
+                {formatCompactNumber(indicators.jobs_total['value'])}
               </p>
               {indicators.jobs && (
                 <div className="h-44">
                   <BarsChart
-                    data={Object.entries(indicators.jobs).map(([year, uv]) => ({
+                    data={Object.entries(indicators.jobs['value']).map(([year, uv]) => ({
                       year,
                       uv,
                     }))}

From 02ebc25df3371d1a287a143f5ea4bebf84dfd56d Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Tue, 2 Apr 2024 11:29:30 +0200
Subject: [PATCH 2/5] fix harcoded units on country detail

---
 client/src/containers/countries/detail/constants.tsx | 4 +---
 client/src/containers/countries/detail/panel.tsx     | 9 +++++----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/client/src/containers/countries/detail/constants.tsx b/client/src/containers/countries/detail/constants.tsx
index 219e758b..a2e69334 100644
--- a/client/src/containers/countries/detail/constants.tsx
+++ b/client/src/containers/countries/detail/constants.tsx
@@ -9,13 +9,11 @@ export const PANEL_OVERVIEW_ITEMS = [
     value: 'tree_cover_extent_2010_ha',
     percentage: 'forest_area_pct',
     note: 'of land)',
-    unit: true,
   },
   {
-    title: 'Net carbon 2001 - 2022 (MtCO₂e/year)',
+    title: 'Net carbon 2001 - 2022',
     value: 'net_flux_co2e_year',
     note: '(emission)',
-    unit: false,
   },
 ];
 
diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index 6d671e3a..bca45c77 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -186,21 +186,22 @@ export default function CountryDetailPanel() {
 
       {indicators && (
         <div className="flex flex-col justify-center">
-          {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage, unit }) => {
+          {PANEL_OVERVIEW_ITEMS.map(({ title, value, note, percentage }) => {
             const unitValue = indicators[value]['unit'];
             return (
               <div
                 key={title}
                 className="flex h-10 items-center justify-between border-b-2 border-dotted border-green-50 py-4 first:border-t-2"
               >
-                <p className="text-xs font-medium uppercase text-gray-500">{title}</p>
+                <p className="text-xs font-medium uppercase text-gray-500">
+                  {title} ({unitValue})
+                </p>
                 <div className="flex items-end space-x-1">
                   <p className="text-sm text-yellow-900">
                     {formatCompactNumber(Math.round(indicators[value]['value']))}{' '}
-                    {unit && unitValue}
                   </p>
 
-                  <p className="text-2xs flex text-gray-500">
+                  <p className="text-2xs mb-[1.7px] flex text-gray-500">
                     {percentage && <span>({Math.round(indicators[percentage]['value'])}%</span>}
                     <span>{note}</span>
                   </p>

From b22e526b12ad03c5aef5bc7bf2f4f92b5e680daf Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Tue, 2 Apr 2024 11:42:51 +0200
Subject: [PATCH 3/5] country detail total intervention area fix

---
 client/src/containers/countries/detail/panel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index bca45c77..cd8dec8d 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -331,10 +331,10 @@ export default function CountryDetailPanel() {
                         style={{
                           width: !!indicators[value]
                             ? `${
-                                (indicators[value] * 100) /
-                                (indicators.area_plantation_total['value'] +
-                                  indicators.area_protected_total['value'] +
-                                  indicators.area_reforested_total['value'])
+                                (indicators[value].value * 100) /
+                                (indicators.area_plantation_total.value +
+                                  indicators.area_protected_total.value +
+                                  indicators.area_reforested_total.value)
                               }%`
                             : '0%',
                         }}

From 448799823af50962c926820de907e5a1eaf9fb34 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Tue, 2 Apr 2024 12:51:48 +0200
Subject: [PATCH 4/5] harcoded units on stats and dashboard

---
 .../src/containers/countries/detail/panel.tsx |  1 -
 .../containers/projects/detail/dashboard.tsx  | 43 +++++++++++--------
 client/src/containers/projects/stats.tsx      | 34 ++++++++-------
 3 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index cd8dec8d..068a07d6 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -292,7 +292,6 @@ export default function CountryDetailPanel() {
                     <div className="border-b border-t border-gray-100 py-2.5">
                       <p className="px-6 text-sm text-yellow-900">
                         <Markdown remarkPlugins={[remarkGfm]} className="prose">
-                          {/* <p className="px-6 text-sm text-yellow-900">{props.attributes.info}</p> */}
                           The total areas of project activities conducted in the AFoCO Member
                           Countries
                         </Markdown>
diff --git a/client/src/containers/projects/detail/dashboard.tsx b/client/src/containers/projects/detail/dashboard.tsx
index 3e5a9db5..166de3e8 100644
--- a/client/src/containers/projects/detail/dashboard.tsx
+++ b/client/src/containers/projects/detail/dashboard.tsx
@@ -32,7 +32,10 @@ export default function ProjectDashboard({ id }: { id: string }) {
           Object.assign(
             {},
             ...(response.data ?? []).map((item) => ({
-              [item.attributes?.indicator_name as string]: item.attributes?.value,
+              [item.attributes?.indicator_name as string]: {
+                value: item.attributes?.value,
+                unit: item.attributes?.unit,
+              },
             }))
           ),
       },
@@ -60,8 +63,14 @@ export default function ProjectDashboard({ id }: { id: string }) {
               </div>
               <div className="flex flex-col">
                 <div className="flex items-end space-x-0.5">
-                  <p className="text-5xl font-extrabold text-green-400">{indicators[value]}</p>
-                  {unit && <p className="mb-0.5 text-base font-normal text-green-400">{unit}</p>}
+                  <p className="text-5xl font-extrabold text-green-400">
+                    {indicators[value].value}
+                  </p>
+                  {unit && (
+                    <p className="mb-0.5 text-base font-normal text-green-400">
+                      {indicators[value].unit}
+                    </p>
+                  )}
                 </div>
                 <p>{title}</p>
               </div>
@@ -113,7 +122,7 @@ export default function ProjectDashboard({ id }: { id: string }) {
                   )}
                 </Dialog>
               </div>
-              <SingleBar data={indicators.project_funding} />
+              <SingleBar data={indicators.project_funding['value']} />
             </div>
             <div className="w-1/2 rounded-xl bg-white p-4 shadow-sm">
               <div className="flex items-center justify-between">
@@ -123,11 +132,11 @@ export default function ProjectDashboard({ id }: { id: string }) {
 
               <p className="py-4 text-3xl font-extrabold">
                 {formatCompactNumber(
-                  indicators.area_plantation_total +
-                    indicators.area_protected_total +
-                    indicators.area_reforested_total
+                  indicators.area_plantation_total['value'] +
+                    indicators.area_protected_total['value'] +
+                    indicators.area_reforested_total['value']
                 )}{' '}
-                ha
+                {indicators.area_plantation_total['unit']}
               </p>
 
               <div className="space-y-3">
@@ -141,10 +150,10 @@ export default function ProjectDashboard({ id }: { id: string }) {
                         style={{
                           width: !!indicators[value]
                             ? `${
-                                (indicators[value] * 100) /
-                                (indicators.area_plantation_total +
-                                  indicators.area_protected_total +
-                                  indicators.area_reforested_total)
+                                (indicators[value].value * 100) /
+                                (indicators.area_plantation_total.value +
+                                  indicators.area_protected_total.value +
+                                  indicators.area_reforested_total.value)
                               }%`
                             : '0%',
                         }}
@@ -152,7 +161,7 @@ export default function ProjectDashboard({ id }: { id: string }) {
                     </div>
 
                     <p className="w-10 text-right font-extrabold">
-                      {Math.round(indicators[value])}
+                      {Math.round(indicators[value]['value'])}
                     </p>
                   </div>
                 ))}
@@ -170,12 +179,12 @@ export default function ProjectDashboard({ id }: { id: string }) {
                 <Info className="h-5 w-5 text-green-800" />
               </div>
               <p className="py-4 text-3xl font-extrabold">
-                {formatCompactNumber(indicators.beneficiaries_total) || 0}
+                {formatCompactNumber(indicators.beneficiaries_total['value']) || 0}
               </p>
               <div className="h-32">
                 {indicators.beneficiaries && (
                   <BarsChart
-                    data={Object.entries(indicators.beneficiaries).map(([year, uv]) => ({
+                    data={Object.entries(indicators.beneficiaries['value']).map(([year, uv]) => ({
                       year,
                       uv,
                     }))}
@@ -199,12 +208,12 @@ export default function ProjectDashboard({ id }: { id: string }) {
                 <Info className="h-5 w-5 text-green-800" />
               </div>
               <p className="py-4 text-3xl font-extrabold">
-                {formatCompactNumber(indicators.jobs_total) || 0}
+                {formatCompactNumber(indicators.jobs_total['value']) || 0}
               </p>
               <div className="h-32">
                 {indicators.jobs && (
                   <BarsChart
-                    data={Object.entries(indicators.jobs).map(([year, uv]) => ({
+                    data={Object.entries(indicators.jobs['value']).map(([year, uv]) => ({
                       year,
                       uv,
                     }))}
diff --git a/client/src/containers/projects/stats.tsx b/client/src/containers/projects/stats.tsx
index df553161..f6f8b2ee 100644
--- a/client/src/containers/projects/stats.tsx
+++ b/client/src/containers/projects/stats.tsx
@@ -31,7 +31,10 @@ export default function Stats() {
           Object.assign(
             {},
             ...(response.data ?? []).map((item) => ({
-              [item.attributes?.indicator_name as string]: item.attributes?.value,
+              [item.attributes?.indicator_name as string]: {
+                value: item.attributes?.value,
+                unit: item.attributes?.unit,
+              },
             }))
           ),
       },
@@ -72,7 +75,7 @@ export default function Stats() {
                 </DialogContent>
               </Dialog>{' '}
             </div>
-            <SingleBar data={indicators?.project_funding} />
+            <SingleBar data={indicators?.project_funding['value']} />
           </div>
         </div>
         <div className="flex flex-col space-y-2">
@@ -109,11 +112,11 @@ export default function Stats() {
 
             <p className="py-4 text-3xl font-extrabold">
               {formatCompactNumber(
-                indicators.area_plantation_total +
-                  indicators.area_protected_total +
-                  indicators.area_reforested_total
+                indicators.area_plantation_total['value'] +
+                  indicators.area_protected_total['value'] +
+                  indicators.area_reforested_total['value']
               )}{' '}
-              ha
+              {indicators.area_plantation_total['unit']}
             </p>
 
             <div className="space-y-4">
@@ -127,10 +130,10 @@ export default function Stats() {
                       style={{
                         width: !!indicators[value]
                           ? `${
-                              (indicators[value] * 100) /
-                              (indicators.area_plantation_total +
-                                indicators.area_protected_total +
-                                indicators.area_reforested_total)
+                              (indicators[value].value * 100) /
+                              (indicators.area_plantation_total.value +
+                                indicators.area_protected_total.value +
+                                indicators.area_reforested_total.value)
                             }%`
                           : '0%',
                       }}
@@ -138,10 +141,11 @@ export default function Stats() {
                   </div>
 
                   <p className="w-10 text-right font-extrabold">
-                    {formatCompactNumber(Math.round(indicators[value]))}
+                    {formatCompactNumber(Math.round(indicators[value]['value']))}
                   </p>
                 </div>
               ))}
+
               <div>
                 <p className="text-right text-xs text-gray-500">ha</p>
               </div>
@@ -180,13 +184,13 @@ export default function Stats() {
               </Dialog>{' '}
             </div>
             <p className="py-4 text-3xl font-extrabold">
-              {formatCompactNumber(indicators.beneficiaries_total)}
+              {formatCompactNumber(indicators.beneficiaries_total['value'])}
             </p>
 
             <div className="h-44">
               {indicators.beneficiaries && (
                 <BarsChart
-                  data={Object.entries(indicators.beneficiaries).map(([year, uv]) => ({
+                  data={Object.entries(indicators.beneficiaries['value']).map(([year, uv]) => ({
                     year,
                     uv,
                   }))}
@@ -236,12 +240,12 @@ export default function Stats() {
               </Dialog>{' '}
             </div>
             <p className="py-4 text-3xl font-extrabold">
-              {formatCompactNumber(indicators.jobs_total)}
+              {formatCompactNumber(indicators.jobs_total['value'])}
             </p>{' '}
             <div className="h-44">
               {indicators.jobs && (
                 <BarsChart
-                  data={Object.entries(indicators.jobs).map(([year, uv]) => ({
+                  data={Object.entries(indicators.jobs['value']).map(([year, uv]) => ({
                     year,
                     uv,
                   }))}

From 7626c675720bbfaad041027f326c1f98cab69842 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Tue, 2 Apr 2024 12:54:57 +0200
Subject: [PATCH 5/5] minor fix: hide project description when there is no data

---
 client/src/containers/countries/detail/panel.tsx |  3 ++-
 client/src/containers/projects/detail/panel.tsx  | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
index 068a07d6..fe07ecfc 100644
--- a/client/src/containers/countries/detail/panel.tsx
+++ b/client/src/containers/countries/detail/panel.tsx
@@ -151,7 +151,8 @@ export default function CountryDetailPanel() {
           {data?.data?.attributes?.name}
         </h2>
       </div>
-      <p className="my-4 line-clamp-5 text-sm text-gray-500">
+
+      <p className="my-4 line-clamp-5 border text-sm text-gray-500">
         <DescriptionWithoutMarkdown description={data?.data?.attributes?.description} />
       </p>
 
diff --git a/client/src/containers/projects/detail/panel.tsx b/client/src/containers/projects/detail/panel.tsx
index 55cb64df..5e10362d 100644
--- a/client/src/containers/projects/detail/panel.tsx
+++ b/client/src/containers/projects/detail/panel.tsx
@@ -169,10 +169,13 @@ export default function ProjectDetailPanel() {
           <Share />
         </div>
       </div>
-      <div className="flex flex-col space-y-8">
-        <p className="mt-72 pt-2 text-sm text-gray-500">
-          <DescriptionWithoutMarkdown description={data?.description} />
-        </p>
+      <div className="mt-72 flex flex-col space-y-8">
+        {data?.description && (
+          <p className="pt-2 text-sm text-gray-500">
+            <DescriptionWithoutMarkdown description={data?.description} />
+          </p>
+        )}
+
         <div>
           <div className="flex justify-between border-b-2 border-dotted border-gray-400 py-4">
             <p className="text-xs font-medium uppercase text-gray-500">Status</p>