diff --git a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx index 3dff79d6f..5e7989a32 100644 --- a/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx +++ b/src/admin/components/ResourceTabs/PolygonReviewTab/components/PolygonDrawer/components/VersionHistory.tsx @@ -362,7 +362,8 @@ const VersionHistory = ({ placeholder="Select Polygon Version" options={polygonVersionData ?? []} optionVariant="text-12-light" - titleClassname="one-line-text !w-[96%] !text-nowrap" + titleClassname="one-line-text !w-full !text-nowrap" + titleContainerClassName="!w-[92%] !text-nowrap" defaultValue={[selectPolygonVersion?.uuid ?? selectedPolygon?.uuid] as string[]} onChange={e => { const polygonVersionData = (data as SitePolygonsDataResponse)?.find(item => item.uuid === e[0]); 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/elements/Inputs/Dropdown/Dropdown.tsx b/src/components/elements/Inputs/Dropdown/Dropdown.tsx index b6815374e..dff695d13 100644 --- a/src/components/elements/Inputs/Dropdown/Dropdown.tsx +++ b/src/components/elements/Inputs/Dropdown/Dropdown.tsx @@ -60,6 +60,7 @@ export interface DropdownProps { onInternalError?: (error: ErrorOption) => void; showSelectAll?: boolean; titleClassname?: string; + titleContainerClassName?: string; } const otherKey = "other#value#key"; const getAllowedValues = (values: OptionValue[], options: Option[]) => @@ -206,7 +207,13 @@ const Dropdown = (props: PropsWithChildren) => { )} > {props.prefix} -
+
{ - 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 = () => { - +