[RELEASE] Incredible Iroko

src/admin/components/ResourceTabs/InformationTab/components/ProjectInformationAside/HighLevelMetrics.tsx

@@ -36,6 +36,11 @@ const HighLevelMetics: FC = () => {
         <Labeled label="Trees Planted" sx={inlineLabelSx}>
           <NumberField source="trees_planted_count" emptyText="0" />
         </Labeled>
+        <When condition={record?.framework_key === "ppc"}>
+          <Labeled label="Seeds Planted" sx={inlineLabelSx}>
+            <NumberField source="seeds_planted_count" emptyText="0" />
+          </Labeled>
+        </When>
       </Stack>
     </Card>
   );

src/admin/components/ResourceTabs/InformationTab/components/ReportInformationAside/HighLevelMetrics.tsx

@@ -12,6 +12,7 @@ const HighLevelMetics: FC = () => {
   };
 
   const isTerraFund = record.framework_key === "terrafund";
+  const isPPC = record.framework_key === "ppc";
   const workdaysType = resource === "projectReport" ? "Project" : resource === "siteReport" ? "Site" : null;
 
   return (
@@ -48,6 +49,14 @@ const HighLevelMetics: FC = () => {
               emptyText="0"
             />
           </Labeled>
+          <When condition={isPPC && (resource === "projectReport" || resource === "siteReport")}>
+            <Labeled label="Total Number Of Seeds Planted" sx={inlineLabelSx}>
+              <NumberField
+                source={record.seeds_planted_count ? "trees_planted_count" : "total_seeds_planted_count"}
+                emptyText="0"
+              />
+            </Labeled>
+          </When>
           <When condition={isTerraFund}>
             <Labeled label="Total Number Of Seedlings" sx={inlineLabelSx}>
               <NumberField source="seedlings_grown" emptyText="0" />

src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx

@@ -1,8 +1,9 @@
-import { Box, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Card, Stack, SxProps, Theme } from "@mui/material";
 import { FC } from "react";
 import { Labeled, NumberField, useShowContext } from "react-admin";
 import { When } from "react-if";
 
+import Text from "@/components/elements/Text/Text";
 const HighLevelMetics: FC = () => {
   const { record } = useShowContext();
 
@@ -14,15 +15,12 @@ const HighLevelMetics: FC = () => {
   const isPPC = record.framework_key === "ppc";
 
   return (
-    <Card>
-      <Box paddingX={3.75} paddingY={2}>
-        <Typography variant="h5">High Level Metrics</Typography>
-      </Box>
-
-      <Divider />
-
+    <Card className="!shadow-none">
       <Box paddingX={3.75} paddingY={2}>
         <Stack gap={3}>
+          <Text variant="text-16-semibold" className="text-darkCustom">
+            High Level Metrics
+          </Text>
           <When condition={isPPC}>
             <Labeled label="Workdays Created (Old Calculation)" sx={inlineLabelSx}>
               <NumberField source="self_reported_workday_count" emptyText="0" />
@@ -31,10 +29,15 @@ const HighLevelMetics: FC = () => {
               <NumberField source="workday_count" emptyText="0" />
             </Labeled>
           </When>
-          <Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx}>
+          <Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="trees_planted_count" emptyText="0" />
           </Labeled>
-          <Labeled label="Hectares Under Restoration" sx={inlineLabelSx}>
+          <When condition={isPPC}>
+            <Labeled label="Total Number Of Seeds Planted" sx={inlineLabelSx} className="label-field-aside">
+              <NumberField source="seeds_planted_count" emptyText="0" />
+            </Labeled>
+          </When>
+          <Labeled label="Hectares Under Restoration" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="hectares_to_restore_goal" emptyText="0" />
           </Labeled>
         </Stack>

src/components/elements/ServerSideTable/ServerSideTable.tsx

@@ -18,7 +18,6 @@ export interface ServerSideTableProps<TData> extends Omit<TableProps<TData>, "on
   meta: any;
   onTableStateChange?: (state: ServerSideTableState) => void;
   onQueryParamChange?: (queryParams: any) => void;
-  treeSpeciesShow?: boolean;
 }
 
 export function ServerSideTable<TData extends RowData>({
@@ -68,7 +67,6 @@ export function ServerSideTable<TData extends RowData>({
             setPage(1);
             setPageSize(size);
           }}
-          treeSpeciesShow={props.treeSpeciesShow}
         />
       )}
     </>

src/components/extensive/Pagination/index.tsx

@@ -8,29 +8,22 @@ export interface PaginationProps extends PageSelectorProps {
   hasPageSizeSelector?: boolean;
   defaultPageSize?: number;
   setPageSize?: (count: number) => void;
-  treeSpeciesShow?: boolean;
 }
 
-function Pagination(props: PaginationProps) {
-  return props.treeSpeciesShow ? (
-    <div className={classNames("flex items-center justify-between", props.containerClassName)}>
-      <PageSelector {...props} />
-    </div>
-  ) : (
-    <div className={classNames("flex items-center justify-between", props.containerClassName)}>
-      {props.hasPageSizeSelector ? (
-        <PerPageSelector
-          label="Per page"
-          options={[5, 10, 15, 20, 50]}
-          defaultValue={props.defaultPageSize}
-          onChange={props.setPageSize!}
-        />
-      ) : (
-        <div />
-      )}
-      <PageSelector {...props} />
-    </div>
-  );
-}
+const Pagination = (props: PaginationProps) => (
+  <div className={classNames("flex items-center justify-between", props.containerClassName)}>
+    {props.hasPageSizeSelector ? (
+      <PerPageSelector
+        label="Per page"
+        options={[5, 10, 15, 20, 50]}
+        defaultValue={props.defaultPageSize}
+        onChange={props.setPageSize!}
+      />
+    ) : (
+      <div />
+    )}
+    <PageSelector {...props} />
+  </div>
+);
 
 export default Pagination;

src/components/extensive/Tables/TreeSpeciesTable.tsx

@@ -15,9 +15,9 @@ export interface TreeSpeciesTableProps {
 const TreeSpeciesTable = ({ modelName, modelUUID, collection, onFetch }: TreeSpeciesTableProps) => {
   const t = useT();
 
-  const [queryParams, setQueryParams] = useState<any>();
+  const [queryParams, setQueryParams] = useState<any>({});
 
-  if (collection && queryParams) {
+  if (collection != null) {
     queryParams["filter[collection]"] = collection;
   }
 
@@ -39,13 +39,13 @@ const TreeSpeciesTable = ({ modelName, modelUUID, collection, onFetch }: TreeSpe
       : false;
 
   const showTreeSpecies = useProcessRecordData(modelUUID, modelName, "treeSpecies");
+  const data = showTreeSpecies ? treeSpecies?.data?.map(item => ({ ...item, amount: item.amount ?? 0 })) ?? [] : [];
   return (
     <div>
       <ServerSideTable
         meta={treeSpecies?.meta}
-        data={(showTreeSpecies ? treeSpecies?.data?.map(item => ({ ...item, amount: item.amount || 0 })) : []) ?? []}
+        data={data}
         isLoading={isLoading}
-        treeSpeciesShow={true}
         onQueryParamChange={setQueryParams}
         columns={[
           {

src/hooks/useProcessRecordData.ts

@@ -1,41 +1,30 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 import { GetV2FormsENTITYUUIDResponse, useGetV2FormsENTITYUUID } from "@/generated/apiComponents";
 
 export function useProcessRecordData(modelUUID: string, modelName: string, inputType: string) {
-  const [show, setShow] = useState(false);
   const { data: record } = useGetV2FormsENTITYUUID<{ data: GetV2FormsENTITYUUIDResponse }>({
     pathParams: {
       uuid: modelUUID,
       entity: modelName
     }
   });
 
-  const ProcesssRecordData = useMemo(() => {
-    const viewDataTable = record?.data?.form?.form_sections.map((formSection: any) =>
-      formSection.form_questions
-        .map((formQuestion: any) => formQuestion.uuid)
-        .map((formQuestionUUID: any) => record?.data?.answers?.[formQuestionUUID])
-    );
+  return useMemo(() => {
+    if (record?.data?.form == null) return false;
 
-    for (let sectionIndex in record?.data?.form?.form_sections) {
-      for (let questionIndex in record?.data?.form?.form_sections[sectionIndex].form_questions) {
-        const question = record?.data?.form?.form_sections[sectionIndex].form_questions[questionIndex];
-        if (question.children) {
-          for (let child of question.children) {
-            if (child.input_type === inputType) {
-              setShow(viewDataTable?.[sectionIndex]?.[questionIndex]);
-            }
+    for (const section of record.data.form.form_sections) {
+      for (const question of section.form_questions) {
+        for (const child of question.children ?? []) {
+          if (child.input_type == inputType) {
+            // Only hide the data if the answer is an explicit false in order to not break the UI
+            // for reports that are older than the current version of the form.
+            return record.data.answers![child.parent_id] !== false;
           }
-        } else {
-          setShow(true);
         }
       }
     }
 
-    return show;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [record, inputType, modelUUID, modelName, show]);
-
-  return ProcesssRecordData;
+    return true;
+  }, [record, inputType, modelUUID, modelName]);
 }

src/pages/reports/site-report/[uuid].page.tsx

@@ -161,9 +161,19 @@ const SiteReportDetailPage = () => {
                     <LongTextField title={t("Public Narrative")}>{siteReport.public_narrative}</LongTextField>
                   </When>
                   <GenericField label={t("Trees Planted")}>
-                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} />
+                    <TextField
+                      className="mt-2"
+                      label={t("Total Trees Planted")}
+                      value={siteReport.total_trees_planted_count}
+                    />
+                    <TreeSpeciesTable modelName="site-report" modelUUID={siteReportUUID} collection="tree-planted" />
                   </GenericField>
                   <GenericField label={t("Direct Seeding")}>
+                    <TextField
+                      className="mt-2"
+                      label={t("Total Direct Seedings")}
+                      value={siteReport.total_seeds_planted_count}
+                    />
                     <SeedingsTable modelName="site-report" modelUUID={siteReportUUID} type="count" />
                   </GenericField>
                   <GenericField label={t("Disturbances")}>