Feat/[TM-1607] progress goals (#864)

* [TM-1605] add component to progress and goals pie chart * [TM-1607] add charts * [TM-1605] add mapping to data charts * [TM-1605] add params to chartData component * [TM-1605] add external component to progress and goals site * [TM-1605] update name chartData * [TM-1607] add pie chart with component and data for PPc * [TM-1607] modify pie chart style * [TM-1607] improve code to GoalsAndProgressEntity component * [TM-1607] update snapshots --------- Co-authored-by: JORGE <[email protected]> Co-authored-by: cesarLima1 <[email protected]>
wri · Jan 31, 2025 · 51443d3 · 51443d3
1 parent cb1390c
commit 51443d3
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 172 deletions.
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/ProgressGoalsDoughnutChart.tsx
@@ -13,6 +13,7 @@ export interface ProgressGoalsData {
 interface ProgressGoalsDoughnutChartProps {
   data?: ProgressGoalsData;
 }
+
 const percentage = (current: number, total: number) => {
   const percentValue = Math.min((current / total) * 100, 100);
   return percentValue.toFixed(0);
@@ -33,6 +34,7 @@ const ProgressGoalsDoughnutChart: React.FC<ProgressGoalsDoughnutChartProps> = ({
           { value: currentValue, isProgress: true },
           { value: remainingValue, isProgress: false }
         ];
+
   const COLORS = ["#27A9E0", "#DFF2FB"];
 
   return (

diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx
@@ -59,7 +59,7 @@ const GoalProgressCard: FC<GoalProgressCardProps> = ({
           <Text variant={labelVariant ?? "text-16-light"} className={classNames("mb-1 w-full", classNameLabel)}>
             {label}
           </Text>
-          {graph ? chart : null}
+          {graph ? <div className="flex w-[calc(33.33%-16px)] min-w-[200px] items-center">{chart}</div> : null}
           <Text variant="text-24-bold" className={classNames("flex w-full items-baseline", classNameLabelValue)}>
             {value?.toLocaleString()}&nbsp;
             <When condition={!!limit || !!totalValue}>

diff --git a/...mponents/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/...mponents/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot
@@ -16,6 +16,9 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card No Progress
       >
         Hectors Restored
       </p>
+      <div
+        className="flex w-[calc(33.33%-16px)] min-w-[200px] items-center"
+      />
       <p
         className="flex w-full items-baseline text-24-bold"
         data-testid="txt"
@@ -57,6 +60,9 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And
       >
         Trees Restored
       </p>
+      <div
+        className="flex w-[calc(33.33%-16px)] min-w-[200px] items-center"
+      />
       <p
         className="flex w-full items-baseline text-24-bold"
         data-testid="txt"
@@ -182,6 +188,9 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress No
       >
         Workday (PPC)
       </p>
+      <div
+        className="flex w-[calc(33.33%-16px)] min-w-[200px] items-center"
+      />
       <p
         className="flex w-full items-baseline text-24-bold"
         data-testid="txt"

diff --git a/src/pages/project/[uuid]/index.page.tsx b/src/pages/project/[uuid]/index.page.tsx
@@ -15,13 +15,13 @@ import ProjectHeader from "@/pages/project/[uuid]/components/ProjectHeader";
 import StatusBar from "@/pages/project/[uuid]/components/StatusBar";
 import ProjectDetailTab from "@/pages/project/[uuid]/tabs/Details";
 import GalleryTab from "@/pages/project/[uuid]/tabs/Gallery";
-import GoalsAndProgressTab from "@/pages/project/[uuid]/tabs/GoalsAndProgress";
 import ProjectOverviewTab from "@/pages/project/[uuid]/tabs/Overview";
 import ProjectNurseriesTab from "@/pages/project/[uuid]/tabs/ProjectNurseries";
 import ProjectSitesTab from "@/pages/project/[uuid]/tabs/ProjectSites";
 import ReportingTasksTab from "@/pages/project/[uuid]/tabs/ReportingTasks";
 
 import AuditLog from "./tabs/AuditLog";
+import GoalsAndProgressTab from "./tabs/GoalsAndProgress";
 
 const ButtonStates = {
   PROJECTS: 0,

diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
@@ -10,6 +10,7 @@ import PageRow from "@/components/extensive/PageElements/Row/PageRow";
 import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD";
 import { ContextCondition } from "@/context/ContextCondition";
 import { Framework } from "@/context/framework.provider";
+import GoalsAndProgressEntityTab from "@/pages/site/[uuid]/components/GoalsAndProgressEntityTab";
 
 interface GoalsAndProgressProps {
   project: any;
@@ -295,97 +296,8 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
   return (
     <PageBody className="text-darkCustom">
       <PageRow>
-        <PageCard title={t("Progress & Goals")}>
-          <div className="flex w-full flex-wrap items-start justify-between gap-8">
-            <GoalProgressCard
-              frameworksShow={[Framework.TF]}
-              label={t("JOBS CREATED")}
-              value={205}
-              totalValue={300}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-            <GoalProgressCard
-              frameworksShow={[Framework.HBF]}
-              label={t("workdays CREATED")}
-              value={205}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-            <GoalProgressCard
-              label={t("Hectares RESTORED")}
-              value={129}
-              totalValue={"300 ha"}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-            <GoalProgressCard
-              label={t("Trees Restored")}
-              frameworksHide={[Framework.HBF]}
-              value={113250}
-              totalValue={"300,000"}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-            <GoalProgressCard
-              label={t("saplings Restored ")}
-              frameworksShow={[Framework.HBF]}
-              value={113250}
-              totalValue={"300,000"}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-            <GoalProgressCard
-              frameworksShow={[Framework.PPC]}
-              label={t("workdays CREATED")}
-              value={project.combined_workday_count}
-              classNameLabel="text-neutral-650 uppercase mb-3"
-              labelVariant="text-14"
-              classNameCard="text-center flex flex-col items-center"
-              classNameLabelValue="justify-center"
-            />
-
-            <GoalProgressCard
-              label={t("Trees restored")}
-              value={project.trees_restored_count}
-              limit={project.trees_grown_goal}
-              hasProgress={false}
-              items={[
-                {
-                  iconName: IconNames.TREE_CIRCLE_PD,
-                  label: t("Trees Planted:"),
-                  variantLabel: "text-14",
-                  classNameLabel: " text-neutral-650 uppercase",
-                  value: project.trees_planted_count
-                },
-                {
-                  iconName: IconNames.LEAF_CIRCLE_PD,
-                  label: t("Seeds Planted:"),
-                  variantLabel: "text-14",
-                  classNameLabel: " text-neutral-650 uppercase",
-                  value: project.seeds_planted_count
-                },
-                {
-                  iconName: IconNames.REFRESH_CIRCLE_PD,
-                  label: t("Trees Regenerating:"),
-                  variantLabel: "text-14",
-                  classNameLabel: " text-neutral-650 uppercase",
-                  value: project.regenerated_trees_count
-                }
-              ]}
-              className="pr-[41px] lg:pr-[150px]"
-            />
-          </div>
+        <PageCard title={t("Project Progress & Goals")}>
+          <GoalsAndProgressEntityTab entity={project} project />
         </PageCard>
       </PageRow>
 

diff --git a/src/pages/project/[uuid]/tabs/Overview.tsx b/src/pages/project/[uuid]/tabs/Overview.tsx
@@ -3,7 +3,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 
 import Button from "@/components/elements/Button/Button";
-import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
 import ItemMonitoringCards from "@/components/elements/Cards/ItemMonitoringCard/ItemMonitoringCards";
 import Dropdown from "@/components/elements/Inputs/Dropdown/Dropdown";
 import OverviewMapArea from "@/components/elements/Map-mapbox/components/OverviewMapArea";
@@ -13,7 +12,7 @@ import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import PageColumn from "@/components/extensive/PageElements/Column/PageColumn";
 import PageRow from "@/components/extensive/PageElements/Row/PageRow";
-import { Framework } from "@/context/framework.provider";
+import GoalsAndProgressEntityTab from "@/pages/site/[uuid]/components/GoalsAndProgressEntityTab";
 
 interface ProjectOverviewTabProps {
   project: any;
@@ -40,49 +39,7 @@ const ProjectOverviewTab = ({ project }: ProjectOverviewTabProps) => {
             </Button>
           }
         >
-          <div className="flex w-full text-darkCustom">
-            <div className="grid w-[55%] grid-cols-2 gap-x-8 gap-y-7 pr-20">
-              <GoalProgressCard
-                frameworksShow={[Framework.PPC]}
-                label={t("Workday Count (PPC)")}
-                value={project.combined_workday_count}
-              />
-              <GoalProgressCard
-                frameworksHide={[Framework.PPC]}
-                label={t("Jobs Created")}
-                value={project.total_jobs_created}
-                limit={project.jobs_created_goal}
-              />
-              <GoalProgressCard
-                label={t("Trees Restored")}
-                value={project.trees_restored_count}
-                limit={project.trees_grown_goal}
-                className="flex-1"
-              />
-              <div></div>
-              <GoalProgressCard
-                label={t("Hectares Under Restoration")}
-                value={project.total_hectares_restored_sum}
-                limit={project.total_hectares_restored_goal}
-              />
-            </div>
-            <div>
-              <GoalProgressCard
-                label={t("Hectares Restored")}
-                hasProgress={false}
-                items={[
-                  { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: project.trees_planted_count },
-                  { iconName: IconNames.LEAF_CIRCLE, label: t("Seeds Planted"), value: project.seeds_planted_count },
-                  {
-                    iconName: IconNames.REFRESH_CIRCLE,
-                    label: t("Trees Regenerating"),
-                    value: project.regenerated_trees_count
-                  }
-                ]}
-                className="flex-1"
-              />
-            </div>
-          </div>
+          <GoalsAndProgressEntityTab entity={project} project />
         </PageCard>
       </PageRow>
       <PageRow>