Tm 1517 web design update admin UI for tree species data (#789)

* [TM-1514] add style in page species data * [TM-1514] update snapshots * [TM-1514] fix build * [TM-1514] fix build * [TM-1514] fix build * [TM-1514] change icons style and add tooltips in table in tree species * [TM-1514] update stories * update tree species table for admin * update tree species table for admin * update tree species table for admin * delete console log --------- Co-authored-by: Dotty <[email protected]>
wri · Jan 2, 2025 · a5b0e56 · a5b0e56
1 parent 5ab8b12
commit a5b0e56
Show file tree

Hide file tree

Showing 4 changed files with 389 additions and 209 deletions.
diff --git a/src/admin/components/ResourceTabs/InformationTab/index.tsx b/src/admin/components/ResourceTabs/InformationTab/index.tsx
@@ -7,9 +7,10 @@ import { Else, If, Then, When } from "react-if";
 
 import { MonitoringPartnersTable } from "@/admin/components/ResourceTabs/InformationTab/components/ProjectInformationAside/MonitoringPartners";
 import { ProjectManagersTable } from "@/admin/components/ResourceTabs/InformationTab/components/ProjectInformationAside/ProjectManagersTable";
-import SeedingsTable from "@/admin/components/Tables/SeedingsTable";
 import { setDefaultConditionalFieldsAnswers } from "@/admin/utils/forms";
+import Text from "@/components/elements/Text/Text";
 import List from "@/components/extensive/List/List";
+import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD";
 import { ContextCondition } from "@/context/ContextCondition";
 import { Framework, useFrameworkContext } from "@/context/framework.provider";
 import {
@@ -19,15 +20,18 @@ import {
 } from "@/generated/apiComponents";
 import { getCustomFormSteps, normalizedFormDefaultValue } from "@/helpers/customForms";
 import { pluralEntityNameToSingular } from "@/helpers/entity";
+import {
+  dataSeedCountGoal,
+  dataSeedCountGoalSiteReport,
+  dataTreeCountGoal
+} from "@/pages/project/[uuid]/tabs/GoalsAndProgress";
 import { EntityName } from "@/types/common";
 
-import TreeSpeciesTable from "../../Tables/TreeSpeciesTable";
 import InformationTabRow from "./components/InformationTabRow";
 import NurseryInformationAside from "./components/NurseryInformationAside";
 import ProjectInformationAside from "./components/ProjectInformationAside";
 import ReportInformationAside from "./components/ReportInformationAside";
 import SiteInformationAside from "./components/SiteInformationAside";
-
 interface IProps extends Omit<TabProps, "label" | "children"> {
   type: EntityName;
 }
@@ -137,30 +141,74 @@ const InformationTab: FC<IProps> = props => {
                       )}
                     />
                   </Card>
+
                   <When condition={record}>
-                    <When condition={props.type === "sites" || props.type === "site-reports"}>
-                      <ContextCondition frameworksShow={[Framework.PPC]}>
-                        <Card sx={{ padding: 3 }}>
-                          <Typography variant="h6" component="h3" className="capitalize">
-                            Total Trees Planted
-                          </Typography>
-                          {record?.total_trees_planted_count}
-                        </Card>
-                      </ContextCondition>
-                    </When>
-                    <TreeSpeciesTable uuid={record.uuid} entity={resource} />
+                    <div className="pl-8">
+                      <When
+                        condition={
+                          props.type === "sites" || props.type === "site-reports" || props.type === "project-reports"
+                        }
+                      >
+                        <ContextCondition frameworksShow={[Framework.PPC]}>
+                          <div className="flex items-center gap-1 pb-8">
+                            <Text variant="text-18-semibold" className="capitalize">
+                              Total Trees Planted{" "}
+                              <When condition={props.type === "project-reports"}>in site Report</When>:
+                            </Text>
+                            <Text variant="text-18-semibold" className="capitalize text-primary">
+                              {record?.total_trees_planted_count ?? 0}
+                            </Text>
+                          </div>
+                        </ContextCondition>
+                      </When>
+                      <If condition={props.type === "projects"}>
+                        <Then>
+                          <div className="flex flex-col gap-4">
+                            <Text variant="text-16-bold" className="capitalize">
+                              Tree Species:
+                            </Text>
+                            <TreeSpeciesTablePD
+                              modelName="treeCount/Goal"
+                              data={dataTreeCountGoal}
+                              secondColumnWidth="45%"
+                            />
+                          </div>
+                        </Then>
+                        <Else>
+                          <TreeSpeciesTablePD
+                            modelName="treeCount/Goal"
+                            data={dataTreeCountGoal}
+                            headerName="tree species name"
+                            secondColumnWidth="45%"
+                          />
+                        </Else>
+                      </If>
+                    </div>
                   </When>
 
-                  <When condition={props.type === "sites" || props.type === "site-reports"}>
-                    <ContextCondition frameworksShow={[Framework.PPC]}>
-                      <Card sx={{ padding: 3 }}>
-                        <Typography variant="h6" component="h3" className="capitalize">
-                          Total Seeds Planted
-                        </Typography>
-                        {totalSeedlings}
-                      </Card>
-                    </ContextCondition>
-                    <SeedingsTable uuid={record.uuid} entity={resource} />
+                  <When
+                    condition={
+                      props.type === "sites" || props.type === "site-reports" || props.type === "project-reports"
+                    }
+                  >
+                    <div className="pl-8">
+                      <ContextCondition frameworksShow={[Framework.PPC]}>
+                        <div className="flex items-center gap-1 py-8">
+                          <Text variant="text-18-semibold" className="capitalize">
+                            Total Seeds Planted:
+                          </Text>
+                          <Text variant="text-18-semibold" className="capitalize text-primary">
+                            {totalSeedlings ?? 0}
+                          </Text>
+                        </div>
+                      </ContextCondition>
+                      <TreeSpeciesTablePD
+                        modelName="seedCount/Goal"
+                        data={props.type === "site-reports" ? dataSeedCountGoalSiteReport : dataSeedCountGoal}
+                        headerName="seeding species name"
+                        secondColumnWidth="45%"
+                      />
+                    </div>
                   </When>
 
                   <When condition={props.type === "projects"}>

diff --git a/src/components/elements/Table/TableVariants.ts b/src/components/elements/Table/TableVariants.ts
@@ -205,9 +205,9 @@ export const VARIANT_TABLE_TREE_SPECIES = {
   table: "border-collapse w-full",
   name: "border-airtable text-left",
   trHeader: "!bg-transparent border-b border-neutral-650 text-14 text-neutral-650 ",
-  thHeader: " text-14 uppercase !px-2 !py-2 font-medium text-14",
+  thHeader: " text-14 uppercase !pr-4 !pl-0 !py-2 font-medium text-14",
   tBody: "",
   trBody: "bg-white border-b border-neutral-200 last:border-0 hover:bg-gray-100",
-  tdBody: "first:rounded-l-lg last:rounded-r-lg text-16-light text-gray-700 px-2 py-3 border-b border-neutral-200",
+  tdBody: "first:rounded-l-lg last:rounded-r-lg text-16-light text-gray-700 pr-4 pl-0 py-3 border-b border-neutral-200",
   thead: "bg-transparent"
 };
diff --git a/src/components/extensive/Tables/TreeSpeciesTablePD.tsx b/src/components/extensive/Tables/TreeSpeciesTablePD.tsx
@@ -1,3 +1,5 @@
+import classNames from "classnames";
+
 import LinearProgressBar from "@/components/elements/ProgressBar/LinearProgressBar/LinearProgressBar";
 import Table from "@/components/elements/Table/Table";
 import { VARIANT_TABLE_TREE_SPECIES } from "@/components/elements/Table/TableVariants";
@@ -13,17 +15,26 @@ export type ModelNameType =
   | "treeCountSite"
   | "treeCount/Goal"
   | "speciesCount/Goal"
+  | "saplingsCount"
+  | "seedCount/Goal"
   | "saplingsCount";
 
 export interface TreeSpeciesTablePDProps {
   data: any[];
   modelName: ModelNameType;
+  headerName?: string;
+  secondColumnWidth?: string;
 }
 
-const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
+const TreeSpeciesTablePD = ({
+  data,
+  modelName,
+  headerName = "species Name",
+  secondColumnWidth = ""
+}: TreeSpeciesTablePDProps) => {
   const rowSpeciesName = {
     accessorKey: "name",
-    header: "species Name",
+    header: headerName,
     enableSorting: false,
     cell: (props: any) => {
       const value = props.getValue();
@@ -40,7 +51,10 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
             >
               <Icon
                 name={IconNames.NON_SCIENTIFIC_NAME_CUSTOM}
-                className="mr-1 h-7 w-7 text-blueCustom-700 opacity-50"
+                className={classNames(
+                  "mr-1 h-7 w-7",
+                  value[2] && value[2] === "approved" ? "text-tertiary-650" : "text-blueCustom-700 opacity-50"
+                )}
               />
             </ToolTip>
           </div>
@@ -60,7 +74,13 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
               placement="right"
               textVariantContent="text-14"
             >
-              <Icon name={IconNames.NATIVE_SPECIES} className="h-7 w-7 text-blueCustom-700 opacity-50" />
+              <Icon
+                name={IconNames.NATIVE_SPECIES}
+                className={classNames(
+                  "h-7 w-7",
+                  value[2] && value[2] === "approved" ? "text-tertiary-650" : "text-blueCustom-700 opacity-50"
+                )}
+              />
             </ToolTip>
           </div>
         );
@@ -78,7 +98,10 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
             >
               <Icon
                 name={IconNames.NEW_TAG_TREE_SPECIES_CUSTOM}
-                className="mr-1 h-7 w-7 text-blueCustom-700 opacity-50"
+                className={classNames(
+                  "mr-1 h-7 w-7",
+                  value[2] && value[2] === "approved" ? "text-tertiary-650" : "text-blueCustom-700 opacity-50"
+                )}
               />
             </ToolTip>
           </div>
@@ -93,6 +116,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "treeCount",
       header: "Tree CounT",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return <div className="text-14 !font-bold">{value}</div>;
@@ -106,6 +130,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "seedCount",
       header: "SEED Count",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return <div className="text-14 !font-bold">{value}</div>;
@@ -119,6 +144,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "nonTreeCount",
       header: "Non Tree Count",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return <div className="text-14 !font-bold">{value}</div>;
@@ -136,6 +162,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "treeCount",
       header: "Tree Count",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return <div className="text-14 !font-bold">{value}</div>;
@@ -149,6 +176,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "treeCountGoal",
       header: "Tree Count / goal",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return (
@@ -165,12 +193,36 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       }
     }
   ];
+
+  const columnSeedCountGoal = [
+    rowSpeciesName,
+    {
+      accessorKey: "seedCountGoal",
+      header: "Seed Count / goal",
+      enableSorting: false,
+      meta: { width: secondColumnWidth },
+      cell: (props: any) => {
+        const value = props.getValue();
+        return (
+          <div className="grid grid-cols-2 gap-3">
+            <LinearProgressBar color="primary" value={50} className={"mt-2 !h-1.5 bg-primary-200 lg:!h-2"} />
+            <Text variant="text-14-bold" className="flex gap-2">
+              {value[0]}
+              <Text variant="text-14-light">of {value[1]}</Text>
+            </Text>
+          </div>
+        );
+      }
+    }
+  ];
+
   const columnSpeciesCountGoal = [
     rowSpeciesName,
     {
       accessorKey: "speciesCountGoal",
       header: "SPECIES Count / goal",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return (
@@ -194,6 +246,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
       accessorKey: "treeCount",
       header: "saplings CounT",
       enableSorting: false,
+      meta: { width: secondColumnWidth },
       cell: (props: any) => {
         const value = props.getValue();
         return <div className="text-14 !font-bold">{value}</div>;
@@ -208,6 +261,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => {
     treeCountSite: columnTreeCountSite,
     "treeCount/Goal": columnTreeCountGoal,
     "speciesCount/Goal": columnSpeciesCountGoal,
+    "seedCount/Goal": columnSeedCountGoal,
     saplingsCount: columnSaplingsCount
   };