diff --git a/src/admin/components/ResourceTabs/InformationTab/index.tsx b/src/admin/components/ResourceTabs/InformationTab/index.tsx index c3263abcc..478109749 100644 --- 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 { type: EntityName; } @@ -137,30 +141,74 @@ const InformationTab: FC = props => { )} /> + - - - - - Total Trees Planted - - {record?.total_trees_planted_count} - - - - +
+ + +
+ + Total Trees Planted{" "} + in site Report: + + + {record?.total_trees_planted_count ?? 0} + +
+
+
+ + +
+ + Tree Species: + + +
+
+ + + +
+
- - - - - Total Seeds Planted - - {totalSeedlings} - - - + +
+ +
+ + Total Seeds Planted: + + + {totalSeedlings ?? 0} + +
+
+ +
diff --git a/src/components/elements/Table/TableVariants.ts b/src/components/elements/Table/TableVariants.ts index 38c5b5c93..60f0df24b 100644 --- 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 index 0aca6182b..5780d4710 100644 --- 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) => { > @@ -60,7 +74,13 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => { placement="right" textVariantContent="text-14" > - + ); @@ -78,7 +98,10 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => { > @@ -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
{value}
; @@ -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
{value}
; @@ -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
{value}
; @@ -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
{value}
; @@ -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 ( +
+ + + {value[0]} + of {value[1]} + +
+ ); + } + } + ]; + 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
{value}
; @@ -208,6 +261,7 @@ const TreeSpeciesTablePD = ({ data, modelName }: TreeSpeciesTablePDProps) => { treeCountSite: columnTreeCountSite, "treeCount/Goal": columnTreeCountGoal, "speciesCount/Goal": columnSpeciesCountGoal, + "seedCount/Goal": columnSeedCountGoal, saplingsCount: columnSaplingsCount }; diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx index 2389732c3..3f0baa290 100644 --- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx +++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx @@ -30,189 +30,267 @@ export const LABEL_LEGEND = [ } ]; -const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => { - const t = useT(); +export 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" + } +]; + +export 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" + } +]; +export 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 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" - } - ]; +export 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" + } +]; + +export 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 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" - } - ]; +export 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"] + } +]; - 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" - } - ]; +export const dataSeedCountGoal = [ + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["45,0000", "90,000"] + }, + { + name: ["Species scientific name", "Native species"], + seedCountGoal: ["35,350", "70,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["10,350", "35,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["7,500", "21,000"] + }, + { + name: ["Non-scientific name", "tree"], + seedCountGoal: ["4,040", "15,300"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["3,200", "8,000"] + }, + { + name: ["Species scientific name", "new"], + seedCountGoal: ["3,000", "5,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["1,000", "4,500"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["0", "3,000"] + } +]; - 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"] - } - ]; +export const dataSeedCountGoalSiteReport = [ + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["45,0000", "90,000"] + }, + { + name: ["Species scientific name", "Native species", "approved"], + seedCountGoal: ["35,350", "70,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["10,350", "35,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["7,500", "21,000"] + }, + { + name: ["Non-scientific name", "tree", "approved"], + seedCountGoal: ["4,040", "15,300"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["3,200", "8,000"] + }, + { + name: ["Species scientific name", "new"], + seedCountGoal: ["3,000", "5,000"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["1,000", "4,500"] + }, + { + name: ["Species scientific name", "tree"], + seedCountGoal: ["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"] - } - ]; +const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => { + const t = useT(); return (