diff --git a/public/images/graphic-2.png b/public/images/graphic-2.png index 9a61624d1..6a2df90c1 100644 Binary files a/public/images/graphic-2.png and b/public/images/graphic-2.png differ diff --git a/public/images/graphic-5.png b/public/images/graphic-5.png index a91366c84..dadc650d4 100644 Binary files a/public/images/graphic-5.png and b/public/images/graphic-5.png differ diff --git a/src/assets/icons/leaf-circle_pd.svg b/src/assets/icons/leaf-circle_pd.svg new file mode 100644 index 000000000..42a6c7ed1 --- /dev/null +++ b/src/assets/icons/leaf-circle_pd.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/leaf-native-circle_pd.svg b/src/assets/icons/leaf-native-circle_pd.svg new file mode 100644 index 000000000..0a676c4fd --- /dev/null +++ b/src/assets/icons/leaf-native-circle_pd.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/assets/icons/leaf-planted-circle_pd.svg b/src/assets/icons/leaf-planted-circle_pd.svg new file mode 100644 index 000000000..b43380f13 --- /dev/null +++ b/src/assets/icons/leaf-planted-circle_pd.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/native-species.svg b/src/assets/icons/native-species.svg new file mode 100644 index 000000000..2a29fb325 --- /dev/null +++ b/src/assets/icons/native-species.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/new-tag-tree-species-custom.svg b/src/assets/icons/new-tag-tree-species-custom.svg new file mode 100644 index 000000000..7804dfd4a --- /dev/null +++ b/src/assets/icons/new-tag-tree-species-custom.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/non-trees-planted-circle.svg b/src/assets/icons/non-trees-planted-circle.svg new file mode 100644 index 000000000..fbfb66999 --- /dev/null +++ b/src/assets/icons/non-trees-planted-circle.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/non-trees-planted.svg b/src/assets/icons/non-trees-planted.svg new file mode 100644 index 000000000..6019c7be3 --- /dev/null +++ b/src/assets/icons/non-trees-planted.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/refresh-circle_pd.svg b/src/assets/icons/refresh-circle_pd.svg new file mode 100644 index 000000000..cf952dc6d --- /dev/null +++ b/src/assets/icons/refresh-circle_pd.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/seed-planted.svg b/src/assets/icons/seed-planted.svg new file mode 100644 index 000000000..a7723fa88 --- /dev/null +++ b/src/assets/icons/seed-planted.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/survival-rate.svg b/src/assets/icons/survival-rate.svg new file mode 100644 index 000000000..ec6a118f0 --- /dev/null +++ b/src/assets/icons/survival-rate.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/tree-circle-pd.svg b/src/assets/icons/tree-circle-pd.svg new file mode 100644 index 000000000..934676b45 --- /dev/null +++ b/src/assets/icons/tree-circle-pd.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/trees-regenerating.svg b/src/assets/icons/trees-regenerating.svg new file mode 100644 index 000000000..91e624540 --- /dev/null +++ b/src/assets/icons/trees-regenerating.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx index dfa87f3f4..b29536d87 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCard.tsx @@ -4,6 +4,7 @@ import { When } from "react-if"; import Text from "@/components/elements/Text/Text"; import { withFrameworkShow } from "@/context/framework.provider"; +import { TextVariants } from "@/types/common"; import LinearProgressBar from "../../ProgressBar/LinearProgressBar/LinearProgressBar"; import GoalProgressCardItem, { GoalProgressCardItemProps } from "./GoalProgressCardItem"; @@ -11,11 +12,16 @@ import GoalProgressCardItem, { GoalProgressCardItemProps } from "./GoalProgressC export interface GoalProgressCardProps extends DetailedHTMLProps, HTMLDivElement> { value?: number; limit?: number; - label: string; + label?: string; items?: GoalProgressCardItemProps[]; hasProgress?: boolean; progressBarValue?: number; labelValue?: string; + totalValue?: string | number; + classNameLabel?: string; + labelVariant?: TextVariants; + classNameCard?: string; + classNameLabelValue?: string; } const GoalProgressCard: FC = ({ @@ -27,6 +33,11 @@ const GoalProgressCard: FC = ({ hasProgress = true, className, labelValue, + totalValue, + classNameLabel, + labelVariant, + classNameCard, + classNameLabelValue, ...rest }) => { const value = _val ?? 0; @@ -38,17 +49,23 @@ const GoalProgressCard: FC = ({
{/* Left */} -
- +
+ {label} - + + arrow-right + + {value?.toLocaleString()}  - - of {limit?.toLocaleString()} + + of {limit?.toLocaleString() ?? totalValue?.toLocaleString()} + + + {labelValue} - {labelValue} + = ({ {/* Right */} {items && ( -
+
{items.map(item => ( ))} diff --git a/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx b/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx index 639de32e1..66cbe1857 100644 --- a/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx +++ b/src/components/elements/Cards/GoalProgressCard/GoalProgressCardItem.tsx @@ -1,26 +1,54 @@ +import { useT } from "@transifex/react"; import classNames from "classnames"; import { DetailedHTMLProps, FC, HTMLAttributes } from "react"; +import { When } from "react-if"; import Text from "@/components/elements/Text/Text"; import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import { TextVariants } from "@/types/common"; export interface GoalProgressCardItemProps extends DetailedHTMLProps, HTMLDivElement> { iconName: IconNames; label: string; - value: number; + value: number | string; + classNameLabel?: string; + classNameLabelValue?: string; + variantLabel?: TextVariants; + limit?: number; } -const GoalProgressCardItem: FC = ({ iconName, label, value: _val, className, ...rest }) => { +const GoalProgressCardItem: FC = ({ + iconName, + label, + value: _val, + className, + classNameLabel, + classNameLabelValue, + variantLabel, + limit, + ...rest +}) => { + const t = useT(); const value = _val || 0; return (
- + - + {label} - {value?.toLocaleString()} + + {value?.toLocaleString()} + + + {t("of")} {limit} + + +
); }; diff --git a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot index 2d1120327..8fb1ab493 100644 --- a/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot +++ b/src/components/elements/Cards/GoalProgressCard/__snapshots__/GoalProgressCard.stories.storyshot @@ -22,10 +22,6 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card No Progress > 150   -

-

23 @@ -138,7 +130,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And Trees Planed

1,332 @@ -162,7 +154,7 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress And Trash Removed

530,000 @@ -202,10 +194,6 @@ exports[`Storyshots Components/Elements/Cards/GoalProgressCard/Card Progress No of 150

-

530,000 diff --git a/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot b/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot index c5be3c467..7d340fda7 100644 --- a/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot +++ b/src/components/elements/Cards/ItemMonitoringCard/__snapshots__/ItemMonitoringCard.stories.storyshot @@ -35,10 +35,10 @@ exports[`Storyshots Components/Elements/Cards/ItemMonitoringCards Default 1`] = } >

{ const contentRef = useRef(null); @@ -160,16 +166,22 @@ const ToolTip = ({ ref={tooltipRef} >

@@ -178,7 +190,11 @@ const ToolTip = ({ {t(title)} - + {t(content)}
diff --git a/src/components/elements/Tooltip/__snapshots__/Tooltip.stories.storyshot b/src/components/elements/Tooltip/__snapshots__/Tooltip.stories.storyshot index 3cd3b1afb..f9a5fdee6 100644 --- a/src/components/elements/Tooltip/__snapshots__/Tooltip.stories.storyshot +++ b/src/components/elements/Tooltip/__snapshots__/Tooltip.stories.storyshot @@ -17,10 +17,10 @@ exports[`Storyshots Components/Elements/Tooltip Click 1`] = ` } >

{ + const rowSpeciesName = { + accessorKey: "name", + header: "species Name", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + if (value[0] === "Non-scientific name") { + return ( +

+ {value[0]} + + + +
+ ); + } + if (value[1] === "tree") { + return
{value[0]}
; + } + if (value[1] === "Native species") { + return ( +
+ {value[0]} + + + +
+ ); + } + if (value[1] === "new") { + return ( +
+ {value[0]} + + + +
+ ); + } + } + }; + + const columnTreeCount = [ + rowSpeciesName, + { + accessorKey: "treeCount", + header: "Tree CounT", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return
{value}
; + } + } + ]; + + const columnSeedCount = [ + rowSpeciesName, + { + accessorKey: "seedCount", + header: "SEED Count", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return
{value}
; + } + } + ]; + + const columnNonTreeCount = [ + rowSpeciesName, + { + accessorKey: "nonTreeCount", + header: "Non Tree Count", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return
{value}
; + } + } + ]; + + const columnTreeCountSite = [ + { + accessorKey: "name", + header: "Site Name", + enableSorting: false + }, + { + accessorKey: "treeCount", + header: "Tree Count", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return
{value}
; + } + } + ]; + + const columnTreeCountGoal = [ + rowSpeciesName, + { + accessorKey: "treeCountGoal", + header: "Tree Count / goal", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return ( +
+ + + {value[0]} + + of {value[1]} + + +
+ ); + } + } + ]; + const columnSpeciesCountGoal = [ + rowSpeciesName, + { + accessorKey: "speciesCountGoal", + header: "SPECIES Count / goal", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return ( +
+ + + {value[0]} + + of {value[1]} + + +
+ ); + } + } + ]; + + const columnSaplingsCount = [ + rowSpeciesName, + { + accessorKey: "treeCount", + header: "saplings CounT", + enableSorting: false, + cell: (props: any) => { + const value = props.getValue(); + return
{value}
; + } + } + ]; + + const columnTable: { [key in ModelNameType]: any[] } = { + treeCount: columnTreeCount, + seedCount: columnSeedCount, + nonTreeCount: columnNonTreeCount, + treeCountSite: columnTreeCountSite, + "treeCount/Goal": columnTreeCountGoal, + "speciesCount/Goal": columnSpeciesCountGoal, + saplingsCount: columnSaplingsCount + }; + + return ( +
+ + + ); +}; + +export default TreeSpeciesTablePD; diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx index 7934e3f9f..2389732c3 100644 --- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx @@ -1,16 +1,13 @@ import { useT } from "@transifex/react"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; -import FieldsExpander from "@/components/elements/Field/FieldsExpander"; -import GenericField from "@/components/elements/Field/GenericField"; -import TextField from "@/components/elements/Field/TextField"; -import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants"; -import { IconNames } from "@/components/extensive/Icon/Icon"; +import Text from "@/components/elements/Text/Text"; +import Icon, { IconNames } from "@/components/extensive/Icon/Icon"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; -import TreeSpeciesTable from "@/components/extensive/Tables/TreeSpeciesTable"; +import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD"; import { ContextCondition } from "@/context/ContextCondition"; import { Framework } from "@/context/framework.provider"; @@ -18,108 +15,642 @@ interface GoalsAndProgressProps { project: any; } +export const LABEL_LEGEND = [ + { + label: { key: "Trees", render: "Trees" }, + color: "bg-primary" + }, + { + label: { key: "Seeds", render: "Seeds" }, + color: "bg-blueCustom-900" + }, + { + label: { key: "Regenerating", render: "Regenerating" }, + color: "bg-secondary-600" + } +]; + const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => { const t = useT(); + const dataTreeCount = [ + { + name: ["Species scientific name", "tree"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "7,500" + }, + { + name: ["Non-scientific name", "tree"], + treeCount: "4,040" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "3,200" + }, + { + name: ["Species scientific name", "new"], + treeCount: "3,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "0" + } + ]; + + const dataSeedCount = [ + { + name: ["Species scientific name", "tree"], + seedCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + seedCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + seedCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + seedCount: "7,500" + } + ]; + const dataNonTreeCount = [ + { + name: ["Species scientific name", "tree"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "7,500" + } + ]; + + const dataTreeCountSite = [ + { + name: "Site Name", + treeCount: "2,500" + }, + { + name: "Site Name", + treeCount: "1,850" + }, + { + name: "Site Name", + treeCount: "1,000" + }, + { + name: "Site Name", + treeCount: "960" + }, + { + name: "Site Name", + treeCount: "620" + }, + { + name: "Site Name", + treeCount: "450" + }, + { + name: "Site Name", + treeCount: "300" + } + ]; + + const dataTreeCountGoal = [ + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["45,0000", "90,000"] + }, + { + name: ["Species scientific name", "Native species"], + treeCountGoal: ["35,350", "70,000"] + }, + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["10,350", "35,000"] + }, + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["7,500", "21,000"] + }, + { + name: ["Non-scientific name", "tree"], + treeCountGoal: ["4,040", "15,300"] + }, + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["3,200", "8,000"] + }, + { + name: ["Species scientific name", "new"], + treeCountGoal: ["3,000", "5,000"] + }, + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["1,000", "4,500"] + }, + { + name: ["Species scientific name", "tree"], + treeCountGoal: ["0", "3,000"] + } + ]; + + const dataSpeciesCountGoal = [ + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["45,0000", "90,000"] + }, + { + name: ["Species scientific name", "Native species"], + speciesCountGoal: ["35,350", "70,000"] + }, + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["10,350", "35,000"] + }, + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["7,500", "21,000"] + }, + { + name: ["Non-scientific name", "tree"], + speciesCountGoal: ["4,040", "15,300"] + }, + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["3,200", "8,000"] + }, + { + name: ["Species scientific name", "new"], + speciesCountGoal: ["3,000", "5,000"] + }, + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["1,000", "4,500"] + }, + { + name: ["Species scientific name", "tree"], + speciesCountGoal: ["0", "3,000"] + } + ]; + return ( -
+
+ - + + + +
+ + +
+
+ + + + + <> + + {t( + project.framework_key === Framework.TF + ? "Number of Trees Planted:" + : "Number of SAPLINGS Planted:" + )} + +
+ + + + + + + + 113,257 + + of 300,000 + + +
+ + + +
+
+ + {t("PROGRESS over time:")} + +
+ {LABEL_LEGEND.map((item, index) => ( +
+ + + {t(item.label.key)} + +
+ ))} +
+
+ progress +
+
+ + + + + + + + + +
+ + - {/* TODO: To be implemented when endpoint is ready */} +
+ + + + + + + + <> + + {t("Number of seeds Planted:")} + +
+ + + + + + + + 5,250 + + of 25,000 + + +
+ + + +
+ + + + + + +
+
- - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + {t("Estimated Number of trees regenerating")} + +
+ + + + + + + + 5,250 + + of 25,000 + + +
+
+ + + -
- - - + +
+ +
+ + + +
+
+ + {t("number of Non-Trees PLANTED:")} + +
+ + + + + + + + 8,400 + + of 90,000 + + +
+ +
+ +
+ + + +

diff --git a/src/pages/reports/site-report/[uuid].page.tsx b/src/pages/reports/site-report/[uuid].page.tsx index 54133fdf5..173bbbe9a 100644 --- a/src/pages/reports/site-report/[uuid].page.tsx +++ b/src/pages/reports/site-report/[uuid].page.tsx @@ -1,4 +1,3 @@ -import { Box } from "@mui/system"; import { useT } from "@transifex/react"; import Head from "next/head"; import Link from "next/link"; @@ -6,27 +5,24 @@ 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 GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; import EmptyState from "@/components/elements/EmptyState/EmptyState"; import ButtonField from "@/components/elements/Field/ButtonField"; -import GenericField from "@/components/elements/Field/GenericField"; import LongTextField from "@/components/elements/Field/LongTextField"; 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 Icon, { IconNames } from "@/components/extensive/Icon/Icon"; +import { 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"; import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; +import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; -import DisturbancesTable from "@/components/extensive/Tables/DisturbancesTable"; -import SeedingsTable from "@/components/extensive/Tables/SeedingsTable"; -import TreeSpeciesTable from "@/components/extensive/Tables/TreeSpeciesTable"; +import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD"; 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"; @@ -69,6 +65,76 @@ const SiteReportDetailPage = () => { "Site Workdays" ); + const dataTreeCount = [ + { + name: ["Species scientific name", "tree"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "7,500" + }, + { + name: ["Non-scientific name", "tree"], + treeCount: "4,040" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "3,200" + }, + { + name: ["Species scientific name", "new"], + treeCount: "3,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "0" + } + ]; + + const dataNonTreeCount = [ + { + name: ["Species scientific name", "tree"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "7,500" + }, + { + name: ["Non-scientific name", "tree"], + nonTreeCount: "4,040" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "3,200" + }, + { + name: ["Species scientific name", "new"], + nonTreeCount: "3,000" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "0" + } + ]; + return ( @@ -138,7 +204,117 @@ const SiteReportDetailPage = () => { {siteReport.technical_narrative} {siteReport.public_narrative} - + + {t("Trees Planted")} + +
+ +
+ + + {t("Saplings Planted")} + +
+ +
+ + + {t("Seeds Planted")} + +
+ +
+ + + {t("Non-Trees Planted")} + +
+ +
+ +
+ {t("Assisted Natural Regeneration")} + + + {t("Description of AND Activities:")} + + + {t( + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet consequat nulla, a dapibus nunc ultricies eget. Aliquam facilisis luctus nibh. Vivamus a lobortis nisl, scelerisque porttitor velit. Phasellus nec hendrerit felis. Proin commodo tortor consequat tortor pulvinar auctor. Nam rhoncus urna dolor, nec scelerisque elit blandit quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam sollicitudin lobortis leo, eget laoreet magna fermentum ut. Suspendisse volutpat scelerisque felis, non commodo arcu laoreet vel. Sed facilisis volutpat est, a venenatis orci rhoncus cursus." + )} + +
+ {/* {siteReport.pct_survival_to_date} {siteReport.survival_calculation} @@ -229,7 +405,7 @@ const SiteReportDetailPage = () => { - + */} @@ -327,7 +503,12 @@ const SiteReportDetailPage = () => { +
+
+
+ + ); diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx index af0f892ac..8f69b3fe4 100644 --- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx @@ -1,40 +1,171 @@ import { useT } from "@transifex/react"; +import { Else, If, Then, When } from "react-if"; import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard"; -import GenericField from "@/components/elements/Field/GenericField"; -import TextField from "@/components/elements/Field/TextField"; -import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants"; +import Text from "@/components/elements/Text/Text"; import { IconNames } from "@/components/extensive/Icon/Icon"; import PageBody from "@/components/extensive/PageElements/Body/PageBody"; import PageCard from "@/components/extensive/PageElements/Card/PageCard"; -import PageColumn from "@/components/extensive/PageElements/Column/PageColumn"; import PageRow from "@/components/extensive/PageElements/Row/PageRow"; -import TreeSpeciesTable from "@/components/extensive/Tables/TreeSpeciesTable"; -import { ContextCondition } from "@/context/ContextCondition"; +import TreeSpeciesTablePD from "@/components/extensive/Tables/TreeSpeciesTablePD"; import { Framework } from "@/context/framework.provider"; interface GoalsAndProgressTabProps { site: any; } +export const LABEL_LEGEND = [ + { + label: { key: "Trees", render: "Trees" }, + color: "bg-primary" + }, + { + label: { key: "Seeds", render: "Seeds" }, + color: "bg-blueCustom-900" + }, + { + label: { key: "Regenerating", render: "Regenerating" }, + color: "bg-secondary-600" + } +]; + const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => { const t = useT(); + const dataTreeCount = [ + { + name: ["Species scientific name", "tree"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + treeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "7,500" + }, + { + name: ["Non-scientific name", "tree"], + treeCount: "4,040" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "3,200" + }, + { + name: ["Species scientific name", "new"], + treeCount: "3,000" + }, + { + name: ["Species scientific name", "tree"], + treeCount: "0" + } + ]; + + const dataSeedCount = [ + { + name: ["Species scientific name", "tree"], + seedCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + seedCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + seedCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + seedCount: "7,500" + } + ]; + const dataNonTreeCount = [ + { + name: ["Species scientific name", "tree"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "Native species"], + nonTreeCount: "45,000" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "10,350" + }, + { + name: ["Species scientific name", "tree"], + nonTreeCount: "7,500" + } + ]; + return ( -
+
+ + + + { limit={site.trees_grown_goal} hasProgress={false} items={[ - { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: site.trees_planted_count }, - { iconName: IconNames.LEAF_CIRCLE, label: t("Seeds Planted"), value: site.seeds_planted_count }, { - iconName: IconNames.REFRESH_CIRCLE, - label: t("Trees Regenerating"), + iconName: IconNames.TREE_CIRCLE_PD, + label: t("Trees Planted:"), + variantLabel: "text-14", + classNameLabel: " text-neutral-650 uppercase", + value: site.trees_planted_count + }, + { + iconName: IconNames.LEAF_CIRCLE_PD, + label: t("Seeds Planted:"), + variantLabel: "text-14", + classNameLabel: " text-neutral-650 uppercase", + value: site.seeds_planted_count + }, + { + iconName: IconNames.REFRESH_CIRCLE_PD, + label: t("Trees Regenerating:"), + variantLabel: "text-14", + classNameLabel: " text-neutral-650 uppercase", value: site.regenerated_trees_count } ]} - className="flex-1" + className="pr-[41px] lg:pr-[150px]" />
- - - {/* TODO: To be added */} - - - - - - - - - - +
+
+ - - - - - - - - +
+
+ + {t("PROGRESS over time:")} + +
+ {LABEL_LEGEND.map((item, index) => ( +
+ + + {t(item.label.key)} + +
+ ))} +
+
+ progress +
+
+
+ +
+
+ + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + +
+
+

diff --git a/tailwind.config.js b/tailwind.config.js index 665a4e100..fee122c3d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -103,9 +103,11 @@ module.exports = { 900: "#3A3A3A", 800: "#5A5A5A", 700: "#737373", + 650: "#747070", 600: "#888888", 500: "#9B9B9B", 400: "#B1B1B1", + 480: "#C4C4C4", 450: "#CCD4D6", 300: "#D8D8D8", 250: "#F7F7F7",