From 3cea852f63bb97f3f72b8eb1e1495545510e6a8f Mon Sep 17 00:00:00 2001 From: Nathan Curtis Date: Tue, 17 Dec 2024 13:58:25 -0800 Subject: [PATCH 1/3] [TM-1527] Update the defaults. --- next.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index 2add3246d..a7f8b6f5e 100644 --- a/next.config.js +++ b/next.config.js @@ -45,8 +45,8 @@ const userSentryWebpackPluginOptions = { // Suppresses source map uploading logs during build silent: true, - org: process.env.SENTRY_ORG || "3-sided-cube", - project: process.env.SENTRY_PROJECT || "wri-web-platform-version-2", + org: process.env.SENTRY_ORG ?? "wri-terramatch", + project: process.env.SENTRY_PROJECT ?? "terramatch-frontend", authToken: process.env.SENTRY_AUTH_TOKEN }; From f445d5604fca6819c18bb0968e05f7794ba9738a Mon Sep 17 00:00:00 2001 From: Dotnara Condori Date: Wed, 18 Dec 2024 15:58:12 -0400 Subject: [PATCH 2/3] [TM-1425] fix error color tag in table monitored (#766) * [TM-1425] fix error color tag in table monitored * [TM-1425] fix error table link --- .../components/Fields/CustomChipField.tsx | 5 +- .../MonitoredTab/components/DataCard.tsx | 290 +++++++++--------- 2 files changed, 151 insertions(+), 144 deletions(-) diff --git a/src/admin/components/Fields/CustomChipField.tsx b/src/admin/components/Fields/CustomChipField.tsx index e0a578304..66f1e51c9 100644 --- a/src/admin/components/Fields/CustomChipField.tsx +++ b/src/admin/components/Fields/CustomChipField.tsx @@ -16,7 +16,10 @@ const STATUS_CLASSNAME_MAP: { [key: string]: string } = { "Needs Info": "bg-tertiary-50 text-tertiary-650", "Needs more information": "bg-tertiary-50 text-tertiary-650", "More info requested": "bg-tertiary-50 text-tertiary-650", - "No Update": "bg-grey-200 text-grey-500" + "No Update": "bg-grey-200 text-grey-500", + approved: "bg-green-30 text-green-100", + submitted: "bg-blue-200 text-blue", + "needs-more-information": "bg-tertiary-50 text-tertiary-650" }; const CustomChipField = ({ diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx index ec2e28b5c..3abdfde48 100644 --- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx +++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx @@ -120,144 +120,6 @@ const COMMON_COLUMNS: ColumnDef[] = [ type CustomColumnDefInternal = ColumnDef & { type?: string }; -const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.tree_planting", - header: "Tree Planting", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.95%" } } - }, - { - accessorKey: "data.assisted_natural_regeneration", - header: () => ( - <> - Asst. Nat. -
- Regeneration - - ), - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "12.09%" } } - }, - { - accessorKey: "data.direct_seeding", - header: () => ( - <> - Direct -
- Seeding - - ), - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "8.57%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -
- -
- ), - meta: { style: { width: "5%" } } - } -]; - -const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.australasian", - header: "Australasian", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.45%" } } - }, - { - accessorKey: "data.afrotropical", - header: "Afrotropical", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.05%" } } - }, - { - accessorKey: "data.paleartic", - header: "Paleartic11", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "10.33%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -
- -
- ), - meta: { style: { width: "5%" } } - } -]; - -const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef[] = [ - ...COMMON_COLUMNS, - { - accessorKey: "data.agroforest", - header: "Agroforest", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "11.95%" } } - }, - { - accessorKey: "data.natural_forest", - header: "Natural Forest", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "12.09%" } } - }, - { - accessorKey: "data.mangrove", - header: "Mangrove", - cell: (props: any) => { - const value = props.getValue(); - return value ?? "-"; - }, - meta: { style: { width: "8.57%" } } - }, - { - accessorKey: "more", - header: "", - enableSorting: false, - cell: props => ( -
- -
- ), - meta: { style: { width: "5%" } } - } -]; - const DROPDOWN_OPTIONS = [ { title: "Tree Cover Loss", @@ -549,7 +411,9 @@ const DataCard = ({ enableSorting: false, cell: props => (
- +
), meta: { style: { top: `${topHeaderFirstTable}`, borderRadius: "0" } } @@ -558,6 +422,150 @@ const DataCard = ({ } ]; + const TABLE_COLUMNS_HECTARES_STRATEGY: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.tree_planting", + header: "Tree Planting", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.95%" } } + }, + { + accessorKey: "data.assisted_natural_regeneration", + header: () => ( + <> + Asst. Nat. +
+ Regeneration + + ), + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "12.09%" } } + }, + { + accessorKey: "data.direct_seeding", + header: () => ( + <> + Direct +
+ Seeding + + ), + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "8.57%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + + const TABLE_COLUMNS_HECTARES_ECO_REGION: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.australasian", + header: "Australasian", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.45%" } } + }, + { + accessorKey: "data.afrotropical", + header: "Afrotropical", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.05%" } } + }, + { + accessorKey: "data.paleartic", + header: "Paleartic11", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "10.33%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + + const TABLE_COLUMNS_HECTARES_LAND_USE: ColumnDef[] = [ + ...COMMON_COLUMNS, + { + accessorKey: "data.agroforest", + header: "Agroforest", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "11.95%" } } + }, + { + accessorKey: "data.natural_forest", + header: "Natural Forest", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "12.09%" } } + }, + { + accessorKey: "data.mangrove", + header: "Mangrove", + cell: (props: any) => { + const value = props.getValue(); + return value ?? "-"; + }, + meta: { style: { width: "8.57%" } } + }, + { + accessorKey: "more", + header: "", + enableSorting: false, + cell: props => ( +
+ +
+ ), + meta: { style: { width: "5%" } } + } + ]; + const TABLE_COLUMNS_MAPPING: Record = { treeCoverLoss: TABLE_COLUMNS_TREE_COVER_LOSS, treeCoverLossFires: TABLE_COLUMNS_TREE_COVER_LOSS, @@ -636,10 +644,6 @@ const DataCard = ({ classNameWrapper="!overflow-visible" visibleRows={50} border={1} - onRowClick={(row: any) => { - navigate(`${basename}/site/${row?.site_id}/show/1`); - setSelectPolygonFromMap?.({ isOpen: true, uuid: row?.poly_id }); - }} /> From f46edf724f2c95c3f9c6692ecc9612ee977b73c2 Mon Sep 17 00:00:00 2001 From: Limber Mamani Vallejos Date: Thu, 19 Dec 2024 09:34:58 -0400 Subject: [PATCH 3/3] [TM-1562] update terrafund report landing pages with new fields --- .../components/Tables/TreeSpeciesTableTF.tsx | 139 +++++++++++++ .../icons/assisted-natural-regeneration.svg | 8 + .../icons/non-scientific name custom.svg | 9 + src/assets/icons/tree-dashboard.svg | 3 + src/components/elements/Field/TextField.tsx | 6 +- src/components/extensive/Icon/Icon.tsx | 5 +- .../project-report/tabs/TFSocioeconomic.tsx | 192 ++++++++++-------- src/pages/reports/site-report/[uuid].page.tsx | 60 +++++- 8 files changed, 327 insertions(+), 95 deletions(-) create mode 100644 src/admin/components/Tables/TreeSpeciesTableTF.tsx create mode 100644 src/assets/icons/assisted-natural-regeneration.svg create mode 100644 src/assets/icons/non-scientific name custom.svg create mode 100644 src/assets/icons/tree-dashboard.svg diff --git a/src/admin/components/Tables/TreeSpeciesTableTF.tsx b/src/admin/components/Tables/TreeSpeciesTableTF.tsx new file mode 100644 index 000000000..f862292d4 --- /dev/null +++ b/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 = ({ + 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 ( + + + + + {title ?? "N/A"} + + + +
+
+ +
+ + {totalText}: + + + {new Intl.NumberFormat("en-US").format(total!) ?? "N/A"} + +
+ + + + + 0}> + + row.collection == collection) as any} + columns={columns.map(column => + column.field === "name" + ? { + ...column, + renderCell: params => ( +
+ + {params?.row?.name} + +
+ +
+
+ ) + } + : 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 } + } + }} + /> + + + + No {title} Recorded + + + + + + ); +}; + +export default TreeSpeciesTableTF; diff --git a/src/assets/icons/assisted-natural-regeneration.svg b/src/assets/icons/assisted-natural-regeneration.svg new file mode 100644 index 000000000..fc129bce4 --- /dev/null +++ b/src/assets/icons/assisted-natural-regeneration.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/non-scientific name custom.svg b/src/assets/icons/non-scientific name custom.svg new file mode 100644 index 000000000..e92802b97 --- /dev/null +++ b/src/assets/icons/non-scientific name custom.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/tree-dashboard.svg b/src/assets/icons/tree-dashboard.svg new file mode 100644 index 000000000..db1ba8975 --- /dev/null +++ b/src/assets/icons/tree-dashboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/elements/Field/TextField.tsx b/src/components/elements/Field/TextField.tsx index 24fabb75a..344b79e12 100644 --- a/src/components/elements/Field/TextField.tsx +++ b/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, HTMLDivElement> { label: string; value: string; + variantLabel?: TextVariants; } -const TextField: FC = ({ label, value, className, ...rest }) => ( +const TextField: FC = ({ label, value, variantLabel = "text-16-bold", className, ...rest }) => (
- {label} + {label} {value || "N/A"}
diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx index 8aee895d3..1260acbbf 100644 --- a/src/components/extensive/Icon/Icon.tsx +++ b/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 { diff --git a/src/pages/reports/project-report/tabs/TFSocioeconomic.tsx b/src/pages/reports/project-report/tabs/TFSocioeconomic.tsx index f84fe5b6e..c8c5b5c60 100644 --- a/src/pages/reports/project-report/tabs/TFSocioeconomic.tsx +++ b/src/pages/reports/project-report/tabs/TFSocioeconomic.tsx @@ -3,9 +3,6 @@ import { Fragment } from "react"; import LongTextField from "@/components/elements/Field/LongTextField"; import TextField from "@/components/elements/Field/TextField"; -import FilePreviewCard from "@/components/elements/FilePreviewCard/FilePreviewCard"; -import Table from "@/components/elements/Table/Table"; -import { VARIANT_TABLE_SECONDARY } from "@/components/elements/Table/TableVariants"; import { GRID_VARIANT_GREEN } from "@/components/extensive/DemographicsCollapseGrid/DemographicVariant"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; @@ -15,33 +12,12 @@ import Loader from "@/components/generic/Loading/Loader"; import { ContextCondition } from "@/context/ContextCondition"; import { Framework } from "@/context/framework.provider"; import useDemographicData from "@/hooks/useDemographicData"; -import { downloadFile } from "@/utils/network"; interface ReportOverviewTabProps { report: any; dueAt?: string; } -const BreakdownTable = ({ data }: { data: { name: string; value?: number }[] }) => { - const t = useT(); - - return ( - {t("Count")}, - cell: props => {props.getValue() as string} - } - ]} - data={data.map(item => ({ ...item, value: item.value ?? 0 }))} - /> - ); -}; - const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { const t = useT(); const { grids: gridsDirectWorkdays } = useDemographicData( @@ -60,6 +36,7 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { "Convergence Workdays", GRID_VARIANT_GREEN ); + const sumTotalJobs = (jobs: Array) => jobs.reduce((acc, key) => acc + (report[key] || 0), 0); return ( @@ -74,36 +51,48 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { )} {report.new_jobs_description} - - {report.new_jobs_description} - + {report.new_jobs_description} + - + + + + + + + + + + - {report.volunteers_work_description} - + {report.volunteers_work_description} + + + + + + + + + {report.beneficiaries_income_increase_description} + @@ -130,28 +119,82 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { + + + - {report.beneficiaries_description} - - {report.beneficiaries_income_increase_description} + + {report.beneficiaries_description} - + + + + + + + + + {report.beneficiaries_skills_knowledge_increase_description} - + + + + + + + + + {report.indirect_beneficiaries_description} + + - - {gridsConvergenceWorkdays.length == 0 ? ( @@ -179,27 +222,6 @@ const TFSocioeconomicTab = ({ report }: ReportOverviewTabProps) => { - - - - - - - - - - - {report.socioeconomic_benefits && ( - - {report.socioeconomic_benefits.map((item: any) => ( - downloadFile(f.url)} /> - ))} - - )} - diff --git a/src/pages/reports/site-report/[uuid].page.tsx b/src/pages/reports/site-report/[uuid].page.tsx index 5a77973f5..8cb7ad215 100644 --- a/src/pages/reports/site-report/[uuid].page.tsx +++ b/src/pages/reports/site-report/[uuid].page.tsx @@ -1,3 +1,4 @@ +import { Box } from "@mui/system"; import { useT } from "@transifex/react"; import Head from "next/head"; import Link from "next/link"; @@ -5,6 +6,7 @@ import { useRouter } from "next/router"; import { Fragment } from "react"; import { Else, If, Then, When } from "react-if"; +import TreeSpeciesTableTF from "@/admin/components/Tables/TreeSpeciesTableTF"; import EmptyState from "@/components/elements/EmptyState/EmptyState"; import ButtonField from "@/components/elements/Field/ButtonField"; import GenericField from "@/components/elements/Field/GenericField"; @@ -13,7 +15,7 @@ import TextField from "@/components/elements/Field/TextField"; import Paper from "@/components/elements/Paper/Paper"; import Text from "@/components/elements/Text/Text"; import EntityMapAndGalleryCard from "@/components/extensive/EntityMapAndGalleryCard/EntityMapAndGalleryCard"; -import { IconNames } from "@/components/extensive/Icon/Icon"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; @@ -24,6 +26,7 @@ import SeedingsTable from "@/components/extensive/Tables/SeedingsTable"; import TreeSpeciesTable from "@/components/extensive/Tables/TreeSpeciesTable"; import Loader from "@/components/generic/Loading/Loader"; import LoadingContainer from "@/components/generic/Loading/LoadingContainer"; +import { EstablishmentEntityType } from "@/connections/EstablishmentTrees"; import { COLLECTION_SITE_PAID_OTHER, SITE_WORKDAY_COLLECTIONS } from "@/constants/workdayCollections"; import { ContextCondition } from "@/context/ContextCondition"; import FrameworkProvider, { Framework } from "@/context/framework.provider"; @@ -131,11 +134,57 @@ const SiteReportDetailPage = () => { {siteReport.polygon_status} {siteReport.technical_narrative} - + {siteReport.technical_narrative} {siteReport.public_narrative} - + + + + + + {t("Assisted Natural Regeneration")} + + + +
+
+ +
+ + {t("ESTIMATED NUMBER OF TREES REGENERATING (ON REPORT)")}: + + + {new Intl.NumberFormat("en-US").format(siteReport.total_trees_planted_count!) ?? "N/A"} + +
+ + + + {t("DESCRIPTION OF ANR ACTIVITIES")}: + + + {siteReport.regeneration_description} + + + + { - - {siteReport.polygon_status} - @@ -205,7 +251,7 @@ const SiteReportDetailPage = () => { - +