[N/A] custom-project creation: restoration

client/src/containers/projects/form/cell-value.tsx

@@ -1,5 +1,9 @@
+import { ComponentProps } from "react";
+
 import { useFormContext } from "react-hook-form";
 
+import { cn } from "@/lib/utils";
+
 import { CreateCustomProjectForm } from "@/containers/projects/form/setup";
 
 import {
@@ -12,8 +16,12 @@ import { Input } from "@/components/ui/input";
 
 export default function CellValue({
   name,
+  className,
+  hasUnit = false,
 }: {
   name: keyof CreateCustomProjectForm;
+  className?: ComponentProps<typeof FormControl>["className"];
+  hasUnit?: boolean;
 }) {
   const form = useFormContext<CreateCustomProjectForm>();
 
@@ -26,14 +34,17 @@ export default function CellValue({
         const { value, ...restField } = field;
 
         return (
-          <FormItem>
+          <FormItem className={className}>
             <FormControl>
               <Input
                 {...restField}
                 type="number"
                 placeholder="Insert value"
                 min={0}
                 defaultValue={field.value as number}
+                className={cn({
+                  "pr-12": hasUnit,
+                })}
               />
             </FormControl>
             <FormMessage />

client/src/containers/projects/form/cost-inputs-overrides/capex/index.tsx

@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -34,12 +35,21 @@ const NO_DATA: DataColumnDef<CapexFormProperty>[] = [];
 export default function CapexCostInputsTable() {
   const form = useFormContext<CreateCustomProjectForm>();
 
-  const { ecosystem, countryCode, activity } = form.getValues();
+  const {
+    ecosystem,
+    countryCode,
+    activity,
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
+  } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({
     ecosystem,
     countryCode,
     activity,
+    restorationActivity,
   });
 
   const { data, isSuccess } =
@@ -50,6 +60,7 @@ export default function CapexCostInputsTable() {
           ecosystem,
           countryCode,
           activity,
+          ...(activity === ACTIVITY.RESTORATION && { restorationActivity }),
         },
       },
       {
@@ -71,7 +82,11 @@ export default function CapexCostInputsTable() {
               defaultValue: data.body.data[key as keyof typeof data.body.data],
               value: "",
             })),
-        enabled: !!ecosystem && !!countryCode && !!activity,
+        enabled:
+          !!ecosystem &&
+          !!countryCode &&
+          ((!!activity && activity === ACTIVITY.CONSERVATION) ||
+            (activity === ACTIVITY.RESTORATION && !!restorationActivity)),
       },
     );
 

client/src/containers/projects/form/cost-inputs-overrides/opex/index.tsx

@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -34,12 +35,21 @@ const NO_DATA: DataColumnDef<OpexFormProperty>[] = [];
 export default function OpexCostInputsTable() {
   const form = useFormContext<CreateCustomProjectForm>();
 
-  const { ecosystem, countryCode, activity } = form.getValues();
+  const {
+    ecosystem,
+    countryCode,
+    activity,
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
+  } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({
     ecosystem,
     countryCode,
     activity,
+    restorationActivity,
   });
   const { data, isSuccess } =
     client.customProjects.getDefaultCostInputs.useQuery(
@@ -49,6 +59,7 @@ export default function OpexCostInputsTable() {
           ecosystem,
           countryCode,
           activity,
+          ...(activity === ACTIVITY.RESTORATION && { restorationActivity }),
         },
       },
       {
@@ -70,7 +81,9 @@ export default function OpexCostInputsTable() {
               defaultValue: data.body.data[key as keyof typeof data.body.data],
               value: "",
             })),
-        enabled: !!ecosystem && !!countryCode && !!activity,
+        enabled:
+          (!!activity && activity === ACTIVITY.CONSERVATION) ||
+          (activity === ACTIVITY.RESTORATION && !!restorationActivity),
       },
     );
 

client/src/containers/projects/form/cost-inputs-overrides/other/index.tsx

@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 
+import { ACTIVITY } from "@shared/entities/activity.enum";
 import { COSTS_DTO_TO_NAME_MAP } from "@shared/schemas/assumptions/assumptions.enums";
 import {
   flexRender,
@@ -34,12 +35,21 @@ const NO_DATA: DataColumnDef<OtherFormProperty>[] = [];
 export default function OtherCostInputsTable() {
   const form = useFormContext<CreateCustomProjectForm>();
 
-  const { ecosystem, countryCode, activity } = form.getValues();
+  const {
+    ecosystem,
+    countryCode,
+    activity,
+    parameters: {
+      // @ts-expect-error fix later
+      restorationActivity,
+    },
+  } = form.getValues();
 
   const { queryKey } = queryKeys.customProjects.defaultCosts({
     ecosystem,
     countryCode,
     activity,
+    restorationActivity,
   });
   const { data, isSuccess } =
     client.customProjects.getDefaultCostInputs.useQuery(
@@ -49,6 +59,7 @@ export default function OtherCostInputsTable() {
           ecosystem,
           countryCode,
           activity,
+          ...(activity === ACTIVITY.RESTORATION && { restorationActivity }),
         },
       },
       {
@@ -70,7 +81,9 @@ export default function OtherCostInputsTable() {
               defaultValue: data.body.data[key as keyof typeof data.body.data],
               value: "",
             })),
-        enabled: !!ecosystem && !!countryCode && !!activity,
+        enabled:
+          (!!activity && activity === ACTIVITY.CONSERVATION) ||
+          (activity === ACTIVITY.RESTORATION && !!restorationActivity),
       },
     );
 

client/src/containers/projects/form/index.tsx

@@ -1,10 +1,20 @@
+import { useFormContext } from "react-hook-form";
+
+import { ACTIVITY } from "@shared/entities/activity.enum";
+
 import AssumptionsProjectForm from "@/containers/projects/form/assumptions";
 import CostInputsOverridesProjectForm from "@/containers/projects/form/cost-inputs-overrides";
-import SetupProjectForm from "@/containers/projects/form/setup";
+import RestorationPlanProjectForm from "@/containers/projects/form/restoration-plan";
+import SetupProjectForm, {
+  CreateCustomProjectForm,
+} from "@/containers/projects/form/setup";
 
 import { Card } from "@/components/ui/card";
 
 export default function ProjectForm({ onSubmit }: { onSubmit: () => void }) {
+  const form = useFormContext<CreateCustomProjectForm>();
+  const { activity } = form.getValues();
+
   return (
     <form className="w-full space-y-8" onSubmit={onSubmit}>
       <div className="flex flex-col gap-3">
@@ -17,6 +27,11 @@ export default function ProjectForm({ onSubmit }: { onSubmit: () => void }) {
         <Card className="flex flex-1 flex-col" variant="secondary">
           <CostInputsOverridesProjectForm />
         </Card>
+        {activity === ACTIVITY.RESTORATION && (
+          <Card className="flex flex-1 flex-col" variant="secondary">
+            <RestorationPlanProjectForm />
+          </Card>
+        )}
       </div>
     </form>
   );

client/src/containers/projects/form/restoration-plan/columns.tsx

@@ -0,0 +1,35 @@
+import { createColumnHelper } from "@tanstack/react-table";
+
+import CellValue from "@/containers/projects/form/cell-value";
+
+import { Label } from "@/components/ui/label";
+
+export type RestorationPlanFormProperty = {
+  year: number;
+  annualHectaresRestored: number;
+};
+
+const columnHelper = createColumnHelper<RestorationPlanFormProperty>();
+
+export const COLUMNS = [
+  columnHelper.accessor("year", {
+    header: () => <span>Year</span>,
+    cell: (props) => {
+      return <Label>{props.getValue()}</Label>;
+    },
+  }),
+  columnHelper.accessor("annualHectaresRestored", {
+    header: () => (
+      <span className="flex justify-end">Annual hectares restored / year</span>
+    ),
+    cell: (props) => (
+      <CellValue
+        className="relative after:absolute after:right-6 after:top-1/2 after:inline-block after:-translate-y-1/2 after:text-sm after:text-muted-foreground after:content-['ha']"
+        // @ts-expect-error fix later
+        name={`parameters.restorationYearlyBreakdown.${props.row.original.year === -1 ? 0 : props.row.original.year}`}
+        hasUnit
+      />
+    ),
+    maxSize: 55,
+  }),
+];