[TM-1562] update terrafund report landing pages with new fields (#769)

src/admin/components/Tables/TreeSpeciesTableTF.tsx

@@ -0,0 +1,139 @@
+import { Card, Divider, Typography } from "@mui/material";
+import { Box, Stack } from "@mui/system";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
+import { useT } from "@transifex/react";
+import { FC } from "react";
+import { Else, If, Then } from "react-if";
+
+import Text from "@/components/elements/Text/Text";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+import { EstablishmentEntityType } from "@/connections/EstablishmentTrees";
+import { useGetV2TreeSpeciesEntityUUID } from "@/generated/apiComponents";
+
+type TreeSpeciesTableTFProps = {
+  uuid: string;
+  entity: EstablishmentEntityType;
+  total?: number;
+  totalText?: string;
+  title?: string;
+  countColumnName?: string;
+  collection?: string;
+};
+
+const TreeSpeciesTableTF: FC<TreeSpeciesTableTFProps> = ({
+  uuid,
+  entity,
+  total,
+  totalText,
+  title,
+  countColumnName,
+  collection = "tree-planted"
+}) => {
+  const t = useT();
+  const { data: rows } = useGetV2TreeSpeciesEntityUUID({
+    pathParams: {
+      uuid,
+      entity: entity?.replace("Report", "-report")!
+    }
+  });
+
+  const columns: GridColDef[] = [
+    {
+      field: "name",
+      headerName: "SPECIES NAME",
+      flex: 1,
+      sortable: false,
+      filterable: false
+    },
+    {
+      field: "amount",
+      headerName: countColumnName ?? "TREE COUNT",
+      type: "number",
+      flex: 1,
+      headerAlign: "left",
+      align: "left",
+      sortable: false,
+      filterable: false
+    }
+  ];
+
+  if (!rows || !rows.data) return null;
+
+  return (
+    <Card className="!shadow-none">
+      <Stack>
+        <Box paddingX={3} paddingY={2}>
+          <Text variant="text-24-bold" className="text-darkCustom">
+            {title ?? "N/A"}
+          </Text>
+        </Box>
+        <Box paddingX={3} paddingY={2}>
+          <div className="flex items-center gap-1">
+            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#00000008]">
+              <Icon name={IconNames.TREE_DASHABOARD} className="text-primary" />
+            </div>
+            <Text variant="text-16-semibold" className="text-grey-500">
+              {totalText}:
+            </Text>
+            <Text variant="text-24-bold" className="text-black">
+              {new Intl.NumberFormat("en-US").format(total!) ?? "N/A"}
+            </Text>
+          </div>
+        </Box>
+
+        <Divider />
+
+        <If condition={rows.data.length > 0}>
+          <Then>
+            <DataGrid
+              rows={rows?.data.filter(row => row.collection == collection) as any}
+              columns={columns.map(column =>
+                column.field === "name"
+                  ? {
+                      ...column,
+                      renderCell: params => (
+                        <div className="flex items-center gap-1">
+                          <Text variant="text-14-light" className="text-black">
+                            {params?.row?.name}
+                          </Text>
+                          <div title={t("Non-Scientific Name")}>
+                            <Icon
+                              name={IconNames.NON_SCIENTIFIC_NAME_CUSTOM}
+                              className="min-h-8 min-w-8 h-8 w-8 text-[#092C3C80]"
+                            />
+                          </div>
+                        </div>
+                      )
+                    }
+                  : column
+              )}
+              getRowId={row => row.uuid}
+              sx={{
+                border: "none",
+                "& .MuiDataGrid-columnHeader": {
+                  paddingX: 3
+                },
+                "& .MuiDataGrid-cell": {
+                  paddingX: 3
+                }
+              }}
+              pageSizeOptions={[5, 10, 25, 50]}
+              initialState={{
+                pagination: {
+                  paginationModel: { page: 0, pageSize: 5 }
+                }
+              }}
+            />
+          </Then>
+          <Else>
+            <Box padding={3}>
+              <Typography>No {title} Recorded</Typography>
+            </Box>
+          </Else>
+        </If>
+      </Stack>
+    </Card>
+  );
+};
+
+export default TreeSpeciesTableTF;

src/components/elements/Field/TextField.tsx

@@ -2,18 +2,20 @@ import { DetailedHTMLProps, FC, HTMLAttributes } from "react";
 
 import Text from "@/components/elements/Text/Text";
 import { withFrameworkShow } from "@/context/framework.provider";
+import { TextVariants } from "@/types/common";
 
 import BaseField from "./BaseField";
 
 export interface TextFieldProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   label: string;
   value: string;
+  variantLabel?: TextVariants;
 }
 
-const TextField: FC<TextFieldProps> = ({ label, value, className, ...rest }) => (
+const TextField: FC<TextFieldProps> = ({ label, value, variantLabel = "text-16-bold", className, ...rest }) => (
   <BaseField {...rest} className={className}>
     <div className="flex items-center justify-between">
-      <Text variant="text-16-bold">{label}</Text>
+      <Text variant={variantLabel!}>{label}</Text>
       <Text variant="text-16-light">{value || "N/A"}</Text>
     </div>
   </BaseField>

src/components/extensive/Icon/Icon.tsx

@@ -208,7 +208,10 @@ export enum IconNames {
   TRASH_TA = "trash-ta",
   EDIT_TA = "edit-ta",
   NON_SCIENTIFIC_NAME = "non-scientific name",
-  NEW_TAG_TREE_SPECIES = "new-tag-tree-species"
+  NEW_TAG_TREE_SPECIES = "new-tag-tree-species",
+  NON_SCIENTIFIC_NAME_CUSTOM = "non-scientific name custom",
+  TREE_DASHABOARD = "tree-dashboard",
+  ASSISTED_NATURAL_REGENERATION = "assisted-natural-regeneration"
 }
 
 export interface IconProps {