Merge pull request #1150 from Open-Earth-Foundation/fix/chakra-v3-rep…

…ort-results
Open-Earth-Foundation · Feb 24, 2025 · 68ab170 · 68ab170
2 parents 7e78740 + b60fb6b
commit 68ab170
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 96 deletions.
diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/ByScopeView.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/ByScopeView.tsx
@@ -1,9 +1,10 @@
 import React from "react";
-import { Box, Table } from "@chakra-ui/react";
+import { Box, Button, Table } from "@chakra-ui/react";
 import { ActivityDataByScope } from "@/util/types";
 import type { TFunction } from "i18next";
 import { convertKgToTonnes, toKebabCase } from "@/util/helpers";
 import { InventoryTypeEnum, SECTORS } from "@/util/constants";
+import { ButtonSmall } from "@/components/Texts/Button";
 
 interface ByScopeViewProps {
   data: ActivityDataByScope[];
@@ -24,23 +25,25 @@ const ByScopeView: React.FC<ByScopeViewProps> = ({
     inventoryType
   ].scopes;
   return (
-    <Box p={4}>
-      <Table.Root unstyled variant="line">
-        <Table.Header>
-          <Table.Row>
-            <Table.ColumnHeader>{tData("subsector")}</Table.ColumnHeader>
-            <Table.ColumnHeader>
-              {tDashboard("total-emissions")}
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              {tDashboard("%-of-sector-emissions")}
-            </Table.ColumnHeader>
-            {scopes.map((s) => (
-              <Table.ColumnHeader key={s}>
+    <Box py={4}>
+      <Table.Root variant="line">
+        <Table.Header className="uppercase">
+          <Table.ColumnHeader>
+            <ButtonSmall>{tData("subsector")}</ButtonSmall>
+          </Table.ColumnHeader>
+          <Table.ColumnHeader>
+            <ButtonSmall>{tDashboard("total-emissions")}</ButtonSmall>
+          </Table.ColumnHeader>
+          <Table.ColumnHeader>
+            <ButtonSmall>{tDashboard("%-of-sector-emissions")}</ButtonSmall>
+          </Table.ColumnHeader>
+          {scopes.map((s) => (
+            <Table.ColumnHeader key={s}>
+              <ButtonSmall>
                 {tDashboard("emissions-scope")} {s}
-              </Table.ColumnHeader>
-            ))}
-          </Table.Row>
+              </ButtonSmall>
+            </Table.ColumnHeader>
+          ))}
         </Table.Header>
         <Table.Body>
           {data.map((item, index) => (

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorTable.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/EmissionBySectorTable.tsx
@@ -11,6 +11,7 @@ import {
   AccordionItemTrigger,
   AccordionRoot,
 } from "@/components/ui/accordion";
+import { ButtonSmall } from "@/components/Texts/Button";
 
 interface EmissionBySectorTableProps {
   data: {
@@ -40,24 +41,28 @@ const EmissionBySectorTableSection: React.FC<EmissionBySectorTableProps> = ({
   }) => {
     return (
       <Table.Root
-        unstyled
         borderLeft="0px"
         borderBottom="0px"
         borderRight="0px"
         borderWidth="1px"
         borderRadius="20px"
       >
-        <Table.Header backgroundColor="background.backgroundLight">
-          <Table.Row>
-            <Table.ColumnHeader>{tData("sector")}</Table.ColumnHeader>
-            <Table.ColumnHeader>{tData("emissions")}</Table.ColumnHeader>
-            <Table.ColumnHeader>
-              {tData("percentage-emissions")}
-            </Table.ColumnHeader>
-            <Table.ColumnHeader>
-              {tData("based-on-previous-year")}
-            </Table.ColumnHeader>
-          </Table.Row>
+        <Table.Header
+          backgroundColor="background.backgroundLight"
+          className="uppercase"
+        >
+          <Table.ColumnHeader>
+            <ButtonSmall>{tData("sector")}</ButtonSmall>
+          </Table.ColumnHeader>
+          <Table.ColumnHeader>
+            <ButtonSmall>{tData("emissions")}</ButtonSmall>
+          </Table.ColumnHeader>
+          <Table.ColumnHeader>
+            <ButtonSmall>{tData("percentage-emissions")}</ButtonSmall>
+          </Table.ColumnHeader>
+          <Table.ColumnHeader>
+            <ButtonSmall>{tData("based-on-previous-year")}</ButtonSmall>
+          </Table.ColumnHeader>
         </Table.Header>
         <Table.Body>
           {item.bySector?.map((sectorBreakDown, i) => {

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/TopEmissionsWidget.tsx
@@ -40,21 +40,20 @@ const EmissionsTable = ({
   t: TFunction;
 }) => {
   return (
-    <Table.Root my={4}>
-      <Table.Header>
-        <Table.Row>
-          <Table.ColumnHeader>
-            <ButtonSmall>{t("subsector").toUpperCase()}</ButtonSmall>
-          </Table.ColumnHeader>
-          <Table.ColumnHeader>
-            <ButtonSmall>
-              {t("total-emissions-CO2eq").toUpperCase()}
-            </ButtonSmall>
-          </Table.ColumnHeader>
-          <Table.ColumnHeader>
-            <ButtonSmall>{t("%-of-emissions").toUpperCase()}</ButtonSmall>
-          </Table.ColumnHeader>
-        </Table.Row>
+    <Table.Root my={4} variant="outline">
+      <Table.Header
+        className="uppercase"
+        backgroundColor="background.backgroundLight"
+      >
+        <Table.ColumnHeader>
+          <ButtonSmall>{t("subsector")}</ButtonSmall>
+        </Table.ColumnHeader>
+        <Table.ColumnHeader>
+          <ButtonSmall>{t("total-emissions-CO2eq")}</ButtonSmall>
+        </Table.ColumnHeader>
+        <Table.ColumnHeader>
+          <ButtonSmall>{t("%-of-emissions")}</ButtonSmall>
+        </Table.ColumnHeader>
       </Table.Header>
       <Table.Body>
         {(topEmissions || []).map((emission, index) => (

diff --git a/app/src/app/[lng]/[inventory]/InventoryResultTab/index.tsx b/app/src/app/[lng]/[inventory]/InventoryResultTab/index.tsx
@@ -176,28 +176,41 @@ function SectorTabs({
         return (
           <Tabs.Content value={name} key={name}>
             {isTopEmissionsResponseLoading ? (
-              <Center w="full" h="full">
+              <Center h="128px">
                 <ProgressCircleRoot value={null}>
                   <ProgressCircleRing cap="round" />
                 </ProgressCircleRoot>
               </Center>
             ) : (
-              <Card.Root divideX="2px" divideColor="border.overlay" p={4}>
-                <SectorHeader
-                  icon={icon}
-                  sectorName={t(name)}
-                  dataForSector={getDataForSector(name)}
-                  t={t}
-                />
-                <HStack justifyContent="space-between" width="100%">
-                  <Text
-                    fontFamily="heading"
-                    fontSize="title.md"
-                    fontWeight="medium"
-                  >
-                    {t("breakdown-of-sub-sector-emissions")}
-                  </Text>
-                  {/*<Box paddingBottom={"12px"}>
+              <Card.Root p={4}>
+                <Card.Header>
+                  <HStack>
+                    <SectorHeader
+                      icon={icon}
+                      sectorName={t(name)}
+                      dataForSector={getDataForSector(name)}
+                      t={t}
+                    />
+                    <Box flex={1} />
+                    {(isResultsLoading || isLoadingNewData) && (
+                      <Center>
+                        <ProgressCircleRoot value={null}>
+                          <ProgressCircleRing cap="round" />
+                        </ProgressCircleRoot>
+                      </Center>
+                    )}
+                  </HStack>
+                </Card.Header>
+                <Card.Body>
+                  <HStack justifyContent="space-between" width="100%">
+                    <Text
+                      fontFamily="heading"
+                      fontSize="title.md"
+                      fontWeight="medium"
+                    >
+                      {t("breakdown-of-sub-sector-emissions")}
+                    </Text>
+                    {/*<Box paddingBottom={"12px"}>
                       <Selector
                         options={[TableView.BY_ACTIVITY, TableView.BY_SCOPE]}
                         value={selectedTableView}
@@ -206,38 +219,34 @@ function SectorTabs({
                       />
                     </Box>
                     {***[ON-3126 restore view by activity]*/}
-                </HStack>
-                {(isResultsLoading || isLoadingNewData) && (
-                  <ProgressCircleRoot value={null}>
-                    <ProgressCircleRing cap="round" />
-                  </ProgressCircleRoot>
-                )}
-                {isEmptyInventory && (
-                  <EmptyStateCardContent
-                    t={t}
-                    inventoryId={inventory.inventoryId}
-                    width={"1042px"}
-                    height={"592px"}
-                    isPublic={isPublic}
-                  />
-                )}
-                {shouldShowTableByActivity && (
-                  <ByActivityView
-                    sectorBreakdown={sectorBreakdown!}
-                    tData={tData}
-                    tDashboard={t}
-                    sectorName={name}
-                  />
-                )}
-                {shouldShowTableByScope && (
-                  <ByScopeView
-                    inventoryType={inventory.inventoryType}
-                    data={sectorBreakdown!.byScope}
-                    tData={tData}
-                    tDashboard={t}
-                    sectorName={name}
-                  />
-                )}
+                  </HStack>
+                  {isEmptyInventory && (
+                    <EmptyStateCardContent
+                      t={t}
+                      inventoryId={inventory.inventoryId}
+                      width={"1042px"}
+                      height={"592px"}
+                      isPublic={isPublic}
+                    />
+                  )}
+                  {shouldShowTableByActivity && (
+                    <ByActivityView
+                      sectorBreakdown={sectorBreakdown!}
+                      tData={tData}
+                      tDashboard={t}
+                      sectorName={name}
+                    />
+                  )}
+                  {shouldShowTableByScope && (
+                    <ByScopeView
+                      inventoryType={inventory.inventoryType}
+                      data={sectorBreakdown!.byScope}
+                      tData={tData}
+                      tDashboard={t}
+                      sectorName={name}
+                    />
+                  )}
+                </Card.Body>
               </Card.Root>
             )}
           </Tabs.Content>

diff --git a/app/src/i18n/locales/de/data.json b/app/src/i18n/locales/de/data.json
@@ -1155,5 +1155,6 @@
   "garbage-disposal-type-garbage-disposals": "Abfallentsorgungen",
   "treatment-type-latrine-dry-climate": "Latrine: Trockenes Klima",
   "treatment-type-latrine-sediment-removal": "Latrine: Regelmäßige Entfernung von Sedimenten",
-  "units-kilograms-N-yr": "kg N/Jahr"
+  "units-kilograms-N-yr": "kg N/Jahr",
+  "subsector": "Teilsektor"
 }
diff --git a/app/src/i18n/locales/en/data.json b/app/src/i18n/locales/en/data.json
@@ -1183,5 +1183,6 @@
   "emissions-from-grid-supplied-energy-consumed-in-power-plant-auxiliary-operations-within-the-city-boundary": "Emissions from grid-supplied energy consumed in power plant auxiliary operations within the city boundary",
   "emissions-from-grid-supplied-energy-consumed-within-the-city-boundary-for-railways": "Emissions from grid-supplied energy consumed within the city boundary for railways",
   "total": "Total",
+  "subsector": "Sub-sector",
   "location": "Location"
 }
diff --git a/app/src/i18n/locales/es/data.json b/app/src/i18n/locales/es/data.json
@@ -1140,5 +1140,6 @@
   "garbage-disposal-type-garbage-disposals": "Dispositivos de eliminación de basura",
   "treatment-type-latrine-dry-climate": "Letrina: Clima seco",
   "treatment-type-latrine-sediment-removal": "Letrina: Eliminación regular de sedimentos",
-  "units-kilograms-N-yr": "kg N/año"
+  "units-kilograms-N-yr": "kg N/año",
+  "subsector": "Subsector"
 }
diff --git a/app/src/i18n/locales/pt/data.json b/app/src/i18n/locales/pt/data.json
@@ -1132,5 +1132,6 @@
   "garbage-disposal-type-garbage-disposals": "Eliminadores de resíduos",
   "treatment-type-latrine-dry-climate": "Latrina: Clima seco",
   "treatment-type-latrine-sediment-removal": "Latrina: Remoção regular de sedimentos",
-  "units-kilograms-N-yr": "kg N/ano"
+  "units-kilograms-N-yr": "kg N/ano",
+  "subsector": "Subsetor"
 }